TECHNICAL DEVELOPER PROMPT – FULL FUNNEL (QUIZ + OPT-IN + QUALIFICATION + CHECKOUT)Framework: React + Next.js Goal: Build a fully responsive, premium-looking quiz funnel with consistent branding, smooth animations, and high-conversion UX.1. GLOBAL SPECS (Apply to ALL PAGES)Container & Layout:Max-width: 768px, centered horizontally.Padding:Mobile: 16px (left/right)Desktop: 32px (left/right)Vertical spacing:Between sections (headline, answer options, buttons, footers):24px mobile32px desktopColor Palette:Background: #F1EAE3Text: #2B2B2BPrimary Buttons: #E26D5A (text: white #FFFFFF)Progress bar & highlights: #4A6A68Cards: white #FFFFFFTypography:Headlines (questions, main CTAs):Font: Aeonik or Suisse Int’lSize: 24px mobile, 32px desktopWeight: Bold (700)Line-height: 32px mobile, 40px desktopCenter aligned by defaultBody text (answers, secondary copy):Font: Space Grotesk or Work SansSize: 16px mobile, 18px desktopWeight: Regular (400)Line-height: 24px mobile, 28px desktopButtons (All Pages):Background: brand primary color #E26D5AText color: #FFFFFFFont: Bold, 16px mobile, 18px desktopHeight: 52px mobile, 60px desktopBorder radius: 8pxAlignment: full width on mobile, centered 280px max width on desktopHover (desktop): darken background 10%, add shadow 0 4px 10px rgba(0,0,0,0.1)Focus (accessibility): visible outline ringMargin-top: 32px after last elementMAKE SURE ALL THE TEXT ARE INSIDE THE BUTTON LAYOUTFooter (Persistent on All Pages):Links:Terms: https://www.plana-protocol.com/termsPrivacy: https://www.plana-protocol.com/privacyContact: mailto:help@plana-protocol.comIcons (below links):Instagram: https://www.instagram.com/plana_protocol/Facebook: https://www.facebook.com/profile.php?id=61576320084659Size: 24px with 12px gap betweenLayout:Mobile: links stacked vertically with 8px spacingDesktop: links horizontal with 16px spacingFont size: 14px mobile, 16px desktopMargin-top: 32px from buttons2. QUIZ STEPS (1–10)Progress Bar:Height: 8pxBorder radius: 4pxColor: #4A6A68Margin-bottom: 32px before headlineAnswer Cards:Background: #FFFFFFRadius: 10pxShadow: 0 2px 8px rgba(0,0,0,0.05) (hover: 0 4px 12px rgba(0,0,0,0.08))Emoji and text: on the same line, left-aligned inside the cardFont size: 16px mobile, 18px desktopPadding: 16px inside cardGap: 12px mobile, 16px desktopWidth: full on mobile, 280px fixed desktopTransitions:Use Framer Motion fade/slide between steps (300ms)Progress bar should update smoothly3. OPT-IN SCREENHeadline: same style as quiz headlinesEmail input:Height: 52px, border-radius 8px, background whiteShadow: 0 2px 6px rgba(0,0,0,0.05)Padding-left: 12pxButton: consistent global button style4. QUALIFICATION STEPS (11–15)Apply the same layout and spacing rules as quiz steps:Headline: centered, bold, same font sizeBullet points (Step 11):Left-aligned with icons (🍫, ⚡, 😢)Gap: 8px between icon and textTestimonial cards (Step 14):Horizontal carousel on desktop, stacked on mobileCards use same answer card styleProduct mockups (Step 15):Centered image above final CTA button5. CHECKOUT PAGEHeadline:Centered, same headline style, margin-bottom 24pxRecap Section:Paragraph style body textMargin-bottom 32pxMembers Area Mockup:Image centered, 1920x1080 pxOrder Form & CTA:ONLY A CTA BUTTON: full width on mobile, centered 280px desktopSocial Proof:Headline: “Join 5,000+ women who’ve reset their cravings already!”Testimonial carousel using card styleGuarantee:Guarantee badge left, text right (desktop) or stacked (mobile)Margin-top 32pxFAQ Accordion:Each question padded 16pxSpacing between questions 20pxFooter:Same persistent footer6. UX & PERFORMANCEAnimations:Smooth step transitions (Framer Motion 300ms)Button click ripple on mobileResponsiveness:Test breakpoints: 360px, 768px, 1024px, 1440pxAll text readable without zoomButtons always visible (avoid cutoff at bottom)Performance:PageSpeed ≥ 90Lazy load all imagesUse Next.js <Image> optimizationAccessibility:Buttons and links keyboard accessibleProper heading hierarchyWCAG AA color contrast7. GENERAL AESTHETICLayout must feel premium and modern, with consistent spacing and alignment.Ensure flawless consistency between quiz, opt-in, qualification, and checkout: same fonts, colors, card styles, and footer on all steps.Focus on smooth dopamine-driving experience: clean animations, elegant transitions, intuitive flow, and premium visuals.Here's all the copy below:"STEP 1: Initial Quiz PageCopy:Headline: “What’s Really Driving Your Cravings?”Subheadline: “Answer this 2-minute quiz to see if the French Order Fix balancing method is the right fit for you…”CTA Button: “👉 Start the Quiz”Visual Notes:Background image: Wide lifestyle image of a woman (35–55 y/o) looking at desserts on a table (wellness tone, soft focus).Logo: Top-left corner.CTA button: Full width, brand color #E26D5A.Image:STEPS 2–10: QUIZ QUESTIONSEach question appears on its own screen with a progress bar at the top.Q1 – GenderQuestion: “What is your gender?”Answers:👩 Female👨 MaleVisual Notes:Large emoji icons above text in card-style buttons.Q2 – Age GroupQuestion: “What’s your age range?”Answers:18–2425–3435–4445–5455+Visual Notes:Stacked vertical cards with soft shadows and hover effect.Q3 – LifestyleQuestion: “Which best describes your typical day?”Answers:🏃‍♀️ Always on the go (work, kids, busy schedule)🖥️ Mostly sedentary (desk job, little movement)🏡 Balanced (mix of activity & downtime)Q4 – Craving HabitsQuestion: “When it comes to cravings, which of these feels most like you?”Answers:🍫 “Once I start with sweets, I can’t stop”🌙 “I’m fine all day, but nights are my downfall”☕ “I crash mid-afternoon and reach for sugar or coffee”🥖 “I crave carbs (bread, pasta, etc.) constantly”Q5 – Emotional BehaviorQuestion: “Do you ever feel ashamed or frustrated after giving into cravings?”Answers:😢 Yes, all the time🤔 Sometimes❌ RarelyQ6 – Energy CrashesQuestion: “Do you ever feel a big energy crash 1–2 hours after eating?”Answers:💤 Yes, most meals🤷‍♀️ Occasionally❌ No, I feel steadyQ7 – Breakfast HabitsQuestion: “Which best describes your typical breakfast?”Answers:🥐 Pastry, toast, or something sweet☕ Coffee only🍳 Protein or veggie-based (eggs, avocado, etc.)❌ I skip breakfastQ8 – Food Order AwarenessQuestion: “Do you usually eat your carbs first during meals (bread, pasta, rice, etc.)?”Answers:✅ Yes, I start with carbs🤷‍♀️ I just eat whatever’s in front of me❌ No, I naturally start with veggies or proteinVisual Notes:Include a simple food order diagram image.Q9 – Motivation LevelQuestion: “If you could feel lighter, more in control, and reduce cravings in 5 days, how motivated would you be to try it?”Answers:🔥 Very motivated – I’m ready🙂 Somewhat motivated🤷‍♀️ Not sureQ10 – Top Wish for Food & BodyQuestion: “What’s your #1 wish right now when it comes to food and your body?”Answers:⚡ Have steady energy throughout the day🥗 Stop my sugar cravings and feel in control⚖️ Lose weight without extreme dieting😊 Feel comfortable and confident in my bodyLOADING SCREENCopy:Headline: “Analyzing your answers…”Progress bar animation with messages cycling:“Assessing your cravings triggers…”“Matching your patterns with the French Order Fix balancing method…”“Preparing your personalized results…”Visual Notes:Background: gradient #F1EAE3 → light beige.Faint glucose rollercoaster watermark graphic in the background.OPT-IN PAGECopy:Headline: “Congratulations! We analyzed your results and the French Order Fix Balancing Method can work for you with our 5-Day Craving Cure Challenge…”CTA: “Where should we send your personalized results?”Email field + CTA button: “Show me my results”Visual Notes:Minimal distractions.Email field styled with soft shadows and CTA button #E26D5A.4. QUALIFICATION & NURTURE STEPS (11–15)STEP 11 – Pain Points & UrgencyCopy:Headline: “If you don’t fix your cravings soon, here’s what will keep happening…”Bullets:Cravings will still hit out of nowhere and feel impossible to resist.You’ll keep crashing mid-afternoon, drained and frustrated.Each “slip-up” will continue to feel like a personal failure.CTA: “👉 Yes… tell me how to break this cycle”Visual Notes:Icons illustrating pain points (🍫 cravings, ⚡ crashes, 😢 guilt).Optional image: woman frustrated in kitchen.STEP 12 – Reframe & BeliefCopy:Headline: “Your cravings aren’t about willpower – they’re about biology.”Body: When your blood sugar spikes and crashes, your brain sends intense hunger signals. It’s not weakness — it’s chemistry. When you flatten the spikes, the cravings fade on their own.CTA: “👉 I want to see how to do it”Visual Notes:Glucose rollercoaster graphic (spikes vs flat).Caption: “Spikes = Cravings. Flat = Control.”STEP 13 – Introduce the SolutionCopy:Headline: “Imagine feeling in control again… in just 5 days.”Body: The French Order Fix uses the science of food order to keep your blood sugar steady. No dieting. No cutting carbs. Just a simple shift that makes cravings disappear — fast.CTA: “👉 Show me how this works in real life”Visual Notes:Sneak peek mockup of guide, daily action plan, templates.STEP 14 – Handle ObjectionsCopy:Headline: “This isn’t another diet — it’s a smarter way to eat.”Body:“I don’t have time.” → Just 10 minutes a day to learn, no meal prep.“I’ve tried everything.” → This works with your biology, not against it.“It’s too simple.” → Simplicity is why it works — and why you’ll actually stick to it.CTA: “👉 I’m ready to see how to start”Visual Notes:Include 3 testimonial cards (photos + quotes) each one with each quote.STEP 15 – Final Checkout PushHeadline: “Ready to reset your cravings and feel in control again in just 5 days?”Bullets:No more all-day cravings and energy crashes.Enjoy carbs and sweets without the guilt or rollercoaster.Finally feel lighter, calmer, and confident in your choices.CTA: “👉 YES! I’m ready to start!”Visual Notes:Product mockup of full members area.5. CHECKOUT PAGE (Final Order)1. Headline (Bold & Clear)“Start Your 5-Day Craving Cure Today – Just $17”(Centered, large premium font – instantly conveys urgency and value.)2. Recap Section (With Full Stack Mockup)Short, benefit-driven copy: “Here’s exactly what you’ll get when you join The Craving Cure today…”Insert the Full Stack Mockup image (attached) right under this headline.Copy under the image:5-Day Craving Cure Reset Protocol (Core Framework) – $47 ValueCraving Education That Makes Science Feel Simple – $29 ValueSwipeable Meal & Snack Templates – $27 ValueCraving Rescue Toolbox – $19 ValueTotal Value: $134 Today Only: $17(This section visually reinforces the deal and the value stack.)3. Mockup of Members AreaHeadline: “Get Instant Access To Your Members Area”Image: Mockup showing the members area dashboard on laptop, tablet, and phone.Short supporting line: “All your lessons, tools, and templates will be waiting for you inside your secure members area.”4. Order CTA (No form – button only)Centered button (large, prominent, brand primary color):👉 Start My 5-Day Craving Cure Now (Button links directly to checkout: https://pay.hotmart.com/V100054545U?off=od5lv0xl&checkoutMode=10Micro-text under the button: “Instant access – no waiting, start today!”5. Social Proof Section (Stronger Testimonials)Headline: “Join 5,000+ Women Who’ve Reset Their Cravings Already!”Carousel of 3–5 testimonials with new images and deeper stories than Step 14.Testimonial 1 – Maria, 42"I’ve tried every diet out there – keto, calorie counting, fasting… nothing stuck. But this felt completely different. I stopped waking up thinking about food all day, and my afternoon crashes disappeared by Day 3. I can actually enjoy pasta and dessert again without guilt – and the best part? I feel in control for the first time in years."Testimonial 2 – Danielle, 38"At first, I was skeptical because it sounded too simple… but wow. Following the food order fix made my cravings vanish almost overnight. I’ve stopped snacking mindlessly at night, my jeans fit better, and I finally have energy to get through my workday. I wish I had found this sooner!"Testimonial 3 – Lauren, 45"I was constantly beating myself up for not having enough willpower. This program helped me understand it was never about willpower in the first place. I can’t believe how quickly the habits clicked – and how much calmer I feel around food. It’s been life-changing, honestly."Example structure:Photo of woman (close-up, smiling, relatable)Quote: “I finally feel in control again – and I didn’t have to give up my favorite foods.” – Maria, 42(Testimonials placed below the order button, but before the guarantee section for maximum impact.)6. Guarantee SectionPlace Guarantee Badge graphic (clean premium look)Copy: “We’re confident you’ll feel a shift – but if you don’t, email us within 15 days for a full refund. No questions asked.”7. FAQ SectionHeadline: “Have Questions? We’ve Got Answers…”5 FAQs to handle objections:Do I have to give up carbs or sugar?I’m busy. Will I have time for this?Can I do this if I’m vegetarian or vegan?What if I don’t see results?Will I have to track calories or follow a strict diet?Visual NotesBackground: clean white with thin brand accent lines to divide sections.Flow:HeadlineValue stack recap + full stack mockupMembers area mockupCTA buttonTestimonialsGuaranteeFAQFooter"Attached are the first 10 images, can't attach more because the limit is 10 but I will attach the ones left on the next prompt