Тестовое задание 11 Jun 2024
adhara - маркетинговый лендинг, доведённый до продакшена
- Nuxt 3
- Vue 3
- TypeScript
- Tailwind
- Cloudflare
Многостраничный маркетинговый лендинг, переданный как pixel-perfect эталон и доведённый до состояния, которое не стыдно выкатить. Страница документа раньше падала с серверной ошибкой 500 на любом неизвестном id - теперь поиск защищён и отдаёт настоящий 404. Контейнер упирался в неверную ширину на целом диапазоне брейкпоинтов, из-за чего десктоп-вёрстка сжималась - исправлено на уровне токенов, после чего по всем страницам прошёл честный адаптив 390-1440 с устранением дублирующихся контролов в шапке и переполнения форм. Всё держится на базовом уровне доступности: один h1 на страницу с правильной иерархией заголовков, доступные имена у всех иконочных кнопок, видимый фокус с клавиатуры, skip-ссылка, html lang, а видео-модалка и мобильное меню превращены в настоящие диалоги с ловушкой фокуса и Escape. Плейсхолдерный текст заменён на правдоподобный русский, пустые страницы заполнены, добавлен подвал в четыре колонки, а чистые чёрный и белый заменены на тонированные нейтральные. Интерфейс намеренно спокойный - без анимаций при скролле и наведении, только мгновенная обратная связь и учёт prefers-reduced-motion. Nuxt 3 + Vue 3 + TypeScript + Tailwind + Pinia + vee-validate + Swiper, статическая сборка и деплой на Cloudflare Pages.