# PLAN-DESIGN.md — Brand & Design Direction: vreaudigital.ro
**Data:** 7 aprilie 2026
**Autor:** Marius + Claude
**Status:** Direcție de design — ghid pentru implementare
---
## 0. Filosofia de design
**Teza centrală:** vreaudigital.ro trebuie să fie el însuși dovada că digitalizarea poate fi frumoasă. Dacă portalul arată ca un site guvernamental din 2012, am pierdut înainte să începem.
**Trei principii non-negociabile:**
1. **Inspiră înainte de a informa** — primul lucru pe care îl simte vizitatorul e emoție, nu date
2. **Încredere prin eleganță** — nu prin sigle oficiale și PDF-uri. Încrederea vine din calitatea execuției.
3. **Simplu dar nu gol** — fiecare pixel servește un scop. Fără decorații inutile, dar nici interfețe sterile.
**Anti-pattern-uri de evitat:**
- Albastru instituțional plictisitor (gen ghiseu.ro, anaf.ro)
- Fonturi mici pe fundal alb cu zero personalitate
- Butoane generice Bootstrap fără identitate
- Banner-e cu steagul României sau sigla guvernului
- Stock photos cu oameni care zâmbesc la laptop
---
## 1. Identitate vizuală
### 1.1 Paletă de culori
Paleta e construită pe principiul **„viitor, nu birocratic"** — un albastru profund care inspiră încredere dar nu e plictisitor, combinat cu un portocaliu cald care dă energie și umanitate, plus accente de verde care sugerează progres și validare.
#### Culori primare
| Rol | Nume | Hex | Tailwind | Notă |
|-----|------|-----|----------|------|
| **Primary** — Albastru profund | `indigo-deep` | `#1E3A5F` | `primary-900` | Încredere, seriozitate, profunzime. NU e albastrul de guvern (#003399), e mai cald, mai viu. |
| **Primary light** | `indigo-bright` | `#2563EB` | `primary-600` | Pentru butoane, link-uri, elemente interactive. Echivalent Tailwind `blue-600`. |
| **Primary pale** | `indigo-wash` | `#EFF6FF` | `primary-50` | Fundal secțiuni, card backgrounds. |
#### Culori secundare
| Rol | Nume | Hex | Tailwind | Notă |
|-----|------|-----|----------|------|
| **Secondary** — Portocaliu cald | `amber-warm` | `#F59E0B` | `secondary-500` | Energie, umanitate, „atenție aici". Echivalent Tailwind `amber-500`. |
| **Secondary dark** | `amber-deep` | `#D97706` | `secondary-600` | Hover states, text pe fundal deschis. |
| **Secondary pale** | `amber-wash` | `#FFFBEB` | `secondary-50` | Fundal de highlight, callout-uri. |
#### Culori de accent
| Rol | Nume | Hex | Tailwind | Notă |
|-----|------|-----|----------|------|
| **Success / Verificat** | `emerald` | `#10B981` | `accent-green` | Badge „verificat", status pozitiv. Echivalent `emerald-500`. |
| **Neutral dark** | `slate-900` | `#0F172A` | `neutral-900` | Text principal, heading-uri. |
| **Neutral body** | `slate-600` | `#475569` | `neutral-600` | Text body, descrieri. |
| **Neutral muted** | `slate-400` | `#94A3B8` | `neutral-400` | Placeholder, metadata, text secundar. |
| **Neutral border** | `slate-200` | `#E2E8F0` | `neutral-200` | Borduri carduri, separatoare. |
| **Background** | `white-warm` | `#FAFBFC` | `bg-page` | Fundal pagină — nu alb pur (#FFF) ci un off-white cald. |
#### Gradient-uri
```css
/* Hero gradient — de la profund la luminos */
--gradient-hero: linear-gradient(135deg, #1E3A5F 0%, #2563EB 50%, #3B82F6 100%);
/* Card hover — glow subtle */
--gradient-card-glow: radial-gradient(ellipse at top, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
/* Accent warm — pentru CTA-uri speciale */
--gradient-warm: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
/* Mesh gradient — pentru hero background (implementat cu CSS sau SVG) */
--gradient-mesh: conic-gradient(from 45deg at 30% 70%, #1E3A5F, #2563EB, #3B82F6, #1E3A5F);
```
#### De ce exact aceste culori
- **Albastrul #1E3A5F** — e albastrul de noapte adâncă, nu de formular de stat. Comunică seriozitate fără a fi plictisitor. E aproape de culorile folosite de Linear, Vercel, și alte branduri tech de top.
- **Portocaliul #F59E0B** — este complementar albstrului, creează tensiune vizuală plăcută. E culoarea „acțiunii" — butoane, CTA-uri, elemente care cer atenție. Amber, nu orange — mai cald, mai uman.
- **Off-white #FAFBFC** — albul pur (#FFFFFF) e agresiv pe ecran. Acest off-white e subtil mai cald, reduce oboseala vizuală. Tehnica e folosită de Notion, Linear, și alte aplicații premium.
#### Tricolorul — subtil, nu kitsch
NU punem tricolorul ca banner. Dar putem face referințe subtile:
- Un accent line de 3px (albastru `#2563EB` → galben `#F59E0B` → roșu `#EF4444`) folosit ca separator decorativ între secțiuni majore
- Doar pe pagina „Despre" sau footer — nicăieri altundeva
- Regula: dacă arată ca un site de partid politic, am greșit
---
### 1.2 Tipografie
#### Font-uri alese
| Rol | Font | Backup | De ce |
|-----|------|--------|-------|
| **Heading-uri** | **Plus Jakarta Sans** (Bold, ExtraBold) | `system-ui, -apple-system, sans-serif` | Geometric dar cu personalitate. Mai distinctiv decât Inter, mai cald decât Geist. Terminalele ușor rotunjite dau un feeling prietenos fără să fie copilăros. Perfect pentru heading-uri care trebuie să inspire. |
| **Body text** | **Inter** (Regular, Medium) | `system-ui, -apple-system, sans-serif` | Standardul industriei pentru text de corp. Optimizat pentru ecran, lizibil la orice dimensiune. Nimeni n-a pierdut un proiect din cauza că a ales Inter pentru body. |
| **Monospace** (cod, badge-uri tehnice) | **JetBrains Mono** (Regular) | `ui-monospace, monospace` | Pentru fragmentele de cod, metadate tehnice, badge-uri de status. Open source, excelent pe ecran. |
#### Scară tipografică
Bazată pe `clamp()` pentru responsive fluid typography:
```css
/* Display — hero, titluri de pagină */
--text-display: clamp(2.25rem, 5vw, 3.75rem); /* 36px → 60px */
font-weight: 800; /* Plus Jakarta Sans ExtraBold */
letter-spacing: -0.025em;
line-height: 1.1;
/* H1 — titluri de secțiune */
--text-h1: clamp(1.875rem, 4vw, 3rem); /* 30px → 48px */
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
/* H2 — subtitluri */
--text-h2: clamp(1.5rem, 3vw, 2.25rem); /* 24px → 36px */
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
/* H3 — card titles, section headers */
--text-h3: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px → 24px */
font-weight: 600;
line-height: 1.3;
/* Body large — intro text, lead paragraphs */
--text-body-lg: clamp(1.125rem, 1.5vw, 1.25rem); /* 18px → 20px */
font-weight: 400;
line-height: 1.7;
/* Body — text normal */
--text-body: 1rem; /* 16px */
font-weight: 400;
line-height: 1.7;
/* Small — metadate, captions */
--text-small: 0.875rem; /* 14px */
font-weight: 400;
line-height: 1.5;
/* Tiny — badge text, labels */
--text-tiny: 0.75rem; /* 12px */
font-weight: 500;
letter-spacing: 0.025em;
text-transform: uppercase;
```
#### Reguli tipografice
- **Heading-uri: max 60-70 caractere per linie** — evită heading-uri care se întind pe tot ecranul
- **Body: max 65-75 caractere per linie** (`max-w-prose` în Tailwind = 65ch) — regula de aur a lizibilității
- **Letter-spacing negativ pe heading-uri** (-0.02em) — dă un feeling premium, tehnic, modern
- **Line-height generos pe body** (1.7) — textul trebuie să respire, nu să fie înghesui
- **Nu folosim UPPERCASE pe texte lungi** — doar pe badge-uri, label-uri mici, categorii
---
### 1.3 Direcție logo
Trei concepte, de la simplu la elaborat. Toate trebuie să funcționeze la 32px (favicon) și la 200px (hero).
#### Concept A: „Ușa digitală" (recomandat)
```
Descriere:
O formă geometrică minimală care combină litera „V" (de la „Vreau") cu o ușă/portal
deschisă. Ideea: intri printr-o ușă digitală spre un viitor mai bun.
Formă: Un dreptunghi vertical (ușa) cu colțul din dreapta-sus tăiat diagonal,
formând implicit un „V". Interior: un gradient de la #1E3A5F la #2563EB.
Exteriorul dreptunghiului e solid, interiorul sugerează profunzime prin gradient.
Variante:
- Full color: gradient albastru pe fundal deschis
- Monocrom: alb pe fundal întunecat
- Favicon: forma simplificată la un pătrat cu V-ul tăiat
De ce funcționează:
- „Ușa" = acces, deschidere, transparență
- „V" = Vreau (din vreaudigital)
- Geometric = modern, tech, profesionist
- Simplu = scalabil, memorabil, funcționează mic
```
#### Concept B: „Rețeaua cetățenilor"
```
Descriere:
Un grid de 3×3 puncte conectate prin linii subțiri, formând o rețea/constelan.
Câteva dintre puncte sunt mai mari și colorate (#F59E0B amber), restul sunt
albastre (#2563EB). Sugerează: oameni conectați, date care circulă, o rețea
care crește.
Variante:
- Animat (pe web): punctele pulsează subtil, liniile se desenează
- Static: snapshot al rețelei
- Favicon: 4 puncte conectate (versiune simplificată 2x2)
De ce funcționează:
- Rețea = comunitate, conectare, date
- Punctele colorate = oameni, produse, soluții
- Organic dar geometric = tech dar uman
- Ușor de animat pe web
Risc: poate arăta prea generic dacă nu e executat bine.
```
#### Concept C: „Steagul digital"
```
Descriere:
Trei linii orizontale paralele (subtil tricolor: albastru, galben, roșu) care
se transformă progresiv din linii ondulate (hârtie, birocratic, vechi) în
linii drepte pixelate/digitale. Tranziția de la analog la digital.
Este mai mult un motif/signet decât un logo clasic. Poate fi folosit ca
element decorativ pe site, nu neapărat ca logo principal.
Variante:
- Header element: liniile se animează la hover
- Print: versiune statică
- Favicon: trei linii drepte colorate
De ce funcționează:
- Tricolor = România, fără a fi kitsch (e abstractizat)
- Tranziția = „de la vechi la digital" (exact mesajul nostru)
- Poate funcționa ca pattern/textură pe tot site-ul
Risc: greu de scalat la favicon, poate fi confuz la dimensiuni mici.
```
#### Recomandare: Concept A cu elemente din B
Logo-ul principal: „Ușa digitală" (A) — simplu, scalabil, memorabil. Pe site, folosim rețeaua de puncte (B) ca element decorativ de fundal în hero section.
#### Wordmark
```
vreaudigital
```
- Font: Plus Jakarta Sans, ExtraBold (800)
- `vreau` — culoare `#0F172A` (slate-900)
- `digital` — culoare `#2563EB` (primary-600)
- Letter-spacing: -0.03em (tight, modern)
- Fără `.ro` în logo — apare doar în context de domeniu
---
### 1.4 Stil iconuri
**Alegere: Lucide Icons — outlined, 1.5px stroke, rounded caps**
De ce Lucide (nu Heroicons, nu Phosphor):
- Open source, 1500+ iconuri, comunitate activă
- Stroke width consistent (1.5px default) — perfect pentru tonul nostru
- Rounded line caps = prietenos fără a fi copilăros
- Se integrează nativ cu React/Svelte (pachet `lucide-react` / `lucide-svelte`)
- Stilistic aproape de ce folosesc Linear, Vercel, Cal.com
**Reguli de utilizare:**
- Dimensiune standard pe site: `24px` (w-6 h-6 în Tailwind)
- Dimensiune în carduri/liste: `20px` (w-5 h-5)
- Dimensiune hero/categorii: `32px` sau `40px` (w-8/w-10)
- Culoare default: `slate-600` (#475569)
- Culoare hover/activă: `primary-600` (#2563EB)
- Iconuri de categorie: pot avea fundal colorat rotund (cercuri de 48px cu icon de 24px centrat)
- **NU folosim emoji ca iconuri** — emoji-urile din wireframe-uri se înlocuiesc cu Lucide icons
**Iconuri per categorie (mapping):**
| Categorie | Icon Lucide | Cod |
|-----------|-------------|-----|
| Transparență și date deschise | `BarChart3` | `` |
| Comunicare cetățean-primărie | `MessageCircle` | `` |
| Cereri fără coadă | `FileCheck` | `` |
| Educație civică | `GraduationCap` | `` |
| AI pentru servicii publice | `Sparkles` | `` |
---
## 2. Inspirație de design — site-uri de referință
### 2.1 Linear.app — „The gold standard"
**Ce împrumutăm:**
- Hero section cu text mare, bold, pe fundal întunecat cu gradient mesh subtil
- Tipografie excelentă — heading-uri tight, body spacious
- Card-uri cu borduri subtile și hover glow
- Animații de scroll — elementele apar cu fade-in/slide-up
- Calitatea generală a execuției — fiecare pixel e intenționat
**Ce NU împrumutăm:**
- Dark mode ca default (noi suntem light-first — audiența noastră e cetățeni, nu developeri)
- Complexitatea interacțiunilor (avem buget zero pentru motion design avansat)
### 2.2 e-Estonia.com — „GovTech care inspiră"
**Ce împrumutăm:**
- Tonul: „Am construit o societate digitală și vă arătăm cum" — exact energia pe care o vrem
- Navigația simplă: câteva categorii clare, nu mega-menu-uri
- Hero cu mesaj emoțional puternic + CTA clar
- Storytelling prin cifre și rezultate concrete
**Ce NU împrumutăm:**
- Designul propriu-zis e decent dar nu spectaculos — noi vrem mai bine
- Prea mult text pe unele pagini
### 2.3 Astro.build — „Open source frumos"
**Ce împrumutăm:**
- Demonstrează că un proiect open source poate avea un site de nivel comercial
- Gradient-urile subtile pe fundal
- Documentația integrată natural în design
- „Showcase" section — exact ce vrem pentru produsele noastre
- Performance: site-ul se încarcă instant (și al nostru trebuie)
**Ce NU împrumutăm:**
- Tonul e pentru developeri — noi avem audiență duală
- Puțin prea mult purple (paleta noastră e diferită)
### 2.4 Product Hunt — „Descoperire de produse"
**Ce împrumutăm:**
- Pattern-ul de card cu: thumbnail/screenshot, titlu, descriere scurtă, badge categorie, social proof
- „Upvote" ca mecanism de engagement (la noi poate fi „Vreau asta!" sau „Susțin")
- Categorii navigabile orizontal (pills/tabs)
- Paginile de produs cu structură clară: hero, descriere, gallery, discuție
- Tonul prietenos dar profesionist
**Ce NU împrumutăm:**
- Densitatea informațională — PH e pentru power users, noi trebuie să fim accesibili
- Leaderboard/ranking — nu vrem competiție, vrem expunere egală
- Orangiul lor (#DA552F) — prea agresiv pentru civic tech
### 2.5 GOV.UK Design System — „Accesibilitate și claritate"
**Ce împrumutăm:**
- Principiul „Start with user needs" — fiecare element de design servește utilizatorul
- Claritatea tipografică — text lizibil, ierarhie clară, spațiu generos
- Accesibilitate WCAG 2.1 AA ca minimum — contrast ratios, focus states, screen reader support
- Pattern-uri de formular testate intensiv cu utilizatori reali
- „Do less" — dacă un element nu ajută utilizatorul, nu există
**Ce NU împrumutăm:**
- Estetica austeră, funcțională — GOV.UK e deliberat „boring" ca să fie accesibil. Noi vrem și accesibilitate ȘI wow factor.
- Paleta de culori (negru, alb, albastru guvernamental)
### 2.6 Cal.com — „Open source cu atitudine"
**Ce împrumutăm:**
- Un proiect open source care arată ca un produs SaaS de top
- Monochrome + accent color approach
- Secțiunile „feature" cu ilustrații/screenshots intercalate stânga-dreapta
- Footer generos cu link-uri utile și personalitate
### 2.7 Vercel.com / Next.js — „Premium tech branding"
**Ce împrumutăm:**
- Gradientele mesh pe hero — spectaculoase dar subtile
- Tipografia cu letter-spacing negativ pe heading-uri
- Secțiunile care alternează fundal deschis/întunecat
- „Ship" mentality — totul comunică viteză și progres
- Folosirea generosă a spațiului alb
### 2.8 Tailwind CSS site — „Developer experience tradusă vizual"
**Ce împrumutăm:**
- Color palette showcase — cum prezintă culorile inline e inspirațional
- Code examples live — „arată, nu descrie"
- Documentație care e plăcută de citit (nu doar utilă)
- Responsive design impecabil
### 2.9 Civic Tech Field Guide (civictech.guide) — „Catalogul civic tech"
**Ce împrumutăm:**
- Structura de catalog cu filtre și categorii
- Abordarea „field guide" — ghid, nu doar listă
- Tag-uri de clasificare pe multiple axe
**Ce NU împrumutăm:**
- Designul e funcțional dar nu inspiră — arată ca un director, nu ca un manifest
### 2.10 Signal.org — „Încredere prin simplitate"
**Ce împrumutăm:**
- Demonstrează că trust se construiește prin absența manipulării, nu prin sigle oficiale
- Zero dark patterns, zero upsells, zero engagement tricks
- Design care spune „suntem aici pentru tine, nu pentru noi"
- Transparență radicală ca principiu de design
---
## 3. Direcție UI/UX
### 3.1 Pagina principală (Home)
```
┌─────────────────────────────────────────────────────────────┐
│ [Logo + vreaudigital] [Produse] [Despre]│
│ │
│ ╔═════════════════════════════════════════════════════════╗ │
│ ║ HERO — fundal gradient mesh (#1E3A5F → #2563EB) ║ │
│ ║ ║ │
│ ║ România merită o ║ │
│ ║ digitalizare reală. ║ │
│ ║ ║ │
│ ║ [text-display, Plus Jakarta Sans ExtraBold, alb] ║ │
│ ║ ║ │
│ ║ Nu formulare PDF. Nu site-uri din 2005. ║ │
│ ║ Ci servicii publice care chiar funcționează. ║ │
│ ║ [text-body-lg, Inter Regular, alb 80% opacity] ║ │
│ ║ ║ │
│ ║ [Vezi produsele →] [Listează-ți produsul] ║ │
│ ║ ↑ primary btn ↑ ghost/outline btn ║ │
│ ║ ║ │
│ ║ ── stat counters ── ║ │
│ ║ 12 produse · 3 demo-uri live · 100% open source ║ │
│ ╚═════════════════════════════════════════════════════════╝ │
│ │
│ ── „Cum ar fi dacă..." section ── │
│ [fundal alb/off-white] │
│ │
│ Three columns, fiecare cu: │
│ ┌─────────────────┐ │
│ │ [Icon: Clock] │ ← Lucide icon, 32px, primary-600 │
│ │ │ │
│ │ Cum ar fi să nu │ ← H3, Plus Jakarta Sans Bold │
│ │ mai stai 3 ore │ │
│ │ la coadă? │ │
│ │ │ │
│ │ Cereri online │ ← body, Inter, slate-600 │
│ │ care chiar │ │
│ │ funcționează. │ │
│ └─────────────────┘ │
│ │
│ ── Featured Products (grid 2 sau 3 coloane) ── │
│ [fundal primary-50 (#EFF6FF)] │
│ │
│ Titlu secțiune: „Produse care schimbă cum │
│ interacționezi cu statul" │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ [Screenshot] │ │ [Screenshot] │ │ [Screenshot] │ │
│ │ │ │ │ │ │ │
│ │ Traducătorul │ │ Harta │ │ BugetulMeu │ │
│ │ Birocratic │ │ Digitalizări │ │ │ │
│ │ │ │ │ │ │ │
│ │ #AI #NLP │ │ #Transparență│ │ #Date │ │
│ │ │ │ │ │ │ │
│ │ ✅ Demo live │ │ 📊 Preview │ │ 📊 Preview │ │
│ │ De: Marius T.│ │ De: Echipa │ │ De: Andrei P.│ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ [Vezi toate produsele →] │
│ │
│ ── Before / After section ── │
│ [fundal alb] │
│ │
│ Vizual split-screen: │
│ STÂNGA (gri, faded): screenshot ghiseu.ro / PDF tipizat │
│ DREAPTA (color, viu): screenshot produs modern de pe portal│
│ Text: „Acum vs Cum ar putea fi" │
│ │
│ ── CTA final ── │
│ [fundal gradient amber-warm → amber-deep] │
│ │
│ „Ești programator? Ai construit ceva care ajută │
│ cetățenii? Arată-l lumii." │
│ [Listează-ți produsul →] │
│ │
│ ── Footer ── │
│ [fundal slate-900 (#0F172A)] │
│ Logo + „Un proiect open source pentru România" │
│ Link-uri: GitHub · Despre · Contact · Newsletter │
│ Tricolor accent line subtilă (3px) deasupra footer-ului │
└─────────────────────────────────────────────────────────────┘
```
**Principii de layout — Home:**
- **Hero height:** min 80vh pe desktop, min 70vh pe mobile — impact maxim
- **Secțiunile alternează fundal:** alb → primary-50 → alb → gradient → dark footer
- **Max content width:** `max-w-7xl` (1280px) cu `px-4 sm:px-6 lg:px-8`
- **Spacing vertical între secțiuni:** `py-20 lg:py-32` — generos, lasă conținutul să respire
- **Grid produse:** `grid-cols-1 md:grid-cols-2 lg:grid-cols-3` cu `gap-6 lg:gap-8`
---
### 3.2 Pagina de listing produse (Catalog)
```
┌─────────────────────────────────────────────────────────────┐
│ [Nav] │
│ │
│ Produse care digitalizează România │
│ [H1, Plus Jakarta Sans Bold] │
│ │
│ ── Category pills (scroll horizontal pe mobile) ── │
│ │
│ [Toate] [Transparență] [Comunicare] [Cereri] │
│ [Educație] [AI] │
│ ↑ pills cu fundal, icon + text, hover state │
│ │
│ ── Sort / Filter bar ── │
│ Sortează: [Cele mai noi ▾] [Cu demo ▾] │
│ │
│ ── Product grid ── │
│ │
│ Grid de carduri (identice cu cele de pe home, dar │
│ pe full width — 3 coloane desktop, 2 tablet, 1 mobil) │
│ │
│ Fiecare card: │
│ ┌────────────────────────────┐ │
│ │ ┌────────────────────────┐ │ ← screenshot, aspect 16:9 │
│ │ │ [Screenshot/Video] │ │ rounded-t-xl │
│ │ └────────────────────────┘ │ obiect-cover │
│ │ │ │
│ │ [Badge: Demo live] ←──────── badge verde mic, absolut │
│ │ │ pozitionat pe screenshot │
│ │ Traducătorul Birocratic │ ← H3, font-semibold │
│ │ │ │
│ │ Lipești textul oficial, │ ← body, text-sm, slate-600 │
│ │ primești explicația pe │ line-clamp-2 │
│ │ înțelesul tău. │ │
│ │ │ │
│ │ ┌──────┐ ┌────┐ ┌─────┐ │ ← category pills │
│ │ │ #AI │ │#NLP│ │ MIT │ │ text-xs, rounded-full │
│ │ └──────┘ └────┘ └─────┘ │ bg-primary-50 │
│ │ │ │
│ │ ───────────────────────── │ ← separator line │
│ │ 👤 Marius T. · Cluj │ ← author + location │
│ │ │ text-sm, slate-400 │
│ └────────────────────────────┘ │
│ │
│ [Mai multe produse ↓] sau infinite scroll │
│ │
│ ── CTA section pentru developeri ── │
│ „Nu vezi ce cauți? Poate tu ești cel care o poate face." │
│ [Listează un produs →] [Vezi provocările →] │
└─────────────────────────────────────────────────────────────┘
```
**Principii de layout — Catalog:**
- **Card hover:** `hover:shadow-lg hover:-translate-y-1 transition-all duration-200` — card-ul se ridică subtil
- **Card border:** `border border-slate-200 rounded-xl` — borduri subtile, colțuri rotunjite
- **Screenshot:** `aspect-video object-cover` — forțăm 16:9, imaginea se crop-ează
- **Category pills:** `inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-primary-50 text-primary-700`
- **Empty state:** Dacă o categorie nu are produse: ilustrație simplă + „Fii primul care listează un produs aici"
- **Scroll behavior:** Prefer pagination simplă (nu infinite scroll) — mai previzibil, mai bun pentru SEO
---
### 3.3 Pagina de produs (Product Detail)
```
┌─────────────────────────────────────────────────────────────┐
│ [Nav] │
│ │
│ ← Înapoi la AI pentru servicii publice │
│ [breadcrumb, text-sm, slate-400, hover:primary] │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ LAYOUT: 2 coloane pe desktop (8/4 split) │ │
│ │ │ │
│ │ COL STÂNGA (8/12): │ │
│ │ │ │
│ │ Traducătorul Birocratic │ │
│ │ [H1, text-display sau text-h1] │ │
│ │ │ │
│ │ Lipește orice text oficial și primește │ │
│ │ explicația pe limba ta. │ │
│ │ [text-body-lg, slate-600] │ │
│ │ │ │
│ │ [Pills: #AI #NLP #Limbaj #MIT] │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ [Screenshot principal / Video] │ │ │
│ │ │ aspect-video, rounded-xl │ │ │
│ │ │ shadow-lg │ │ │
│ │ │ │ │ │
│ │ └──────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [Gallery thumbnails dacă există mai multe] │ │
│ │ │ │
│ │ ── Ce face ── │ │
│ │ • Analizează text juridic/birocratic │ │
│ │ • Explică pe limba cetățeanului │ │
│ │ • Identifică ce trebuie să faci concret │ │
│ │ [prose content, MDX rendered] │ │
│ │ │ │
│ │ ── De ce contează ── │ │
│ │ [Secțiune narativă — storytelling] │ │
│ │ │ │
│ │ COL DREAPTA (4/12) — sticky sidebar: │ │
│ │ │ │
│ │ ┌──────────────────────┐ │ │
│ │ │ [Încearcă demo →] │ ← primary btn, full-w │ │
│ │ │ [Cod sursă ↗] │ ← outline btn │ │
│ │ │ [Contactează autorul] │ ← ghost btn │ │
│ │ │ │ │ │
│ │ │ ───────────────── │ │ │
│ │ │ │ │ │
│ │ │ Făcut de │ │ │
│ │ │ 👤 Marius Tarau │ │ │
│ │ │ 📍 Cluj-Napoca │ │ │
│ │ │ │ │ │
│ │ │ Status │ │ │
│ │ │ ✅ Demo live │ ← badge verde │ │
│ │ │ │ │ │
│ │ │ Licență │ │ │
│ │ │ MIT │ │ │
│ │ │ │ │ │
│ │ │ Stack │ │ │
│ │ │ Astro + GPT-4o │ │ │
│ │ │ │ │ │
│ │ │ Funcționează la │ │ │
│ │ │ Primăria Cluj ✓ │ │ │
│ │ │ Primăria Sibiu ✓ │ │ │
│ │ └──────────────────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ── Produse similare ── │
│ [Grid 3 carduri din aceeași categorie] │
└─────────────────────────────────────────────────────────────┘
```
**Principii de layout — Product Detail:**
- **Sidebar sticky:** `sticky top-24` — rămâne vizibilă când scrollezi conținutul
- **Screenshot principal:** `rounded-xl shadow-lg overflow-hidden` — arată premium
- **Content area:** `prose prose-slate max-w-none` — Tailwind Typography plugin pentru MDX content
- **Button hierarchy:** Primary (filled blue) → Secondary (outline) → Ghost (text only)
- **Mobile:** sidebar-ul trece SUB screenshot, butoanele devin sticky bottom bar
---
### 3.4 Animații și interacțiuni
**Principiu: subtile, funcționale, rapide. Zero animații care întârzie accesul la conținut.**
#### Animații de intrare (scroll-triggered)
```css
/* Fade-in + slide-up — pattern principal */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Folosind Intersection Observer, NU librării externe */
/* Fiecare element: animation-duration: 0.5s, ease-out */
/* Stagger: 100ms delay între elemente consecutive */
/* Regula: animația se întâmplă O SINGURĂ DATĂ */
```
#### Interacțiuni hover
```css
/* Card hover — ridicare subtilă */
.product-card {
transition: transform 200ms ease, box-shadow 200ms ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12);
}
/* Button hover — shift de culoare */
.btn-primary:hover {
background-color: #1D4ED8; /* primary-700 */
transition: background-color 150ms ease;
}
/* Link hover — underline animation */
.text-link:hover {
text-decoration-color: currentColor;
text-underline-offset: 4px;
transition: text-decoration-color 150ms ease;
}
```
#### Animații speciale (doar pe home)
- **Hero gradient mesh:** animație lentă de mișcare (CSS `background-position` animat pe 20s loop) — dă feeling de „viu" fără JavaScript
- **Stat counters:** count-up animation la scroll (de la 0 la valoarea reală, 1.5s, ease-out)
- **Before/After slider:** drag interactiv cu linie verticală — utilizatorul trage linia pentru a compara
#### Ce NU animăm
- Page transitions (overhead prea mare, prea complex)
- Skeleton loading (site-ul e static, se încarcă instant)
- Parallax (distrage, probleme de performance pe mobile)
- Cursor effects (gimmick, accesibilitate)
- GSAP / Framer Motion (dependințe prea grele pentru beneficiul oferit)
**Implementare:** CSS animations + Intersection Observer vanilla JS. Zero librării de animație. Astro's `client:visible` directive e suficientă pentru trigger-ul de scroll.
---
### 3.5 Mobile-first
**Regula: designul se face pe 375px (iPhone SE) și se extinde în sus.**
| Breakpoint | Tailwind | Ce se schimbă |
|------------|----------|---------------|
| `< 640px` | default | 1 coloană, nav hamburger, sidebar sub content, sticky bottom CTA |
| `640px` | `sm:` | Grid 2 coloane pe catalog |
| `768px` | `md:` | Nav desktop, sidebar apare |
| `1024px` | `lg:` | Grid 3 coloane, hero full experience |
| `1280px` | `xl:` | Max content width atins, spacing generos |
**Specifice mobile:**
- **Nav:** Hamburger menu cu slide-in panel (nu dropdown). Logo stânga, hamburger dreapta. Max 5 items în menu.
- **Hero:** Text mai mic (clamp handles it), CTA-urile pe full width, counter-ele pe 1 rând scrollabil
- **Product cards:** Full width, screenshot aspect-video, stacked vertical
- **Product detail:** Screenshot → CTA buttons (sticky bottom) → Content → Metadata → Produse similare
- **Touch targets:** Minim 44x44px pe toate elementele interactive (standard Apple HIG)
- **Font sizes:** Nu mai mici de 16px pe body (previne zoom-ul automat pe iOS la focus pe input)
---
### 3.6 Dark mode
**Decizia: DA, dark mode — dar ca opțiune, nu ca default.**
**De ce DA:**
- Audiența include developeri care preferă dark mode
- Credem în alegerea utilizatorului
- CSS modern + Tailwind fac implementarea trivială (`dark:` prefix)
- Site-urile premium oferă dark mode (Linear, Vercel, GitHub)
- Hero-ul nostru e deja pe fundal întunecat — dark mode extinde natural acea estetică
**De ce NU ca default:**
- Audiența principală sunt cetățenii obișnuiți — ei se așteaptă la light mode
- Conținut editorial (text lung) se citește mai ușor pe fundal deschis
- Trust signals (badge-uri, status) au contrast mai bun pe light
**Implementare:**
- Toggle în nav (icon sun/moon din Lucide)
- `prefers-color-scheme` detection ca default
- Salvat în `localStorage`
- **Prioritate: Faza 2** — nu blocăm lansarea pentru dark mode
**Dark mode color mapping:**
| Element | Light | Dark |
|---------|-------|------|
| Page background | `#FAFBFC` | `#0F172A` (slate-900) |
| Card background | `#FFFFFF` | `#1E293B` (slate-800) |
| Card border | `#E2E8F0` | `#334155` (slate-700) |
| Text primary | `#0F172A` | `#F1F5F9` (slate-100) |
| Text secondary | `#475569` | `#94A3B8` (slate-400) |
| Primary buttons | `#2563EB` | `#3B82F6` (ușor mai deschis) |
---
## 4. Tailwind CSS Implementation
### 4.1 tailwind.config.js (v4 syntax cu CSS config sau legacy JS)
```javascript
// tailwind.config.mjs — Astro + Tailwind v4
import defaultTheme from 'tailwindcss/defaultTheme';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
darkMode: 'class',
theme: {
extend: {
colors: {
// Primary — albastru profund
primary: {
50: '#EFF6FF',
100: '#DBEAFE',
200: '#BFDBFE',
300: '#93C5FD',
400: '#60A5FA',
500: '#3B82F6',
600: '#2563EB', // ← main interactive color
700: '#1D4ED8',
800: '#1E40AF',
900: '#1E3A5F', // ← hero, deep backgrounds
950: '#172554',
},
// Secondary — amber cald
secondary: {
50: '#FFFBEB',
100: '#FEF3C7',
200: '#FDE68A',
300: '#FCD34D',
400: '#FBBF24',
500: '#F59E0B', // ← main accent
600: '#D97706',
700: '#B45309',
800: '#92400E',
900: '#78350F',
950: '#451A03',
},
// Neutral — slate cu warmth
neutral: {
50: '#F8FAFC',
100: '#F1F5F9',
200: '#E2E8F0',
300: '#CBD5E1',
400: '#94A3B8',
500: '#64748B',
600: '#475569',
700: '#334155',
800: '#1E293B',
900: '#0F172A',
950: '#020617',
},
// Semantic
success: '#10B981', // emerald-500
warning: '#F59E0B', // amber-500
error: '#EF4444', // red-500
info: '#3B82F6', // blue-500
// Page background
page: '#FAFBFC',
},
fontFamily: {
heading: ['"Plus Jakarta Sans"', ...defaultTheme.fontFamily.sans],
body: ['Inter', ...defaultTheme.fontFamily.sans],
mono: ['"JetBrains Mono"', ...defaultTheme.fontFamily.mono],
},
fontSize: {
'display': ['clamp(2.25rem, 5vw, 3.75rem)', { lineHeight: '1.1', letterSpacing: '-0.025em', fontWeight: '800' }],
'h1': ['clamp(1.875rem, 4vw, 3rem)', { lineHeight: '1.15', letterSpacing: '-0.02em', fontWeight: '700' }],
'h2': ['clamp(1.5rem, 3vw, 2.25rem)', { lineHeight: '1.2', letterSpacing: '-0.015em', fontWeight: '700' }],
'h3': ['clamp(1.25rem, 2.5vw, 1.5rem)', { lineHeight: '1.3', fontWeight: '600' }],
'body-lg': ['clamp(1.125rem, 1.5vw, 1.25rem)', { lineHeight: '1.7', fontWeight: '400' }],
},
spacing: {
'18': '4.5rem',
'88': '22rem',
'128': '32rem',
},
maxWidth: {
'content': '72rem', // 1152px — content max
'narrow': '42rem', // 672px — text-focused pages
},
borderRadius: {
'4xl': '2rem',
},
boxShadow: {
'card': '0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.04)',
'card-hover': '0 12px 24px -8px rgba(15, 23, 42, 0.12)',
'hero': '0 24px 48px -12px rgba(30, 58, 95, 0.25)',
},
backgroundImage: {
'gradient-hero': 'linear-gradient(135deg, #1E3A5F 0%, #2563EB 50%, #3B82F6 100%)',
'gradient-warm': 'linear-gradient(135deg, #F59E0B 0%, #F97316 100%)',
'gradient-dark': 'linear-gradient(180deg, #0F172A 0%, #1E293B 100%)',
},
animation: {
'fade-in-up': 'fadeInUp 0.5s ease-out forwards',
'fade-in': 'fadeIn 0.5s ease-out forwards',
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
},
},
},
plugins: [
require('@tailwindcss/typography'), // pentru prose/MDX content
],
};
```
### 4.2 CSS global (styles/global.css)
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* Font imports — via Google Fonts sau self-hosted */
/* Self-hosted recomandat pentru performance */
html {
@apply font-body text-neutral-900 bg-page antialiased;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
@apply text-base leading-relaxed;
}
h1, h2, h3, h4 {
@apply font-heading;
}
/* Focus visible — accessibility */
*:focus-visible {
@apply outline-2 outline-offset-2 outline-primary-600 rounded-sm;
}
/* Selection color */
::selection {
@apply bg-primary-100 text-primary-900;
}
}
@layer components {
/* Butoane */
.btn {
@apply inline-flex items-center justify-center gap-2 rounded-xl
font-heading font-semibold text-sm
px-6 py-3
transition-all duration-200 ease-out
focus-visible:outline-2 focus-visible:outline-offset-2;
}
.btn-primary {
@apply btn bg-primary-600 text-white
hover:bg-primary-700
focus-visible:outline-primary-600
shadow-sm hover:shadow-md;
}
.btn-secondary {
@apply btn bg-secondary-500 text-white
hover:bg-secondary-600
focus-visible:outline-secondary-500;
}
.btn-outline {
@apply btn border-2 border-primary-600 text-primary-600
hover:bg-primary-50
focus-visible:outline-primary-600;
}
.btn-ghost {
@apply btn text-primary-600
hover:bg-primary-50
focus-visible:outline-primary-600;
}
/* Card produs */
.product-card {
@apply bg-white rounded-xl border border-neutral-200
overflow-hidden
shadow-card
transition-all duration-200 ease-out
hover:shadow-card-hover hover:-translate-y-1;
}
/* Category pill */
.category-pill {
@apply inline-flex items-center gap-1.5
px-3 py-1 rounded-full
text-xs font-medium
bg-primary-50 text-primary-700
transition-colors duration-150
hover:bg-primary-100;
}
.category-pill-active {
@apply bg-primary-600 text-white hover:bg-primary-700;
}
/* Badge status */
.badge {
@apply inline-flex items-center gap-1
px-2 py-0.5 rounded-full
text-xs font-semibold uppercase tracking-wider;
}
.badge-demo {
@apply badge bg-emerald-50 text-emerald-700
border border-emerald-200;
}
.badge-listed {
@apply badge bg-primary-50 text-primary-700
border border-primary-200;
}
.badge-verified {
@apply badge bg-amber-50 text-amber-700
border border-amber-200;
}
/* Section wrapper */
.section {
@apply px-4 sm:px-6 lg:px-8 py-20 lg:py-32;
}
.section-content {
@apply max-w-content mx-auto;
}
/* Hero gradient mesh background */
.hero-mesh {
@apply relative overflow-hidden bg-gradient-hero;
}
.hero-mesh::before {
content: '';
@apply absolute inset-0;
background:
radial-gradient(ellipse 80% 50% at 20% 80%, rgba(59, 130, 246, 0.3) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 80% 20%, rgba(37, 99, 235, 0.4) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 50% 50%, rgba(30, 58, 95, 0.2) 0%, transparent 80%);
animation: meshFloat 20s ease-in-out infinite alternate;
}
@keyframes meshFloat {
0% { background-position: 0% 0%, 100% 0%, 50% 50%; }
100% { background-position: 20% 20%, 80% 30%, 40% 60%; }
}
}
```
### 4.3 Componente necesare (Astro/Svelte)
Lista de componente de implementat, în ordinea priorității:
| # | Componentă | Fișier | Descriere |
|---|-----------|--------|-----------|
| 1 | **Nav** | `Nav.astro` | Logo + link-uri + hamburger mobile. Sticky top, blur background pe scroll. |
| 2 | **Hero** | `Hero.astro` | Mesh gradient + heading display + subtitle + 2 CTA + counters |
| 3 | **ProductCard** | `ProductCard.astro` | Screenshot + title + description + pills + author. Props: `product` |
| 4 | **CategoryPill** | `CategoryPill.astro` | Icon + label. Props: `name`, `icon`, `active`, `count` |
| 5 | **Badge** | `Badge.astro` | Status badge. Props: `type: 'demo' | 'listed' | 'verified'` |
| 6 | **Section** | `Section.astro` | Wrapper cu padding + max-width + fundal alternabil |
| 7 | **Button** | `Button.astro` | Props: `variant`, `size`, `href`, `icon` |
| 8 | **Footer** | `Footer.astro` | Dark background, link-uri, accent tricolor line |
| 9 | **BeforeAfter** | `BeforeAfter.svelte` | Slider interactiv stânga/dreapta (necesită JS → Svelte island) |
| 10 | **ProductSidebar** | `ProductSidebar.astro` | Sticky sidebar cu CTA, metadata, author info |
| 11 | **StatCounter** | `StatCounter.svelte` | Număr animat count-up (JS → Svelte island) |
| 12 | **MobileMenu** | `MobileMenu.svelte` | Slide-in panel cu animație (JS → Svelte island) |
| 13 | **ScrollReveal** | `ScrollReveal.astro` | Wrapper cu Intersection Observer pentru fade-in-up |
**Principiu: tot ce se poate face fără JavaScript → Astro component. Doar interacțiuni → Svelte island cu `client:visible`.**
---
## 5. Design emoțional
### 5.1 Prima impresie (0-5 secunde)
Când cineva intră pe vreaudigital.ro pentru prima dată, trebuie să simtă:
1. **„Wow, arată profesionist"** — designul în sine e dovada că digitalizarea poate fi frumoasă
2. **„Asta mă privește"** — mesajul din hero vorbește despre viața mea, nu despre tehnologie
3. **„Vreau să văd mai mult"** — CTA-ul e clar, invitant, nu agresiv
**Mecanisme concrete:**
- **Hero cu impact vizual maxim:** fundal gradient mesh animat subtil, text alb mare, spațiu generos. Nu stock photo. Nu banner cu steaguri. Culoare, tipografie, și spațiu.
- **Mesajul emoțional:** „România merită o digitalizare reală." — simplu, personal, ușor de simțit. Fiecare cuvânt contează. Subtext-ul detaliază ce vrem să spunem.
- **Stat counters animați:** „12 produse · 3 demo-uri live · 100% open source" — credibilitate imediată, fără a fi corporate
### 5.2 Storytelling vizual Before/After
**Principiul:** cea mai puternică armă de persuasiune pe care o avem e contrastul între „cum e acum" și „cum ar putea fi".
**Implementare concretă:**
#### Varianta A: Split-screen slider
```
┌─────────────────────┬─────────────────────┐
│ │ │
│ [Screenshot de pe │ [Screenshot │
│ ghiseu.ro sau ←┼→ produs modern │
│ formular PDF │ de pe portal] │
│ scanat prost] │ │
│ │ │
│ ACUM │ CUM AR PUTEA FI │
│ Desaturated, │ Full color, │
│ ușor blur │ crisp, vibrant │
│ │ │
└─────────────────────┴─────────────────────┘
↑ slider draggable
```
- Partea stângă (ACUM): screenshot real de pe un site guvernamental, aplicat filtru `grayscale(0.7) brightness(0.8)` — faded, trist, vechi
- Partea dreaptă (CUM AR PUTEA FI): screenshot al unui produs de pe portal — color, modern, viu
- Slider-ul e draggable — utilizatorul poate compara direct
- Text deasupra: „Acum vs. Cum ar putea fi" (H2, center)
- Text dedesubt: „Fiecare produs de pe portal dovedește că se poate mai bine." (body-lg, center)
#### Varianta B: Secvență scroll
Pe mobile (unde slider-ul e mai puțin eficient), secvență verticală:
```
[Screenshot vechi, desaturated, mic, cu legendă „Acum"]
↓ (arrow animat)
[Screenshot modern, full-size, color, cu legendă „Cum ar putea fi"]
```
#### Exemple concrete de before/after
| Acum | Cum ar putea fi |
|------|-----------------|
| PDF scanat strâmb cu „Cerere tip" | Formular web inteligent care te ghidează pas cu pas |
| Pagina de pe anaf.ro cu tabele HTML din 2003 | Dashboard interactiv cu grafice colorate pe bugetul local |
| Copie de pe ghiseu.ro cu 14 câmpuri obligatorii | Chatbot: „Spune-mi ce ai nevoie și completez eu formularul" |
| Ușa de la ghișeul primăriei cu orar 9-13 | App de programări cu slot-uri disponibile și confirmare SMS |
### 5.3 Trust signals fără corporate
**Ce NU facem:**
- Logo-uri de parteneri pe care nu-i avem
- „Trusted by 10,000 users" când avem 50
- Sigle guvernamentale pe care nu le-am primit
- Texte juridice de privacy cu font 8px
**Ce facem:**
1. **Open source = transparență totală**
- Link vizibil către GitHub/Gitea pe fiecare pagină
- „Codul e public. Verifică tu." — nu cerem să ne crezi pe cuvânt
- Badge „100% Open Source" pe fiecare produs care e OSS
2. **Oamenii din spate**
- Fiecare produs are autor cu nume, foto (opțional), oraș
- „Făcut de Ionuț din Brașov" > „Powered by GovTech Solutions SRL"
- Secțiune „Despre noi" cu povești reale, nu corporate bios
3. **Dovada funcționează**
- Badge „Demo live" = poți încerca acum, nu trebuie să te înscrii
- Badge „Funcționează la Primăria X" = cineva l-a testat în producție
- Screenshots reale, nu mockup-uri. Video-uri reale, nu render-uri.
4. **Comunitatea**
- Counter vizibil: câte produse, câți contributori
- „Proiect open source contribuit de X programatori din Y orașe"
- Link-uri către discuții publice (GitHub Issues)
5. **Absența manipulării** (lecția Signal)
- Zero cookie banners agresive (folosim analytics privacy-first)
- Zero popup-uri de newsletter
- Zero dark patterns de „subscribe or lose access"
- Dacă ceri email-ul, spui exact ce faci cu el și oferi un motiv clar
### 5.4 Microinteracțiuni care creează emoție
| Moment | Interacțiune | Emoție |
|--------|-------------|--------|
| Hover pe card produs | Card se ridică 4px, shadow crește, screenshot zoom-ează subtle (scale 1.02) | „Asta e interesant, vreau să văd" |
| Click pe „Încearcă demo" | Button pulsează scurt, apoi redirect | „Hai să vedem!" — excitare |
| Scroll peste before/after | Imaginile apar cu timing diferit (stânga fade-in prima, dreaptă după 200ms) | Contrast dramatic, „wow, ce diferență" |
| Prima vizită | Hero counter-ele se numără de la 0 | „Lucruri se întâmplă aici" — activitate |
| Hover pe badge „Demo live" | Badge-ul pulsează verde subtil | „E viu, funcționează acum" |
| Scroll la footer | Tricolor accent line se desenează de la stânga la dreapta (200ms) | „E românesc, dar modern" |
### 5.5 Vocea brandului în design
**Tonul vreaudigital.ro se simte în fiecare element:**
- **Heading-uri:** directe, emoționale, scurte. „România merită mai mult." Nu: „Portal de agregare a soluțiilor digitale pentru administrația publică."
- **Descrieri:** umane, concrete. „Lipește textul oficial, primești explicația pe limba ta." Nu: „Soluție NLP pentru procesarea textelor juridice."
- **CTA-uri:** invitante, nu imperative. „Vezi ce e posibil →" nu „CLICK HERE". „Listează-ți produsul →" nu „SUBMIT YOUR SOLUTION".
- **Empty states:** prietenoase. „Încă nu avem produse în această categorie. Poate tu ești cel care schimbă asta?" nu „No results found."
- **Error states:** umane. „Ceva n-a mers bine. Încearcă din nou sau scrie-ne." nu „Error 500: Internal Server Error."
---
## 6. Checklist de implementare design (Faza 1)
### Săptămâna 1 — Fundamente
- [ ] Setup Astro + Tailwind cu `tailwind.config.mjs` de mai sus
- [ ] Import fonturi: Plus Jakarta Sans (Google Fonts), Inter (Google Fonts), JetBrains Mono (Google Fonts)
- [ ] `global.css` cu layer-urile base/components/utilities
- [ ] Componentele: Nav, Footer, Button, Section, Badge, CategoryPill
- [ ] Logo wordmark în SVG (temporar — text stilizat până avem logo final)
- [ ] Favicon temporar (litera V pe fundal primary-900)
### Săptămâna 2 — Paginile principale
- [ ] Home: Hero (mesh gradient + text + CTA + counters)
- [ ] Home: „Cum ar fi dacă..." section (3 coloane cu iconuri)
- [ ] Home: Featured products grid (3 carduri)
- [ ] Home: CTA developeri (fundal gradient warm)
- [ ] Catalog: Category pills + product grid
- [ ] Product detail: Layout 2 coloane + sidebar sticky
### Săptămâna 3 — Rafinament
- [ ] Before/After slider (Svelte island)
- [ ] Animații scroll reveal (Intersection Observer)
- [ ] Stat counters animați
- [ ] Mobile nav (hamburger + slide-in)
- [ ] Responsive testing pe toate breakpoint-urile
- [ ] Accesibilitate: focus states, contrast check, screen reader test
### Săptămâna 4 — Polish
- [ ] Optimizare imagini (Astro Image component, WebP, lazy loading)
- [ ] Performance audit (target: 95+ Lighthouse pe toate categoriile)
- [ ] Open Graph images (og:image pentru social sharing)
- [ ] 404 page cu personalitate
- [ ] Final QA pe Chrome, Firefox, Safari, iOS Safari, Android Chrome
---
## 7. Resurse și link-uri
### Font-uri (toate gratuite, open source)
- Plus Jakarta Sans: https://fonts.google.com/specimen/Plus+Jakarta+Sans
- Inter: https://fonts.google.com/specimen/Inter
- JetBrains Mono: https://fonts.google.com/specimen/JetBrains+Mono
### Iconuri
- Lucide Icons: https://lucide.dev/icons/
- lucide-react / lucide-svelte: https://www.npmjs.com/package/lucide-svelte
### Tailwind
- Tailwind CSS v4 docs: https://tailwindcss.com/docs
- Tailwind Typography plugin: https://tailwindcss.com/docs/typography-plugin
- shadcn/ui colors: https://ui.shadcn.com/colors
### Design inspiration
- Linear.app: https://linear.app — hero sections, card design, dark aesthetic
- e-Estonia: https://e-estonia.com — civic tech storytelling
- Astro.build: https://astro.build — open source project branding
- Product Hunt: https://producthunt.com — product discovery UX
- GOV.UK Design System: https://design-system.service.gov.uk — accessibility patterns
- Cal.com: https://cal.com — open source premium feel
- Vercel: https://vercel.com — gradient meshes, typography
- Tailwind CSS: https://tailwindcss.com — inline demo patterns
- Civic Tech Field Guide: https://civictech.guide — catalog structure
- Signal: https://signal.org — trust through simplicity
### Tool-uri de design
- UI Colors (Tailwind palette generator): https://uicolors.app
- Contrast checker: https://webaim.org/resources/contrastchecker/
- Realtime Colors (test palette pe layout): https://realtimecolors.com
---
*Acest document e viu — se actualizează pe măsură ce implementăm și testăm. Designul nu e optional, e diferențiatorul nostru principal.*