YO AUTO — лендінг малярно-кузовного цеху

Задача

YO AUTO — малярно-кузовний цех із власною фарбувальною камерою: 12+ років у малярці, понад 2 500 пофарбованих авто. Уся комунікація з клієнтами трималася на телефоні та Viber, а сайту не було взагалі. Через це кожен дзвінок починався з нуля: скільки коштує фарбування крила, чи збіжиться колір, скільки авто стоятиме в цеху.

Потрібен був один документ, який відповідає на ці питання ще до дзвінка — і одразу веде людину до заявки або повідомлення у Viber.

Рішення

Зробили односторінковий лендінг із наскрізною логікою «побачив ціну → надіслав фото → отримав розрахунок»:

• Каталог з 11 послуг із коротким описом технології та ціною «від»: фарбування елемента, локальне підфарбування сколів, ремонт і фарбування бамперів, рихтування, PDR (видалення вм'ятин без фарбування), полірування кузова, відновлення фар, зварювальні роботи, повне фарбування, ремонт після ДТП «під ключ»
• Окремий блок прайсу — 11 позицій із цінами від 500 до 60 000 грн, щоб не змушувати клієнта дзвонити заради орієнтиру
• Сценарій «Точна ціна за 30 хвилин» — три кроки з фото пошкодження у Viber замість візиту в цех
• Блок «Чому ми» з реальними технічними аргументами: комп'ютерний підбір кольору спектрофотометром, фарбування в камері з сушкою 60 °C, матеріали Sikkens, Standox, 3M, письмова гарантія до 2 років
• Пояснення процесу в 5 кроків — від оцінки до полірування й видачі, щоб зняти страх «а що вони там роблять із моїм авто»
• Галерея цеху — маскування, налаштування факела, обдування від пилу: етапи, які й визначають, чи буде видно ремонт
• Відгуки з конкретикою — марка авто та вид робіт замість безликих «дякую, все супер»
• FAQ на 6 питань: терміни, збіг кольору, гарантія, ціна без візиту, що таке PDR, робота зі страховими
• Форма заявки з вибором послуги та дублювальна кнопка Viber у кожній секції — на мобільному Viber конвертує краще за форму

Технічна частина

Сайт свідомо зроблено статичним: контент змінюється рідко, а швидкість і надійність важливіші за адмінку.

• Чистий HTML без CMS і фреймворків, віддається nginx напряму
• Власний CSS (~21 КБ) без Bootstrap і Tailwind; типографіка на Oswald + Manrope, шрифти self-hosted у woff2 з кириличним сабсетом — жодних зовнішніх запитів до Google Fonts
• 1,3 КБ vanilla JS на всю сторінку: мобільне меню, бігучий рядок послуг, поява блоків через IntersectionObserver, валідація форми
• Адаптивна верстка, lazy-loading фотографій цеху
• Темна «гаражна» палітра — чорний, жовтий, червоний — під фірмовий банер клієнта

Результат

Клієнт отримав сторінку, яка сама відповідає на «скільки коштує» і «як довго», а розмова з клієнтом починається вже з фото пошкодження. Прайс і сценарій із Viber прибирають найдовшу частину продажу, а швидкість завантаження (сумарно менш ніж 60 КБ коду) утримує людей із мобільного трафіку — саме звідти приходить більшість звернень до СТО.