Готовое решение - свободно
DriveCare - готовый лендинг автосервиса
Одностраничный сайт, который собран не ради красоты, а ради заявок: 6 секций, 12 услуг с описанием, 15 модальных окон и форма записи, которая заканчивается экраном подтверждения. Верстка написана вручную, без единой сторонней библиотеки. Я продаю этот шаблон один раз - после сделки он снимается с витрины.
- 15 модальных окон
- 12 услуг с описанием и ценой
- 0 сторонних библиотек
- 1 день передача исходников
Почему автосервису нужен один экран, а не сайт из 8 страниц
Человек с неисправной машиной не ходит по разделам. Он смотрит, берутся ли за его проблему, сколько это стоит и как быстро запишут. Многостраничный сайт заставляет его искать ответ, лендинг дает ответ по ходу прокрутки и в конце каждой секции предлагает оставить заявку.
Поэтому здесь нет каталога и корзины, зато есть то, чего обычно не хватает шаблонам за эти деньги: у каждой услуги свое окно с составом работ, у формы - проверка полей и экран подтверждения, у мобильной версии - отдельный макет, а не сжатый десктоп.
- 1 целевое действие - заявка, и 3 пути к нему: кнопка в шапке, кнопки первого экрана и форма в секции преимуществ
- Навигация подсвечивает текущую секцию в шапке, в мобильном меню и в подвале
- Все повторяющиеся элементы сверстаны под повторители админки: сетка не ломается ни на 2, ни на 8 карточках
Разбор лендинга по секциям
7 экранов, из которых собран сайт. Выберите секцию слева - справа кадр и разбор: что там стоит и зачем.
Первый экран
Заголовок, 2 действия и полоса из 4 гарантий.
Человек попадает на страницу автосервиса с одним вопросом: справятся ли здесь с моей машиной. Первый экран отвечает на него до прокрутки - крупный заголовок, короткая строка про диагностику, ремонт и обслуживание, 2 кнопки под разные намерения («Записаться на сервис» для готовых и «Узнать стоимость» для сомневающихся) и полоса гарантий: срок гарантии, опыт мастеров, соблюдение сроков, честные цены. Справа фотография автомобиля с рукописной подписью - место под снимок Вашего сервиса.
Услуги
6 карточек с фотографией, названием и ценой от.
Сетка услуг - главный экран после первого. Каждая карточка это фотография работы, название и цена от, набранная знаком белорусского рубля. Карточка целиком кликабельна и открывает модальное окно услуги с описанием, составом работ и кнопкой записи. 6 позиций видны сразу, чтобы экран не превращался в простыню, а под ними кнопка, раскрывающая остальные.
Все 12 услуг
Кнопка раскрывает оставшиеся 6 прямо на странице.
Сайт остается одностраничным: «Все услуги» не уводят на отдельную страницу, а дораскрывают сетку. 12 услуг закрывают типовой прайс автосервиса - диагностика, техобслуживание, ремонт двигателя, ходовая часть, тормозная система, шиномонтаж, развал-схождение, электрика, кондиционирование, кузовной ремонт, покраска, полировка. В админке это один повторитель: добавили позицию - она встала в сетку и получила свое окно.
Преимущества и заявка
Темная секция: 6 причин слева, форма справа.
Самая важная секция для конверсии. Слева 6 коротких доводов с иконками - опыт, гарантия, оригинальные запчасти, честные цены, расположение, ремонт в день обращения. Справа форма заявки: имя, телефон с маской, марка автомобиля, выбор услуги и согласие на обработку данных. Человек читает довод и тут же, не прокручивая страницу, оставляет заявку.
Этапы работ
4 шага, последний всегда акцентный.
Секция снимает главный страх клиента автосервиса - что счет вырастет по ходу ремонта. 4 карточки с иконкой, крупным номером и подписью: заявка, согласование, диагностика и ремонт, выдача с гарантией. Подсветка последнего шага висит на правиле для последнего элемента, а не на классе, поэтому при любом числе шагов в админке акцент останется на финальном.
Отзывы
4 карточки с оценкой и услугой, остальные в окне.
Отзыв работает только тогда, когда видно, за какую работу он оставлен. Поэтому карточка несет не только имя, оценку и текст, но и плашку услуги. 4 отзыва стоят в секции, кнопка «Все отзывы» открывает окно с полным списком - в шаблоне их 10. Тексты хранятся в одном месте и не дублируются между секцией и окном.
Контакты и подвал
Телефон, адрес, время работы и маршрут одной кнопкой.
Контакты собраны карточками: телефон, почта, адрес с пометкой про подъезд и парковку, часы работы. Вместо тяжелой карты на странице - кнопка «Построить маршрут», которая открывает Яндекс.Карты в новой вкладке: страница не тянет чужой скрипт и не теряет в скорости. Подвал повторяет навигацию, контакты и соцсети.
15 модальных окон вместо одной формы
Окна - это то, на чем дешевые шаблоны заканчиваются. Здесь их 15: 12 услуг, запись, расчет стоимости и отзывы. Каждое доведено до второго шага.
-
Запись на сервис
Имя, телефон, автомобиль, дата, время и услуга. Справа - блок с фотографией, чтобы окно не выглядело голой формой.
-
Экран подтверждения
Второй шаг вместо исчезающего уведомления: галочка, сводка записи с датой, услугой и автомобилем, напоминание про перенос.
-
Расчет стоимости
Отдельное окно для тех, кто еще не готов записываться: собирает телефон и услугу, обещает звонок с расчетом.
-
Карточка услуги
У каждой из 12 услуг свое окно: фотография, что входит в работу, цена и кнопка записи с уже подставленной услугой.
-
Свой календарь
Системный календарь в каждом браузере выглядит по-своему. Здесь он написан вручную: прошедшие даты закрыты, значение уходит в форму скрытым полем.
-
Свой выпадающий список
Системный список операционная система рисует сама, и ни шрифт, ни скругления к нему не применить. В шаблоне это кнопка со списком и скрытым полем.
-
Проверка полей
Незаполненное обязательное поле подсвечивается акцентом с мягкой подложкой, подсказка гаснет, как только поле начали править.
-
Все отзывы
Окно со списком отзывов целиком: на узком экране список превращается в ленту с прокруткой и точками.
Ноль сторонних библиотек - и это не экономия, а решение
Шаблон ставится на WordPress, где уже крутятся скрипты темы и плагинов. Каждая лишняя библиотека - это килобайты и риск конфликта. Поэтому все написано руками.
-
Маска телефона
Формат +375 (__) ___-__-__ на чистом JavaScript. Не ломает вставку из буфера и не мешает набирать с клавиатуры.
-
Календарь
Свой, а не системный: прошедшие даты закрыты, значение уходит в форму скрытым полем, сброс формы календарь обрабатывает сам.
-
Выпадающие списки
Кнопка, список с ролью listbox и скрытое поле. Шрифт, цвета и скругления те же, что у остального интерфейса, - системный список так не умеет.
-
Слайдер отзывов
Нативная прокрутка с прилипанием: свайп пальцем и трекпадом работает сам, скрипт нужен только стрелкам и точкам.
Сборка на Gulp 5 и Webpack 5, стили на SCSS, размеры переводятся в rem автоматически. Линтеры прогнаны перед продажей: stylelint, eslint и htmlhint не дают ни одного замечания на 21 файле разметки.
Мобильная версия сверстана по отдельному макету
Больше половины заявок в автосервис приходит со смартфона, поэтому мобильная версия здесь не сжатый десктоп. Услуги становятся строками, этапы - таймлайном, отзывы - лентой, форма уезжает в свою секцию, а меню разворачивается панелью.
-
Первый экран
Заголовок в 2 строки, кнопки в палец шириной, гарантии в 2 колонки.
-
Услуги строками
Сетка превращается в строки: фотография слева, название и цена справа.
-
Этапы таймлайном
4 шага встают в колонку, номер уходит вправо и не спорит с текстом.
-
Отзывы лентой
Карточки листаются пальцем, под ними точки. Прокрутка нативная, без библиотеки.
-
Заявка отдельно
Форма выносится в свою темную секцию, поля на всю ширину, кнопка крупная.
-
Контакты
Телефон, адрес и часы работы карточками, маршрут открывается в картах.
-
Запись с телефона
Окно записи разворачивается на весь экран, поля не требуют прицеливания.
-
Меню панелью
Не сжатая шапка, а своя панель: иконки пунктов, активный пункт с точкой, кнопки и контакты.
Шаблон сверстан под перенос на WordPress
Это не отдельная работа «потом», а условие, под которое писалась разметка с первого дня.
- Повторяющиеся элементы - услуга, этап, отзыв, преимущество, контакт - сверстаны одним переиспользуемым блоком, который в админке становится повторителем
- Тексты, телефоны, адреса и ссылки вынесены в отдельные узлы и не зашиты в разметку
- Данные услуг и отзывов лежат отдельно от разметки, поэтому переезд в поля админки не требует переписывать верстку
- Модальные окна услуг собираются из одного шаблона: 12 окон - это 12 наборов данных, а не 12 копий кода
- Перенос на WordPress с полями ACF я делаю отдельно, по договоренности - верстка к нему уже готова
Что входит в цену
от 899 руб.
- Исходники целиком: HTML, SCSS, JavaScript, шрифты, иконки и настроенная сборка
- 15 модальных окон и все состояния форм, показанные выше
- Мобильная версия по отдельному макету, а не сжатый десктоп
- Замена названия, логотипа, палитры и контактов на Ваши
- Передача в течение 1 дня после оплаты
- 2 недели поддержки по вопросам верстки после передачи
Отдельно обсуждаются: перенос на WordPress с полями админки, подключение отправки форм на почту или в мессенджер, дополнительные секции и наполнение реальным контентом.
Продается один раз
Это не шаблон с маркетплейса, который купят еще 300 человек. После сделки DriveCare снимается с витрины, и в интернете не появится второго автосервиса с этим же сайтом. Исходники переходят к Вам полностью: дорабатывайте сами, отдавайте другому разработчику, переносите на любую CMS.