Натяжка верстки WP

ТЕХНІЧНЕ ЗАВДАННЯ (ТЗ)на розробку преміум-лендінгу«Очищена Питна Вода»1. Загальна інформація про проєкт Тип сайту: Односторінковий преміум-лендінг (Landing Page) з високою конверсією та можливістю розширення до повноцінного сайту з блогом/базою знань. Мета: Залучення лідів (заявки на консультацію), побудова довіри до бренду через емоційний візуал, наукові факти та демонстрацію цінностей компанії. Платформа: Виконавець пропонує оптимальну платформу (Webflow або WordPress + Bricks Builder) з обґрунтуванням у комерційній пропозиції. Перевага надається рішенням, що забезпечують чистий код, високу швидкість та преміальний візуал без шаблонних рішень.2. Цільова аудиторія Сім'ї (особливо з дітьми), які дбають про здоров'я та якість життя. Люди, які цінують продуману кухню, якісну очищену воду та довгострокові рішення для дому. Особи 30–55 років, середній та вищий дохід, які шукають надійного партнера для встановлення системи очищення води з сервісом.3. Візуальний стиль та дизайн (UI/UX) Референс:Додається референсний макет (зображення телефону з hero-секцією та блоком «Цінності»). Стиль повинен повністю відповідати цьому макету: чистий, світлий, преміальний lifestyle з теплими акцентами. Кольорова гама:Білий та світло-сірий фон (чистота), елементи натурального дерева або теплі акценти, сонячно-помаранчеві/жовті кнопки CTA, глибокий синій/антрацит для тексту. Зображення:Виключно преміальний lifestyle. Живі емоційні люди (не дивляться в камеру), м'яке ранкове сонячне освітлення, натуральні кольори. Жодних штучних стокових фото. Типографіка:Сучасна, читабельна, з достатнім міжрядковим інтервалом і білим простором. Професійний рівень без перевантаження.4. Структура лендінгу (6 основних блоків)БЛОК 1. Головний екран (Hero) Візуал:Велике світле фото на весь екран — сучасна кухня, мама, тато, донька та синочок п'ють чисту воду зі скляних стаканів, посміхаються, м'яке ранкове сонце. Заголовок:«Ваше здоров'я починається з ковтка очищеної питної води.» Підзаголовок:Системи очистки питної води з пожиттєвим сервісним обслуговуванням для вашої сім'ї щодня. CTA-кнопка:«Отримати консультацію експерта» (помаранчева/жовта, помітна).БЛОК 2. Наші Цінності та Філософія (Звернення засновника) Візуал:Професійне фото власника (smart casual, відкритий і довірливий вигляд). Текст (з референсу): НАША МІСІЯ Особисте звернення: CTA:«Я хочу бути здоровим» (скрол до Блоку 3 або форми).БЛОК 3. Просвітницький курс (Науковий підхід) Заголовок:Дізнайтеся більше про воду, яку ви п'єте! Формат:Стильна інтерактивна сітка з 10 клікабельних блоків/карток. Кожна картка веде на окрему сторінку статті/відео (рекомендовано для SEO) або модальне вікно з повним текстом/відео. Примітка:Тексти/відео статей надає Замовник. Виконавець забезпечує зручну структуру та привабливе відображення.БЛОК 4. Очищена питна вода змінює смак життя! (Емоційні докази) 4 преміальні картки в сітці або колажі: Здоров'я:Дівчина п'є очищену воду. Текст: «Відновлюйте своє здоров'я ковток за ковтком.» Борщ / Страви:Макро борщу з парою. Текст: «Відчуй насичений смак своїх страв з очищеною питною водою.» Кава / Чай:Батько заварює каву, бабуся з чашкою чаю. Текст: «Розкрий справжній аромат кави та насолодись запашним чаєм.» Побут / Техніка:Донька прасує сорочку чистою парою. Текст: «Збережи техніку на роки: ідеальна пара без накипу.»БЛОК 5. Комплексне рішення (Продукт) Візуал:Естетичний монтаж 5-ступеневої системи зворотного осмосу під мийкою (чистий вигляд, без хаосу трубок) + стильний окремий краник на стільниці. Текст:Переваги через кінцевий результат для клієнта (чистота, смак, турбота про здоров'я). Оффер:«Система під ключ + Професійний монтаж + Пожиттєвий сервіс».БЛОК 6. Блок довіри (Соціальні докази та гарантії) Головний тригер:Велика акцентна плашка: «Якщо якість води Вам не сподобається — поверніть систему протягом 60 днів (0% ризику)». Елементи: Карусель відгуків (відео або скріншоти реальних листувань). Галерея реальних робіт «До / Після» монтажу. Логотипи / згадки (якщо є).5. Функціональні та технічні вимогиФорми та лідогенерація Форма консультації з полями: Ім'я, Телефон, Місто/район, «Яка вода у вас зараз?» (або коротке питання). Інтеграція з Telegram-ботом або CRM (на вибір Замовника).Аналітика та маркетинг Google Analytics 4 + подія на відправку форми. Meta Pixel (Facebook/Instagram). Налаштування конверсій.Швидкість та SEO PageSpeed Insights ≥ 90 на мобільному та десктопі. Чиста семантична верстка, оптимізовані зображення, lazy loading.Мобільна версія Mobile-first дизайн. Ідеальне відображення на iPhone та Android (референс — макет на телефоні).CMS та статті Зручна система для додавання та редагування статей курсу (колекція/пости).6. Етапи виконання та затвердження (4 етапи) Прототип (UX-чернетка):Чорно-біла схема розташування блоків і кнопок. Перевірка логіки та акцентів. Дизайн-концепт (UI):Кольоровий макет перших 3 блоків з затвердженими фото. Перевірка стилю, шрифтів, кольорів кнопок. Повний дизайн:Візуалізація всіх 6 блоків. Фінальні правки по графіці. Верстка та запуск:Готовий сайт на обраній платформі. Перевірка швидкості, адаптивності, роботи форм, аналітики.7. Вимоги до виконавця Досвід створення преміум-лендінгів для продуктів/послуг здоров'я, еко, техніки або lifestyle-брендів (обов'язково портфоліо з посиланнями). Досвід роботи з Webflow або Bricks Builder (обов'язково). Готовність працювати поетапно з проміжними затвердженнями.8. Що потрібно в комерційній пропозиції Рекомендована платформа з обґрунтуванням (Webflow / WP + Bricks). Фіксована вартість з розбивкою за етапами (або фікс + можливі правки). Терміни виконання по етапах. 2–3 релевантні приклади з портфоліо (посилання + короткий опис). Умови підтримки після запуску (перші 1–3 місяці). Контактна особа та готовність до дзвінка/зустрічі для обговорення.9. Додаткова інформація Весь текстовий контент (крім референсних фраз) надає Замовник. Фото та візуали: Виконує виконавець, інтегрує та оптимізує. Домен та хостинг: Замовник надає або виконавець допомагає з підключенням. Авторські права: Після повної оплати всі права на сайт переходять Замовнику.

Потрібно впровадити на сайтахOpenCart(3шт) повноцінний механізм керування згодою на використання файлів cookie (Cookie Consent) та налаштувати Google Consent Mode v2. Необхідно: встановити та налаштувати CMP (Cookie Management Platform) або інше рішення для керування згодами користувачів; реалізувати повноцінний банер Cookie Consent із можливістю прийняття, відхилення та налаштування категорій cookie; налаштуватиGoogle Consent Mode v2 черезGoogle Tag Manager; забезпечити коректну передачу статусів згоди доGoogle Analytics 4,Google Ads, а також інших маркетингових сервісів; налаштувати роботу аналітичних та рекламних тегів таким чином, щоб вони запускалися лише відповідно до отриманих дозволів користувача. Наразі банер cookie є лише інформаційним і не керує згодами, а також не передає їхній статус до Google-сервісів. Потрібно виконати повне налаштування відповідно до актуальних вимогGDPR таGoogle Consent Mode v2.

Необхідно додати 129 товарів. Є файл вивантаження з товарами, однак стандартний імпорт не підходить, оскільки перед завантаженням потрібно створити структуру каталогу: категорії, розділи та за необхідності підкатегорії. Після цього виконати імпорт товарів і перевірити, щоб усі картки коректно розподілилися по категоріях. Якщо у вас є досвід виконання подібних завдань, надсилайте приклади робіт, терміни виконання та вартість.

ЩО ПОТРІБНО ЗРОБИТИ Роботи розбиті на блоки, можна братися за все або за окремі блоки: Блок 1 — Оптимізація швидкості (Mobile-First) Поточна оцінка мобільної версії PageSpeed — 51/100. Потрібно довести до 80+. Цільові метрики: LCP < 2.5 с (зараз 7.4 с), FCP < 1.8 с (зараз 3.9 с), TBT < 200 мс. Роботи: критичний CSS inline, відкладений JS, WebP/AVIF, lazy load, аудит плагінів. Блок 2 — GTM та аналітика Прибрати hardcoded скрипти GA4/Google Ads з header.php. Встановити та налаштувати плагін GTM4WP. Впровадити Google Consent Mode v2 (скрипт або cookie-банер). Блок 3 — Шаблон картки товару Єдиний Mobile-First шаблон Single Product в Elementor. Sticky кнопка "Купити" при скролі на мобільному. Cross-sell блок послуг під кнопкою покупки. Перевірка автоматичної передачі подій view_item, add_to_cart через GTM4WP. Блок 4 — Товарний фід для Google Merchant Center Встановити Product Feed Pro (AdTribes) або CTX Feed. Налаштувати XML-фід з правильним маппінгом полів (id, title, gtin, brand, price, availability). Щоденне оновлення через WP-Cron, автовиключення товарів "немає в наявності". Блок 5 — 6 посадкових сторінок (лендингів) в Elementor 3 сторінки e-commerce: каталог комплектуючих, готові рішення ДБЖ, комплекти СЕС. 3 сторінки лідогенерації: монтаж ДБЖ під ключ, СЕС для дому, рішення для бізнесу. Є детальні прототипи зі структурою і блоками кожної сторінки. Блок 6 — Форми та події dataLayer 6 унікальних подій dataLayer при успішній відправці форм (CF7 та Elementor Pro Forms). Обов'язкові вимоги до всіх форм: маска вводу телефону, захист від повторної відправки, reCAPTCHA v3 або Honeypot. --- ВИМОГИ — Практичний досвід з Elementor Pro (шаблони Single Product, кастомні Page Templates) — Розуміння WooCommerce dataLayer та роботи GTM4WP — Досвід оптимізації швидкості WordPress (Critical CSS, WebP, WP Rocket або аналог) — Досвід налаштування подій dataLayer для CF7 або Elementor Pro Forms — Портфоліо або приклади аналогічних робіт — обов'язково Знання Google Consent Mode v2 буде перевагою. --- УМОВИ РОБОТИ Сайт на бойовому хостингу — всі зміни тільки через staging або тестовий дубль. Будь-яка оптимізація не повинна порушувати ініціалізацію GTM і динамічний dataLayer. Детальне ТЗ надається після першого контакту. Опдата поетапна по блоках, або за весь проект ( домовимось) Напишіть у відгуку: 1. Ваш досвід з аналогічними задачами (посилання або короткий опис кейсу) 2. Чи готові виконувати весь проєкт або окремі блоки 3. Орієнтовну вартість і терміни після ознайомлення з ТЗ

Опис замовлення: Шукаємо досвідченого frontend-розробника/фахівця з OpenCart для оптимізації швидкості завантаження сайту (категорії та картки товарів) під вимоги Google Core Web Vitals. Про проект: * CMS: OpenCart. * Специфіка: Сайт працює в режимі каталогу (кошика та оформлення замовлення немає). * Об'єм: 2900 позицій. * Серверна частина: Вже оптимізована (працює на OpenLiteSpeed). * Стек: Робота ведеться виключно з кодом шаблону, модифікаторами та фронтендом. Без роботи із базою даних. Що потрібно зробити (Технічне завдання): 1. Відкладене завантаження скриптів (Delay JS): * Проблема: Сторонні скрипти аналітики (GTM, Google Tag) блокують основний потік на мобільних пристроях приблизно на 4.3 секунди. * Завдання: Налаштувати відкладений запуск цих скриптів. Скрипти повинні активуватися строго по першій дії користувача (перший скролл, тап по екрану або рух миші). * Важливо: Збір статистики, аналітика та робота реклами мають зберегтися у повному обсязі. 2. Виправлення метрики CLS (Стабільність верстки): * Проблема: Сторінка «стрибає» і зсувається під час завантаження картинок. * Завдання: У файлах стилів або шаблону теми жорстко прописати HTML-атрибути width і heightдля всіх зображень товарів у каталозі (листингах) та картках товару. * Мета: Зарезервувати місце під зображення в DOM-дереві до їх фактичного завантаження, щоб унеможливити зсув контенту. Перевірити, щоб адаптивність (CSS) не зламалася. 3. Оптимізація критичного шляху (LCP): * Завдання: Прописати для основного (головного) зображення товару першому екрані тег fetchpriority="high". Це дасть браузеру команду завантажувати головне фото товару у пріоритетному порядку. Вимоги до виконавця та умови приймання: 1. Без зайвих модулів: Робота виконується чистим кодом/модифікаторами, без встановлення додаткових сторонніх чи платних плагінів оптимізації. 2. Безпека та верстка: Ви несете повну відповідальність за верстку. Після внесення правок візуальне відображення сайту на мобільних та ПК, а також функціонал (фільтри, перемикання фото в галереї, меню) повинні залишитися без змін. 3. Критерій здачі роботи (DoD): Надання скріншота та посилання на живий тест звіту Google PageSpeed Insights (для мобільної версії). Показник продуктивності має бути не нижчим за 75 балів, а метрика CLS — не більше 0.1 (у зеленій зоні). Правки вносити строго через модифікатори (OCMOD) або копію теми, щоб не затерти оновлення ядра. У відгуку, будь ласка, вкажіть: 1. Чи був досвід налаштування Delay JS саме для GTM на OpenCart? 2. Термін виконання завдання. 3. Вартість роботи.