educatifsjouets-ops/DARIJA-LEARN

LEARN MOROCCAN DARIJA # DarijaLearn — Phase 7 Live-tutor platform for Moroccan Darija. Lean MVP, built phase by phase. **Phase 7 status: ✅ UI improvement — shared layout, responsive design, polish** --- ## What's NEW in Phase 7 This phase didn't add features — it polished what was there. The biggest win: **every page used to declare its own header inline** (a Logo + nav + buttons). That's now factored out into a single shared component. ### New shared components - ✅ **` `** — sticky, backdrop-blurred, responsive - Desktop: nav links + user menu dropdown (avatar with initials, role pill, dashboard / bookings / profile / sign out) - Mobile: hamburger → full-screen drawer with nav links and sign-in/up CTAs - Active route highlighting via `usePathname()` - Auth-state aware: switches between Sign in/Get started buttons and the user menu - Reacts to login/logout in real time via a custom `auth-change` event (no Context, no prop drilling) - Locks body scroll when mobile drawer is open - Closes menu on route change - Closes user dropdown on outside click - ✅ **` `** — quiet, two-column on desktop, stacked on mobile, with platform/account links - ✅ **` `** — extracted so the Darija/Learn wordmark is consistent everywhere ### Improved component classes (in `globals.css`) - ✅ Added **`.btn-dark`**, **`.card`**, **`.card-interactive`**, **`.pill`** + status variants (`.pill-pending`, `.pill-confirmed`, etc.), **`.eyebrow`** for those small uppercase section labels - ✅ Buttons now have proper `:focus-visible` rings (keyboard accessibility) - ✅ All inputs/buttons have a consistent disabled style ### Page-by-page upgrades - ✅ **Landing page** — added "How it works" 3-step section, redesigned CTA banner with terracotta accents, all sections fully responsive (mobile px-4, desktop px-6, font sizes scale) - ✅ **Tutors page** — uses shared Navbar/Footer, hero text scales 4xl→5xl→6xl across breakpoints - ✅ **Tutor profile editor** — wrong-role state now uses Navbar/Footer - ✅ **Booking form** — repl …