ИИ-квизыдля трафика

Goal: Build a high-conversion, mobile-first ecommerce acquisition quiz for a premium functional supplement brand. The objective is to convert cold social traffic into a personalized purchase by promising a custom "daily stack" in under 45 seconds.

Language: Generate ALL user-facing text in Russian — questions, answer options, headlines, progress labels, CTA, and the result screen. Keep code identifiers, variable names, and event names in English.

Core Vision:
The experience should feel like a "Personal Ritual Builder" rather than a generic quiz. It must be fast, stylish, and emotionally rewarding for a busy, high-performing demographic (ages 25–40).

1. Visual & Design System (Tailwind CSS):
• Palette: Premium and High-Contrast. Cobalt Blue (#2E5BFF), Vivid Coral, Charcoal, and Warm Cream.
• Typography: Bold and modern. Use 'Outfit' for headings and 'Inter' for body.
• Aesthetics: Glossy product surfaces, rounded cards (min 2rem radius), and large touch targets.
• Animations (framer-motion): Smooth route transitions (AnimatePresence), scaling effects on option selection, and "vivid" gradients that shift during the journey.
• Button Styles: A massive, primary "Luxury Button" in Cobalt Blue. It must include a ripple animation effect and a subtle scale-up on hover/touch to feel tactile.

2. The Quiz Flow (4 Questions / 3 Options each):
• Question 1 (Improvement): Focus, Calm, or Sleep.
• Question 2 (Day Feeling): Busy, Productive but draining, or Inconsistent.
• Question 3 (Routine Type): Capsule, Drink/Powder, or Minimal 2-step.
• Question 4 (Timing): Morning, Afternoon, or Evening.
• Progress Support: Show a progress bar that motivates the user (e.g., "Almost done," "Building your match").
• Interactive Transitions: After every answer, the background color should shift to a different vivid tone (e.g., Berry, Cobalt, Leaf Green) to signify progress and keep the user's attention sharp.

3. The Interstitial "Building" Screen:
• After the final question, show a loading screen for 2-3 seconds with a spinning glow effect.
• Cycle through affirmative messages: "Matching your goals," "Selecting your best-fit formula," "Unlocking your offer."

4. Result Screen Architecture:
• High Focus: Show only ONE hero product (e.g., "The Focus Ritual").
• Hierarchy: Hero Headline (identity-based) > Product Image > 3 Bulleted Reasons why it fits > How to use.
• Scarcity & Urgency: Include a black "Offer Block" at the bottom with a live 10-minute countdown timer.
• Direct CTA: Only one primary button: "Claim my 20% off and order now." Use the same blue ripple-effect button here.
• Compliance: Include a small footer disclaimer: "These statements have not been evaluated by the FDA..."

5. Technical Requirements:
• Framework: Single-page React app (Vite) with Lucide icons.
• Architecture: Use a config.ts object to manage all question data and bundle logic.
• Mobile Optimizations: Ensure 44px+ touch targets and no horizontal scroll.
• Analytics: Include a trackEvent placeholder for every step (quiz_start, question_answered, offer_timer_started, etc.).

Overview
Create a high-conversion, mobile-first acquisition quiz for a fintech app named "Plink," targeting teenagers and junior users. The goal is to transform cold social media traffic into app installs by making users feel their personal 30-day savings plan is already created and waiting for them inside the app.

Language: Generate ALL user-facing text in Russian — headlines, sub-headlines, questions, answer options, loading messages, result copy, and CTAs. Keep code identifiers, variable names, and event names in English.

Visual Aesthetic: "Hip Dopamine Brutalism"
• Palette: Electric Lime (#DFFF02), Deep Violet (#2E004F), Electric Blue (#0047FF), Hot Magenta (#FF00FF), High-Contrast Black (#000000), and Pure White.
• Typography:
   - Headings: Instrument Serif (Italicized) for a high-fashion/editorial look.
   - UI/Display: Space Grotesk or Plus Jakarta Sans for a technical yet friendly feel.
• Styling: "Brutalist" elements (thick 4px-8px black shadows, solid 2px-4px borders, large 2xl-3xl rounded corners). Use vibrant gradients and organic blurred background shapes for depth.
• Inspiration: Mix the polished fintech look of Wise/Ziina with the bold energy of a modern social/creator platform.

Phase 1: Welcome Screen (The Vision)
• Headline: "Teens can pay for their dreams too!" (Serif Italic).
• Sub-headline: "Answer 5 quick questions and get your 30-day savings plan in the app."
• Trust Points: Show 3 icons (Shield, Check, Chart) with text: "No spreadsheets," "No adult lectures," "Your real money."
• CTA: "Get Started" (Lime green button with a heavy black shadow).

Phase 2: The 5-Step Quiz Logic
Each step features a progress bar and high-energy encouragement pop-ups after answering.
1. Goal Selection: "What do you want to save for?"
   - Options: Gadget, Game/Subscription, Sneakers/Clothes, Event/Trip, or "My own goal" (with text input).
   - Auto-Estimation Table: (e.g., Sneakers ≈ $177, Gadget ≈ $340, Game ≈ $62).
2. Monthly Income: "How much money do you usually get in a month?"
   - Options: Up to $40, $95, $205, $205+, or "Changes a lot."
   - Midpoint Logic: (e.g., Up to $40 → $27; $205 → $150).
3. Frequency: "How often does money usually appear?" (Weekly, Monthly, Randomly).
4. Money Leak: "Where does money disappear most often?" (Snacks, Games, Going out, Online shopping).
5. Saving Barrier: "What usually gets in the way?" (Impulse buying, Taking money back, Unknown limits, Distance).

Phase 3: Loading Sequence
A 2-3 second animated sequence "Building your vision..." showing checkmarks for:
• Estimating your goal price
• Checking money rhythm
• Finding money leaks
• Calculating safe daily spend
• Preparing 30-day plan

Phase 4: The Result Screen (Conversion Focused)
• Header: "Your [30-day plan / first step] is ready." (Serif font).
• Section 1: Summary Card: A black brutalist card with magenta shadows showing:
   - Goal: [User Goal Category]
   - Price: [Estimated Price]
   - You could save in 30 days: [Calculated Amount]
• Section 2: Money Actions (Grid of 2 white cards):
   - "Spend up to [X] per day" (Label: to stay on track).
   - "Set aside [Y] each time you get paid."
• Section 3: Leak Alert: An orange card highlighting the "Money Leak" selected in the quiz.
• Section 4: App Unlock (Curiosity): A list of 4 locked/blurred feature rows:
   - Day-by-day plan, Goal tracker, Smart alerts, Savings challenge.
• Section 5: The Hook: A blue or magenta card: "Install now and unlock your first 7-day challenge. Use code START for a bonus."
• Main CTA: "Unlock Full Vision" (Electric Blue, pill-shaped, large arrow icon).

Product Logic
• Realism Check: If Goal Price <= 60% of Monthly Income, call it a "30-day plan." If higher, call it your "First 30-day step."
• Calculations:
   - Save Amount Monthly = Monthly Income * 0.4 (capped at Goal Price).
   - Daily Safety = (Monthly Income - Save Amount Monthly) / 30.