АнтикорПро — лендинг автосервиса по антикоррозийной обработке кузова

Задача

Спроектировать и собрать конверсионный лендинг автосервиса по антикоррозийной обработке кузова автомобилей. Главные требования: дать понять за 5 секунд, что услуга решает (ржавчину), показать конкретные цифры (срок защиты, гарантия, количество обработанных авто), вывести 4 пакета с прозрачными ценами и быстрой записью на осмотр.

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

Решение

Полностью статичный one-page лендинг на чистом HTML + Tailwind CSS (через CDN, без локальной сборки), с минимальным vanilla JS для аккордеонов и калькулятора. Полная статика — никакого React, никакого бандлера. Бот видит готовый контент с первого байта.

9 смысловых блоков на одной странице

• Hero с фоном-фотографией днища авто на подъёмнике, чипом-аккцентом «Полная защита кузова», заголовком «Остановим ржавчину. Продлим жизнь кузова на 10+ лет» и двумя CTA — основной «Записаться на осмотр» и вторичный «Рассчитать цену»
• Проблема: три карточки «До/После» (днище, пороги, арки) с метками «Без защиты / АнтикорПро» и реальными фотографиями
• Услуги: 4 пакета (Антикор днища, Скрытые полости, Полный комплекс, Антикор + шумоизоляция) с ценами от 8 900 ₽ до 24 900 ₽, составом работ и сроками
• Технология в 5 шагов: горизонтальный таймлайн от мойки днища до контроля качества, каждый шаг с фото
• Материалы: четыре сертифицированных состава (Dinitrol, Tectyl, Mercasol, Noxudol) с указанием зоны применения и срока защиты
• Почему мы: 4 плитки с метриками (тёплый бокс, 10 лет опыта, гарантия 3 года, 2 400+ обработанных авто)
• Кейсы: три карточки с реальными моделями (Porsche 911 1988, Toyota Land Cruiser 2015, BMW M3 2004), сроками и стоимостью
• Калькулятор: тип авто × возраст × пакет защиты = мгновенный расчёт стоимости
• Отзывы: 3 карточки с рейтингом 4.9/5 из 312 отзывов и значком «Проверенный отзыв»
• FAQ: 8 ключевых вопросов (гарантия, зима, EV, ржавчина, сроки)
• Контактная форма + карта: 4 поля, режим работы, мессенджеры

Дизайн-система: индустриальный премиум

Своя палитра в духе Material Design 3 — но с радикально приглушённой нейтральной шкалой и одним ярким акцентом. Базовый фон #0c0e10 (почти чёрный графит), поверхности от #121415 до #37393b для бенто-карточек, кислотно-оранжевый #FF5A1F исключительно для CTA и активных состояний. Контурные элементы — холодный серый #919095.

Типографика: Oswald в плотном condensed-варианте 500–700 для заголовков (важно — с полной поддержкой кириллицы, в отличие от популярного Bebas Neue), Inter для основного текста, JetBrains Mono для меток и цифр. Все три семейства подгружаются через Google Fonts с display=swap.

Конверсионный копирайт

Заголовки построены по принципу «бенефит + конкретика»:

• «Остановим ржавчину. Продлим жизнь кузова на 10+ лет.»
• «Каждый второй автомобиль старше 5 лет уже имеет очаги активной коррозии.»
• «Гарантия 3 года в договоре. Передаётся новому владельцу при продаже автомобиля.»

CTA в повелительном наклонении («Записаться на осмотр», «Рассчитать цену», «Заказать»), цены везде с «от» и в рублях с тонким разделителем. В пакете «Полный комплекс» добавлен бейдж «Хит продаж» — нейминг не «recommended», а под российскую аудиторию.

Все изображения локальные

В России внешние CDN типа Google User Content часто требуют VPN. Поэтому все 27 фото из дизайн-источника скачаны в img/ сайта, ссылки переписаны. В разделе кейсов оригинальные «сгенерированные» картинки заменены на реальные фото моделей с Wikimedia Commons (Porsche 911 G-series Carrera, Toyota Land Cruiser J200, BMW E46) — к каждой применён CSS-фильтр brightness/contrast/saturate, чтобы выровнять тонально под общую тёмную палитру.

Калькулятор и форма

Калькулятор стоимости — три инпута (тип авто как радиокнопки-карточки, возраст как select, пакет как радиокнопки-карточки) + крупный итог с CTA «Записаться по этой цене». Форма записи — 4 поля (имя, телефон, дата, авто) с маской на телефоне.

Минимальный интерактив без бандла

JS — буквально несколько inline-блоков: тоггл мобильного меню, открытие/закрытие аккордеонов FAQ, переключение состояний калькулятора, отправка формы. Бандлер не нужен — Tailwind подключён через CDN, шрифты с Google Fonts.

Результат

Лендинг работает на отдельном поддомене с Let’s Encrypt SSL. TTFB меньше 100 мс — Nginx отдаёт готовый 86 КБ HTML напрямую. Все 27 изображений с aggressive cache headers. Полная индексация контента ботами Яндекс/Google с первого байта без выполнения JavaScript.

Это демонстрация того, как должен выглядеть лендинг сервисного бизнеса в 2026 году: не очередной WordPress с десятью плагинами, а лёгкая статика с честной структурой «proof → packages → process → trust → form», которая просто работает.

Стек технологий

• Фреймворк: статический HTML без сборки
• Стили: Tailwind CSS через CDN с custom config (цвета, шрифты, spacing, font-size — всё в одном месте)
• Шрифты: Oswald (заголовки), Inter (текст), JetBrains Mono (метки) — Google Fonts
• Иконки: Material Symbols Outlined через web font (тоже Google Fonts)
• JS: vanilla, точечный inline-скрипт
• Картинки: локальные JPG в img/, 27 файлов общим весом ~11 МБ
• Деплой: rsync по SSH на VPS, Nginx + Let’s Encrypt