# 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` | `<BarChart3 />` |
| Comunicare cetățean-primărie | `MessageCircle` | `<MessageCircle />` |
| Cereri fără coadă | `FileCheck` | `<FileCheck />` |
| Educație civică | `GraduationCap` | `<GraduationCap />` |
| AI pentru servicii publice | `Sparkles` | `<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.*
