Сайт автосервиса и детейлинга
Сайт автосервиса и детейлинга «Гараж 42» в тёмном гараже с оранжевым акцентом: шапка со статусом свободного подъёмника, первый экран с силуэтом автомобиля, который прорисовывается и подсвечивает зоны с ценами, калькулятор услуг по классу авто, «до / после» со шторкой по вкладкам, процесс с рельсой, заливающейся по прокрутке, мастера с 3D-наклоном, отзывы с бегущими лентами и счётчиками, запись по слотам на неделю от текущего дня, карта с прорисовкой маршрута и подвал с контурным словом. Unbounded, Inter Tight и JetBrains Mono.
Сайт сервиса, где клиент сразу видит, что и за сколько сделают с его машиной: зоны подсвечиваются на силуэте, калькулятор считает цену по классу авто, «до и после» показывает результат, а запись занимает пару шагов. Сервис в демо вымышленный.
Из чего собрано
10 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка автосервиса с эмблемой и живым статусом боксаnavbar-034
Статус «свободен подъёмник №2» с пульсом, телефон, «Записаться», бургер.
2. Первый экран
Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышейhero-046
Supra влетает в кадр в дрифте и замирает на ночном мосту, за крышей поднимается «Гараж 42».
3. Калькулятор
Калькулятор услуг детейлинга: чипы, класс авто, итог на летуauto-001
Класс авто и чипы услуг, итог и время на лету, «Записаться» уносит выбор в запись.
4. До / после
До/после детейлинга: шторка с перетаскиванием и вкладки «фары / кузов / салон»auto-002
Шторка сравнения по вкладкам «фары / кузов / салон».
5. Процесс
Процесс автосервиса: таймлайн четырёх шагов с прогрессом по прокруткеauto-003
Четыре шага с рельсой, которая заливается по прокрутке.
6. Мастера
Мастера автосервиса: карточки с фото и наклоном за курсоромpeople-014
Карточки с 3D-наклоном и бликом, стаж и машины.
7. Отзывы
Отзывы автосервиса: счётчики, лента марок и два ряда бегущих карточекtestimonials-026
Счётчики докручиваются, лента марок, два ряда отзывов навстречу.
8. Запись
Запись в автосервис: сетка слотов на неделю и панель заказаauto-004
Сетка неделя × часы от сегодняшнего дня, занятые перечёркнуты, форма-заглушка.
9. Контакты
Карта и контакты автосервиса: svg-схема с маршрутом и меткой боксаmap-011
SVG-карта кварталов, маршрут прорисовывается, метка пульсирует.
10. Подвал
Подвал автосервиса с огромным контурным словом-маркойfooter-033
Колонки, контакты, гигантское контурное «Гараж 42».
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Сайт автосервиса и детейлинга»?
- Из 10 секций каталога по порядку: Шапка автосервиса с эмблемой и живым статусом бокса, Хиро-интро с видео, Калькулятор услуг детейлинга, До/после детейлинга, Процесс автосервиса, Мастера автосервиса, Отзывы автосервиса, Запись в автосервис, Карта и контакты автосервиса, Подвал автосервиса с огромным контурным словом-маркой. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.