Test project 11 Jun 2024
adhara - a marketing landing taken to production quality
- Nuxt 3
- Vue 3
- TypeScript
- Tailwind
- Cloudflare
A multi-page marketing landing handed over as a pixel-perfect reference build, hardened into something you could actually ship. The detail route used to throw a server-side 500 on any unknown id; it now guards the lookup and returns a real 404. The container capped at the wrong width across a whole breakpoint range, so the desktop layout was squished - fixed at the token level, then every page swept for a true 390-to-1440 responsive pass with the duplicated header controls and form-overflow cases removed. The whole thing sits on an accessibility floor: one h1 per page with a correct heading order, accessible names on every icon-only control, visible keyboard focus, a skip link, html lang, and the video modal and mobile drawer turned into real dialogs with focus trap and Escape. Placeholder lorem was replaced with believable Russian copy, the empty pages were filled in, a four-column footer was added, and pure black and white were swapped for tinted near-neutrals. The interface is deliberately calm - no scroll or hover motion, only instant feedback and a reduced-motion guard. Nuxt 3 + Vue 3 + TypeScript + Tailwind + Pinia + vee-validate + Swiper, statically generated and deployed on Cloudflare Pages.