How to Clone Babbel

Create a Babbel-style structured language-learning app called Linguaro as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Ordered courses of bite-sized lessons for adults learning a language. Freemium - a few free sampler lessons, the full curriculum behind a subscription with multi-length plans and a 7-day trial.

## Exercise types
Support five exercise types from one engine: vocab intro (word + image + audio), multiple-choice, fill-in-the-blank, match-pairs, and listen-and-choose.

## Screens
- Marketing landing: confident hero, language picker, pricing (3/6/12-month plans, 12-month highlighted best value), testimonials, FAQ accordion
- Onboarding wizard: language → reason → starting level, ending in a paywall with plan selector + trial CTA
- Learning path (authed): vertical path of lesson nodes grouped into courses, completion states, lock badges on premium lessons
- Lesson player: full-screen exercise sequence (vocab, multiple-choice, fill-in-the-blank, match pairs, listen-and-choose) with a progress bar, instant feedback, end-of-lesson summary
- Profile: streak, words learned, course progress, manage subscription
- Admin (role-gated): CRUD tables for languages, courses, lessons and exercises

## Prisma schema
User (id, email, name, currentLanguage, reason, isPremium, trialEndsAt, streakCount), Language (id, name, flagEmoji), Course (id, languageId, title, level, orderIndex), Lesson (id, courseId, title, orderIndex, isFree), Exercise (id, lessonId, type, prompt, optionsJson, correctAnswer, audioUrl, orderIndex), Progress (userId, lessonId, completedAt), VocabLearned (userId, word, learnedAt)

## Logic
- One generic ExercisePlayer component renders every exercise type from a typed union; adding a type shouldn't require a new screen
- A lesson completes when all exercises are answered; on completion update Progress, VocabLearned and the streak (one increment per day, reset on gaps)
- Free users play is_free lessons; locked lessons open a paywall modal; 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout, structured so Stripe replaces it)
- Optionally generate extra exercises from a word list via an API route stub (leave a TODO for an LLM call)
- Locked lesson and exercise content must not be returned to free users from the server, not just hidden in the UI
- A Review tab resurfaces previously learned vocabulary on a simple spaced-repetition schedule computed from VocabLearned

## Style
Grown-up and trustworthy: warm white base, navy #1E293B + amber accents, rounded-2xl cards, Inter font, generous spacing, calm focused lessons. Mobile-first.

Seed one language (Spanish): 2 courses, ~8 lessons, 5–7 exercises each spanning all exercise types; one demo user with a 4-day streak.
Make the ExercisePlayer the central abstraction - every type renders through it from the exercises table.

Build a production-quality Babbel-style language-learning app. Mobile-first PWA now, React Native port later - structure shared logic accordingly. The content model is the heart of this app; design it well.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth, Storage for lesson audio/images
- Stripe Billing: 3/6/12-month prices + lifetime, 7-day trial, customer portal
- Zustand for the in-lesson player state; Zod for the exercise schema and every boundary

## Critical architecture
- Exercise engine: a discriminated-union Exercise type (vocab | choice | fill | match | listen) with a single ExercisePlayer that switches on type. New exercise types are data + a renderer, never a new flow. This is the most important abstraction - get it right first.
- Content catalog as data: languages → courses → lessons → exercises, all ordered, all editable from an admin; the app is a thin player over this catalog plus user progress.
- Entitlements: free users only get is_free lessons; the server must not return locked lesson/exercise content to unentitled clients. Check profiles.is_premium server-side; RLS enforces it.
- Spaced repetition: a review queue computed server-side from VocabLearned with an SM-2-style schedule, so review state can't be gamed and survives device changes.

## Schema
profiles (id, current_language, reason, is_premium, trial_ends_at, streak_count, last_lesson_date), languages, courses (language_id, level, order_index), lessons (course_id, order_index, is_free), exercises (lesson_id, type, prompt, options jsonb, correct_answer, audio_path, order_index), progress (user_id, lesson_id, completed_at), vocab_learned (user_id, word, ease, due_at). RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth flows
2. Exercise engine + ExercisePlayer with all five types against seeded data (prove the engine before anything else)
3. Learning path UI: courses, lesson nodes, completion, locked states
4. Onboarding → paywall: language/reason/level wizard, Stripe Checkout with multi-length plans + trial, webhook flips is_premium
5. Progress, streaks (server-side), words-learned, profile
6. Spaced-repetition review queue and a Review session mode
7. PWA + an admin for catalog CRUD; optional LLM exercise generation behind a server route

## Quality bar
- Adding a new exercise type touches the union, a renderer and seed data - nothing else
- Locked content never reaches free clients; verify with RLS tests
- Conversion + retention events to PostHog (lesson_completed, trial_started, day7_retained)

Start with step 1 and show me the Exercise union + RLS policies before moving on.

Design the complete UI for a Babbel-style language-learning app called Linguaro. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: grown-up and trustworthy, not childish - warm white base, confident navy (#1E293B) with amber accents, rounded-2xl cards, clean Inter font, generous calm spacing.

## Screens

### 1. Marketing landing
- Hero with the headline 'Actually learn to speak Spanish.', a clean lesson-preview mockup, a language picker row of flag chips, email capture with an amber CTA
- Three benefit cards (Built by linguists, Real conversations, Learn in 15 min/day), pricing cards (3-month / 6-month / 12-month with per-month price, 12-month badged 'Best value'), FAQ accordion, footer

### 2. Onboarding (3 steps)
- Progress dots, one question per screen (language → reason → level) with large tappable option cards, smooth transitions; final paywall screen with the three plan cards, a benefit checklist, and 'Start 7-day free trial'

### 3. Learning path
- A vertical path of circular lesson nodes connected by a line, grouped under course headers (Beginner 1, Beginner 2), completed nodes filled, current node highlighted, locked nodes with a small lock; a slim top bar with streak flame and words-learned count

### 4. Lesson player
- Full-screen single-exercise view with a thin top progress bar and a close X. Show several exercise types: a vocab card (word + illustration + audio button), a multiple-choice card, a fill-in-the-blank with an inline input, and a match-pairs grid. Bottom 'Check' button that turns green/red with feedback, then 'Continue'
- End-of-lesson summary: words learned, accuracy, a satisfying completion animation

### 5. Profile & paywall modal
- Profile: streak calendar, words learned, course progress bars, manage subscription row
- Paywall modal: three plan cards (12-month preselected with 'Best value'), benefit checklist, 'Start 7-day free trial', restore-purchase link

- Bottom tab bar (Learn, Review, Profile)

### 6. Review session
- A spaced-repetition review mode reached from the Review tab: a focused card stack of previously learned vocabulary due today, with the same Check/Continue rhythm and a short 'all caught up' celebration when the queue is empty

### 7. Paywall modal
- A glass card over a blurred lesson preview with the three plan cards (12-month preselected, badged 'Best value'), a benefit checklist, and a 'Start 7-day free trial' CTA

Fully responsive, mobile-first since this is primarily a phone experience. Use realistic Spanish content: words like 'la cuenta', 'reservar', short dialogues, believable lesson titles ('At the restaurant').

Build a structured language-learning app (Babbel model) called Linguaro.

## Entities
- Language: name, flagEmoji
- Course: language reference, title, level, orderIndex
- Lesson: course reference, title, orderIndex, isFree (boolean)
- Exercise: lesson reference, type (vocab/choice/fill/match/listen), prompt, options (JSON), correctAnswer, audioUrl, orderIndex
- Progress: user, lesson reference, completedAt
- VocabLearned: user, word, learnedAt
- UserProfile: currentLanguage, reason, isPremium, trialEndsAt, streakCount

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: plays lessons where isFree = true; locked lessons open the paywall
- Premium user: full curriculum, review mode, all languages
- Admin: full CRUD on languages, courses, lessons and exercises; dashboard (users, premium count, lesson completions)

## Pages
1. Landing: hero, language picker, pricing (3/6/12-month plans, 12-month best value, with trial), FAQ
2. Onboarding after signup: language → reason → level, ending on the paywall with 'Start 7-day free trial'
3. Learning path: courses with lesson nodes, completion and locked states, streak in the header
4. Lesson player: a single shared player that renders every exercise type from the Exercise entity, with instant feedback and an end-of-lesson summary; completion updates Progress, VocabLearned and streak
5. Profile: streak, words learned, course progress, subscription status
6. Admin: CRUD for languages/courses/lessons/exercises and a dashboard

## Rules
- Free users only access isFree lessons; locked lesson/exercise content must not be served to free users
- A lesson completes when all exercises are answered; streak +1 on first completion each day, reset after a missed day
- Trial sets isPremium true and trialEndsAt = now + 7 days; after expiry the user reverts to free (check on login)

## Look & feel
Grown-up, trustworthy theme: warm white background, navy + amber accents, rounded cards, generous spacing, calm focused lessons. Mobile-first.

Seed one language (Spanish) with 2 courses, ~8 lessons and 5–7 exercises each across all exercise types, one admin user and one demo user with a 4-day streak.