Waitlist Landing Page

Create a pre-launch waitlist landing page for a product called "Kite" (an AI-powered email client) designed to build hype and collect signups before launch:

1. NAVIGATION BAR (minimal)
- Logo: "Kite" with paper plane icon in #6366F1 (indigo)
- Right side only: "Follow us on X" link with X icon
- No other nav links — keep focus on the signup
- Fixed position, transparent background that turns white on scroll

2. HERO SECTION (centered, 80vh min-height)
- Pre-header badge: "LAUNCHING SPRING 2026" in a rounded pill (#EEF2FF background, #6366F1 text)
- Main headline (56px): "Email that works for you, not against you"
- Subheadline (20px, gray-500): "Kite uses AI to draft replies, sort your inbox, and surface what matters. Join the waitlist for early access."
- Email input (480px max-width, 52px height) with placeholder "Enter your email"
- "Join the Waitlist" button (#6366F1, 52px height, right-aligned to input)
- Below form: "🎉 4,832 people already on the waitlist" with subtle count-up animation
- Small trust line: "No spam. Unsubscribe anytime. We respect your inbox (obviously)."

3. PRODUCT TEASER (3-column feature preview)
- Section title: "A smarter inbox is coming"
- Three feature cards with icon, title, and one-liner:
  - 🤖 "AI Draft Replies" — "One-click responses that actually sound like you"
  - 📬 "Smart Triage" — "Important emails first. Newsletters later. Spam never."
  - ⚡ "Instant Search" — "Find any email in under 100ms. Seriously."
- Cards: white background, 1px #E5E7EB border, 12px radius, 32px padding
- Subtle hover: border color transitions to #6366F1

4. HOW IT WORKS (visual timeline)
- Headline: "How the waitlist works"
- Three numbered steps in a horizontal flow with connecting line:
  1. "Sign up" — "Enter your email to reserve your spot"
  2. "Move up the list" — "Share your link to jump ahead (each referral = +100 spots)"
  3. "Get early access" — "Top of the list gets invited first with 3 months free"
- Each step: number circle (48px, indigo), title (18px bold), description (14px gray)
- Connecting line: dashed #C7D2FE between circles

5. REFERRAL PROGRAM SECTION (shown after signup, or as preview)
- Headline: "Skip the line"
- Subheadline: "Share your unique link. Every friend who joins moves you 100 spots ahead."
- Referral link display: input with "https://kite.email/r/abc123" and copy button
- Share buttons row: X (Twitter), LinkedIn, Email, WhatsApp
- Stats dashboard (mini):
  - "Your position: #4,833"
  - "Referrals: 0"
  - "Spots jumped: 0"
- Progress bar showing position relative to total signups

6. SOCIAL PROOF SECTION
- Headline: "People are excited"
- Grid of 6 tweet-style testimonial cards:
  - "@designlead: Just signed up for @kite_email — finally someone rethinking email with AI"
  - "@sarahdev: The referral system is genius. Already moved up 300 spots 🚀"
  - "@markfounder: If Kite is half as good as their landing page, I'm sold"
  - "@emilywrites: AI email replies that don't sound robotic? Take my money"
  - "@alexops: Referred my whole team. We need this yesterday"
  - "@jakepm: Smart triage is the feature I didn't know I needed"
- Cards styled like social posts: avatar, name, handle, verified badge, text
- Masonry-style layout (2 columns on desktop)

7. FAQ SECTION (accordion)
- "When does Kite launch?" — "We're targeting Spring 2026. Waitlist members get access first."
- "Is the waitlist free?" — "Yes, completely free. Top positions also get 3 months of Kite Pro free."
- "How does the referral system work?" — "Each person who joins through your link moves you up 100 spots. No limit."
- "What platforms will Kite support?" — "Web, macOS, iOS at launch. Windows and Android coming shortly after."
- "Will my data be used to train AI?" — "Never. Your email data stays private and encrypted. We use AI models without training on your content."

8. FINAL CTA (repeat signup)
- Dark background: #1E1B4B (deep indigo)
- Headline (white): "Don't miss your spot"
- Subheadline (indigo-300): "The first 1,000 users get Kite Pro free for 3 months"
- Email input + "Join the Waitlist" button (white button with indigo text)
- Countdown or waitlist counter: "4,832 already joined"

9. FOOTER (minimal)
- Logo + tagline: "Email, reimagined"
- Links: Privacy Policy, Terms, X (Twitter), LinkedIn
- Copyright: "© 2026 Kite, Inc."

Design: Minimal and modern. Primary: #6366F1 (indigo), dark backgrounds: #1E1B4B, text: #111827, light gray: #F9FAFB. Typography: Plus Jakarta Sans headings, Inter body. Heavy whitespace. Cards have soft shadows (0 1px 3px rgba(0,0,0,0.1)). Smooth micro-interactions: button hover scale, input focus glow, count-up animation on the waitlist number. Background: subtle gradient from white to #F5F3FF.

Responsive: On mobile, hero section reduces to 48px headline, email input stacks above button (full-width each). Feature cards stack vertically. Timeline steps stack vertically with vertical connecting line. Share buttons wrap to 2x2 grid. FAQ accordion full-width. Sticky bottom bar with "Join Waitlist" CTA on mobile (appears after scrolling past hero).