Hope No Drugs — Platformă de prevenție cu finanțare europeană

Prezentare generală

Hope No Drugs este platforma publică a unui proiect Erasmus+ KA210-ADU care se desfășoară între 2025 și 2027 în patru țări UE (România ca țară coordonatoare, alături de Portugalia, Italia și Bulgaria). Proiectul le oferă părinților cu copii între 8 și 18 ani strategii practice și repere de dialog pentru prevenirea consumului de droguri — fără ton clinic, fără predici, doar lucruri care ajută. Sloganul o spune direct: „Protejăm viitorul, educând prezentul”. Am scris platforma de la zero — cod propriu, cinci limbi, conformitate WCAG completă și standardele de inginerie pe care UE le cere, pe bună dreptate, proiectelor cofinanțate.

Provocarea

Programele de prevenție finanțate de UE au o problemă aparte: trebuie să vorbească pe limba familiilor reale și, în același timp, să bifeze obligațiile de vizibilitate care vin la pachet cu finanțarea Erasmus+. Tonul trebuie să fie cald și practic — niciun părinte nu citește un raport guvernamental. Structura, transparentă — finanțatorul vrea să vadă pe ce se duc banii. Accesibilitatea, impecabilă — o cere legislația europeană. Și totul trebuie să funcționeze în patru țări partenere și cinci limbi, fără să se piardă coerența când treci de la română la italiană sau la bulgară.

Provocarea adevărată era însă alta: să nu arate ca site-ul tipic de proiect european. Există o estetică anume — albastru cu inelul de stele, fotografii de stoc cu familii zâmbitoare — care strigă „finanțat UE” în cel mai prost mod posibil. Noi am vrut o resursă adevărată, nu o anexă la un buget de grant.

Abordarea

Am construit platforma pe aceeași arhitectură in-house tangled-design pe care ne bazăm în cele mai pretențioase proiecte de inginerie — același cod care stă la baza site-ului Uroclinic Craiova și a platformei publice DGAUIS. Nu e întâmplător. Un motor intern matur înseamnă:

• Accesibilitate verificată în proiecte reale (WCAG 2.2 AA ca standard minim)
• Performanță din prima zi (Core Web Vitals pe verde, fără optimizări ulterioare)
• Administrare simplă (editorii de conținut întrețin platforma fără ajutorul nostru)
• Aceeași structură, de la un proiect la altul

Partea multilingvă n-a fost o bifă pusă la final: selectorul de limbă e element central de navigație, vizibil pe fiecare pagină, URL-urile poartă codul limbii, iar cele cinci limbi ale țărilor partenere au exact același statut.

Soluția

• Platformă scrisă de la zero (pe arhitectura noastră in-house tangled-design)
• Selector cu cinci limbi — română, engleză, italiană, portugheză și bulgară — prin GTranslate, cu hreflang corect
• Metodologia de prevenție în trei pași, transformată într-o componentă custom cu carduri numerotate:
  1. Conversații deschise — cum să vorbești cu copilul tău fără să se închidă în el
  2. Observă — care sunt semnalele de alarmă care contează cu adevărat
  3. Oferă alternative — ce faci în loc să spui doar „nu”
• Bloc de statistici „Știați că?”, cu trei cifre despre consumul de droguri la adolescenți
• Secțiune FAQ tip acordeon, cu răspunsuri la cele mai frecvente întrebări ale părinților
• Formular de contact cu hCaptcha — fără tracking de la Google
• Prezentarea celor patru țări partenere, cu steaguri și detalii despre organizațiile din fiecare
• „Cum te poți implica” — un parcurs în patru pași
• Secțiunea Povestiri — mărturii personale din partea familiilor
• Calendarul mobilităților — activitățile Erasmus+ programate în perioada următoare
• Contoare animate (counters.js) care arată aria de acoperire și impactul proiectului
• CTA secundar sticky („Ghid pentru părinți”) vizibil pe fiecare pagină
• Apel de urgență la 112 (linkuri tel:) accesibil de pe orice pagină
• Fontul Poppins self-hosted (WOFF2, subsetat)
• Tipografie fluidă cu clamp()
• Skip-links, etichete ARIA, HTML semantic peste tot — conformitate WCAG 2.2 AA verificată prin audit manual
• Declarația de finanțare Erasmus+ afișată la vedere

Momente-cheie

Metodologia în trei pași, transformată în componentă

Livrabilele UE descriu metodologia de prevenție într-un limbaj academic dens. Părinții nu citesc așa ceva. Am transformat-o în trei carduri numerotate, cu iconițe, titluri scurte pe limba oamenilor și rezumate de două propoziții. Asta e diferența dintre a bifa livrabilul și a ajunge cu adevărat la oameni — noi le-am făcut pe amândouă.

Cinci limbi, făcute ca lumea

La multilingv se greșește ușor. La noi, cele cinci limbi au același statut: fiecare cu propria structură de URL, fiecare cu hreflang corect, selectorul de limbă vizibil pe fiecare pagină (nu ascuns în footer). Iar conținutul nu e doar tradus automat — fiecare organizație parteneră a venit cu conținut redactat direct în limba țării ei.

hCaptcha în loc de reCAPTCHA

Un detaliu mic, cu miză mare. Google reCAPTCHA urmărește utilizatorii pe tot internetul. Pentru o platformă finanțată de UE, unde confidențialitatea familiilor chiar contează, e exact semnalul greșit. hCaptcha respectă confidențialitatea, nu vine cu reclame și acoperă tot ce era nevoie. N-a trebuit să ne ceară nimeni asta — am ales hCaptcha pentru că se potrivește cu valorile proiectului.

Accesibilitate din start

Site-ul se poate parcurge integral de la tastatură, funcționează cu cititoarele de ecran, respectă regulile de contrast, iar textul se poate mări fără să se strice nimic. L-am testat manual cu un cititor de ecran, apoi doar din tastatură, apoi la zoom de 200%. A trecut de fiecare dată. Pentru un proiect finanțat de UE, asta e obligație legală. Noi oricum așa construim.

Stack-ul tehnic

Custom-coded platform (tangled-design in-house architecture)
Self-hosted Poppins (WOFF2, subsetted)
Custom CSS files: header, hero, global, patterns
Deferred JS strategy
Custom counters.js + schema.js
Five-language multilingual setup · hCaptcha
Schema.org (Organization)
WCAG 2.2 AA compliance
Speculation-rules prefetch API

Rezultatul

O platformă de prevenție live, multilingvă și pe deplin conformă, folosită de părinți din patru țări UE, în cinci limbi. Lansată la timp pentru kick-off-ul proiectului Erasmus+. WCAG 2.2 AA verificat. Core Web Vitals pe verde. Organizațiile partenere își administrează singure conținutul în limba lor, prin câmpuri structurate. Site-ul e o resursă adevărată, nu o linie bugetară.