Beauty-сайт без пудры и стока: день/ночь как главный продающий ход

ÉCLAT, премиальный салон на Патриарших, живёт в двух режимах: днём уход у топовых мастеров, по пятницам закрытые вечера с DJ-сетами. Мы не стали выбирать между двумя лицами бренда и сделали переключатель день/ночь, который на глазах у посетителя перекрашивает весь сайт, вплоть до hero-видео. Ни одной сторонней UI-библиотеки, Lighthouse 100/100/100 по доступности, практикам и SEO, весь визуальный ряд создан нейросетями без единого съёмочного дня.

eauty-ниша в вебе самая однообразная: пудровые палитры, стоковые улыбки, кнопка «записаться онлайн». У ÉCLAT при этом два продукта в одном помещении. Днём это премиальный салон: волосы, ногти, макияж, уход. Ночью по пятницам то же пространство превращается в закрытый клуб с резидент-диджеями и просекко. Обычный лендинг убил бы одну из идентичностей: либо «ещё один салон», либо «непонятный бар». Задача: показать обе жизни бренда на одной странице, не разрывая сайт надвое, и довести посетителя до онлайн-записи.

1. Переключатель день/ночь как центральная механика.

Это не тёмная тема «для глаз», а смена состояния бренда. Один клик, и светлый салон становится неоновым клубом: меняется вся палитра, hero-видео, акценты, настроение секций. То же помещение, те же кресла, другой свет. Технически темы построены на CSS-переменных, анти-FOUC-скрипт исключает мигание при загрузке, выбранный режим запоминается.

2. Два hero-видео вместо статичной обложки.

Днём посетителя встречает светлый зал в движении, ночью тот же зал в неоне и с диджейским пультом. Видео без звука, h264 + vp9, оптимизировано под мгновенный старт.

3. Структура, которая продаёт оба режима.

Лента «Сегодня в кресле» с ближайшими слотами тянет в запись прямо из первого экрана. Дальше услуги с ценами-ориентирами, мастера, работы, отдельная афиша вечеров (как у клуба, с датами и лайн-апом), отзывы, онлайн-запись, контакты с картой. Ночная секция получила собственный параллакс-фон и собственный характер.

4. Движение без анимационных фреймворков.

Собственный скролл-движок на requestAnimationFrame и IntersectionObserver: параллакс, каскадные reveal-появления, магнитные кнопки, кастомный курсор. Ни GSAP, ни Framer Motion: меньше килобайт, полный контроль над каждым кадром. Для тех, кому анимации мешают, prefers-reduced-motion отключает всё разом.

5. Медиапродакшн без фотосессии.

Полный визуальный ряд сгенерирован нейросетями: 12 изображений интерьера, мастеров и работ в 2K (Nano Banana Pro) плюс ночное hero-видео, полученное из ночного кадра через image-to-video (Seedance). Ключевая сложность: удержать одно и то же помещение в дневных и ночных кадрах, чтобы переключатель читался как «выключили свет», а не «другой салон». Постобработка: webp, h264/vp9, ни одного тяжёлого исходника в продакшене.

6. Техническая база.

Next.js 16 в режиме static export, React 19, ноль внешних UI-зависимостей, самохост шрифтов Playfair Display и Manrope. Полностью статическая отдача с хостинга в РФ: быстро, независимо от зарубежных CDN, без вопросов со 152-ФЗ.

- Lighthouse (mobile): Accessibility 100, Best Practices 100, SEO 100.

- Ни одной сторонней UI- или анимационной библиотеки: страница лёгкая, статика отдаётся мгновенно.

- Визуальный ряд целиком из нейросетей, в едином стиле, без затрат на съёмочный день.

- Виджет онлайн-записи готов к подключению YCLIENTS.

- Сайт одинаково работает в обоих режимах и на мобильных: переключатель день/ночь доступен с любого экрана.