Кейс: Розробка товарного Landing Page на HTML/Tailwind для Holy Land Boldcare Lotion
Задача
Перед студією стояло завдання створити товарний Landing Page для презентації та продажу ліфтинг-лосьйону з ефектом ботекса — Holy Land Boldcare Starting Lotion. Сайт розроблявся як фінальна посадкова сторінка для прийому трафіку з соціальних мереж та контекстної реклами, орієнтована на швидке закриття користувача на покупку.
Основні технічні та маркетингові вимоги:
- Написання легкого коду на чистому HTML та Tailwind CSS без використання CMS для забезпечення максимальної швидкості завантаження на смартфонах.
- Реалізація маркетингових тригерів (таймер акції, блок вигоди при купівлі кількох одиниць товару).
- Пряма технічна інтеграція лід-форм із месенджером для моментального сповіщення менеджерів про замовлення.
1. Структура сторінки та блоки
Лендинг розбитий на логічні блоки, оптимізовані під роздрібні B2C-продажі:
- Головний екран: Оффер, велике зображення оригінального флакона, ціновий блок та інтерактивний таймер зворотного відліку, який автоматично перезапускається через local-storage.
- Ефект та проблематика: Список результатів застосування (зменшення мімічних зморшок, ліфтинг-ефект, вирівнювання текстури шкіри).
- Склад: Візуальний розбір діючих речовин (комплекс AHA-кислот, рослинні екстракти, антиоксиданти).
- Інструкція: Покрокові рекомендації щодо частоти нанесення.
- Соціальний блок: Відгуки покупців із рейтингом та акордеон із поширеними технічними запитаннями.
2. Дизайн та візуальний стиль
Інтерфейс побудований на базі Tailwind CSS. Стилістика адаптована під преміальну, але динамічну лінійку Boldcare.
- Колірна гама: Основний акцентний колір — насичений рожево-малиновий (#ee2c5b) та його темний відтінок (#c21f47), що контрастують із м'ям кремовим фоном (#fdfbf7).
- Типографіка: Для всього сайту використано сучасний та легко читабельний шрифт Manrope.
- UX-анімація: Реалізовано плавне скрол-виникнення блоків за допомогою легкої JS-анімації.
3. Інтерактивний вибір наборів та скрипт замовлення
У блоці оформлення замовлення реалізовано скрипт на чистому JavaScript, який дозволяє вибрати кількість флаконів (1, 2 або 3 одиниці). При виборі кількості автоматично змінюється підсумкова ціна, відображається розмір економії та додається логіка подарунків (безкоштовна доставка або косметичний бонус при замовленні від 2-х штук).
4. Технічна інтеграція (Telegram Bot)
Сайт повністю автономний. Головна особливість — інтегрований у фронтенд JavaScript-обробник форм. При натисканні кнопки «Оформити замовлення» дані покупця (ім'я, телефон, вибраний набір) автоматично та без перезавантаження сторінки (через fetch-запит) надсилаються до Telegram-каналу/боту відділу продажів.
Результат
Створено стабільний, швидкий та комерційно оптимізований товарний лендинг для продукту Holy Land Boldcare. Сайт валідний, адаптований під мобільний трафік і показує високу швидкість завантаження завдяки відсутності важких сторонніх скриптів.