РАЗБОР ПРОЕКТАПРОМОСАЙТ

Маяк — промосайт с квизом о навыках

Промосайт совместной акции трёх компаний. Посетитель проходит тест, узнаёт свой тип — Творец, Организатор, Проводник или Искатель — и получает бонусы на продвижение своих услуг и промокоды партнёров.

Vue 3TypeScriptFrontendАнимации

Роль: Фронтенд-разработчик
Сроки: 2026, сентябрь — октябрь

Главная страница промосайта: маяк и кнопка «Пройти тест»

Задача

Собрать по макетам лендинг, тест, страницы результата и бонусов, сделать сцену с маяком живой и плавной на любых экранах и связать заявку с API.

Что входит в решение

Тест из восьми вопросов: луч маяка поворачивается между вопросами, а элементы сцены открывают советы партнёров.
Результат по самому частому ответу: четыре типа с направлениями, на которых можно заработать.
Страница бонусов с каруселью, промокодами партнёров и заявкой менеджеру партнёра.
Форма с проверкой полей, масками и подсказками DaData, отправка в API через TanStack Vue Query.
Доступные модальные окна: фокус не уходит из окна, Escape закрывает, фокус возвращается к кнопке.
Отдельная мобильная сцена, изображения в AVIF и WebP, без декоративной анимации при prefers-reduced-motion.

Первый вопрос теста рядом с маяком — Тест: между вопросами поворачивается луч маяка

Страница результата «Творец» — Результат — один из четырёх типов

Страница бонусов «Поздравляем!» — Бонусы партнёров и заявка менеджеру

Коммерческий проект в команде: фронтенд по готовому дизайну. Скриншоты сняты с тестовой сборки, логотипы и названия партнёров скрыты.

Следующий проект Ворон — кабинет промоакции с уровнямиВЕБ-ПРИЛОЖЕНИЕ