Lecția 1, momentul ejectului

• Declanșator 1, structura e bună dar designul pare generic.

• Declanșator 2, ai nevoie de o animație complexă pe care Lovable n-o poate scrie.

• Declanșator 3, performanța e sub 85 la Lighthouse.

• Declanșator 4, ai nevoie de o integrare non-trivială.

• Declanșator 5, ai depășit 5 iterații și Lovable se învârte în cerc.

• Fă eject, pur și simplu. Ai încredere în judecata ta.

Lecția 2, setup-ul după eject

• Clonează repo-ul GitHub creat de Lovable.

• Deschide-l în Cursor.

• Adaugă CLAUDE.md în root cu instrucțiuni specifice proiectului.

• Rulează npm install, npm run dev.

• Verifică că totul funcționează local înainte să schimbi ceva.

# Project rules

## Stack (from Lovable)
- Next.js 15, App Router
- Tailwind v4 + shadcn/ui
- Supabase (auth + DB)
- Stripe (Checkout + webhooks)
- Vercel (hosting)

## Conventions
- TypeScript strict.
- Server components by default. 'use client' only when needed.
- Tailwind utility classes only, no inline styles.
- All forms use react-hook-form + zod.
- Animation respects prefers-reduced-motion.

## Commands
- npm run dev
- npm run build
- npm run lint
- npx supabase db push (for migrations)

## Brand
- Primary, hsl(225 18% 5%) on hsl(0 0% 98%)
- Accent, hsl(220 100% 65%)
- Display, Space Grotesk
- Body, Inter
- Mono, JetBrains Mono

## What's done from Lovable
- Hero, features, pricing, FAQ, footer
- Auth flow (magic link)
- Stripe Checkout for 3 tiers

## What's TODO (polish)
- Tighten typography (line-heights, letter-spacing on display)
- Refine palette to brand HSL
- Add hero animation (subtle fade-in stagger)
- Audit Lighthouse, hit 90+ desktop, 80+ mobile
- Reduced motion fallback
- Polish 404 page
- Custom favicon + og:image

Lecția 3, checklist-ul de șlefuire

• Tipografie, fixează fonturile de display + body, setează line-height-urile și letter-spacing-urile.

• Paletă, înlocuiește genericul cu tokenuri HSL de brand.

• Spațiere, strânge marginile, folosește consecvent o scală de 8pt.

• Motion, adaugă maximum 1 până la 3 animații semnătură.

• Imagini, înlocuiește stock-ul cu fotografie reală sau generată cu AI.

• Texte, rescrie hero-ul + features în vocea clientului tău.

• Lighthouse, rulează, repară cele mai grave 3 probleme.

• Accesibilitate, text alt, focus rings, reduced motion.

• Șlefuiește pagina 404, hero-ul, footer-ul.

• Favicon custom, og:image, manifest.

Lecția 4, cum lucrezi cu Cursor + Claude Code

• Folosește AI-ul inline din Cursor pentru editări mici, 'rescrie textul ăsta din hero'.

• Folosește Claude Code în terminal pentru refactorizări pe mai multe fișiere, 'strânge tipografia pe toate paginile'.

• Folosește chat-ul din Cursor pentru schimbări mari de arhitectură, 'adaugă o rută /blog cu Sanity'.

• Combină-le, Cursor pentru intervenții chirurgicale, Claude Code pentru operații pe mai multe fișiere.

Lecția 5, cum refactorizezi fără să strici

• Creează întotdeauna un branch pentru fiecare sesiune de șlefuire.

• Rulează npm run build înainte de merge în main.

• Rulează Lighthouse înainte și după fiecare sesiune, notează scorurile.

• Dacă se strică ceva, fă revert. E mai ușor decât debugging-ul.

• Fă commituri mici, descrie în mesaj ce s-a schimbat.