Лендинг с 3D-книгой и ИИ-генератором практик
Задача
Создание премиального интерактивного лендинга для продвижения 30-дневного ежедневника-практикума по эмоциональному интеллекту «Витамины Счастья» коуча Галины Полуниной. Главная цель — погрузить пользователя в атмосферу книги еще до покупки. Для этого был реализован интерактивный демонстрационный модуль: 1. Интерактивная 3D-книга: на десктопе отображается объемный двухстраничный разворот с возможностью листать страницы, а на мобильных устройствах — оптимизированная карточная версия с поддержкой свайпов и жестов. 2. Интеграция с искусственным интеллектом (Google Gemini API): пользователь может выбрать свое текущее настроение или тему (например, тревога, прокрастинация, усталость) и мгновенно сгенерировать персональную психологическую практику («витамин») на день прямо внутри разворота книги. 3. Уникальный визуальный стиль: глубокая темная тема, благородные градиенты, кастомная каллиграфическая подпись автора на базе Google Fonts (Caveat), плавная анимация появления элементов и полное отсутствие стандартных эмодзи (все иконки заменены на кастомную SVG-графику).
Что сделали
- Стек технологий: React 19, TypeScript, Vite, Tailwind CSS, Express (Node.js), Google Gemini API, GSAP (GreenSock Animation Platform) + ScrollTrigger, PM2, Nginx, Ubuntu VPS.
- Выполненные работы:
- 1. Разработка фронтенда: верстка адаптивного интерфейса с использованием современных стандартов типографики и плавной микроанимации элементов управления.
- 2. Реализация 3D-компонента книги: создание механики интерактивного перелистывания страниц с использованием CSS 3D-трансформаций и математического расчета масштабирования (scale) под высоту и ширину любых экранов (чтобы книга не обрезалась на смартфонах).
- 3. Интеграция с ИИ: разработка Node.js API-эндпоинта на бэкенде, взаимодействующего с моделью Gemini. Написан структурированный системный промпт с валидацией JSON-схемы ответа, чтобы практики генерировались в теплом авторском стиле Галины Полуниной на чистом русском языке без ошибок.
- 4. Анимация: интеграция GSAP для эффектного раскрытия книги при скролле и плавного росписи подписи автора.
- 5. Деплой и настройка инфраструктуры: развертывание приложения на VPS под управлением Ubuntu, настройка проксирования запросов через Nginx, выпуск SSL-сертификата Certbot (HTTPS), обеспечение отказоустойчивости сервера с помощью диспетчера процессов PM2.
Результат
Покупатель видит содержимое ежедневника до оплаты: разворот листается прямо на странице, а ИИ по выбранному состоянию — тревога, прокрастинация, усталость — собирает персональную практику. То есть человек пробует продукт, а не читает его описание. На смартфоне разворот заменён карточками со свайпом, чтобы книга не обрезалась. Сайт открыт: vitahap.ru
Стек
Услуга из этого кейса
Что входит в работу, сроки и цены — на странице услуги.
Сайт для онлайн-школы, который продаёт курсы