# Landing page mockups — _BRIEF

**Generated:** 2026-05-04 (Session 18)
**Trigger:** Week 1 sprint item — marketing landing page for whatdeficit.com root.
**Audience:** ADHD-niche prospects who haven't seen the app before; bounce rate is fine if they're not the audience.

## Locked variation

**What varies between mockups:** structural composition + storytelling order. Each option puts the content blocks in a meaningfully different visual hierarchy.

**What stays fixed across all 10:**

- Brand palette — `:root` tokens identical to `src/index.css` light theme.
- Typography — Outfit (Google Fonts), 700/800 for headings, 400-600 for body.
- Voice — founder "I" first-person (master rule 54). Penny speaks "I" too. Privacy/Terms footer is the only place "we" appears.
- Required content blocks — every option has all of: hero (brand mark + tag line) / problem-or-features / Penny demo / pricing card / FAQ / signup CTA / footer.
- Pricing — $12/mo Plus, 7-day token-restricted trial, no free tier, cancel any time, pro-rata refund on request within 14 days.
- Compliance — 18+ disclosure, Privacy/Terms links, no third-party trackers, no medical claims.
- Responsive — mobile-first, no horizontal scroll at 320px, ≥44px touch targets, no `100vh`, no `autoFocus` on mount.

## The 10 directions

| # | Theme | What's distinct |
|---|-------|-----------------|
| 01 | Long-scroll storytelling | Classic SaaS shape. Hero → problem → features → demo → pricing → FAQ → CTA → footer in a single column. |
| 02 | Split-pane | Sticky left brand+CTA panel, right scrolls content. CTA always 1 click away. |
| 03 | Kiosk demo | The hero IS a faux app screenshot — 2×2 matrix with sample tasks above the fold. Show, don't tell. |
| 04 | FAQ-first | Inverts the standard. The FAQ block carries the page; each Q is a feature pitch. |
| 05 | Pricing up-front | The pricing card is the hero. For visitors who already know what an ADHD task app is. |
| 06 | Narrative timeline | "A day with What Deficit" — vertical timeline 7 AM → 9 PM showing features in context. |
| 07 | Problem-statement-led | One brutal sentence above the fold ("You wrote it down. You still forgot.") at huge typography. |
| 08 | Social-proof-led | Placeholder testimonial cards (clearly flagged as placeholders) primed for Amee's beta-tester quotes. |
| 09 | Demo-led | Interactive Penny chat hero — visitor types, sees Penny's faked response stream in. |
| 10 | Founder letter | Long letter from Robert. Indie-hacker. Pricing card embedded mid-prose. |

## How to use

1. Open `gallery.html` to flip between options.
2. Each option is self-contained — fully working as a static HTML page.
3. Copy is **placeholder**. Amee owns final brand voice — she rewrites the chosen direction's copy before launch.
4. After Robert + Amee pick a direction, port to production: build `LandingPage.tsx` in `src/pages/` and wire main.tsx to render it for unauthenticated root visits (DemoSplash moves to `/demo`).

## Mockups subdomain deploy

When ready: `wrangler pages deploy mockups --project-name whatdeficit-mockups` then visit `https://landing.whatdeficit-mockups.pages.dev/` (or wherever the project routes the `/landing/` subdir).

## Rules followed

- Master CLAUDE.md rule 14: locked dimension stated up front.
- Master CLAUDE.md rule 54: founder "I" voice across all 10.
- Master CLAUDE.md rule 79: `box-sizing: border-box` global on every option.
- Master CLAUDE.md "Native UI baseline" pre-Capacitor: no `autoFocus`, no `100vh`, html bg explicit.