Верстка сайта по дизайну + адаптация ко всем устройствам

ТЕХНИЧЕ ЗАДАНИЕ (ТЗ)на разработку премиум-лендинга«Очищенная Питьевая Вода»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. Стоимость работы.