Sprout Minds

# Sprout Minds — Kids Learning Platform Website

## Goal
Build a production-ready kids learning platform website called "Sprout Minds". Overall vibe: joyful but trustworthy — playful enough for kids, credible enough for parents. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: warm white #FFFDF7 base, ink #27272A text, leaf green #4ADE80 primary, sunny #FACC15 + coral #FB7185 as supporting accents in illustrations only
- **Typography**: rounded sans (nunito-style) throughout; headings 800 weight, generous letter spacing for early readers
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — logo with a leaf that waves on hover, Subjects/Pricing/For parents, 'Start free' green pill that squishes on press.
2. **Hero** — headline 'Learning that feels like recess', sub for parents, CTA + 'Watch how it works'; right side: 3 blob mascots bobbing at different rhythms around a tablet mockup.
3. **Subject cards** — 6 rounded cards (Math/Reading/Science/Art/Music/Logic), each with its own pastel tint and a mascot peeking from a corner on hover.
4. **How it works** — 3 steps with a dotted path connecting them, path draws in as you scroll.
5. **Parent trust band** — COPPA badge, 'no ads ever', screen-time controls, expert-designed curriculum — straight tone, no whimsy here.
6. **Testimonials** — speech-bubble cards from kids (big type, first names) and parents (smaller, full detail).
7. **Pricing** — 2 plans with a yearly toggle; family plan highlighted with a crayon-style border.
8. **Footer** — pastel, sitemap, 'Made with care for growing brains'.

## Motion
- Mascot blobs bob 8px on 3/4/5s loops with squash-and-stretch, pausable.
- Correct-answer confetti demo bursts once when the hero tablet scrolls into view.
- Card hover: rotate -1.5° + lift, mascot slides up from behind the card edge.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- All interactive targets minimum 48px — small fingers.
- Parent band deliberately drops the playful styling: white cards, straight corners, serious type.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.