Modvia Academy | 2026
15 minute de planificare economisesc 3 ore de refăcut. Scrie aceste patru paragrafe înainte să atingi o unealtă.
| Paragraf | Ce să scrii |
|---|---|
| Cine | Baristas de acasă independenți care beau deja cafea bună și s-au plictisit de boabele de la supermarket. |
| Ce | Un abonament care livrează lunar boabe de espresso single-origin. Pauză oricând. |
| De ce suntem diferiți | Prăjitori mici, ferme cu nume, un card de degustare cu fiecare pungă, mai ieftin decât obiceiul de cafenea boutique. |
| Senzație | Linear întâlnește Aesop. Cinematic, cald, sigur pe sine. Temă întunecată, accente crem, fotografie cinematică. |
O pagină, 7 secțiuni, în această ordine:
| # | Scopul secțiunii |
|---|---|
| 1. Hero | Pungă de cafea 3D plutitoare, titlu, subtitlu, CTA principal. |
| 2. Problemă | "Espresso-ul de la supermarket e un compromis." O propoziție-cârlig. Animație subtilă. |
| 3. Cum funcționează | 3 pași: alegi profilul → livrare lunară → te bucuri. |
| 4. Boabele lunii | Card cu prăjitorul lunii, note de degustare, hartă de origine. |
| 5. Dovadă socială | 3 testimoniale scurte + o bandă de logo-uri de presă. |
| 6. Prețuri | Un singur plan. Simplu. Callout de anulare oricând. |
| 7. FAQ + CTA | 4 întrebări. Butonul final de abonare. |
Proiectează o scenă 3D de hero pentru Halo Coffee în Spline. Livrează: 1) Cameră: unghi, senzație de focal length, coordonate de poziție dacă e posibil 2) Un obiect de hero (nu o pungă de cafea foto-realistă, o formă 3D simbolică) 3) Lighting: key + fill + rim, cu sugestii de culori hex (crem cald și navy profund) 4) O interacțiune de mouse-parallax care nu provoacă greață 5) O mișcare legată de scroll (obiectul se rotește 30° cât timp utilizatorul dă scroll pe primii 100vh) 6) Indicii de material: ceramică mată, grain subtil, nu lucios Preferință: minimalist, premium, nu caricatural.
Întâi un mega-prompt, apoi rafinează în chat. Copiază tot acest bloc în Lovable:
Construiește un site de marketing de o pagină pentru 'Halo Coffee', un abonament premium de espresso single-origin. Stack: Next.js 14 (App Router), TypeScript, Tailwind, shadcn/ui, Framer Motion. Design system: - Temă întunecată: fundal #0A0908, accente de text crem #F2E3C2 - Font: 'Fraunces' pentru display, 'Inter' pentru body - Cinematic, whitespace generos, overlay subtil de grain pe hero - Toată mișcarea folosește cubic-bezier(0.22, 1, 0.36, 1), 600ms default Instalează și folosește @splinetool/react-spline. Hero-ul folosește URL-ul Spline: [LIPEȘTE AICI URL-UL TĂU SPLINE] Pune un overlay cu gradient întunecat pe hero ca textul să rămână lizibil. Secțiuni în ordine: 1) Hero, viewport complet. Spline pe jumătatea dreaptă (desktop), în spatele textului (mobil). Titlu 'Espresso worth waking up for.' Subtitlu 'Single-origin beans from small roasters, delivered monthly.' CTA 'Start tasting, €22/mo' 2) Problemă, titlu centrat 'Supermarket espresso is a compromise.' Un paragraf. Fade in la scroll. 3) Cum funcționează, 3 carduri fac stagger la scroll. (1) Quiz de profil de gust, (2) Livrăm proaspăt prăjit, (3) Pauză oricând. 4) Luna aceasta, card cu numele prăjitorului, țara (arată pe o hartă/punct subtil), listă de note de degustare. 5) Dovadă socială, 3 carduri de testimoniale, apoi un rând de logo-uri de presă. 6) Prețuri, un card, €22/mo, listă de incluziuni, CTA mare. 7) FAQ (4 întrebări, accordion) + bloc CTA final. Responsive. Mobil: ascunde scena 3D, arată o imagine poster în schimb. Accesibilitate: respectă prefers-reduced-motion. Text alt peste tot. Nu folosi poze de stock, folosește gradiente CSS și forme SVG dacă e nevoie. Când e gata, adaugă o pagină /confirmation și o tabelă Supabase 'subscribers' (email, plan, created_at). CTA-ul face post la /api/subscribe și scrie în Supabase.
| Element de polish | Cum îl faci |
|---|---|
| Textură de grain | Livrează un pattern de noise SVG 400×400 la 3% opacitate, poziție fixă. |
| Favicon | Generează un favicon SVG prin realfavicongenerator.net; înlocuiește /favicon.ico. |
| Imagine OG | Folosește Vercel OG (integrat în Next.js), un card întunecat cu logo-ul + titlul. |
| Micro-copy | Rescrie fiecare buton. 'Subscribe now' → 'Start tasting'. Verbe, nu marketing. |
| Pagină 404 | Proiectează un 404 custom cu același grain + o replică spirituală. O linie de la ChatGPT + 10 minute. |
| Stări de loading | Skeletons pe hero cât timp se încarcă Spline; spinner pe butonul de abonare în timpul trimiterii. |
Trecere de polish pentru pagina principală Halo Coffee. Fă-le în această ordine: 1) Rescrie fiecare CTA (buton, hero, prețuri, final) cu un verb + specificitate. Fără 'Learn more' sau 'Get started'. 2) Rescrie întrebările de FAQ din vocea clientului, nu a noastră. Scurte și reale. 3) Scrie o replică pentru pagina 404, spirituală, în ton cu brandul, nu cringe. 4) Scrie textul cardului de imagine OG (≤10 cuvinte) care ar face pe cineva să dea click. Returnează ca un singur tabel markdown.
Din Lovable, dă click pe 'Publish' → primești un URL halo-coffee-xxx.lovable.app.
Pentru un domeniu real (ex. halocoffee.co), trecem la Vercel în Nivel 6. Deocamdată, distribuie URL-ul lovable.app peste tot, e suficient ca să-l adaugi în portofoliu.
Acest nivel e un singur quest continuu în trei trepte. Termină-le pe toate trei și ai o piesă de portofoliu.
Obiectiv. Dă prompt în Lovable, obține toate cele 7 secțiuni, acceptă orice îți dă.
Obiectiv. Adaugă hero-ul Spline și fă trecerea de polish.
Obiectiv. Transformă acest build într-o lucrare gata de prezentat unui client.