Noom — Onboarding Quiz Funnel

Use in a session

Tell Claude: build [my thing] using swipe ref noom-quiz-funnel

Full recreation prompt

Recreate a landing page in the "Noom — Onboarding Quiz Funnel" style (Quiz Funnel). This is a VIBE / STYLE-TRANSFER task, not a clone: apply the design DNA below to MY content and section structure, do not copy the reference's copy or exact layout. For this archetype the LAYOUT field carries the funnel/quiz FLOW — preserve that conversion structure, not just the look.

Design DNA:
- Mood: Warm, science-backed, empathetic, aspirational. A health program that feels personal and human — earns trust before the ask, then guides you through a long, momentum-building quiz.
- Colors: Cinematic photography as the base, deep forest green brand accents, near-black CTA buttons, warm off-white cards. Editorial and premium, not clinical.
- Typography: Large editorial serif hero ('Meds to lose the weight.'), clean sans for product cards, quiz questions, and CTAs. Serif for warmth, sans for clarity.
- Layout: FLOW-FIRST onboarding quiz: hero (serif hook + photography + 'See if you qualify') → long multi-step quiz (one question per screen: goals, gender, age, habits — big option buttons, progress bar) → 'building your personalized plan' loading interstitial with reassurance copy → results/graph payoff (projected outcome curve) → plan + price + checkout. Homepage: photographic hero with product cards (Med / Weight) floating over the image, each with its own CTA.
- Motion: Fade/slide question transitions, progress bar filling, an animated projected-results graph, a loading interstitial with sequential reassurance lines, parallax on hero photography.
- Texture: Editorial photography, floating white rounded cards with soft shadows over the image, generous type scale, premium spacing.
- Avoid: No clinical/sterile stock, no cramming multiple questions per screen, no skipping the trust-building payoff before the price, no flat corporate blue. Keep it warm, photographic, and momentum-driven.

Imagery (generate real assets, do not use placeholders): Generate: warm cinematic lifestyle photography (real person outdoors, natural light), app-screen mockups in floating white cards (progress charts, course map, medication tracker), and clean quiz steps (single question, 2–4 option buttons, a build-your-plan progress bar, a 'building your plan' loading screen, a graph-payoff screen). Tool: Pexels for the lifestyle photography; GPT-Image for the app-screen mockups; build quiz steps in code.

Reference exemplar: https://www.noom.com. Build the funnel around the content I give you next, faithfully channeling this aesthetic and this flow, and generate the matching imagery described above.

Reference exemplar