Secțiunile obligatorii

Secțiune	Directivă de animație
Hero	Reveal cu timeline GSAP + 3D sau shader ca piesă centrală.
Despre	Secțiune scrolly fixată, scrub la o mini-poveste în 3 pași.
Lucrări selectate (3 până la 5 piese)	Galerie condusă de drag sau hover, Framer Motion.
Proces sau abordare	Scroll sticky cu reveal progresiv de bullet-uri.
Testimoniale	Rotire automată cu parallax subtil.
Contact / CTA	Lottie sau micro-interacțiune jucăușă la submit.
Footer	Linie subtilă de particule sau val animat.

Planul de build, zi cu zi

Ziua	Rezultat
Ziua 1, Brief + trecere de design	Wireframe în Figma. Fixează tipografia, paleta, vibe-ul.
Ziua 2, Schelet	Toate secțiunile construite static, doar Tailwind. Deploy pe preview Vercel.
Ziua 3, Smooth scroll + reveal-uri	Reveal-uri cu Lenis + ScrollTrigger + Intersection Observer.
Ziua 4, Hero 3D / shader	R3F sau Spline integrat. Comprimat, code-split.
Ziua 5, Mișcare UI + gesturi	Șlefuire cu Framer Motion, galerie, tranziții.
Ziua 6, Trecere de performanță	Audit Lighthouse. Lucru la imagini și fonturi. Trecere pe bundle.
Ziua 7, Șlefuire + depunere	Reduced-motion. Trecere pe mobil. Livrează. Depune la Awwwards.

Folosește Claude desktop pentru discuții de design, referințe și prompturi către Sonnet.

Folosește Claude Code (claude în terminal) pentru orice refactorizare pe mai multe fișiere.

Trece Claude prin output-ul Lighthouse, lipește JSON-ul și întreabă: 'Care sunt cele 3 fix-uri cu cel mai mare impact?'

🥉 QUEST BRONZ +200 XP

📐Ziua 1 până la Ziua 3, design + schelet + smooth scroll

Obiectiv. Ajunge la 'site static deployat cu smooth scroll și reveal-uri' în 3 zile.

Pași

Wireframe + fixează paleta/tipografia în Figma.
Construiește scheletul static cu toate secțiunile.
Adaugă Lenis. Adaugă reveal-on-view cu Intersection Observer la fiecare secțiune.
Deploy pe preview Vercel. Trimite URL-ul la 3 prieteni pentru feedback timpuriu.

Gata când…

🥈 QUEST ARGINT +500 XP

🎬Ziua 4 până la Ziua 5, hero 3D / shader + mișcare UI

Obiectiv. Site-ul trece de la 'ok' la 'wow'.

Pași

Alege R3F sau Spline. Construiește momentul 3D din hero.
Comprimă, code-split, lazy-load.
Adaugă un pin ScrollTrigger la o secțiune de la mijlocul paginii, scrub la o poveste scurtă.
Adaugă gesturi Framer Motion la galerie.
Adaugă o înfloritură Lottie sau shader într-un singur loc (val în footer sau formular de contact).

Gata când…

🥇 QUEST AUR +800 XP

👑Ziua 6 până la Ziua 7, livrare + monetizare

Obiectiv. Treci linia de finish. Folosește site-ul ca să prinzi următorul client plătitor.

Pași

Rulează o trecere completă Lighthouse. Atinge 90+ pe desktop, 80+ pe mobil.
Adaugă tratare reduced-motion la fiecare element animat.
Depune la Awwwards. Depune la CSSDA. Depune la Godly.website.
Trimite email sau DM la 20 de prospecți-clienți ideali, cu noul site drept portofoliu.
Prinde 1 client la 5.000+ USD folosind noul portofoliu.
Înregistrează un Loom de 60 de secunde 'making of' și postează-l în comunitate.

Gata când…