CSS, @media, адаптация дизайна из макетов под существующий функционал

# Технічне завдання Потрібно оновити дизайн інтернет-магазину на WordPress/WooCommerce та виконати низку технічних доробок. ## 1. Редизайн сайту Поточний сайт: https://promo.doctor-magnesium.com.ua/ За основу нового дизайну використати: https://demo.templatemonster.com/demo/220581.html ### Вимоги 
Максимально наблизити зовнішній вигляд до референсу.
Адаптувати дизайн під існуючу структуру магазину.
Зберегти весь існуючий функціонал.
Повністю адаптивна верстка (ПК, планшет, мобільні пристрої).
Оптимізувати швидкість завантаження сторінок.
Не погіршити SEO (URL, метадані, індексацію).
 ## 2. WooCommerce Необхідно перевірити та виправити відображення статусів замовлень. На даний момент статуси працюють некоректно. Потрібно забезпечити правильне відображення та обробку стандартних статусів WooCommerce, зокрема: 
Оплачено
В обробці
Виконується
Завершено
Очікує оплату
Скасовано
Повернення коштів
Інші стандартні статуси
 Потрібно знайти причину проблеми (плагін, тема або кастомний код) та виправити її без втрати функціоналу. ## 3. Англійська версія сайту Необхідно реалізувати повноцінну англомовну версію сайту. Вимоги: 
можливість перемикання мов;
англійська версія всіх основних сторінок;
переклад інтерфейсу магазину;
переклад WooCommerce;
переклад картки товару;
коректна робота кошика та оформлення замовлення англійською мовою.
 Можна використовувати відповідний плагін (WPML, Polylang або інший), але бажано запропонувати оптимальне рішення. ## 4. Загальні вимоги 
Перед початком робіт зробити резервну копію сайту.
Усі зміни бажано виконувати спочатку на тестовій копії.
Код має бути акуратним та сумісним з майбутніми оновленнями WordPress і WooCommerce.
Після завершення надати короткий звіт про виконані роботи.
 ## При відповіді прошу вказати 
Орієнтовну вартість.
Терміни виконання.
Досвід роботи з WordPress/WooCommerce.
Приклади схожих проєктів (за наявності).
Який підхід буде використаний для реалізації англомовної версії.

ТЕХНІЧНЕ ЗАВДАННЯ (ТЗ)на розробку преміум-лендінгу«Очищена Питна Вода»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. Додаткова інформація Весь текстовий контент (крім референсних фраз) надає Замовник. Фото та візуали: Виконує виконавець, інтегрує та оптимізує. Домен та хостинг: Замовник надає або виконавець допомагає з підключенням. Авторські права: Після повної оплати всі права на сайт переходять Замовнику.

Доброго дня. Треба виправити запуск сайту і, можливо, верстку на WordPress. Сайт відображається при запуску як на скріні. Фрілансер, який робив, зник і не закінчив роботу. Треба перевірити правильність верстки і допрацювати її. Як на десктопі, так і на мобільній версії. Дизайн у Figma, дизайн, який треба, є також на скріншотах, в принципі, здається, зроблено, але не завершено правильне відображення на різних розмірах екрану.

Є сторінка нашого сайту (лист очікування) -https://onchainradar.ai Вона занадто сильно первантажена і лагає. Треба пофіксити це, трохи підкоригувати анімації та деякі елементи на мобільному. Сайт на html і css. Оцініть сроки реалізації та вартість. Нам це треба уже сьогодні-завтра максимум. Дякую.

Зверстати лист для відправки клієнтам (приклад прикріплено), дам текст та картинку верхню. Це лише приклад з gpt, можливо зробите цікавіше?