Лендинг · Custom HTML · 2025

HCC Service — премиум-СТО для топовых авто в Черкассах

Лендинг автосервиса для авто среднего и премиум-класса: чип-тюнинг, ремонт двигателей, турбин и экологических систем. Слайдер-обложка, отзывы, заявка из 3 полей.

Custom HTML

Хочу такой же проект Открыть сайт

HCC Service (Himpas Coast Customs) — автосервис для среднего и премиум-класса в Черкассах. Специализация: чип-тюнинг Stage1/Stage2, ремонт двигателей и турбин, экологические системы (удаление EGR, DPF, AdBlue) и диагностика электроники. Для запуска нужен был одностраничный лендинг, который уложит позиционирование, услуги, соцдоказательство и квалификацию команды в один скролл и выведет лида в короткую форму заявки.

Hero-обложка со слайдером и брендированным лого-знаком

Hero — 6-слайдовая Slick-карусель с затемнённым градиент-фоном, на котором «плывёт» гигантский каллиграфический watermark «НСС» в фирменных bg-blue тонах. Первый слайд несёт ключевое позиционирование (топовый сервис для топовых авто) и CTA-кнопку на форму, следующие фокусируются на чип-тюнинге, экологических системах, команде и оборудовании. Стрелки и пагинатор слайдера зафиксированы под каруселью; автопрогресс — slick.js 1.8.1.

Hero HCC Service с Porsche Panamera — Hero-слайд: Porsche Panamera, «НСС»-каллиграфия на фоне, headline и CTA «Заказать звонок».

Команда и счётчики опыта

Блок «Мы — команда экспертов» собирает в одном экране позиционирование для premium-сегмента и три ключевые цифры: 3+ года опыта, 3300+ выполненных работ, 97% довольных клиентов. Каждая цифра — отдельная карточка с подписью и иллюстрацией со СТО (диагностика бортовых систем, тормозные суппорты Brembo, сход-развал). Справа — большое фото механика в фирменном джинсовом костюме с вышивкой «НСС» на спине.

Команда HCC и счётчики — Счётчики запускаются инкрементом от 0 до целевого значения при scroll-in; костюм механика с фирменной вышивкой — часть визуальной идентификации бренда.

Сетка преимуществ с реальными рабочими сценами

Секция «Почему выбирают нас?» — 5 карточек в асимметричной сетке: современное диагностическое оборудование (FLEX-сканер на ноутбуке), глубокая специализация на сложных случаях (механик под капотом с фонариком), качественные запчасти и ПО (турбина крупным планом в руках мастера), индивидуальный подход (клиентка с мастером в боксе), опытные специалисты и нестандартные задачи (искры от болгарки). Все фото — с собственного СТО, без стоков.

Сетка преимуществ HCC Service — Две большие карточки задают горизонтальный ритм, три поменьше внизу закрывают grid с сохранением иерархии «первое впечатление → детали».

Каталог услуг вокруг рентген-силуэта авто

«Наши услуги» — центральный x-ray-силуэт седана BMW 5-Series в голубом свечении, а вокруг него разбросаны 6 услуг-флажков с тонкими линиями-коннекторами к агрегатам: чип-тюнинг (от двигателя), ремонт двигателей и турбин, экологические системы (от выхлопа), диагностика электроники, сервисное обслуживание, решение нестандартных задач. Композиция объясняет «кто мы и что ремонтируем» без единого скриншота меню.

Каталог услуг вокруг рентген-авто — Карта услуг визуально мапится на агрегаты авто — клиент сразу видит, что покрывается сервисом.

Галерея работ с лого-медальоном в центре

Галерея — 3×3 grid из 8 реальных фото со СТО (замена суппорта, шиномонтаж, форсунка-стенд Launch, очистка EGR, проверка систем кондиционера, ремонт ходовой) и центральным медальоном-логотипом «Himpas Coast Customs». Клик по фото открывает Fancybox 3.5.7 с полноэкранным просмотром. Композиция делает два полезных дела одновременно: показывает реальные руки за работой и вторично навязывает лого посреди основного контентного пространства.

Галерея работ HCC Service — Центральный медальон в grid — оригинальный приём, чтобы лого бренда читалось не только в хедере, а в самом контентном ядре.

Соцдоказательство: 6 отзывов с оценками

Отзывы — 3×2 grid в ярких тёмно-голубых карточках, каждая несёт одно имя (Виталий, Пётр, Валерия, Луиза), пятизвёздочную оценку и живой текст с конкретикой: Skoda Octavia A7 с отказом кондиционера, замена клапанной крышки и прокладки вакуумного насоса, масло Motul на разлив, ремонт авто VAG-группы. Тон — разговорный, без вылизывания в «правильный литературный» — и это работает на доверие быстрее стерильных отзывов.

Отзывы клиентов HCC — Карточки одинакового размера, отсутствие аватарок не мешает — основной вес на тексте и пятизвёздочной оценке.

Короткая форма заявки и Instagram-блок

Форма «Оставьте заявку и мы вам перезвоним» — 3 поля (имя, телефон, комментарий) + CTA-кнопка. Справа — генеративное изображение седана с неоновыми «схемами внутри» как намёк на чип-тюнинг и диагностику. В соседнем блоке контактов — график работы, адрес, телефоны и фирменный QR-код перехода в Instagram @hcc_service, который параллельно служит лид-каналом и витриной свежих работ.

Форма заявки HCC — 3 поля — компромисс между квалификацией лида и трением; комментарий не обязателен, но часто даёт полезные детали от клиента к звонку менеджера.

Стек

HTML5 + чистый CSS3 с кастомными переменными, jQuery 3.6.1 для всей интерактивности, Slick 1.8.1 (hero-карусель, отзывы, мобильная галерея), Fancybox 3.5.7 (lightbox в галерее), Google Maps JavaScript API (встроенная карта по адресу СТО), Google Fonts (Oswald + Russo One для заголовков, Open Sans для текста). Без CMS — статический HTML, который LiteSpeed-сервер отдаёт мгновенно.