The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Kids Learning App Landing Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a polished, original claymorphism landing page for [BRAND], a children’s app for [APP_FOCUS], set in [STORY_WORLD]. The buyer and reader is a grown-up; the colorful lesson preview is inviting for a child to try with them. The first screen must pair a large saturated pink clay scene with a large sky-blue CSS phone containing real interactive reading and math screens. Continue with an age-aware learning path, a second clay scene explaining practice, a working sample parent dashboard, a calm safety section, pricing, an accessible local routine form, FAQs, and a final invitation. This is a static, fully usable product preview, not a real subscription service. Use the variable defaults exactly for the default build. Keep all copy, structured lesson data, prices, asset paths, alt text, and links in src/content.ts. When values change, rewrite every product-specific sentence and every lesson to fit the new audience and story world; retain the same sections, controls, color system, and level of detail. The three supplied clay images are neutral learning companions and geometric props, suitable for both the garden and floating-workshop content.

- Audience: [AUDIENCE]. Speak to the grown-up making the choice, with short encouraging instructions inside the child-facing lesson preview.
- Goal: Let a visitor understand the product in the first screen, try an age-appropriate reading and math activity, inspect a sample parent view, compare transparent prices, and build a sample family routine locally.
- Tone: Warm, curious, concrete, lightly playful, and calm about mistakes. Never promise learning outcomes or use urgency, streak pressure, guilt, awards, testimonials, or unsupported adoption numbers.

## Stack
- Framework: Vite + React + TypeScript
- Styling: Vanilla CSS
- Libraries: react and react-dom (MIT), vite and @vitejs/plugin-react (MIT), typescript (Apache-2.0), lucide-react (ISC), @fontsource/fredoka (OFL-1.1), @fontsource/dm-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Use a single index.html entry with React components and semantic HTML; keep all product content and lesson datasets in src/content.ts.
  - Set Vite base to './', build.outDir to 'dist', and build.sourcemap to false; npm run build runs TypeScript checking and vite build.
  - Use CSS custom properties for every palette value and shared space, radius, shadow and focus token. Author all clay shading, page layout and animations in local CSS; do not install a UI kit or animation framework.
  - Import only the Latin 400, 500 and 600 Fredoka weights and the Latin 400, 500, 600 and 700 DM Sans weights from Fontsource, bundled locally. Use font-display: swap and sensible rounded/sans fallbacks.
  - Download the three supplied image URLs to public/images/ using the exact target filenames before implementation. Import Lucide icons from the npm package and use inline SVG output.
  - Implement ageBand, lessonMode, lessonIndex, answer feedback, parentPeriod, billingPeriod, menuOpen, and routine-dialog state locally in React. Use no storage, network calls, accounts or form submission.
  - For optional read-aloud, use only native window.speechSynthesis with an English voice whose localService flag is true. If there is no local voice, keep the sound-breakdown interaction fully usable and show a plain availability message only after the user asks. Never autoplay speech or request a remote voice.
  - Include a plain document title using [BRAND] and a simple original CSS/SVG geometric favicon. Ship ASSETS.md at the project root with every image, font and icon source and license.

## Variables
- [BRAND] — App brand (default: "Mallowpath"). Invented app name. Use this exact value in the wordmark, title, phone header, plan confirmation and footer; do not invent a replacement brand.
- [APP_FOCUS] — What the app practices (default: "Phonics, first words, and everyday math"). Rewrite the product explanation and every learning-path label to fit this focus. Keep a reading activity and a math activity in the phone for every age band.
- [AUDIENCE] — Families served (default: "Curious kids ages 3–8 and their grown-ups"). Rewrite the parent-facing copy and examples for these families. Preserve three age bands: 3–4, 5–6 and 7–8.
- [STORY_WORLD] — Lesson setting (default: "A tiny garden of sunbursts, sprouts, and picnic discoveries"). Rewrite every example, question, answer set, word tile and next-step suggestion for this world. For the floating-workshop alternative use kites, parcels, clouds and grouping deliveries; the same abstract clay companion images remain suitable.
- [SESSION_MINUTES] — Suggested session length in minutes (default: "10"). A positive whole number from 6 to 15. Derive all session copy and the routine form’s starting duration from this value. Suggested reading minutes and math minutes are each floor(duration × 0.4); the remaining minutes are a calm wrap-up.
- [MONTHLY_PRICE] — Family plan monthly price in USD (default: "8"). A positive whole-number dollar amount. Yearly total is 10 times this value, with two months included. Derive every displayed amount and the routine summary; do not hard-code the default price in a changed example.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/kids-learning-app-landing-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Lilac base `#EDE7FF` — Main page canvas and the hero scene background. Keep this exact lilac; do not replace it with cream, beige or gray.
- Bubblegum pink `#FF4FA3` — Large hero clay companion and a large supporting clay orb, reading cards, pricing highlight and parent chart bars. This is a saturated hero subject, not merely a button accent.
- Sky blue `#2FADFF` — Large CSS phone body, broad math surfaces and a learning card. The blue phone occupies roughly half of the hero’s visual stage and remains clear on mobile.
- Butter yellow `#FFD84D` — Puffy arch details, age selection, lesson feedback accents and the safety section surface. Keep it bright and saturated.
- Grass green `#4ECB68` — Second clay companion, math tokens, parent dashboard balance and the final CTA band.
- Deep plum ink `#2D174D` — All headings, body text, labels, icons, outlines, chart labels and text on pink, blue, yellow, green or lilac. This ink has contrast above 5:1 on all four strong colors and above 13:1 on the lilac.
- Secondary plum `#58466B` — Supporting text on white or lilac only; never place this color on pink, blue, green or yellow. It exceeds 6.9:1 on lilac.
- Paper white `#FFFFFF` — Phone screen, dashboard panels, plain content cards and text on deep-plum filled buttons only. Never use white body text on the four bright colors.
- Clay shadow `#7A5EA8` — Tinted ambient shadows at 10–20% alpha only, never text or an extra section color.

### Typography
- Display headings, plain wordmark and large lesson answers: Fredoka (OFL), weights 400/500/600
- Body, navigation, form labels, buttons, chart labels and small UI: DM Sans (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use a 4px base scale. Desktop content max-width 1240px with 48px outer gutters, 104px between major sections and 24px card gaps. Header height 80px. Desktop hero has two columns, 46% text and 54% visual, an approximately 600px-tall main area, and no giant empty margin. At 390px use 20px gutters, 64px header, 56px section spacing and 16px gaps. The mobile hero copy is compact enough that both the large pink clay subject and most of the blue phone are visible at 390×844. Keep every control at least 44×44 CSS pixels, even inside the phone. Body is 18px/1.6 desktop and 16px/1.55 mobile; supporting UI never below 12px. Display headline 68px/1.02 desktop and 42px/1.04 mobile, weight 500, tracking -0.025em; section headings 42px/1.08 desktop and 32px/1.12 mobile.
- Radius: Puffy buttons are 18px radii with an inset white top highlight and a 4px deep-plum-tinted bottom ledge; press moves the face down 2px. Cards use 28px, dashboard panels 20px, the phone exterior 48px and its inner screen 34px. Clay objects are intentionally irregular soft ellipses, arches and rounded cuboids. Avoid outlining every surface; use a restrained 1px deep-plum border at 14% alpha on white cards and a solid 3px visible focus ring.
- Motion: Hero elements appear immediately. A single 500ms, 16px upward entrance may run after render, but content must never depend on animation to become visible. No startup overlay or delayed headline.
- Motion: Decorative clay scene floats by at most 6px on a slow 6-second loop; the phone and all its controls stay still. Use a 160ms squeeze on button press and 180ms crossfades between phone lessons and age-band content. Never animate layout height to zero.
- Motion: A correct answer causes three small local CSS stars to pop for 450ms, with a visible text success message; an incorrect answer gets a gentle 2px nudge and a helpful hint. No confetti over the page, negative scoring, loud sounds or forced progression.
- Motion: Reveal sections once with a subtle 14px translate/350ms fade through IntersectionObserver; everything remains visible if JavaScript or observation fails. Chart bars transition from their previous heights in 280ms without count-up text.
- Motion: For prefers-reduced-motion, remove floating, reveal transforms, nudge, stars and smooth scrolling; retain immediate state changes and visible text feedback. Pause decorative loops while offscreen or the document is hidden.
- Imagery: Use exactly the three supplied original clay illustrations, all from the same handmade 3D studio world with saturated #FF4FA3, #2FADFF, #FFD84D and #4ECB68 on #EDE7FF. They show two original abstract learning companions, rounded geometric props and blank books; they contain no baked-in text, numbers, letters, logos or screens and do not resemble existing characters. The first image is a large hero anchor; the phone is entirely live CSS/HTML and must never be an image. The second image explains reading and number play; the third supports the calm safety section. Make both cases use the same abstract images and rewrite the live story examples. Use object-fit: contain or a deliberate loose crop with all main characters intact. A gentle CSS radial mask may feather the lilac edges, but do not desaturate, blur or tint the art. Add small original CSS sun, sprout, parcel, kite, counting pebble and shape illustrations as needed for the active story world. No real people or stock photography are needed for this playful product page.

## Pages & Sections
### [BRAND] learning app (`index.html`)
1. **Header and mobile navigation** — Use a plain live-text [BRAND] wordmark and a tiny original four-dot clay motif, not an image logo. Links: How it works → ./index.html#learning, For grown-ups → ./index.html#parents, Plans → ./index.html#plans. Right CTA: Try a lesson → ./index.html#lesson-preview. Include a focus-only Skip to content link. On mobile replace the three text links with a 44px Menu button exposing the same links in a compact nonmodal panel below the header; aria-expanded must match and Escape or choosing a link closes it. The active anchor can receive an understated underline.
   Layout: A nonsticky 80px desktop / 64px mobile bar on lilac #EDE7FF, max-width 1240px, deep-plum #2D174D text. The wordmark is Fredoka 26px/500. A deep-plum CTA has white #FFFFFF text and a soft puffy ledge. Mobile panel uses white #FFFFFF, 20px corners, a soft shadow and dark ink; never cover the whole page with a permanent overlay.
   Motion: Only the menu panel crossfades over 140ms; all links remain immediately usable.
2. **Hero with a real lesson phone** — Main id content. Eyebrow: Little learning, lots of wonder. Default headline on two lines: “Little lessons. / Big discoveries.” Supporting copy: “[BRAND] turns [APP_FOCUS] into [SESSION_MINUTES]-minute adventures for [AUDIENCE]. Start with one small win, then follow their curiosity.” Primary puffy CTA “Try a lesson” focuses the first interactive word or answer in the phone at id lesson-preview without opening a modal. Secondary text CTA “See the parent view” goes to ./index.html#parents. Beneath, a visible “Choose an age” radiogroup has 3–4, 5–6 and 7–8; default 5–6. Changing it changes the phone dataset, curriculum section and parent next step, resets feedback and never takes the user away from their location. Small note: “No account needed to explore.” The phone header shows [BRAND], “A little practice”, and tabs Read / Math, with Read active. Keep all phone copy as HTML. Read mode lets every word tile be tapped to reveal a visible sound or syllable breakdown and, optionally, a local-device read-aloud button. The default 5–6 screen shows an original CSS sun, sentence “The sun is up.” with tappable word tokens, prompt “Which word names the bright thing?”, and sun / cap / log choices; sun is correct. The 3–4 screen shows the same CSS sun, word tiles sun / map / red, asks “Which word begins with s?”, and highlights s · u · n after tapping sun. The 7–8 screen says “A little gardener plants four sprouts in each of three rows. Each sprout gets a sip of water.” and asks “How many rows are in the garden?” with 2 / 3 / 4 choices; 3 is correct, and tapping sprouts reveals “spr · outs”. Math mode uses CSS counting pebbles for 3–4 (2 + 1; options 2 / 3 / 4), seven pebbles in 4 + 3 groups for 5–6 (options 6 / 7 / 8), and three trays of four for 7–8 (options 10 / 12 / 14). Correct answers get “You found it! One little win.” and a Next activity button. Wrong answers show a short specific hint and retain all choices; never identify a failure as a child trait. Each mode has two exercises per age: second math questions are 1 + 3, 8 − 2, and 18 − 7 with correct answers 4, 6, and 11; second reading activities use map / “A red cap.” / a two-sentence picnic clue with an unambiguous answer. Write these full datasets in the content file, including every answer, hint and sound breakdown. Show progress “1 of 2” then “2 of 2”; after the second correct answer show “A lovely place to pause” and Start again. Native speech is opt-in and local-voice-only; word highlighting and visible breakdowns work without it. For changed variables rewrite the headline if useful, all lessons, CSS object drawings and hints for [STORY_WORLD] while preserving these exact interactions and age progression.
   Layout: Two-column hero on #EDE7FF. Left max-width 520px with deep-plum #2D174D title and body; secondary note #58466B only on lilac. Place the large hero-companions.webp illustration in the right 54% visual stage at roughly 430×430px with its bubblegum #FF4FA3 companion prominent, not a tiny corner sticker. Add a large original 170–210px pink #FF4FA3 clay orb low left of the stage and a butter-yellow #FFD84D arch behind it. Overlay the phone at the stage’s right edge, width 286px and roughly 540px tall, with an unmistakable saturated sky-blue #2FADFF body, white #FFFFFF inner screen, broad top-left highlights and a tinted bottom shadow. The scene and phone must together fill most of the right stage; at least pink and blue are broad hero subjects. All phone text and answer labels use deep plum #2D174D, including on colored tabs. Selected age chips use #FFD84D with dark text, unselected ones white. Phone buttons have 44px minimum targets; math tokens use #4ECB68 and #FFD84D, never colored tiny text. On 390px place copy first and visual directly below with a 390–430px-high stage, a 236px-wide phone at right and a 240px-wide scene behind it at left; keep pink companion visible, phone controls unoccluded, and the stage within the 350px content width. Do not scale the whole phone with a transform that makes tap targets smaller. Let the phone screen reflow and reduce decorative whitespace. No image, orb or arch may overlap the headline or a control.
   Motion: Decorative scene only floats gently; the CSS phone does not move. Tabs and age changes use 180ms content crossfades with stable screen height. Set aria-pressed or radio semantics correctly, announce feedback in a polite live region, and put focus on Next activity after completion only when appropriate.
3. **An age-aware path** — Id learning. Heading “A little path for every stage.” Intro “Pick a starting point. You can change it whenever curiosity takes a new turn.” Repeat the three age controls, bound to the same ageBand state as the hero, followed by one broad active path card. Default 3–4: title “Notice & name”, reading skill “Hear first sounds”, math skill “Count to five”, hands-on idea “Find three sunny shapes around the room”, and parent hint “Try one word, one count, and one high-five.” Default 5–6: title “Sound it, solve it”, reading skill “Blend short words”, math skill “Add and subtract to ten”, hands-on idea “Pack a seven-piece pretend picnic”, and hint “Say the sounds together, then count what you packed.” Default 7–8: title “Read, reason, repeat”, reading skill “Read a two-sentence clue”, math skill “Make equal groups”, hands-on idea “Plan a garden with three rows of four”, and hint “Ask how they found the answer before trying another.” A plain “Try this age in the phone” link scrolls to ./index.html#lesson-preview and focuses the current mode’s first control. This is a real three-state curriculum, not a color-only tab switch. Rewrite all stage titles, tasks and hints for changed [APP_FOCUS], [AUDIENCE] and [STORY_WORLD].
   Layout: Use a full-width butter-yellow #FFD84D section inset 24px from the page edges on desktop, 0 on mobile, with generous rounded top corners. All text and icons are #2D174D. The selected path sits in a white #FFFFFF panel; three equal horizontal columns hold Reading, Math and Away from the screen, with a grass-green #4ECB68 label on the math column and pink #FF4FA3 label on reading. Use #2D174D on those labels, never white. Desktop heading left and age controls right; mobile stacks everything, with the controls in one row and content columns becoming vertical. Use small CSS clay counters, not generic colored icon circles repeated for every item.
   Motion: Crossfade the active card in 180ms and retain its minimum height to prevent a page jump. No carousel or auto-advance.
4. **Reading and numbers through play** — Heading “Two ways to wonder. One happy rhythm.” Copy “A word to notice. A puzzle to try. A little room to make it your own.” Use learning-playground.webp as the main image. Two compact content blocks read “Words with a little wiggle” — “Tap a word, explore its sounds, and find it inside a tiny story.” and “Numbers you can move around” — “Count real-looking pieces, spot a pattern, and talk through a small problem.” A third plain text note reads “[SESSION_MINUTES] minutes is a starting point, not a finish line.” Include a functional “Try reading” button setting Read mode and focusing the phone; “Try math” does the same for Math. All phone actions work on the current age band, not only the default one. Rewrite these descriptions and the associated live examples when variables differ.
   Layout: Return to lilac #EDE7FF. Desktop image takes 48% width at at least 420px wide, with a loose crop preserving the original pink #FF4FA3 and green #4ECB68 companions and bright blue/yellow geometric props. Text takes the other half. Reading block has a broad pink #FF4FA3 softly irregular backing and math block sky blue #2FADFF; all text and icons #2D174D. The time note uses #58466B on lilac. On mobile the image is full width above two stacked colored blocks; do not shrink it into a thumbnail. Buttons remain plain deep-plum/white or white/ink puffy controls.
   Motion: Subtle one-time section reveal; no scroll-jacked storytelling or moving text under the image.
5. **Parent dashboard preview** — Id parents. Small label “The grown-up view”. Heading “See the small steps adding up.” Copy “A clear little picture of practice, with space for your next conversation.” Show a real HTML/CSS dashboard titled “Practice at a glance” with a visible “Illustrative activity” label. A two-option segmented control switches Sample week / Previous sample. Sample week has seven sessions [8,12,6,10,11,9,14] minutes, total 70, reading 42 and math 28; previous sample is [6,8,6,9,10,8,9], total 56, reading 34 and math 22. Derive totals and percentage labels from the arrays; label the x-axis 1–7 and caption it “Practice sessions”, with no calendar dates. Three KPI tiles show total minutes, reading minutes and math minutes. A bar chart is accompanied by a small accessible text list or table of all seven values. A reading/math horizontal balance bar has numbers printed outside the fills. A side panel titled “A gentle next step” changes with the shared age band: 3–4 “Name three things that start with the same sound”; 5–6 “Build a short word, then make seven in two groups”; 7–8 “Read a clue, then explain a group of four.” A “Make a sample routine” button opens the local grown-up form, described below, with the current age already selected. Never suggest these sample metrics come from an actual child or active account. B must rewrite the next steps and labels for its English-story and sky-workshop focus while keeping the same meaningful working dashboard.
   Layout: Use a sky-blue #2FADFF outer surface with a generous 40px radius and 40px desktop padding, 20px mobile. Heading and intro #2D174D. The dashboard is a clean white #FFFFFF panel with deep-plum #2D174D type, three compact KPI blocks and a 7-bar chart. Alternate pink #FF4FA3 and green #4ECB68 chart bars; put all small labels in dark ink on white, not inside bright narrow bars. The side next-step panel is butter yellow #FFD84D with #2D174D text. Desktop dashboard and side panel are 2:1 columns; mobile stack with no horizontal scroll, make chart bars flex equally and keep all 7 visible. The sample-period selector uses a dark-plum active fill with white text.
   Motion: Changing sample period updates both metrics and chart within 280ms, with no arbitrary count-up. A polite live summary announces the new total once.
6. **A calm place to practice** — Id safety. Heading “Made for play. Kept calm by grown-ups.” Copy “Curiosity does not need a noisy room.” Use calm-corner.webp alongside three specific principles: “No ads or open chat” — “The lesson preview stays focused on the activity in front of you.”; “Your pace, your pause” — “Choose a starting age and a short routine. Stop after a little win, whenever you like.”; “Less to enter” — “The sample setup asks for an age band and a practice preference, never a child’s name, birthday, email, or photo.” A small link “What does the preview remember?” opens the relevant FAQ item and scrolls to it; the answer states that values live only in the current page session and are reset on refresh. Do not put seals, badges, encryption claims, certification names or promises about a future production service here.
   Layout: A warm but saturated butter-yellow #FFD84D band with deep-plum #2D174D headings and body. Place the large calm-corner image at right on desktop, at least 360px wide, with the pink #FF4FA3 and green #4ECB68 companions clear against lilac #EDE7FF. At left, three short principle rows use small original line icons from Lucide, not a stack of generic badge cards. Use white #FFFFFF thin dividers at 70% alpha and dark labels. Mobile image comes below the first introductory sentence, followed by the principle rows. No text overlays the illustration.
   Motion: A single gentle reveal only; this section has no looping movement.
7. **Simple pricing and a local routine form** — Id plans. Heading “A small plan for big curiosity.” Intro “Try a little first. Choose a rhythm that fits your family.” Billing toggle Monthly / Yearly, Monthly selected. Starter card title “Little try”, price “Free”, details “Try the reading and math previews”, “Explore one age at a time”, “See a sample parent view”, CTA “Try a lesson” focusing the phone. Family card title “[BRAND] Family”, price “$[MONTHLY_PRICE] / month” for monthly. Yearly total is 10 × [MONTHLY_PRICE], shown as “$80 / year” for the default, with “$6.67 per month, billed yearly” and “Two months included” underneath; calculate both values for different prices. Family details “Reading and math paths”, “All three age stages”, “A clear grown-up view”, and “A routine you can shape”. CTA “Build a family routine” opens the same accessible dialog used by the dashboard. Under the cards say “Explore the setup here. No account or payment is created.” The dialog heading is “A little routine for your family”, with a plain “For grown-ups” label. It contains an age-band select (3–4, 5–6, 7–8), practice preference radios Reading / Math / A bit of both, and session length select 6 / 8 / 10 / 12 / 15 minutes initialized from [SESSION_MINUTES]. Show the currently selected monthly or yearly family plan as a read-only line with its calculated amount; visitors can change billing outside the dialog. Submit button “Make my sample routine” prevents default and produces an inline result without network calls: for Both, reading and math minutes are each floor(length × 0.4) and remaining minutes are a calm wrap-up; for Reading or Math, assign length − 2 minutes to that practice and 2 to wrap-up. For default 10 minutes and Both show “4 min of word play + 4 min of number play + 2 min to pause and share.” Include an age-appropriate activity from the current dataset. Success copy “Your next little adventure is ready.” and secondary action “Adjust my routine” returning to the fields. Closing discards the form inputs; no persistence, email entry, child profile fields, real checkout, authentication or subscription action. Give the dialog an accessible name, focus trap, Escape close, visible Close button and focus restoration to the opener.
   Layout: On lilac #EDE7FF center the heading and the puffy billing toggle. Two cards max 880px wide, Starter white #FFFFFF and Family a large bubblegum-pink #FF4FA3 surface with #2D174D text. A small butter-yellow #FFD84D label reads “Room to explore” on Family; no fake popularity badge. Card prices are Fredoka 48px/500. Deep-plum #2D174D filled CTA has white text; outline secondary CTA has dark ink. Mobile cards stack and billing amounts wrap cleanly, never clip. Dialog max-width 540px, max-height calc(100dvh - 32px), internally scrollable, white with lilac field surfaces and yellow selected radios, all labels #2D174D. Body scroll locks only while the modal is open. The resulting routine is a grass-green #4ECB68 panel with dark text. Keep 44px targets and clear field labels.
   Motion: Toggle changes amounts instantly with a 160ms fade; never animate digits. Dialog opens with a 120ms opacity fade, no bouncing; reduced motion uses immediate display.
8. **Useful questions** — Id questions. Heading “A few things grown-ups ask.” Use five native details/summary items, first open by default: “Where should we start?” — “Choose the age that feels closest, then try one reading activity and one number activity. You can change the age at any time.”; “Does every word have sound?” — “Tap a word to see its sound or syllable breakdown. Read-aloud is available when your device has a local English voice; the activity still works without audio.”; “Do we have to finish a lesson?” — “No. A short pause after one activity is a good stopping point. The preview never asks you to protect a streak.”; “What does the preview remember?” — “Your age choice, answers, billing choice, and sample routine stay in this open page only. Refreshing starts the preview again. Nothing is submitted or saved.”; “What happens when I choose a plan?” — “You can build a sample family routine and compare the displayed plan. This preview does not create an account, take payment, or start a subscription.” Make the fourth item addressable by id preview-memory; the safety link opens that details element before scrolling. Rewrite world-specific examples for changed variables without changing the local-preview behavior.
   Layout: A narrow 840px column on lilac #EDE7FF, #2D174D summaries at 20px/600, supporting text #58466B on lilac only. Thin #2D174D separators at 18% alpha; no heavy cards. Each summary has a 44px minimum row height, generous padding and a dark plus/minus icon. Open answer max-width 680px. Mobile summary text wraps naturally without colliding with the icon.
   Motion: Native details behavior; rotate the plus marker by 45 degrees in 120ms if motion is allowed. Do not hide answers with reveal animations.
9. **Final invitation and footer** — Heading “One little adventure, whenever you are ready.” Short copy “Pick an age. Try a word. Make room for a small discovery.” Primary “Try a lesson” goes to ./index.html#lesson-preview and focuses the active phone control. Secondary “Build a family routine” opens the local dialog. Footer shows the exact live-text [BRAND], “Little practice. Plenty of wonder.”, links Learning / Grown-up view / Plans / Questions to their explicit ./index.html# anchors, and an optional small [CREDIT] link. No social placeholder links, invented address, copyright year or calendar date. Do not expose prompt instructions, developer notes, model names or asset licensing inside the visible product UI.
   Layout: Large grass-green #4ECB68 invitation band with 40px rounded top corners, centered deep-plum #2D174D headline and body; add a few original butter-yellow #FFD84D and pink #FF4FA3 clay pebbles at the outer edges, away from text. Deep-plum button has white text, secondary is white with deep-plum text. Footer returns to lilac #EDE7FF with #2D174D brand and links; optional fine-print credit uses #58466B on lilac. Desktop footer is a single balanced row, mobile a simple stacked layout with 16px gaps. Nothing is clipped at the viewport edges.
   Motion: Only control press states; no marquee, automatic scroll or oversized moving footer wordmark.

## Assets
- image: Download https://media.vibefather.ai/assets/21e11a21-3f2a-4103-8f50-f7f622e8e2dd/hero-companions.webp to public/images/hero-companions.webp. Alt: “Two original pink and green clay learning companions among bright rounded shapes.” Use as the large hero scene behind and left of the live CSS phone. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. The owner generates and uploads this asset before build; do not replace it with a placeholder.
- image: Download https://media.vibefather.ai/assets/21e11a21-3f2a-4103-8f50-f7f622e8e2dd/learning-playground.webp to public/images/learning-playground.webp. Alt: “Friendly abstract clay companions exploring a blank book and colorful counting pieces.” Use large in Reading and numbers through play. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/21e11a21-3f2a-4103-8f50-f7f622e8e2dd/calm-corner.webp to public/images/calm-corner.webp. Alt: “Two small clay learning companions resting inside a soft arch with colorful cushions.” Use in the safety section at a generous size. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- icon: Use lucide-react, ISC, https://github.com/lucide-icons/lucide, only for generic navigation, volume, check, plus, minus, close, leaf and parent-view symbols; render locally as inline SVG. Make tiny clay sun, sprout, picnic, kite and parcel illustrations yourself in CSS/SVG, and record them as original code-drawn art in ASSETS.md. Do not use brand icons, imported mascot art or logo libraries.
- font: Self-host Fredoka through @fontsource/fredoka and DM Sans through @fontsource/dm-sans, both OFL-1.1. Import only the specified Latin subsets/weights into the local bundle. Source information: https://fontsource.org/fonts/fredoka and https://fontsource.org/fonts/dm-sans. List package names, weights, source URLs and licenses in ASSETS.md; no remote font requests.

## Don'ts
- Do not change the fixed stack unless the user explicitly asks. Build static files in dist/ with npm run build, Vite base ./, minified output, no source maps and no src/ copied into dist/. Keep the complete dist/ below 20 MB.
- No backend, server code, API routes, database, authentication, external API, payment integration, analytics, tracker, newsletter service or forms that submit anywhere. All interactive data lives only in React memory; do not use localStorage, sessionStorage, cookies or service workers.
- Everything must be local in the shipped build: download all three exact generated images, bundle the fonts and icons, and use relative asset paths. No hotlinking, remote scripts, CDN links, external audio files, placeholder services or missing-image blocks. Record every image, font and icon in ASSETS.md with its source, author where applicable and license.
- No existing learning-product mascots, branded toys, recognizable character silhouettes, copyrighted entertainment characters, real-person likenesses, logo images, copied UI, copied copy, commercial fonts or restricted library source. All clay companions and code-drawn lesson art must be original. Generated art contains no text, letters, numbers, watermark, logo or interface screenshot.
- Do not use real children or real people. Do not request, collect or display personal child profiles, child names, exact ages, birth dates, child email addresses, photos, voice recordings or location. The form asks only a coarse age band, a practice preference and a session length, with no identity fields.
- No unverified learning outcome, test-score, medical, customer-count, award, rating, compliance, encryption or security-certification claims. Clearly label parent activity as illustrative sample data. Do not turn sample progress into a statement about an actual learner.
- Do not mute or replace the palette. Keep #EDE7FF as the base and use saturated #FF4FA3, #2FADFF, #FFD84D and #4ECB68 exactly. Pink clay subjects and the blue phone must occupy broad visible areas of the first screen, including mobile; colorful buttons alone do not satisfy the visual direction. No beige/cream redesign, neutral-only hero, generic purple gradient backdrop or typography-only first screen.
- Maintain WCAG AA text contrast. Use #2D174D for text on all bright surfaces and #58466B only on white or lilac. White text belongs only on deep-plum fills, never on pink, blue, yellow or green. Keep visible focus rings and real text labels; do not rely on color alone for answers, selected states, charts or validation.
- Do not bake the phone UI, chart, text, prices or lesson controls into images. Phone tabs, age picker, answers, word tiles, next activity, period selector, billing toggle, FAQ links and routine form must all work with keyboard, touch and pointer. A changed age must change real content and difficulty. No dead buttons, fake loading, decorative-only charts or placeholder links.
- No automatic audio, microphone permission, remote text-to-speech or playback without an explicit user action. Read-aloud is optional and restricted to an available local English browser voice; visual sound breakdowns and all lessons must work when speech support is absent. Cancel speech when closing, changing a lesson or leaving the page.
- Use explicit ./index.html#section links, never bare directory URLs. The one index.html page must open directly. Provide a mobile menu, skip link, proper button/tab/radio semantics, accessible dialog behavior, form labels, polite answer feedback, and a text alternative for chart values.
- No calendar dates, copyright year, fake urgency, countdowns, streak pressure, punitive feedback, unsupported popularity badges, testimonials, media logos, social placeholders or made-up production-account activity. No public competitor names or comparisons.
- All site copy, lesson data, labels, alt text and messages are US English. Use the exact variable defaults in the default example. Keep all copy, links, image paths, prices and structured lesson datasets in one content file and rewrite them consistently when variables differ; preserve the same three neutral supplied clay images for both examples.
- Do not mention VibeFather inside the product UI except the optional [CREDIT] footer link. Asset credits and implementation details belong in ASSETS.md, not in customer-facing sections. The local form and plan flow must still clearly explain that no account or payment is created.
- Do not scroll-jack, capture the pointer, hide initial content behind animation, move the phone controls, obstruct text with decorative art, clip the footer, or permit horizontal overflow. At 1440×900 and 390×844 all controls and copy must be usable with zero console errors. Every interactive target is at least 44px; prefer reduced motion and remove decorative motion when requested.

---
— Prompt by VibeFather · https://vibefather.ai/t/kids-learning-app-landing-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.