Hope No Drugs — An EU-Funded Prevention Platform

Overview

Hope No Drugs is the public-facing platform for an Erasmus+ KA210-ADU project running from 2025 to 2027 across four EU countries (Romania as coordinator, with Portugal, Italy and Bulgaria). The project gives parents of 8–18-year-olds practical strategies and conversation tools for drug-use prevention — not clinical, not preachy, just useful. The tagline says it directly: "Protejăm viitorul, educând prezentul" ("Protecting the future by educating the present"). We built the platform from scratch as a custom-coded build, with five languages, full accessibility compliance, and the engineering standards the EU reasonably demands from co-funded projects.

The Challenge

EU-funded prevention programmes have a specific problem: they need to communicate with real families while also meeting the visibility obligations that come with Erasmus+ funding. The copy has to be warm and practical (parents won't read a government report). The structure has to be transparent (the EU funding body needs to see how the money is being spent). The accessibility has to be rock-solid (EU law). And it has to work across four partner countries and five languages, without losing coherence as you switch from Romanian to Italian to Bulgarian.

The deeper challenge was not making it look like a stock EU project website. There's a certain aesthetic — blue with a star ring, stock photography of smiling families — that signals "EU-funded" in the worst possible way. We wanted it to feel like a real resource, not a line item in a grant budget.

The Approach

We built the platform on the same in-house tangled-design architecture we use for our most serious engineering work — the same codebase that powers Uroclinic Craiova and the DGAUIS public sector platform. This isn't accidental. A mature in-house engine means:

• Proven accessibility (WCAG 2.2 AA baseline)
• Proven performance (Core Web Vitals green scores out of the box)
• Proven admin experience (content editors can maintain the platform themselves)
• Familiar structure across projects

For the multilingual part, we configured a proper language layer — not as an afterthought, but as a first-class navigation element. Language selection is visible on every page, URLs are language-coded, and the five partner-country languages are all treated equally.

The Solution

• Custom-coded platform (built on our in-house tangled-design architecture)
• Five-language switcher covering Romanian, English, Italian, Portuguese, and Bulgarian, via GTranslate with proper hreflang tagging
• Three-step prevention methodology as a custom numbered-card component:
  1. Conversații deschise (Open conversations) — how to talk to your kid without them shutting down
  2. Observă (Observe) — what warning signs to actually look for
  3. Oferă alternative (Offer alternatives) — what to do instead of only saying no
• "Știați că?" statistics block with three data points about adolescent drug use
• Expandable FAQ accordion for the most common parent questions
• Contact form with hCaptcha integration — privacy-respecting, no Google tracking
• Four partner country showcase with flag icons and partner organisation details
• "Cum te poți implica" (How to get involved) — four-step engagement flow
• Povestiri (User stories) section — personal accounts from families
• Mobilități calendar — upcoming Erasmus+ mobility activities
• Animated counters (counters.js) showing reach and impact
• Sticky secondary CTA ("Ghid pentru părinți" — Parent Guide) visible on every page
• Emergency "112" tel: links accessible from any page
• Self-hosted Poppins typeface (WOFF2, subsetted)
• Fluid clamp() typography
• Skip-links, ARIA labels, semantic HTML throughout — WCAG 2.2 AA compliance verified by manual audit
• Erasmus+ funding disclosure prominently shown

Key Moments

The three-step methodology as a component

The EU deliverable documents describe the prevention methodology in dense academic prose. Parents won't read that. We turned it into three numbered cards with icons, short plain-language titles, and two-sentence summaries. This is the difference between "meeting the deliverable" and "actually reaching the audience" — we did both.

Five languages, properly

Multilingual is easy to get wrong. We made sure the five languages are treated as equals: each has its own URL structure, each has proper hreflang tagging, the language switcher is visible on every page (not hidden in a footer), and the content isn't just machine-translated — the partner organisations contributed native-language content for each of their countries.

hCaptcha instead of reCAPTCHA

Small detail, big implication. Google reCAPTCHA tracks users across the web. For an EU-funded platform about family privacy, that's the wrong signal. hCaptcha is privacy-respecting, ad-free, and completely adequate. We made this choice without being asked — because it matches the project's values.

Accessibility by default

The site is fully keyboard-navigable, fully screen-reader compatible, fully colour-contrast compliant, and fully text-scalable. We tested it manually with a screen reader. We tested it on a keyboard-only session. We tested it at 200% zoom. Every test passed. For an EU-funded project, this is a legal requirement. For us, it's just how we build.

The Stack

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

The Result

A live, fully compliant, multilingual prevention platform serving parents across four EU countries in five languages. Launched on schedule for the Erasmus+ project kick-off. WCAG 2.2 AA verified. Core Web Vitals green. Partner organisations maintain their own language content through structured fields. The site feels like a resource, not a budget line item.