Files

T

Claude VM a6c03a091e initial: split from gov-agreg — vreau.digital standalone platform

Moved from gov-agreg/src/pages/achizitii/* to root (drop prefix).
- 22 pages migrated, 127 files total
- All internal links: /achizitii/X → /X (176 occurrences fixed)
- AchizitiiLayout subnav rewritten: /X paths, top-right link to vreaudigital.ro hub
- BaseLayout new (vreau.digital branding, OG tags, site URL)
- astro.config.mjs: site https://vreau.digital, server output (was static)
- docker-compose: port 5096 (vreaudigital is 5095), container vreau-digital
- deploy.sh: paths /opt/vreau-digital, log /var/log/vreau-digital-deploy.log

Backend shared with gov-agreg:
- PostgreSQL satra (same schemas: seap, firms, anaf, anre, ...)
- Photon, Martin tiles
- Infisical /vreaudigital path (DATABASE_URL etc. shared)

build: PASS (npx astro check 0 errors, npm run build 5s vite + 10s server)

2026-05-13 00:10:32 +03:00

57 KiB

Raw Permalink Blame History

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:

Inspiră înainte de a informa — primul lucru pe care îl simte vizitatorul e emoție, nu date
Încredere prin eleganță — nu prin sigle oficiale și PDF-uri. Încrederea vine din calitatea execuției.
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

/* 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:

/* 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)

/* 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

/* 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)

// 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)

@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'
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ă:

„Wow, arată profesionist" — designul în sine e dovada că digitalizarea poate fi frumoasă
„Asta mă privește" — mesajul din hero vorbește despre viața mea, nu despre tehnologie
„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:

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
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
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.
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)
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

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.

57 KiB Raw Permalink Blame History Unescape Escape

PLAN-DESIGN.md — Brand & Design Direction: vreaudigital.ro

0. Filosofia de design

1. Identitate vizuală

1.1 Paletă de culori

Culori primare

Culori secundare

Culori de accent

Gradient-uri

De ce exact aceste culori

Tricolorul — subtil, nu kitsch

1.2 Tipografie

Font-uri alese

Scară tipografică

Reguli tipografice

1.3 Direcție logo

Concept A: „Ușa digitală" (recomandat)

Concept B: „Rețeaua cetățenilor"

Concept C: „Steagul digital"

Recomandare: Concept A cu elemente din B

Wordmark

1.4 Stil iconuri

2. Inspirație de design — site-uri de referință

2.1 Linear.app — „The gold standard"

2.2 e-Estonia.com — „GovTech care inspiră"

2.3 Astro.build — „Open source frumos"

2.4 Product Hunt — „Descoperire de produse"

2.5 GOV.UK Design System — „Accesibilitate și claritate"

2.6 Cal.com — „Open source cu atitudine"

2.7 Vercel.com / Next.js — „Premium tech branding"

2.8 Tailwind CSS site — „Developer experience tradusă vizual"

2.9 Civic Tech Field Guide (civictech.guide) — „Catalogul civic tech"

2.10 Signal.org — „Încredere prin simplitate"

3. Direcție UI/UX

3.1 Pagina principală (Home)

3.2 Pagina de listing produse (Catalog)

3.3 Pagina de produs (Product Detail)

3.4 Animații și interacțiuni

Animații de intrare (scroll-triggered)

Interacțiuni hover

Animații speciale (doar pe home)

Ce NU animăm

3.5 Mobile-first

3.6 Dark mode

4. Tailwind CSS Implementation

4.1 tailwind.config.js (v4 syntax cu CSS config sau legacy JS)

4.2 CSS global (styles/global.css)

4.3 Componente necesare (Astro/Svelte)

5. Design emoțional

5.1 Prima impresie (0-5 secunde)

5.2 Storytelling vizual Before/After

Varianta A: Split-screen slider

Varianta B: Secvență scroll

Exemple concrete de before/after

5.3 Trust signals fără corporate

5.4 Microinteracțiuni care creează emoție

5.5 Vocea brandului în design

6. Checklist de implementare design (Faza 1)

Săptămâna 1 — Fundamente

Săptămâna 2 — Paginile principale

Săptămâna 3 — Rafinament

Săptămâna 4 — Polish

7. Resurse și link-uri

Font-uri (toate gratuite, open source)

Iconuri

Tailwind

Design inspiration

Tool-uri de design

57 KiB

Raw Permalink Blame History