Сайт алкогольного бренда

Beluga Group · Hunting Bitter

Beluga Group. Линейка биттеров Hunting Bitter: Hunting Herbal и Hunting Berry. Сайт собран по макету. Десктоп — композиция 1920 px: страница масштабируется от ширины окна, на широком экране полей нет. Ниже 768 px открывается своя мобильная вёрстка. Русская версия на huntingbitter.ru, английская на huntingbitter.com. Тексты, фото, видео, рецепты и ссылки на магазин правятся из админки, без выкладки кода.

HTML

CSS

JAVASCRIPT

NODE.JS

ОБСУДИТЬ ПОХОЖИЙ САЙТ

ОТКРЫТЬ САЙТ

ЗАДАЧА

Сайт должен держать макет: бутылки, деревья, неон, видео в блоках. Это алкоголь, поэтому сначала вопрос про возраст. Два вкуса и пять объёмов, у каждого своя бутылка и своя ссылка «Купить». Отдельная страница рецептов. Форма обратной связи: обращение остаётся в кабинете и уходит письмом на почту бренда. Маркетинг меняет текст и картинку сам. Хостинг общий, публичная часть — файлы, отдельного сервиса под админку там нет.

РЕШЕНИЕ

Сверстали десктоп и телефон отдельно. На входе окно 18+: год, шаги, язык, политика конфиденциальности. Пока возраст не подтверждён, страница не скроллится, ответ запоминается в браузере. Дальше история, два вкуса, подача, технология и контакты. С карточки вкуса открывается страница продукта: Herbal или Berry, объём 100, 250, 500, 700 или 1000 мл, бутылка меняется вместе с крепостью. Рецепты — отдельная страница, три коктейля, тексты приходят из админки. Заявка пишется в базу и уходит письмом. Запросы мимо сайта и шаблонный спам до почты не доходят. Админка на Node. На хостинге её поднимает PHP и проксирует /admin и /api. Если процесс упал, следующий заход его поднимает.

ФУНКЦИОНАЛ

Подача

Макет держится и на широком экране, и на телефоне.

Окно 18+

Год, кнопки плюс и минус, русский и английский, ссылка на политику. Сайт не листается, пока человек не вошёл. Ответ хранится в браузере.

Десктоп

Композиция 1920×6595. Страница масштабируется от ширины окна. В шапке: о серии, вкусы, подача, технология, контакты, язык.

Телефон

Своя вёрстка. Шапка, меню, те же разделы. Ниже 768 px десктопная композиция не показывается.

Движение

Знак на первом экране включается как неон и не горит ровно. Деревья в блоке вкусов светятся пульсом. В истории, подаче и технологии стоят видео. Если система просит меньше анимации, мерцание снимается, знак остаётся включённым.

Страницы

Главная, карточка вкуса и рецепты. Два языка на двух доменах.

Два вкуса

Hunting Herbal и Hunting Berry на главной. У каждого своя бутылка, подпись и кнопка «Узнать больше».

Карточка

Пять объёмов: 100, 250, 500, 700 и 1000 мл. На 100 мл бутылка короче, на остальных выше. На карточке крепость и кнопка «Купить здесь». Старая ссылка с объёмом 200 открывает 250.

Рецепты

Три подачи: Herbal с колой, Berry с тоником, чистый вид. Заголовок, состав, приготовление и фото меняются в админке. Страница забирает их по API.

Два домена

huntingbitter.ru открывает русский, huntingbitter.com — английский. Переключатель в шапке работает на обоих. Старый адрес /new-bitter/ отдаёт 301 на корень.

Заявки

Форма в подвале. Письмо уходит на почту бренда, спам — нет.

Форма

Запрос, ФИО, почта, телефон, согласие на обработку данных. Человек сразу видит, что заявка ушла. Письмо отправляется следом.

Почта

Получатели задаются в настройках админки. Письмо уходит с ящика бренда, в теме имя из заявки.

Мимо сайта

Скрытое поле, слишком быстрая отправка, лимит с одного адреса. Прямой запрос без страницы и метки времени, которые ставит только скрипт сайта, молча отбрасывается. Боту при этом отвечают, что всё прошло.

Вкладка «Спам»

Стоп-слова: реклама, ссылки на мессенджеры, шаблонные «расчёты». Такая заявка остаётся в админке, письмо по ней не уходит. Живую можно вернуть кнопкой «Не спам».