Design

Worked examples

Five complete landing page archetypes, each a filled Design Direction translated line-by-line into code, with the lesson each one teaches.

On this page

Five reference compositions, each a filled Design Direction translated into a complete landing page. They exist to teach the translation — how a committed direction becomes concrete design choices — not to be copied.

How to pick one#

Pick one archetype by emotional adjacency, not product category, then read exactly that one. A journaling app whose emotion is "Sunday kitchen warmth" should read the cooking example, not go hunting for a "journaling" template. Trace Direction → Style Tile → code; adapt the mechanism, never clone the composition.

If no emotion matches, choose by metaphor, then by transferable signature mechanism. Example 05 focuses on the animated bento mockup; navigation and FAQ variants live in the pattern library.

The five archetypes#

#	Archetype	Emotion	Visual metaphor	Signature element
01	Cooking / warmth	Sunday kitchen warmth, nostalgic, tactile	A handwritten recipe card on a butcher-block table, morning light through a window	Torn-paper SVG section dividers
02	Developer tool / precision	Sharp, confident, technical, precise	A blinking cursor in a dark server room, code compiling in real time	A live terminal in the hero that types real commands with realistic variable timing
03	Meditation / calm	Spacious calm, weightless, present	The horizon line at dawn, the pause between breaths	A breath circle pulsing at 4.5s per cycle as the hero centerpiece
04	Children's storybook / playful	Playful, imaginative, tactile, safe	A paper cut-out diorama, crayon scribbles on construction paper	Hand-drawn SVG elements that wobble + paper grain texture overlay
05	SaaS / clarity	The Friday-afternoon recap that lets the laptop close	A one-page-per-week paper folio in a manager's bottom drawer	An animated bento dashboard mockup that runs once on entry: chart draws itself, status flips, recap paragraph types in

Each example's full Style Tile is in its Direction accordion below.

How to read an example#

Read, in order: the Direction block, the signature implementation, the typography and color commitments, the motion personality — each section opens with its design lesson. Then close the example before composing your own page.

01 — Cooking / warmth ("The Sunday Pantry")#

Lesson: repeated texture and imperfection can make structure feel handmade. The tilted recipe card, the hand-drawn torn edges, and the slow steam are all "imperfections" placed deliberately — the page's structure is a conventional hero/features/quote/CTA/footer, but the texture makes it feel like an object.

Filled Design Direction - example 01

Product — one sentence, what it does for whom. A weekly recipe club for people who want to cook dinner at home but are tired of decision fatigue. Every Sunday, three recipes land in your inbox, each with a shopping list and a story about where it came from.

Emotion — one specific feeling, not a category. Sunday morning, second coffee, nowhere to be. The window is open, someone is making noise in the kitchen downstairs. The feeling of being fed by someone who took their time.

Metaphor — a concrete real-world image. A handwritten recipe card on a butcher-block table next to a worn enameled mug. Morning light coming in at a low angle. A thumbprint of flour on the edge of the card.

Three references from outside the cooking-app category.

Kinfolk magazine — warm off-white, generous whitespace, editorial photography, small serif captions, zero animation. Restraint.
Le Creuset product packaging — cream + terracotta, oversized serif product names, matte textures, the feeling of something heirloom.
Wes Anderson color palettes — symmetric compositions with one unexpected pop of color (a soft mint, a washed coral).

Signature element — one thing that makes the page memorable. Torn-paper SVG dividers between sections. The torn edge is hand-drawn as a path, slightly uneven. Each section looks like a page torn from a notebook and placed on the table.

Hero visual — concretely, what animates in the first 5 seconds. A slightly tilted "recipe card" rendered as styled divs with torn edges. The headline "Dinner, written by hand." sits on the card in a serif display font. Behind the card, two soft curved SVG paths rise slowly like steam from a mug just off-frame, then fade.

Style Tile

Color: warm cream dominant, deep terracotta accent, muted everywhere except a single vivid accent on the CTA. (Matches the app's @theme.)
Type: Fraunces (serif, display) + Source Sans 3 (body). Fraunces has a variable warmth axis — we want the warm end.
Theme: light. This is a paper surface, not a screen.
Art direction: editorial. Magazine-style hierarchy, two-column body, small-caps labels, torn-paper dividers as the signature.
Motion: subtle drift. Scroll-triggered fades, small staggers. The steam above the hero is the only continuous animation, and it's 3s slow.
Voice: uses second-person; contractions yes; no em dashes; never starts with "we".

Sentence test — could this direction describe any other product? No. The weekly cadence, handwritten feel, decision-fatigue frame, and "fed by someone who took their time" emotion — none transfer to a dev tool, meditation app, game, or fintech. Every choice serves this.

The signature implementation — a hand-drawn torn edge as an SVG path (TornPaperDivider), reused between sections — is in the complete composition inlined at the bottom of this page.

02 — Developer tool / precision ("runner")#

Lesson: one accent, mono type, mechanical easing, and a single terminal make restraint the identity. No decoration anywhere — the entire personality lives in typography, timing, and one convincing artifact.

Filled Design Direction - example 02

Product. A CLI + cloud runner that watches your test suite, re-runs the subset affected by each save, and streams live results to a terminal pane on any laptop on the team. For teams whose monorepo is too big for local test runs and too hot for a manual CI gate.

Emotion. The small confidence of seeing a green check scroll past three seconds after a save. The opposite of "I'll run the full suite overnight."

Metaphor. A blinking cursor in a dark server room. The muffled hum of fans. One terminal pane, one tail command, everything you need to trust in one line.

Three references from outside dev tools.

Teenage Engineering TX-6 mixer — one strip of controls, every dial has a purpose, nothing decorative. Monochrome aluminum.
Swiss railway signage — Frutiger Neue, consistent spacing, pictograms where text would slow you down.
The test-card patterns from an analog oscilloscope manual.

Signature element. A live fake terminal in the hero that types real commands with realistic variable timing — pauses at punctuation, speeds through whitespace, occasional micro-stumbles — then streams back stylized green checkmarks.

Hero visual. $ tests --watch appears one keystroke at a time. A 400ms pause. Then ✓ 1,204 passing · 3.2s appears in primary-colored mono text, followed by a second line that flashes as a file saves.

Style Tile

Color: near-black background, soft off-white foreground, one cyan-ish primary for status markers and CTAs. Zero gradients.
Type: IBM Plex Mono (heading + mono) + Inter (body). Mono headline is a deliberate statement: the product IS the terminal.
Theme: dark. The tool is used in dim rooms at 11pm.
Art direction: modern minimalism with a technical-minimalism tilt. Dense typography, small measured whitespace, no decoration.
Motion: mechanical. Linear easings, instant snaps, no bouncing. Only the terminal cursor pulses.
Voice: verb-first; no adjectives; contractions yes; max 10 words.

Sentence test — could this describe any other product? No. The watch-and-stream framing, the "too big for local, too hot for CI" edge, the oscilloscope reference — no other tool, no other dev tool, no generic SaaS.

The signature implementation — variable typing timing that reads as human, not scripted (input lines get jitter and punctuation pauses; output lines stream near-instantly), with the manual reduced-motion short-circuit a timer loop requires:

useEffect(() => {
  if (reduce) { setLine(TERMINAL_SCRIPT.length); return }   // jump to end state
  if (line >= TERMINAL_SCRIPT.length) return
  const cur = TERMINAL_SCRIPT[line]
  if (char >= cur.text.length) {
    const t = setTimeout(() => { setLine(n => n + 1); setChar(0) }, cur.pauseAfter ?? 160)
    return () => clearTimeout(t)
  }
  const c = cur.text[char]
  let delay = cur.type === 'in' ? 30 + Math.random() * 40 : 8
  if ('.,:'.includes(c)) delay += 140
  const t = setTimeout(() => setChar(n => n + 1), delay)
  return () => clearTimeout(t)
}, [line, char, reduce])

tsx

03 — Meditation / calm ("Breathe.")#

Lesson: a deliberately slow 4.5-second breath cycle makes motion serve calm instead of reading as a spinner. A UX-speed rhythm (1s, 2s) would destroy the direction — the slowness is the point.

Filled Design Direction - example 03

Product. A daily breathing app. One guided 4-7-8 breath cycle every morning, one minute long. No meditation library, no courses, no leaderboard. You open it, you breathe, you close it.

Emotion. The long exhale after a hard conversation. The second before you open your eyes. Not "peaceful" — the specific weightlessness of the pause between breaths.

Metaphor. The horizon line at dawn, before the sky has color in it. Flat. Still. Everything is still about to happen.

Three references from outside wellness apps.

The inside of a Rothko chapel — large color fields, no figures, an absence that asks you to sit with it.
Japanese minimalist bookstore design — one object on a shelf, an ocean of whitespace, one spot of subtle green.
The opening shot of Tarkovsky's Solaris — a slow pan over reeds in still water, nothing happens, you can't look away.

Signature element. A breath circle that pulses at 4.5 seconds per cycle as the hero centerpiece. 4.5 is slow — slower than a UI animation should be. The slowness is the point. A UX rhythm (1s, 2s) would make it read as a loading spinner and destroy the entire direction.

Hero visual. A single soft-edged circle fills the center of the viewport. It scales from 0.9 to 1.1 over 4.5 seconds, then back, indefinitely. Behind it: nothing — just cream. A single serif word ("Breathe.") fades in beside it, not in it.

Style Tile

Color: cream dominant, sage accent, desaturated everywhere. No vivid anything — even the CTA is primary/60.
Type: Cormorant (display serif, generous counters) + Lato (body). Cormorant has restraint Garamond doesn't.
Theme: light. The product is morning; light is right.
Art direction: modern minimalism. Generous whitespace, one object per viewport, refined type.
Motion: stillness. The breath circle is the only animation. Sections fade in once, then never move.
Voice: generous sentences; no urgency words; never rhetorical "why?".

Sentence test — could this describe any other product? No. "One minute, then close it" defines the entire philosophy and rules out nearly all wellness apps. The 4.5-second breath circle and Tarkovsky reference make it this specific app and not a Calm clone.

The signature implementation — the continuous pulse is gated per-element because repeat: Infinity bypasses MotionConfig:

<motion.div
  className="absolute inset-0 rounded-full border border-primary/20"
  animate={reduce ? undefined : { scale: [0.92, 1.08, 0.92], opacity: [0.6, 1, 0.6] }}
  transition={reduce ? undefined : { duration: 4.5, repeat: Infinity, ease: [0.45, 0.05, 0.55, 0.95] }}
/>

tsx

04 — Children's storybook / playful ("Story Box")#

Lesson: coordinated wobble, imperfect SVG, grain, and rounded shapes make playfulness intentional. Each element alone would look like a mistake; together — the wobbling hand-drawn dinosaur, the paper-grain overlay, the slightly rotated cards — they read as a deliberate handmade world.

Filled Design Direction - example 04

Product. A bedtime storybook app for kids aged 3–7. Parents choose a theme (dinosaurs, space, grandma's kitchen), the app generates a short illustrated story, parent reads it aloud with the kid tracing words. Each story is 7 pages, ~120 words.

Emotion. The giddy 7:30 PM energy before a bath and a story. A kid squeezing a worn paperback they've read 40 times. The specific feeling of construction-paper-and-crayon in a kindergarten classroom.

Metaphor. A paper-cut-out diorama on a child's bedroom floor. Uneven scissor lines, tape on the back, a crayon smudge. Homemade, not polished.

Three references from outside kids apps.

Eric Carle illustrations — torn tissue paper, primary colors on white, nothing precise about the edges.
The color script of Pixar's Up — warm yellows, coral reds, with a single quiet teal moment per scene.
Sanrio stationery — simple shapes, lots of whitespace, face on everything, tactile offset-printed look.

Signature element. Hand-drawn SVG elements that wobble subtly on hover + a paper-grain texture overlay on the whole page. The wobble is the thing: it says "this was drawn by a person, not rendered by a template."

Hero visual. A crooked paper cut-out of a dinosaur (inline SVG), wobbling gently. Behind it: torn-paper mountains in coral + warm yellow. A speech bubble next to it says "Read me a story?" in a round sans-serif.

Style Tile

Color: warm yellow dominant, coral accent, one quiet teal detail. Saturation is high but not neon — think offset-printed zine, not Fruit Loops commercial.
Type: Nunito for everything. Round, friendly, reads well at 3rd-grade level. Exactly one font family — two is too grown-up.
Theme: light. This is daylight, this is before bed, this is a bedroom with a lamp on.
Art direction: hand-drawn / illustrated. Paper-grain overlay, wobbling SVG, mismatched-but-coordinated pastel shapes.
Motion: playful bouncy. Spring physics on hovers, wobbles on the dinosaur, a gentle bounce on the CTA.
Voice: second-person ("you"), questions that a kid would actually ask, max 8 words, zero marketing words.

Sentence test — could this describe any other product? No. "Parents choose a theme" + "the kid traces words" + "7 pages, ~120 words" is specific to this app and couldn't describe a reading-tracker, a spelling-game, or any generic edtech product.

The signature implementation — a hand-drawn inline SVG with a slow, gated wobble, plus an SVG-noise paper grain fixed over the whole page:

<motion.svg
  viewBox="0 0 220 220"
  className="w-56 h-56 md:w-72 md:h-72 text-primary"
  animate={reduce ? undefined : { rotate: [-3, 3, -3] }}
  transition={reduce ? undefined : { duration: 6, repeat: Infinity, ease: 'easeInOut' }}
  aria-hidden
>
  {/* hand-drawn body path, imperfect on purpose */}
</motion.svg>

tsx

05 — SaaS / clarity ("Friday afternoon, in one screen")#

Lesson: editorial hierarchy restrains a bento layout; the mockup animates once, then becomes still. The hero's dashboard mockup runs a single choreographed sequence on load — a chart draws itself, a status pill flips, a recap paragraph types in — then the page goes quiet, "like a Polaroid finishing developing." This example demonstrates the bento hero with a once-only React product animation and a hierarchy-driven bento feature grid; use the pattern library for navigation, FAQ, CTA, and footer.

Filled Design Direction - example 05

Product. A weekly-review app for small engineering teams (5–25 people). Every Friday at 3pm, the dashboard auto-fills: what shipped, what slipped, who was blocked, and one paragraph for the staff-eng to read Saturday before deciding next week's plan. Not a tracker. Not Jira. A recap.

Emotion. The relief of finishing a Friday-afternoon planning thread with an actual decision instead of a "let's circle back Monday." The exact moment a manager closes the laptop and the weekend genuinely starts.

Metaphor. A one-page-per-week paper binder kept in a manager's bottom drawer — the kind that fills with hand-written annotations over a year. Not another dashboard. Not another Slack channel. A folio.

Three references from outside SaaS / B2B / dev tools.

An Eames-era weekly desk planner — everything important in one folio per week, generous whitespace, one accent ink color.
Ina Garten's prep-list pages — declarative, three categories, no decoration, the kind of clarity that makes a complex day feel small.
The print layout of The Economist's KAL editorial cartoon column — tight grid, dense information, one hairline accent.

Signature element. An animated bento dashboard mockup in the hero where, on first view, ONE tile draws a chart line, ANOTHER tile flips a status pill from amber to moss-green, and the "Friday decision" card writes itself one word at a time over ~3 seconds. The page sits still after that — the mockup runs ONCE, like a Polaroid finishing developing.

Hero visual. Split-screen. Left: "Friday afternoon, in one screen." in a clean sans at ~72px, supporting line, primary CTA. Right: the bento mockup, taking up most of the right column. As soon as the page loads, the chart line draws itself, the status flips, the recap text types in. Then it stops.

Style Tile

Color: warm off-white dominant; deep ink-blue primary; one moss-green "status" accent. Muted everywhere — even the CTA is full-saturation but used sparingly.
Type: Inter (heading + body) + IBM Plex Mono (dashboard data). Inter as a deliberate choice: clarity beats personality for a recap tool. The mono in the mockup makes "this is data" obvious without ornament.
Theme: light. Friday afternoon, sun in a kitchen window. Dark-mode would be a lie about who uses this and when.
Art direction: bento-modular with editorial restraint. Bento for the hero mockup + features grid; magazine-style hierarchy elsewhere.
Motion: subtle drift. The bento mockup runs ONCE on load. After that, only fade-in-on-scroll. No marquees, no parallax, no continuous loops.
Voice: declarative; second-person; max 14 words; never starts with "we"; zero exclamation points.

Sentence test — could this describe any other product? No. The Friday-3pm cadence, the "one paragraph for the staff-eng to read Saturday" specificity, the Eames/Garten/Economist reference set, and the once-only animation personality define THIS product. They don't transfer to Linear, Asana, Notion, or any analytics dashboard.

The signature implementation — the chart tile draws itself exactly once (pathLength animation, no repeat), collapsing to instant for reduced-motion users:

<motion.polyline
  fill="none"
  stroke="currentColor"
  strokeWidth={2}
  strokeLinecap="round"
  strokeLinejoin="round"
  points="0,50 30,42 60,46 90,32 120,30 150,18 180,12 200,8"
  initial={{ pathLength: 0, opacity: 0 }}
  animate={{ pathLength: 1, opacity: 1 }}
  transition={reduce ? { duration: 0 } : { duration: 1.6, delay: 0.6, ease: 'easeInOut' }}
/>

tsx

The complete example 01, end-to-end#

The most teachable full composition: every section serves the "Sunday kitchen warmth" direction — the editorial masthead-style hero header, the torn-paper dividers, the alternating rows with hand-built visuals, a single pull quote, a quiet glow CTA, and a colophon footer. In the real file, the filled Direction block above sits as a comment at the top.

Full source - example 01, The Sunday Pantry

import { useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { MotionConfig, motion, useReducedMotion } from 'framer-motion'
import { ArrowRight } from 'lucide-react'
import { ScrollReveal } from '../components/landing/primitives'

// ── Signature element: torn-paper SVG divider ────────────────────────────────
function TornPaperDivider({ flip = false }: { flip?: boolean }) {
  return (
    <div className={`relative w-full h-6 ${flip ? 'rotate-180' : ''}`} aria-hidden>
      <svg className="absolute inset-0 w-full h-full text-background" viewBox="0 0 1200 24" preserveAspectRatio="none">
        <path
          d="M0,0 L0,14 L60,10 L130,18 L220,8 L310,16 L400,6 L490,14 L580,10 L670,18 L760,8 L850,14 L940,6 L1030,16 L1120,10 L1200,18 L1200,0 Z"
          fill="currentColor"
        />
      </svg>
    </div>
  )
}

// ── Hero steam (continuous animation — gated on reduced motion) ──────────────
function RisingSteam() {
  const reduce = useReducedMotion()
  if (reduce) return null
  return (
    <svg className="absolute -top-10 right-8 w-16 h-28 text-primary/30" viewBox="0 0 64 112" aria-hidden>
      {[0, 1].map(i => (
        <motion.path
          key={i}
          d={`M${22 + i * 14},100 C${18 + i * 14},80 ${30 + i * 14},60 ${22 + i * 14},40 C${16 + i * 14},20 ${28 + i * 14},10 ${22 + i * 14},0`}
          stroke="currentColor"
          strokeWidth={1.5}
          fill="none"
          strokeLinecap="round"
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: [0, 0.8, 0], y: [20, -20] }}
          transition={{ duration: 3, repeat: Infinity, delay: i * 1.5, ease: 'easeOut' }}
        />
      ))}
    </svg>
  )
}

// ── Hero ─────────────────────────────────────────────────────────────────────
function Hero() {
  const navigate = useNavigate()
  return (
    <section className="max-w-5xl mx-auto px-6 pt-12 pb-20">
      <div className="flex items-baseline justify-between border-b-2 border-foreground pb-3">
        <span className="font-serif italic text-xl text-foreground">The Sunday Pantry</span>
        <span className="hidden sm:block font-mono text-[11px] uppercase tracking-[0.28em] text-muted-foreground">
          Weekly · No. 14
        </span>
      </div>

      <div className="relative mt-16 grid md:grid-cols-[1.4fr_1fr] gap-10 items-center">
        {/* The tilted "recipe card" — the hero's commanding visual. */}
        <motion.div
          initial={{ opacity: 0, y: 10, rotate: -2 }}
          animate={{ opacity: 1, y: 0, rotate: -2 }}
          transition={{ duration: 0.8, ease: [0.22, 0.9, 0.3, 1] }}
          className="relative bg-card border border-border shadow-lg p-8 md:p-12"
          style={{ transform: 'rotate(-2deg)' }}
        >
          <RisingSteam />
          <span className="font-mono text-[11px] uppercase tracking-[0.3em] text-primary">Recipe № 42</span>
          <h1 className="mt-4 font-serif text-5xl md:text-7xl leading-[0.95] text-foreground">
            Dinner, written by hand.
          </h1>
          <p className="mt-6 max-w-md text-base text-muted-foreground leading-relaxed">
            Three recipes every Sunday, each with a shopping list and a story.
            Cook better weeknights without having to decide.
          </p>
          <button
            onClick={() => navigate('/home')}
            className="mt-8 inline-flex items-center gap-2 px-5 py-2.5 rounded-none border-2 border-foreground bg-foreground text-background text-sm font-medium group hover:bg-primary hover:border-primary transition-colors"
          >
            Start cooking
            <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
          </button>
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.3, duration: 0.7 }}
          className="hidden md:block font-serif text-2xl italic leading-relaxed text-muted-foreground"
        >
          <p>Like a recipe card your aunt sent you.</p>
          <p className="mt-4">With a thumbprint of flour.</p>
        </motion.div>
      </div>
    </section>
  )
}

// ── What you get (alternating rows, editorial tone) ──────────────────────────
const ROWS = [
  {
    label: 'Sundays',
    title: 'Three recipes, every week.',
    body: 'Pulled from home kitchens — not food blogs. Each comes with the grocery list already built.',
  },
  {
    label: 'Stories',
    title: 'A paragraph of where it came from.',
    body: 'Whose kitchen, whose Sunday, which complaints it was invented to fix. Reading it makes you want to cook it.',
  },
]

function WhatYouGet() {
  return (
    <section id="features" className="bg-muted py-20 md:py-28">
      <div className="max-w-5xl mx-auto px-6 space-y-20">
        {ROWS.map((row, i) => (
          <div key={row.title} className={`flex flex-col ${i % 2 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-10 md:gap-16 items-center`}>
            <ScrollReveal direction={i % 2 ? 'right' : 'left'} className="flex-1 w-full">
              {/* Tiny hand-drawn visual — styled divs, no AI image. */}
              <div className="aspect-[5/4] bg-card border border-border relative overflow-hidden">
                <div className="absolute inset-6 border border-border p-4">
                  <div className="h-2 w-2/3 bg-foreground" />
                  <div className="mt-3 space-y-1.5">
                    {[68, 52, 78, 44].map((w, k) => (
                      <div key={k} className="h-[2px] bg-border" style={{ width: `${w}%` }} />
                    ))}
                  </div>
                  <div className="mt-5 font-serif italic text-lg text-primary">{i === 0 ? '— turns out chicken —' : '— she called it Monday stew —'}</div>
                </div>
              </div>
            </ScrollReveal>
            <ScrollReveal direction={i % 2 ? 'left' : 'right'} delay={0.1} className="flex-1 max-w-md">
              <span className="font-mono text-[10px] uppercase tracking-[0.3em] text-primary">{row.label}</span>
              <h3 className="mt-2 font-serif text-3xl md:text-4xl leading-tight text-foreground">{row.title}</h3>
              <p className="mt-4 text-muted-foreground leading-relaxed">{row.body}</p>
            </ScrollReveal>
          </div>
        ))}
      </div>
    </section>
  )
}

// ── Single pull quote ────────────────────────────────────────────────────────
function PullQuote() {
  return (
    <section className="max-w-3xl mx-auto px-6 py-28">
      <ScrollReveal>
        <blockquote>
          <p className="font-serif italic text-3xl md:text-4xl leading-[1.25] text-foreground">
            &ldquo;I canceled my meal kit. I&rsquo;m actually cooking now, on purpose.&rdquo;
          </p>
          <cite className="mt-6 block not-italic font-mono text-[11px] uppercase tracking-[0.25em] text-muted-foreground">
            — Ellis M. · subscriber since week 4
          </cite>
        </blockquote>
      </ScrollReveal>
    </section>
  )
}

// ── Quiet CTA ────────────────────────────────────────────────────────────────
function CTA() {
  const navigate = useNavigate()
  return (
    <section className="relative py-24">
      <div className="absolute inset-0 grid place-items-center pointer-events-none" aria-hidden>
        <div className="w-[600px] h-[600px] rounded-full bg-primary/15 blur-3xl" />
      </div>
      <ScrollReveal className="relative max-w-2xl mx-auto px-6 text-center">
        <h2 className="font-serif italic text-4xl md:text-5xl text-foreground">
          Cook something good on Tuesday.
        </h2>
        <p className="mt-4 text-muted-foreground">First issue lands this Sunday.</p>
        <button
          onClick={() => navigate('/home')}
          className="mt-8 inline-flex items-center gap-2 px-6 py-3 rounded-none border-2 border-foreground bg-foreground text-background text-sm font-medium hover:bg-primary hover:border-primary transition-colors"
        >
          Join the club →
        </button>
      </ScrollReveal>
    </section>
  )
}

// ── Editorial masthead footer ────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="mt-12 border-t-2 border-foreground">
      <div className="max-w-5xl mx-auto px-6 py-6 flex flex-col sm:flex-row items-baseline justify-between gap-2">
        <span className="font-serif italic text-lg text-foreground">The Sunday Pantry</span>
        <p className="font-mono text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
          Set in Fraunces &amp; Source Sans · delivered by email · cancel anytime
        </p>
      </div>
    </footer>
  )
}

// ── Page ─────────────────────────────────────────────────────────────────────
export default function LandingPage() {
  const containerRef = useRef<HTMLDivElement>(null)
  return (
    <MotionConfig reducedMotion="user">
      <div ref={containerRef} className="min-h-screen bg-background text-foreground">
        <Hero />
        <TornPaperDivider />
        <WhatYouGet />
        <TornPaperDivider flip />
        <PullQuote />
        <CTA />
        <Footer />
      </div>
    </MotionConfig>
  )
}

tsx

The examples are read-only#

Do not ship installed sections verbatim, and never copy an example composition wholesale into your app — the grep gate's illegal-import check exists to catch exactly this. Direction owns the result; patterns supply structure; examples demonstrate another product's translation. Adapt the mechanism — the torn divider, the variable typing timing, the once-only choreography — to serve your Direction.

Why only five#

Five archetypes limit menu-driven cloning. If none fits, use an external landing page, magazine spread, or product photograph that shares the emotion — the point is always emotional adjacency, never a template catalog.