Інструкція зі створення лендингу для товарного бізнесу

На основі брифу вище зроби наступне: ─── КРОК 1: АНАЛІЗ ПЕРЕД СТВОРЕННЯМ ─────────────── Перш ніж писати код — проаналізуй товар і визнач: • Хто цільова аудиторія: стать, вік, інтереси, рід занять • Які головні болі та бажання цієї аудиторії • Яка головна вигода товару для цієї аудиторії • Придумай назву магазину під тематику товару • Склади продаючий заголовок Hero який б'є в біль ЦА (НЕ назва товару, а вигода або рішення болю) • Визнач кольорову схему під тематику товару ─── ВАЖЛИВО: ПРАВИЛО БРИФУ ───────────────────────── ⛔ Використовуй ТІЛЬКИ ту інформацію, яка є в брифі вище. Не вигадуй характеристики, цифри, переваги або факти про товар яких немає в брифі. Якщо якоїсь інформації не вистачає — використай загальні формулювання або залиш [заповнити вручну]. ─── КРОК 2: СТВОРИ ФАЙЛ index.html ──────────────── ТЕХНІЧНІ ВИМОГИ: • Один файл index.html — весь CSS і JS вбудовані • ТІЛЬКИ мобільна версія (max-width: 480px) • Сучасний дизайн з насиченими кольорами під тематику • Без зовнішніх бібліотек — чистий HTML + CSS + JS • Шрифт: підключи Montserrat через Google Fonts • Мова: виключно УКРАЇНСЬКА • ⚠️ ЗОБРАЖЕННЯ: всі <img> теги завжди відображати квадратними — обов'язково застосовуй CSS: img { aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block; } • ⛔ ЗАБОРОНЕНО в <img>: зовнішні URL (https://...), атрибути onerror="...", будь-які placeholder-сервіси (picsum.photos, placeholder.com тощо). Використовуй ВИКЛЮЧНО локальні назви файлів: src="hero.png", src="photo1.png", src="photo2.png", src="photo3.png", src="photo4.png" СТРУКТУРА (всі блоки обов'язкові): ▌1. HERO • Назва магазину/бренду (придуманого) • H1 — продаючий заголовок під біль ЦА • Підзаголовок — головна вигода (1-2 речення) • Блок ціни: стара ціна закреслена + нова велика + бейдж знижки у % (яскраво) • hero.png — lifestyle фото товару в дії (квадрат: aspect-ratio:1/1; object-fit:cover) • Кнопка "Замовити зі знижкою" → скролл до форми • Таймер 24 год (localStorage — не скидається при перезавантаженні) ▌2. ЦИФРИ ДОВІРИ • 3 блоки: покупців / відгуків / гарантія • Реалістичні цифри під цей товар ▌3. ДЛЯ КОГО • Заголовок "Цей товар для тебе, якщо..." • 4 пункти з болями ЦА (емодзі + текст) ▌ФОТО після блоку "Для кого" (повна ширина) • photo3.png — без відступів, край в край (квадрат: aspect-ratio:1/1; object-fit:cover) • Підпис поверх фото знизу з градієнтом ▌4. ПЕРЕВАГИ • Заголовок "Чому обирають нас" • 6 карток у 2 колонки: іконка + назва + опис ▌5. ГАЛЕРЕЯ ФОТО • Swipe-слайдер з 3 слайдів (touch + mouse) • photo1.png, photo2.png, photo3.png (кожен слайд квадратний: aspect-ratio:1/1; object-fit:cover) • Крапки-індикатори під слайдером ▌6. ЯК ВИКОРИСТОВУВАТИ • 3 кроки з номерами: встановлення → використання → результат ▌7. ХАРАКТЕРИСТИКИ • Таблиця зебра: параметр | значення • Всі дані з брифу ▌8. ПОРІВНЯННЯ "БЕЗ НАС / З НАМИ" • 2 колонки: ❌ без товару | ✅ з товаром • 5 рядків порівняння ситуацій ▌9. ВІДГУКИ • 3 картки: ім'я + місто + ★★★★★ + текст • Реалістичні відгуки під цей товар ▌10. FAQ (акордеон) • 5 питань: кліком розкривається відповідь • Про доставку, оплату, гарантію, повернення, строк доставки ▌ФОТО перед формою (повна ширина) • photo4.png — без відступів, край в край (квадрат: aspect-ratio:1/1; object-fit:cover) • Підпис "Все включено в комплект 📦" ▌11. ФОРМА ЗАМОВЛЕННЯ • Контрастний фон — секція має виділятись • Заголовок з нагадуванням про знижку • Поля: Ім'я + Номер телефону (обидва обов'язкові) • Кнопка "Відправити замовлення" • Після відправки: повідомлення "Дякуємо! Зателефонуємо найближчим часом" + redirect на thanks.html через 2 секунди • Відправка в Telegram — ОБОВ'ЯЗКОВО використовуй такий JS-патерн із тест-режимом: const BOT = '[BOT_TOKEN]'; const CID = '[CHAT_ID]'; if (BOT.includes('[BOT_TOKEN]')) { // тест-режим: токен ще не вписаний — // просто показати "Дякуємо!" і редирект showSuccess(); setTimeout(()=>location.href='thanks.html',2000); } else { // бойовий режим: реальна відправка fetch(`https://api.telegram.org/bot${BOT}/sendMessage`,{ method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({chat_id:CID, text: msg}) }).finally(()=>{ showSuccess(); setTimeout(()=>location.href='thanks.html',2000); }); } ⚠️ Redirect на thanks.html і повідомлення "Дякуємо!" мусять спрацьовувати ЗАВЖДИ — і без токена (тест), і з токеном (бойовий режим). ▌12. ФУТЕР • Назва магазину + © рік • "Оплата при отриманні · Доставка по всій Україні" ▌STICKY КНОПКА • Фіксована внизу екрану "Замовити зі знижкою" • Зникає коли користувач доскролює до форми ▌FACEBOOK PIXEL • В вставити: fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView'); • При кліку на кнопку форми: fbq('track', 'Lead'); • Залиш YOUR_PIXEL_ID як плейсхолдер ─── ФІНАЛЬНА ПЕРЕВІРКА ──────────────────────────── ✅ Всі 12 блоків присутні ✅ Весь текст українською мовою ✅ Таймер через localStorage ✅ Слайдер свайпається пальцем ✅ Усі <img> використовують локальні файли (hero.png тощо) — жодних зовнішніх URL або onerror у зображеннях ✅ Форма: тест-режим працює без токена (redirect на thanks.html) ✅ Форма: з реальним токеном відправляє в Telegram + redirect ✅ Плейсхолдери [BOT_TOKEN] [CHAT_ID] [YOUR_PIXEL_ID] ✅ Sticky кнопка зникає біля форми ✅ 2 фото на повну ширину (після "Для кого" і перед формою)

Створи окремий файл thanks.html — сторінка подяки після замовлення. Вимоги: • Той самий стиль, шрифт і кольорова схема що і в index.html • Мова: виключно УКРАЇНСЬКА • Вміст сторінки: — Велика зелена галочка або чекмарк анімована — Заголовок "Дякуємо за замовлення!" — Текст: "Наш менеджер зателефонує вам найближчим часом для підтвердження" — Блок "Що буде далі" з 3 кроками: 1. Дзвінок менеджера для підтвердження (15-30 хвилин) 2. Відправка товару Новою Поштою або Укрпоштою 3. Отримання і оплата при отриманні — Назва і ціна товару (з брифу) — Блок гарантії повернення 14 днів — Кнопка "← Повернутись на головну" → посилання на index.html • Facebook Pixel: додай код пікселя з тегом Purchase подія fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'Purchase', { value: ЦІНА, currency: 'UAH' }); • Файл повністю автономний — весь CSS вбудований

На основі брифу товару вище згенеруй 5 промтів для генерації зображень у Nano Banana Pro або ChatGPT Image. Потрібні ці 5 типів фото: 1. hero.png — lifestyle фото: людина з товаром у реальному використанні, показує результат і вигоду для покупця. Це найважливіше фото — воно буде на головному екрані сайту. 2. photo1.png — продуктовий shot: основний вигляд товару, три чверті спереду, нейтральний або природній фон. 3. photo2.png — інший ракурс товару або деталь яка підкреслює ключову характеристику продукту. 4. photo3.png — атмосферний кадр товару: вечірнє або драматичне освітлення, передає настрій і емоцію. 5. photo4.png — комплектація: товар у складеному або упакованому вигляді поруч з усіма аксесуарами що входять в набір, flatlay на дерев'яній або кам'яній поверхні. Вимоги до кожного промту: • Мова промту: англійська • Стиль: photorealistic, professional photography • Колір, матеріал і форма товару — точно як описано в брифі • Формат в кінці кожного промту: Format: 1:1 • Кожен промт — окремий блок з назвою файлу