How to Clone Calm

Create a Calm-style meditation and sleep app called Stillwater as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Subscription audio-content app: guided meditations, sleep stories, soundscapes. Freemium - some free sessions, the rest behind a premium plan with 7-day trial.

## Screens
- Marketing landing: calming gradient hero, pricing (monthly/yearly toggle, yearly highlighted with 'save 60%'), testimonials, FAQ accordion
- Onboarding quiz: 4-step wizard (goal, experience, session length, reminder time) ending in a paywall screen with trial CTA
- Home (authed): featured 'Daily Still' card, category rows with horizontal scroll (Sleep, Meditate, Soundscapes, Focus), lock badges on premium items
- Player page: immersive full-screen with blurred art background, play/pause, ±15s, scrubber, sleep timer dropdown, favorite heart
- Library: filterable grid by category and duration
- Profile: streak calendar, total minutes, favorites, manage subscription
- Admin (role-gated): session CRUD table with audio URL, cover URL, category, is_free toggle

## Prisma schema
User (id, email, name, goal, isPremium, trialEndsAt, streakCount, lastSessionDate), Session (id, title, description, category, narrator, durationSeconds, coverUrl, audioUrl, isFree, playsCount), Program (id, title, coverUrl) with ProgramSession (programId, sessionId, dayNumber), Progress (userId, sessionId, completedAt), Favorite (userId, sessionId)

## Logic
- HTML5 audio with a persistent mini-player bar that survives navigation (player state in a React context)
- Completing ≥80% of a session marks it complete and updates the streak (one increment per day, reset on gaps)
- Locked content opens a paywall modal; 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout is fine, structure it so Stripe can replace it)
- Reminder time stored per user (UI only, no real push needed)

## Style
Dark, dreamy: midnight blue #0B1026 base, purple-pink aurora gradients, glassmorphism cards, rounded-3xl, Lora for headings + Inter body, slow fade/scale transitions. Mobile-first.

Seed: 16 sessions across 4 categories with unsplash covers and a sample royalty-free audio URL, 2 programs of 5 sessions, demo user with a 4-day streak.

Build a production-quality Calm-style meditation app. Mobile-first PWA now, React Native port later - structure shared logic accordingly.

## 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: monthly + yearly prices, 7-day trial on yearly, customer portal for cancellation
- Zustand for the global audio-player store; Zod everywhere inputs cross a boundary

## Critical architecture
- AudioPlayerProvider: single <audio> element app-wide; mini-player persists across route changes; MediaSession API for lock-screen controls; sleep timer implemented with a cancellable setTimeout that fades volume out over 10s
- Entitlements: middleware checks a JWT claim or profiles.is_premium - premium audio URLs must be signed Supabase storage URLs generated server-side ONLY for entitled users (never expose raw premium URLs to free clients)
- Streak logic server-side in a Postgres function (increment_streak) called on session completion - clients can't fake streaks

## Schema
profiles (id, goal, is_premium, trial_ends_at, streak_count, last_session_date, reminder_time), sessions (id, title, slug, description, category enum, narrator, duration_seconds, cover_path, audio_path, is_free, plays_count), programs + program_sessions (day_number), progress (user_id, session_id, seconds_listened, completed_at), favorites. RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + RLS policies, auth flows
2. Content catalog: home with category rows, library grid, session detail - server components, signed URL generation for entitled playback
3. Audio player: provider, full-screen player route, mini-player, MediaSession, sleep timer
4. Onboarding quiz → paywall: multi-step client wizard, results stored on profile, paywall screen with Stripe Checkout (trial on yearly), webhook handler updates is_premium
5. Streaks & stats: completion tracking at 80% listened, streak function, profile page with calendar heat map (build it with CSS grid, no heavy chart lib)
6. Admin: /admin route gated by role, session CRUD with direct-to-storage uploads
7. PWA: manifest, offline shell, cache free audio with a service worker

## Quality bar
- Lighthouse PWA installable; audio keeps playing when the screen locks (test on iOS Safari - known quirks with autoplay policies, document the workaround)
- Paywall conversion events to PostHog (trial_started, trial_converted, paywall_dismissed)
- Seed script with 16 sessions, 2 programs; use small public-domain audio files

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

Design the complete UI for a Calm-style meditation and sleep app called Stillwater. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: dark and dreamy - midnight blue (#0B1026) base, aurora purple-pink gradients, glassmorphism cards, rounded-3xl, Lora serif headings with Inter body, slow gentle transitions.

## Screens

### 1. Marketing landing
- Full-viewport hero with animated gradient background, serif headline 'Sleep more. Stress less.', subline, email capture with glowing CTA button
- Logos/social-proof strip, three feature cards with soft icons, pricing toggle (monthly $12.99 / yearly $59.99 with SAVE 60% badge), FAQ accordion, dark footer

### 2. Onboarding quiz (4 steps)
- Progress dots top, one large question per screen ('What brings you to Stillwater?'), big tappable option cards with emoji icons, smooth slide transitions, final paywall screen: blurred app preview behind a glass card listing premium benefits with 'Start 7-day free trial' CTA and tiny 'or continue with limited access' link

### 3. Home
- Greeting header ('Good evening, Sam 🌙') with streak flame pill
- Large featured 'Daily Still' card (full-width, cover photo, play button overlay, duration chip)
- Horizontal scroll rows: Sleep Stories, Meditations, Soundscapes, Focus - cards with cover art, lock icon on premium, narrator + duration caption
- Bottom tab bar (Home, Library, Player, Profile) with soft glow on active

### 4. Full-screen player
- Blurred cover art filling the background, sharp cover centered, title + narrator, thin progress bar with elapsed/remaining, oversized play/pause with ±15s flanking, bottom row: sleep timer (popover with 5/10/30/60 min), favorite heart, AirPlay icon

### 5. Profile & stats
- Avatar header, three stat cards (current streak, total mindful minutes, sessions completed), monthly calendar heat map of practice days, favorites list rows, 'Manage subscription' row with chevron

### 6. Paywall modal
- Glass card over blurred content: benefit checklist, plan selector (yearly preselected with badge), trial timeline graphic (Today → Day 5 reminder → Day 7 charged), primary CTA, restore-purchase link

Fully responsive; design mobile-first since this is primarily a phone experience. Use realistic content: session titles like 'Rain on a Tin Roof', 'Letting Go of the Day', narrators with real-sounding names, durations 8–45 min.

Build a meditation and sleep subscription app (Calm model) called Stillwater.

## Entities
- Session: title, description, category (sleep/meditate/soundscape/focus), narrator, durationSeconds, coverImage, audioFile, isFree (boolean), playsCount
- Program: title, description, coverImage; ProgramItem: program reference, session reference, dayNumber
- Progress: user, session reference, completedAt, secondsListened
- Favorite: user, session reference
- UserProfile: goal (sleep/anxiety/focus), isPremium, trialEndsAt, streakCount, lastSessionDate, reminderTime

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: plays sessions where isFree = true; sees locked badges elsewhere; clicking locked content opens paywall
- Premium user: plays everything, can download/favorite
- Admin: full CRUD on sessions and programs, sees a dashboard (total users, premium count, plays per session)

## Pages
1. Landing: hero, pricing (monthly $12.99 / yearly $59.99 with trial), FAQ
2. Onboarding quiz after signup: goal → experience → session length → reminder time, ending on the paywall with 'Start 7-day free trial'
3. Home: featured daily session, rows by category, streak counter in header
4. Player: cover art, play/pause, progress bar, sleep timer select, favorite button; completing a session records Progress and updates streak (one per day)
5. Library: filter by category and free/premium
6. Profile: streak, total minutes, favorites, subscription status
7. Admin: sessions table with create/edit forms and file uploads

## Rules
- Streak +1 on first completed session each day; reset to 1 after a missed day
- Trial sets isPremium true and trialEndsAt = now + 7 days; after expiry user reverts to free (check on login)
- Premium audio must not be playable for free users

## Look & feel
Dark dreamy theme: midnight blue background, purple-pink gradient accents, glass cards, rounded corners, serif headings. Mobile-first.

Seed with 16 sessions across the 4 categories (placeholder audio + nice cover images), 2 programs, one admin user and one demo user with a 4-day streak.