How to Clone Headspace

Create a Headspace-style meditation learning app called Tangelo as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Course-led meditation: multi-day courses with sequential daily unlocks (the 10-day 'Foundations' course is the spine), a short Daily Drop, SOS quick sessions, streaks, and a per-seat Teams plan. Freemium - Foundations days 1–3 free, the rest premium with a 14-day trial.

## Screens
- Marketing landing: cream hero with a friendly orange blob illustration, 'Learn to meditate in 10 days.', employer logo strip, pricing (personal monthly/yearly toggle with yearly highlighted, plus a Teams card 'from $6/seat/month'), FAQ accordion
- Onboarding quiz: 4-step wizard (goal, experience, session length, reminder) ending in a paywall screen with trial CTA
- Home (authed): 'Continue: Foundations - Day 4' card with progress ring, Daily Drop card, course shelves by category with lock badges and progress rings
- Course detail: illustrated header, day-by-day list with done/today/locked states, completion ring, start button on today's session
- Player: warm gradient full-screen, length picker (3/10/20 min) shown before playback, play/pause, scrubber, completion celebration that advances the course
- SOS: three oversized buttons (Panic, Anger, Overwhelm) that start a 3-minute session in one tap
- Profile: streak, total minutes, completed-course badges, buddy card (current days, nudge), manage subscription
- Teams admin (org_admin role): org creation, member invite list, seats used/limit, anonymized weekly usage bar chart
- Content admin (admin role): course and session CRUD with day numbers, audio URLs per length, is_free toggle

## Prisma schema
User (id, email, name, goal, experienceLevel, preferredLength, isPremium, trialEndsAt, streakCount, lastSessionDate, orgId, role), Course (id, title, slug, description, category, coverUrl, level, daysCount, prerequisiteCourseId), CourseSession (id, courseId, dayNumber, title, description, audioUrl3, audioUrl10, audioUrl20, isFree), CourseProgress (userId, courseId, currentDay, completedAt), Completion (userId, courseSessionId, lengthChosen, completedAt, moodBefore, moodAfter), Organization (id, name, seatLimit, adminUserId), Buddy (userId, buddyId, status)

## Logic
- Sequential unlock enforced server-side: a session is playable only when dayNumber <= currentDay for that user+course; completing today's session increments currentDay by exactly 1 and updates the streak (one per calendar day, reset on gaps)
- Completing the final day stamps CourseProgress.completedAt and awards a badge; courses with an unmet prerequisite render locked
- HTML5 audio with a persistent mini-player bar (player state in React context); the length picker swaps which audio URL loads
- Free tier: Foundations days 1–3 + Daily Drop; other plays open a paywall modal; 'Start free trial' sets isPremium with trialEndsAt = now + 14 days (mock checkout, structured for Stripe later)
- Org membership: users whose email is invited to an org with free seats get isPremium via the org; org admin dashboard shows only aggregate counts

## Style
Warm, playful, illustrated: cream #FFF6EC background, tangerine #FF7A1A primary, dusty blue #5C7CFA accents, blobby shapes, rounded-2xl, Quicksand headings + Inter body, bouncy 250ms transitions. Light theme, mobile-first with a bottom tab bar (Home, Courses, SOS, Profile).

Seed: the 10-day Foundations course, Managing Stress and Deep Focus (7 days each), 3 Daily Drops, sample royalty-free audio URLs, one org (Acme Inc, 10 seats, 5 members), demo user on Foundations Day 4 with a 4-day streak and one buddy.

Build a production-quality Headspace-style meditation learning app. Mobile-first PWA now, React Native port later - keep course/entitlement logic framework-agnostic.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Apple/Google OAuth), Storage for audio/covers
- Stripe Billing: consumer monthly + yearly (14-day trial on yearly) AND a per-seat Teams price - two distinct products from day one
- Zustand for the audio-player store; Zod everywhere inputs cross a boundary

## Critical architecture
- Course progression is server-authoritative: a Postgres function complete_session(user, course_session) validates that the session is the user's current unlocked day, records the completion, increments current_day, updates the streak, and stamps course completion - all in one transaction. Clients never write progress directly
- Entitlements have three sources: active Stripe consumer sub, trial window, or org seat. Resolve them in one is_entitled(user) function used by both the API and signed-URL generation - premium audio URLs are signed server-side only for entitled users
- Org seats: organizations.seat_limit checked transactionally on member join; org admins get aggregate views via SQL views that exclude user-level rows (enforced by RLS, not application code)
- AudioPlayerProvider: single <audio> element, MediaSession lock-screen controls, length-variant switching reloads source while preserving position percentage

## Schema
profiles (id, goal, experience_level, preferred_length, is_premium, trial_ends_at, streak_count, last_session_date, org_id, role), courses (id, title, slug, category enum, cover_path, level, days_count, prerequisite_course_id), course_sessions (id, course_id, day_number, title, audio_path_3, audio_path_10, audio_path_20, is_free), course_progress (user_id, course_id, current_day, completed_at), completions (user_id, course_session_id, length_chosen, completed_at, mood_before, mood_after), organizations (id, name, seat_limit, stripe_subscription_id), org_invites (org_id, email, accepted_at), buddies (user_id, buddy_id, status). RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + RLS + the complete_session and is_entitled functions with unit tests (skip-ahead attempts, double-completion same day, midnight rollover, org seat overflow)
2. Content catalog: home with continue-card + shelves, course detail with day states - server components, signed URLs for entitled playback
3. Audio player: provider, length picker, full-screen player, mini-player, MediaSession, completion celebration wired to complete_session
4. Onboarding quiz → paywall: wizard stores answers, Stripe Checkout (trial on yearly), webhook updates entitlement; SOS page with instant-start sessions
5. Teams: org creation with per-seat Stripe subscription (quantity = seats), email invites, admin dashboard reading only the aggregate views
6. Profile & buddies: streaks, badges, buddy invite/nudge with rate limiting; content admin CRUD with direct-to-storage uploads
7. PWA: manifest, offline shell, cache the free Foundations sessions with a service worker

## Quality bar
- It must be impossible to play or complete a locked day via the API - prove it with tests, not UI hiding
- Audio keeps playing on screen lock (test iOS Safari quirks, document workarounds)
- PostHog events: course_started, day_completed, course_completed, trial_started, seat_activated - course completion rate is the headline metric
- Seed: Foundations (10 days), 2 themed courses, 3 Daily Drops, 1 org with 5 members, demo user mid-course

Start with step 1 and show me the RLS policies and the complete_session function before moving on.

Design the complete UI for a Headspace-style meditation learning app called Tangelo. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm, playful and illustrated - cream (#FFF6EC) background, tangerine (#FF7A1A) primary, dusty blue (#5C7CFA) and soft pink accents, blobby organic shapes, rounded-2xl cards, Quicksand headings with Inter body, bouncy gentle motion. This should feel like a kind teacher, not a dark moody spa - deliberately the opposite of Calm-style apps.

## Screens

### 1. Marketing landing
- Hero: cream background with a large friendly orange blob character sitting cross-legged (CSS/SVG shapes are fine), headline 'Learn to meditate in 10 days.', subline about courses not playlists, tangerine CTA
- 'Trusted at work' grayscale logo strip, three feature cards (Courses, SOS, Sleep) with blob icons, pricing section: personal monthly $12.99 / yearly $69.99 toggle with SAVE badge plus a distinct Teams card ('from $6/seat/month' with a Contact CTA), FAQ accordion, warm footer

### 2. Onboarding quiz (4 steps)
- Progress dots, one big question per screen ('What brings you to Tangelo?'), tappable option cards with blob emoji icons, slide transitions, final paywall: blurred home preview behind a warm card listing benefits, 'Start 14-day free trial' CTA, small 'continue with free basics' link

### 3. Home
- Greeting with mini mascot ('Morning, Sam ☀️') and streak pill
- Dominant 'Continue your course' card: Foundations cover illustration, 'Day 4 of 10', progress ring, tangerine play button
- 'Daily Drop' card with today's 3-minute session, then horizontal course shelves (Stress, Focus, Sleep) - cards with illustrated covers, progress rings or lock badges
- Bottom tab bar (Home, Courses, SOS, Profile), tangerine active state

### 4. Course detail
- Illustrated header with category color wash, title + description, overall completion ring
- Vertical day list: Day 1–2 with orange checkmarks, Day 3 highlighted 'Today' with play button, Days 4–10 with lock icons and lowered opacity; a small 'Why one day at a time?' explainer card at the bottom

### 5. Player
- Pre-play sheet: session title, 'Day 4', length picker as three pill buttons (3 / 10 / 20 min)
- Playing: warm sunrise gradient (cream → tangerine → soft pink), slowly breathing blob animation center, thin progress bar, oversized play/pause, ±15s buttons
- Completion: confetti of blob shapes, 'Day 4 complete', streak +1 toast, 'Day 5 unlocks tomorrow' card

### 6. SOS
- Three stacked oversized buttons with distinct warm colors: 😮‍💨 Panic, 😤 Anger, 🌊 Overwhelm - each with '3 min' caption; tapping starts immediately

### 7. Profile & Teams admin
- Profile: avatar, stat cards (streak, total minutes, courses completed), badge shelf with illustrated course badges, buddy card showing both avatars and current days with a nudge button, manage-subscription row
- Teams admin: seats summary card ('5 of 10 seats active'), member invite input with chips, anonymized weekly sessions bar chart, billing summary row

Fully responsive, mobile-first. Use realistic content: course names like 'Foundations', 'Managing Stress', 'Deep Focus'; session titles like 'Noting thoughts', 'Body scan basics'; days and streaks mid-progress so states are visible.

Build a course-based meditation app (Headspace model) called Tangelo.

## Entities
- Course: title, description, category (foundations/stress/focus/sleep), coverImage, level, daysCount, prerequisiteCourse (optional reference)
- CourseSession: course reference, dayNumber, title, description, audioFile3min, audioFile10min, audioFile20min, isFree (boolean)
- CourseProgress: user, course reference, currentDay, completedAt (nullable)
- Completion: user, courseSession reference, lengthChosen, completedAt, moodBefore, moodAfter
- Organization: name, seatLimit, adminUser; OrgInvite: organization reference, email, acceptedAt
- Buddy: user, buddy reference, status (pending/accepted)
- UserProfile: goal, experienceLevel, preferredLength, isPremium, trialEndsAt, streakCount, lastSessionDate, organization (optional reference)

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: plays Foundations days 1–3 and the Daily Drop; everything else shows a lock and opens the paywall
- Premium user (paid, trialing, or holding an org seat): plays all courses, SOS and sleep content
- Org admin: invites members up to seatLimit, sees anonymized usage aggregates only - never individual member activity
- Admin: full CRUD on courses and sessions, dashboard (users, premium count, course completion rates)

## Pages
1. Landing: warm illustrated hero, 'Learn to meditate in 10 days.', personal pricing (monthly $12.99 / yearly $69.99 with 14-day trial) plus a Teams card (from $6/seat/month), FAQ
2. Onboarding quiz after signup: goal → experience → session length → reminder, ending on the paywall with 'Start 14-day free trial'
3. Home: continue-course card with progress ring, Daily Drop card, course shelves by category with locks and progress
4. Course detail: day list showing done / today / locked states; only today's session is playable
5. Player: pick length (3/10/20 min), play with progress bar; completing advances the course by one day, updates the streak, and shows a celebration
6. SOS: three buttons (Panic, Anger, Overwhelm) that instantly start a 3-minute session
7. Profile: streak, total minutes, course badges, buddy section (invite, see each other's current day, nudge), subscription status
8. Teams admin: seat usage, member invites by email, anonymized weekly activity chart
9. Admin: course and session CRUD with file uploads

## Rules
- Sequential unlock: users can only play the session whose dayNumber equals their currentDay (or replay earlier days); completing today's session increments currentDay by exactly 1 - skipping ahead must be impossible
- Completing a course's final day stamps completedAt and awards a profile badge; courses with an unmet prerequisite stay locked
- Streak +1 on first completed session each calendar day (SOS counts); reset after a missed day
- Trial sets isPremium true and trialEndsAt = now + 14 days; on login, expire lapsed trials; users attached to an organization with open seats are premium while the seat is active
- Org admins may never see which member did which session - aggregates only

## Look & feel
Warm cream background, tangerine orange primary, dusty blue and pink accents, blobby illustrated shapes, rounded cards, friendly chunky typography. Light, playful and encouraging - a kind teacher, not a moody spa. Mobile-first.

Seed with the 10-day Foundations course (days 1–3 free), Managing Stress and Deep Focus (7 days each), 3 Daily Drop sessions with placeholder audio, one organization (10 seats, 5 members), one admin, and a demo user on Day 4 of Foundations with a 4-day streak and one buddy.