Kepler Academy

# Kepler — Online Course Platform

## Goal
Build a production-ready online course platform called "Kepler". Overall vibe: bright, encouraging, credible — a place that makes you believe you'll finish the course. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: paper #FCFCFA, deep navy #101828 text, vivid violet #7C3AED primary with soft lilac #EDE9FE tints for chips and highlights
- **Typography**: friendly geometric sans; display 48-64px semibold, generous 1.6 body line-height
- **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, Courses/Paths/For teams, search input center-right, avatar or 'Join free' button.
2. **Hero** — centered: lilac chip 'New: AI Engineering path', headline with one word in violet underline-scribble SVG, sub, dual CTA; below, a row of 5 floating course-card thumbnails at slight rotations.
3. **Course grid** — 3-col cards: thumbnail with duration chip, title, instructor avatar+name, rating stars, lilac level tag (Beginner/Pro).
4. **Curriculum preview** — accordion of 6 modules for a flagship course; open module lists lessons with play icons and durations.
5. **Instructor band** — 2 large bio cards side by side: portrait, name, one-line cred, small logo row of companies.
6. **Outcomes** — 3 stat tiles (completion rate, career switchers, avg salary lift) + short testimonial under each.
7. **Pricing** — Free vs Plus comparison, Plus card with violet top border and 'Most popular'.
8. **Footer** — standard 4-col + language selector.

## Motion
- Floating thumbnails bob independently (6-8s loops, ±8px) and straighten to 0° rotation on hover.
- Accordion opens with height spring + chevron rotate; only one module open at a time.
- Scribble underline SVG draws over 600ms after hero settles.
- 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
- Stars render as SVG with half-star support; ratings like 4.8 (2,341).
- Sticky bottom bar appears on scroll past curriculum: course name + 'Enroll' button, dismissible.

## 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.