Кроссовер — промосайт розыгрыша автомобиля за заказы в сервисе доставки торговой сети
Четыре недели апреля участники, вошедшие на сайт акции, получали шансы за заказы в приложении доставки сети: заказ от 1400 ₽ — 1 шанс, заказ от 1400 ₽ с готовой едой или товаром партнёров из подборки — 2 шанса. Каждую неделю разыгрывалось больше 100 призов — сертификаты на путешествия, товары для активного отдыха и электронику, бонусные баллы программы лояльности, подписки на онлайн-кинотеатры, — а главным призом был семейный автомобиль. За регистрацию участник выбирал гарантированный подарок — промокод онлайн-кинотеатра.
- Роль
- Фронтенд-разработчик
- Сроки
- 2025, март — апрель
Задача
Сделать промосайт по готовому дизайну на общей основе акций сети: главную с анимированным первым экраном, механикой, призами и подборками для двойных шансов, вход, личный кабинет с шансами по неделям, выбором подарка и призами, страницу победителей.
Что входит в решение
- Первый экран с анимацией из Adobe Animate во фрейме на десктопе и статичной картинкой на телефоне.
- Механика — слайдер из четырёх шагов со своей навигацией по номерам; призы в трёх вкладках: главный, еженедельные (сетка на десктопе, слайдер со счётчиком на телефоне) и гарантированные.
- Блок двойных шансов — слайдер подборок со ссылками в приложение доставки и целями аналитики на кликах.
- Личный кабинет: шансы по неделям с датами и разбивкой по типу заказа, шансы в розыгрыше главного приза с прогрессом по четырём неделям, подсказка о том, как копить шансы.
- Гарантированный подарок за регистрацию: после согласия с правилами — окно со ссылкой на выбор, в кабинете — слайдер из трёх промокодов; выбранный код открывается в окне и появляется в призах участника с копированием и условиями использования.
- Вход через единый аккаунт покупателя сети (OAuth), победители с поиском по телефону и фильтрами по неделе и призу, вопросы и ответы, обратная связь, адаптивная вёрстка.
Коммерческий проект в команде: весь фронтенд по готовому дизайну сделал я, анимация первого экрана — экспорт из Adobe Animate. Скриншоты сняты с локальной сборки на тестовых данных; логотипы, названия и QR-код сети и её сервиса доставки, название бонусной программы, марка автомобиля и названия онлайн-кинотеатров скрыты.