Page flow
Loader (0→100%) → Hero → Ticker → Problem → Two Futures (scroll-pinned, GSAP) → How It Works → SMS Mockup → Comparison → Waitlist CTA → Footer
Component layers
| Layer | Path | Role |
|---|---|---|
| **App** | `src/app/` | Layout, metadata, page entry, API routes |
| **Sections** | `src/components/sections/` | Full-width page blocks |
| **Layout** | `src/components/layout/` | Nav, footer, scroll provider |
| **UI** | `src/components/ui/` | Buttons, loader, reveals, image slots |
| **Constants** | `src/constants/` | Copy, stats, image paths — edit copy here |
| **Lib** | `src/lib/` | GSAP registration, helpers |
Motion
- **Loader / hero**: Framer Motion stagger + `WordReveal`
- **Scroll sections**: `ScrollReveal` (Intersection Observer)
- **Two Futures**: GSAP timeline + ScrollTrigger scrub
- **Smooth scroll**: Lenis via `SmoothScrollProvider`
Styling
- Single font: **Poppins** (`layout.tsx`)
- Design tokens in `src/app/globals.css`
- Ditto-style highlights: `.highlight-green`, `.highlight-yellow`, `.highlight-amber`
- Section spacing: `.section-pad` utility
Data flow (waitlist)
WaitlistCTA form → POST /api/waitlist → validate email → (future) Resend / Supabase / webhook
Unused sections (kept for later)
These exist in `src/components/sections/` but are not on the page:
- `SignalJourney.tsx`
- `HardwareBlueprint.tsx`
- `StatsSection.tsx`
- `ResultSection.tsx`
- `WaitlistBenefits.tsx`
Re-enable by importing in `src/app/page.tsx`.