Landing Page Redesign — Spec

Landing Page Redesign — Spec

Date: 2026-04-21 Branch: feature/nail-capture-flow (implementation on new branch) Design source: design/refresh/surfc-ux/project/How It Works.html

Goal

Replace the current LandingPage.jsx and HowItWorksPage.jsx with the new comprehensive marketing page from the design handoff. The new page becomes the single unauthenticated entry point at /. The /how-it-works route is removed.

Key Decisions

Decision	Choice	Rationale
Approach	Rebuild LandingPage.jsx in-place	Keeps prop interface (onJoinWaitlist, onSignIn), minimal App.jsx changes
/how-it-works route	Removed	New design at / serves both purposes
HowItWorksPage.jsx	Deleted	No longer needed
Capture section visual	Static HTML/CSS recreation of design’s phone mockup	Live CaptureScreen has hook/context dependencies incompatible with a public page; future work will swap in the real component once stubs exist
Testimonials	Kept as placeholder copy	Beta reader quotes are placeholder; will be replaced with real quotes when available
CSS	Add to styles.css	Matches project convention; old landing page CSS removed
FAQ content	5 items from design	Design adds “Is my data private?” — use design’s FAQ, not howItWorksContent.js
howItWorksContent.js	Deleted	No longer needed after HowItWorksPage.jsx is removed

Page Sections

The new LandingPage.jsx renders these sections top-to-bottom:

1. Sticky Nav

• Frosted-glass bar (position: fixed, backdrop-filter: blur)
• Adds hiw-nav-scrolled class when window.scrollY > 8 (border + increased opacity)
• Links:
  • “Surfc” wordmark → href="/" (no-op; already on landing)
  • “How it works” → #what-is-surfc (smooth scroll anchor)
  • “FAQ” → #faq (smooth scroll anchor)
  • “Sign in” → calls onSignIn
  • “Request invitation” → calls onJoinWaitlist

2. Hero

• 2-column grid (photo left, copy right); stacks to 1-col below 880px
• Left: hero-book.png in tilted card frame (rotate(-1.2deg) default, rotate(-0.4deg) on hover, 300ms transition). Caption pill below.
• Right: eyebrow “How it works” + <h1> “Your ideas. Indexed.” (italic accent colour) + lede copy + CTAs (Request invitation, Sign in)
• Hover animation on .btn-accent: translateY(-1px) + box-shadow lift

3. Pulled Quote Band

• Full-width, background: var(--color-bg-subtle), bordered top/bottom
• EB Garamond large quote: “A commonplace book, reborn as a living index — searchable, connected, and yours.”
• Sub-text: “An offline-first reading companion for people who read to think.”

4. What Surfc Is (id="what-is-surfc")

• 2-column grid; stacks below 880px
• Left: step label “01 · The idea”, h2 “What Surfc is”, body copy, 3 idea chips
• Right: HIWIndexDiagram — card with dot-grid background listing 6 ideas + note counts + “cross-indexed” stamp

5. Capture Passages

• 2-column reversed (diagram left, copy right); alt-bg tint
• Left: static HTML/CSS recreation of the design’s phone mockup — no live component. Includes:
  • Phone frame (Dynamic Island, status bar with time/icons, rounded corners, drop shadow)
  • “Capture Mode” eyebrow + “Record your highlights and annotations” heading
  • Dark viewfinder with mock lined paper page, amber-highlighted passage excerpt (“Excellence, then, is not an act…”), corner bracket marks, “Passage detected” amber glow overlay
  • Shutter controls row: Manual text link + amber circular shutter button
  • Surfc bottom nav bar (Home / Capture / Index / Profile icons)
  • Two floating callout chips positioned absolutely: ① “Mark passages first” ② “Tap the shutter”
• Future requirement: Replace static mockup with live CaptureScreen component once its hook/context dependencies can be stubbed for a public page (no auth context, no Dexie, no camera API).
• Right: step label “02 · Core feature”, h2, lede, two sub-point cards (Printed passages, Handwritten notes)

6. Tag Ideas (full-bleed)

• Dot-grid full-bleed section (no max-width constraint on background)
• Step label “03 · Core feature”, centred h2 “Tag ideas”, lede
• Animated chip cloud: 10 canonical chips + 2 custom chips pop in with animationDelay staggered at 60ms each (chip-pop keyframe)
• Legend: “Amber chips are canonical. Green chips are your own.”

7. Supporting — 3-up Cards (id not needed)

• Centred heading “04 · Plus”, h2 “Built for how you actually read”
• 3-col grid (1-col below 820px): Sources & notes · Sync across devices · Offline-first & private

8. Testimonials

• Alt-bg section, 2-col grid of note-dot-card quote cards
• Elena R. and James O. (placeholder beta reader quotes)
• EB Garamond blockquote + author/meta line

9. FAQ (id="faq")

• Max-width 760px centred
• 5 items (accordion, one open at a time; + / – toggle icon)
• Content:
  1. Who is Surfc for?
  2. How do I capture printed passages?
  3. Can I capture handwritten notes?
  4. Will my notes sync across devices?
  5. Is my data private?

10. Closing CTA

• Centred, max-width 780px
• “Take the next step” step label, “Build your reading index” h2, lede (rolling out through waitlist)
• Request invitation (primary, btn-accent) + Sign in (secondary text link)

11. Footer

• Surfc wordmark (EB Garamond) left
• PolicyLink to="/policies/privacy" · PolicyLink to="/policies/terms" · Termly consent preferences anchor right

Routing Changes in App.jsx

Remove:

• import HowItWorksPage
• howItWorksSource state
• isHowItWorksRoute derived value
• The useEffect that strips the ?source= query param
• The early-return block that renders <HowItWorksPage>
• The how_it_works_entry_click analytics event fired from the old “How Surfc works” link in LandingPage.jsx (the link no longer exists; internal nav anchors don’t need analytics)

Keep:

• LandingPage import and render (prop interface unchanged: onJoinWaitlist, onSignIn)

CSS Changes

All new styles are added to src/styles.css under a /* ─── MARKETING PAGE v2 ─── */ section. Existing landing page CSS (/* ─── LANDING PAGE ─── */ section) is removed.

Key new CSS classes: .hiw-nav, .hiw-nav-scrolled, .hiw-hero-v2, .hiw-hero-grid, .hiw-hero-photo-frame (with hover transition), .hiw-quote-section, .hiw-section-v2, .hiw-two-col, .hiw-two-col.hiw-reverse, .hiw-alt-bg, .hiw-fullbleed, .hiw-chipcloud, .chip-pop (keyframe), .hiw-threeup-grid, .hiw-testimonial-grid, .hiw-faq-list, .hiw-faq-item-v2, .hiw-closing-v2, .hiw-footer-v2.

CSS variables --color-custom, --color-custom-text, --color-custom-bg are already defined in src/tokens.css — no additions needed.

Assets

• public/hero-book.png — copy from design/refresh/surfc-ux/project/frames/hero-book.png
• No other new image assets required at this time

Files Changed

File	Action
src/components/LandingPage.jsx	Complete rewrite
src/styles.css	Remove old landing page CSS; add new marketing page CSS
src/App.jsx	Remove how-it-works route, imports, and state
src/components/HowItWorksPage.jsx	Delete
src/content/howItWorksContent.js	Delete
src/test/how-it-works.test.jsx	Rewrite for new landing page component
public/hero-book.png	Copy from design bundle
.gitignore	Add .superpowers/

Tests

The existing how-it-works.test.jsx tests:

1. Page-view analytics tracking — keep, update for new component
2. CTA analytics + navigation — keep; update button text/destination
3. FAQ content rendering — keep; update for new FAQ items (5 items, accordion pattern)

New: smoke test that internal anchor links (#what-is-surfc, #faq) are present in the rendered output.

Open Items

• Real capture screen screenshot (to replace CSS placeholder in section 5)
• Testimonial copy (real beta reader quotes to replace placeholder names/stats)