A Customer First AC: редизайн и доработка сайта

Новый дизайн и набор доработок для сайта HVAC-компании в Южной Флориде. Концепция построена на жалюзи воздушной решётки, на каждой странице понятный путь к звонку или заявке, четыре языка и быстрые страницы. Работа продолжается: добавляются новые разделы и уточнения.

Направление: Доработка вебсайтов
Ниша: HVAC-услуги
Рынок: Флорида, США
Языки: 4 языка
Платформа: Astro, Cloudflare Pages
Сайт: acustomerfirstac.com

400+страниц в одной дизайн-системе

4языка с переключателем с флагами в шапке и подвале

62 КБсредний вес HTML страницы, примерно вдвое меньше прежнего

Что сделано

Дизайн-концепция

Авторская концепция на основе жалюзи воздушной решётки, узнаваемого элемента HVAC
Палитра небесно-голубого и лаймового со строкой ламелей между секциями и по краям карточек
Концепция выбрана из набора дизайн-вариантов и проверена на реальных страницах
Единая типографская шкала и единый набор компонентов для всех типов страниц
Мелкий текст и ссылки держатся на контрасте 4,5:1 и выше

Главная страница

Фото в первом экране за настоящими ламелями, которые поворачиваются одна за другой
На компьютере ламели следуют за курсором, на сенсорных экранах открываются при загрузке, идут за прокруткой, а по касанию закрываются и открываются снова
Блоки в порядке конверсии: полоса доверия, услуги с картинками, преимущества, отзывы, свежие статьи, форма заявки
Кнопки звонка и Schedule Now в шапке и в панели, которая остаётся на телефонах

Шапка и навигация

Новая рамка шапки с номером телефона и кнопкой Schedule Now
Выпадающие меню с картинками услуг и простые списки для раздела About Us
Переключатель языков с флагами в шапке и подвале для четырёх языков
Одна строка хлебных крошек над заголовком на каждой внутренней странице, из данных страницы
Компактная высота шапки на телефонах и компьютерах

Шапки страниц и текст

Небесно-голубая полоса шапки страницы с крошками и заголовком
Длинный текст одним компонентом: вводный абзац, заголовки с полосой от голубого к лаймовому, списки карточками с галочками
FAQ отдельным разделом под текстом, все ответы раскрыты
Сворачиваемый блок «Читать далее» внутри карточки

Услуги и города

Хаб услуг с собственным первым экраном и карточками с картинками в сетке
Страницы услуг: полоса, текст, фото и блок консультации
Хаб «Районы обслуживания» с карточками городов, сгруппированными по округам
Форма заявки на хабе услуг

Статьи и блог

Шапка статьи в той же полосе, широкий текст и рейка Jump to до восьми пунктов
Строка автора с названием компании, датой и временем чтения
Кнопки Summarize with AI: ChatGPT, Perplexity, Claude и Grok
Карточка звонка, которая остаётся на виду, и звонок в одно касание внутри статьи на телефонах
Список блога и страницы категорий собираются из одного каталога
Карточки статей с логотипом компании в аватаре

Приём заявок и отзывы

Карточка заявки: панель с данными слева, форма справа, на главной форма стоит последней
Формы отправляются через почтовый Worker с проверкой источника каждой заявки
Всплывающая форма заявки на каждом языке
Отзывы каруселью из трёх карточек со стрелками, настоящие отзывы показаны дословно
Строка с оценкой рядом с формой и на хабе услуг

Скорость и техническая база

Статические страницы на Cloudflare Pages, кеш на границе обновляется при каждой выкладке
Убраны дубли аналитических скриптов, аналитика стартует после отрисовки страницы
Убраны неиспользуемые веб-шрифты, Bootstrap уменьшен с 227 КБ до 72 КБ
Картинки отдаются в том размере, в котором отрисованы
Средний вес HTML страницы 62 КБ, примерно вдвое меньше прежнего
Конвейер выкладки с автоматической проверкой ссылок и микроразметки

Результат

Одна дизайн-система на 400+ страницах и четырёх языках: главная, услуги, города, блог, статьи, контакты и о компании
До звонка или заявки одно касание с любой страницы: телефон в шапке, Schedule Now, панель на телефонах, форма заявки и карточка звонка в статье
Средний вес HTML страницы 62 КБ, примерно вдвое меньше прежнего, и 72 КБ Bootstrap вместо 227 КБ
Мелкий текст и ссылки на контрасте 4,5:1 и выше
Любую статью можно пересказать через ChatGPT, Perplexity, Claude или Grok в один клик
Работа продолжается: добавляются новые разделы и уточнения