Claude VM
a6c03a091e
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)
1263 lines
57 KiB
Markdown
1263 lines
57 KiB
Markdown
# 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.*
|