<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrackerGuard • Spot Hidden Trackers in Seconds</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #020617;
color: #e2e8f0;
line-height: 1.5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Navbar */
nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(2, 6, 23, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid #1e293b;
padding: 16px 0;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
}
.logo-icon {
width: 36px;
height: 36px;
background: #22d3ee;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
font-size: 18px;
}
.nav-links {
display: flex;
align-items: center;
gap: 8px;
}
.nav-links a {
color: #94a3b8;
text-decoration: none;
padding: 8px 16px;
border-radius: 9999px;
font-size: 14px;
transition: color 0.2s;
}
.nav-links a:hover { color: white; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border-radius: 9999px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
border: none;
transition: all 0.2s;
text-decoration: none;
}
.btn-primary {
background: #22d3ee;
color: #020617;
}
.btn-primary:hover {
background: #67e8f9;
}
.btn-outline {
background: transparent;
border: 1px solid #334155;
color: #e2e8f0;
}
.btn-outline:hover {
background: #1e293b;
}
/* Hero */
.hero {
padding: 64px 0 80px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 9999px;
padding: 6px 16px;
font-size: 13px;
color: #22d3ee;
margin-bottom: 24px;
}
.badge-dot {
width: 8px;
height: 8px;
background: #34d399;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1.1;
color: white;
margin-bottom: 24px;
max-width: 700px;
}
.hero-text {
font-size: 1.25rem;
color: #94a3b8;
max-width: 520px;
margin-bottom: 32px;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
}
.hero-meta {
display: flex;
gap: 24px;
font-size: 14px;
color: #64748b;
}
.hero-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.hero-meta i { color: #34d399; }
/* Stats */
.stats {
background: #0f172a;
border-top: 1px solid #1e293b;
border-bottom: 1px solid #1e293b;
padding: 48px 0;
}
.stats-label {
text-align: center;
color: #22d3ee;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 40px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.stat-card {
background: #020617;
border: 1px solid #1e293b;
border-radius: 24px;
padding: 32px;
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
color: white;
letter-spacing: -2px;
line-height: 1;
margin-bottom: 4px;
}
.stat-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 12px;
}
.stat-desc {
font-size: 14px;
color: #94a3b8;
margin-bottom: 16px;
}
.stat-source {
font-size: 12px;
color: #64748b;
}
.stats-footer {
text-align: center;
margin-top: 32px;
font-size: 14px;
color: #64748b;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* How it works */
.how {
padding: 80px 0;
}
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-badge {
display: inline-block;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 9999px;
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
margin-bottom: 16px;
}
.section-header h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
letter-spacing: -1px;
color: white;
}
.how-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.how-card {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 24px;
padding: 32px;
}
.how-icon {
width: 48px;
height: 48px;
background: rgba(34, 211, 238, 0.1);
color: #22d3ee;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 24px;
}
.how-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 12px;
}
.how-card p {
color: #94a3b8;
font-size: 15px;
}
/* Waitlist */
.waitlist {
background: #0f172a;
border-top: 1px solid #1e293b;
padding: 64px 0;
}
.waitlist-inner {
max-width: 480px;
margin: 0 auto;
text-align: center;
}
.waitlist h2 {
font-size: 2rem;
font-weight: 800;
letter-spacing: -1px;
margin-bottom: 12px;
color: white;
}
.waitlist p {
color: #94a3b8;
margin-bottom: 32px;
}
.waitlist form {
display: flex;
flex-direction: column;
gap: 12px;
}
.waitlist input {
width: 100%;
padding: 16px 24px;
background: #020617;
border: 1px solid #334155;
border-radius: 9999px;
color: white;
font-size: 16px;
outline: none;
}
.waitlist input:focus {
border-color: #22d3ee;
}
.waitlist input::placeholder {
color: #64748b;
}
.waitlist .btn {
width: 100%;
padding: 16px;
font-size: 16px;
}
.form-note {
font-size: 13px;
color: #64748b;
margin-top: 12px;
}
.privacy-note {
margin-top: 24px;
font-size: 13px;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* Footer */
footer {
border-top: 1px solid #1e293b;
padding: 32px 0;
text-align: center;
font-size: 13px;
color: #64748b;
}
/* Success state */
.success-box {
background: rgba(6, 78, 59, 0.3);
border: 1px solid #065f46;
border-radius: 24px;
padding: 40px 24px;
text-align: center;
}
.success-box i {
font-size: 48px;
color: #34d399;
margin-bottom: 16px;
}
.success-box h3 {
font-size: 1.5rem;
margin-bottom: 8px;
color: white;
}
.success-box p {
color: #6ee7b7;
}
@media (max-width: 640px) {
.nav-links a { display: none; }
.hero-buttons { flex-direction: column; }
.hero-buttons .btn { width: 100%; }
}
</style>
</head>
<body>
<!-- Navbar -->
<nav>
<div class="container nav-inner">
<div class="logo">
<div class="logo-icon"><i class="fa-solid fa-shield-halved"></i></div>
<span>TrackerGuard</span>
</div>
<div class="nav-links">
<a href="#how">How it works</a>
<a href="#evidence">The evidence</a>
<button class="btn btn-primary" onclick="document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})">
Join waitlist
</button>
</div>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="container">
<div class="badge">
<div class="badge-dot"></div>
Built with Gemini • Part of the $2M XPRIZE
</div>
<h1>Is someone tracking you?<br>Find out in seconds.</h1>
<p class="hero-text">
Browser-based scanner that detects hidden AirTags, Tiles, and other BLE trackers — then uses Gemini to explain exactly what you found and what to do next.
</p>
<div class="hero-buttons">
<button class="btn btn-primary" onclick="document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})">
Get early access <i class="fa-solid fa-arrow-right"></i>
</button>
<button class="btn btn-outline">
<i class="fa-solid fa-play"></i> Watch 47-second demo
</button>
</div>
<div class="hero-meta">
<span><i class="fa-solid fa-check"></i> No app install</span>
<span><i class="fa-solid fa-check"></i> Works in Chrome</span>
</div>
</div>
</section>
<!-- Evidence / Stats -->
<section class="stats" id="evidence">
<div class="container">
<div class="stats-label">THE PROBLEM IS REAL</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">1 in 3</div>
<div class="stat-title">of AirTag police reports</div>
<p class="stat-desc">in a sample of 150 cases from 8 major U.S. departments were women being stalked by unknown trackers (mostly ex-partners).</p>
<div class="stat-source">Source: Motherboard analysis, 2022</div>
</div>
<div class="stat-card">
<div class="stat-number">25%</div>
<div class="stat-title">of tracking device buyers</div>
<p class="stat-desc">in New South Wales (Australia) since 2023 had a documented history of domestic violence.</p>
<div class="stat-source">Source: NSW Crime Commission, 2024</div>
</div>
<div class="stat-card">
<div class="stat-number">896%</div>
<div class="stat-title">rise in UK stalking reports</div>
<p class="stat-desc">involving AirTags and GPS trackers between 2018 and 2024.</p>
<div class="stat-source">Source: UK police data via The Independent</div>
</div>
</div>
<p class="stats-footer">
Recent research from Georgia Tech also revealed that 88 million Tile trackers broadcast unencrypted signals — making long-term tracking trivial for anyone nearby.
</p>
</div>
</section>
<!-- How it works -->
<section class="how" id="how">
<div class="container">
<div class="section-header">
<div class="section-badge">HOW IT WORKS</div>
<h2>Scan. Understand. Act.</h2>
</div>
<div class="how-grid">
<div class="how-card">
<div class="how-icon"><i class="fa-solid fa-wifi"></i></div>
<h3>1. Scan nearby devices</h3>
<p>One click in your browser. We use the Web Bluetooth API to detect every BLE device around you — no app install required.</p>
</div>
<div class="how-card">
<div class="how-icon"><i class="fa-solid fa-robot"></i></div>
<h3>2. Gemini explains it</h3>
<p>Our AI (powered by Gemini) analyzes the signals, identifies known trackers, and tells you in plain English what it found and how serious it is.</p>
</div>
<div class="how-card">
<div class="how-icon"><i class="fa-solid fa-shield-halved"></i></div>
<h3>3. Get a clear action plan</h3>
<p>Exact steps to remove the device, protect yourself, and document everything if needed. No technical jargon.</p>
</div>
</div>
</div>
</section>
<!-- Waitlist -->
<section class="waitlist" id="waitlist">
<div class="container">
<div class="waitlist-inner">
<h2>Be first to try TrackerGuard</h2>
<p>Join the private beta. First 500 people get lifetime 50% off the full version.</p>
<form id="waitlistForm">
<input type="email" id="email" placeholder="your@email.com" required>
<button type="submit" class="btn btn-primary">Join the waitlist — it's free</button>
</form>
<p class="form-note">We’ll email you when beta opens. No spam, ever.</p>
<div class="privacy-note">
<i class="fa-solid fa-lock"></i>
Privacy-first. We never sell your data.
</div>
</div>
</div>
</section>
<footer>
<div class="container">
TrackerGuard is being built as part of the Build with Gemini XPRIZE ($2M prize pool).<br>
Real users. Real revenue. Real privacy protection.
</div>
</footer>
<script>
document.getElementById('waitlistForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
this.innerHTML = `
<div class="success-box">
<i class="fa-solid fa-check-circle"></i>
<h3>You're on the list!</h3>
<p>We'll email you as soon as beta access opens. Thank you for helping us build better privacy tools.</p>
</div>
`;
console.log('New waitlist signup:', email);
});
</script>
</body>
</html>