Премиальный многостраничный сайт для автосервиса в США: VA Auto Body Shop

Описание

Задача: разработать полноценный коммерческий сайт для реального автосервиса полного цикла в Норт-Голливуде, Калифорния (кузовной ремонт, покраска, диагностика, двигатели, тормоза, подвеска). Клиенту нужен был не шаблон-одностраничник, а премиальный многостраничный сайт, который вызывает доверие у американских клиентов и работает как инструмент привлечения заявок.

Ключевые требования заказчика: строго многостраничная структура (главная, 9 отдельных страниц услуг, страховые, галерея, о нас, FAQ, контакты, форма заявки), дизайн-направление «split light/dark luxury», использование реальных фотографий работ автосервиса с семантически правильным размещением, точное отображение юридически значимых данных (адрес, телефон, часы работы, список из 17 подтверждённых страховых компаний), запрет на выдуманные цены, отзывы и факты, интеграция Google Maps и Instagram, быстрая навигация с первого клика, адаптивность от 375px до 1440px+, SEO-основа и подготовленная архитектура под будущий приём онлайн-платежей через банк.

Решение

Спроектировал и разработал сайт на Next.js 15 (App Router) + TypeScript + Tailwind CSS со статическим экспортом — без базы данных и постоянно работающего сервера, что даёт заказчику минимальную стоимость хостинга и высокую скорость.

Что реализовано:
— 18 страниц: главная, каталог услуг, 9 детальных страниц услуг (генерируются из централизованных данных), страховая, галерея, о компании, FAQ-аккордеон, контакты, форма «Request an Estimate», фирменная 404;
— премиальный брендированный прелоадер с поэтапным появлением логотипа, золотым свечением и счётчиком прогресса (~1,5 сек, с поддержкой prefers-reduced-motion);
— реальные фирменные фавиконки, созданные из официального логотипа (favicon.ico 16/32/48, icon.png, apple-icon) — контрастные на тёмной и светлой теме браузера;
— секция страховых партнёров с 14 официальными логотипами (сохранены локально, без внешних ссылок), эффектом grayscale→color и подписями компаний;
— все данные бизнеса централизованы в конфигурационных файлах: часы, телефон, адрес, услуги, страховые — обновляются в одном месте;
— форма заявки с честной логикой (без ложных подтверждений) и готовой точкой подключения будущего бэкенда;
— подготовленная архитектура под будущие платежи: модель pricingMode (estimate/fixed), адаптер платёжного провайдера, правила безопасности (сервер хранит цену, секреты только на сервере, webhook-верификация);
— SEO: уникальные мета-теги и canonical для каждой страницы, Open Graph, JSON-LD LocalBusiness/AutoBodyShop, sitemap.xml, robots.txt;
— доступность: семантическая разметка, навигация с клавиатуры, фокус-состояния, корректные alt-тексты.

Отдельно провёл апгрейд безопасности: миграция с уязвимой версии Next.js 14 на поддерживаемую 15.5.x (React 19), устранение всех уязвимостей — аудит зависимостей чистый (0 уязвимостей).

Результат

Заказчик получил готовый к публикации коммерческий сайт, который выглядит дорого и работает быстро: все 25 страниц генерируются статически, общий JS на страницу ~100 КБ, навигация срабатывает мгновенно с первого клика.

Контроль качества: три полных раунда автоматизированного QA (все маршруты, формы, меню, карта, ссылки, изображения) на десктопе, планшете и мобильных разрешениях 390/768/1440px — 100% тестов пройдено, ноль ошибок в консоли браузера, нет горизонтального скролла, прелоадер и фавиконки проверены визуально на тёмной и светлой темах.

В процессе QA найдены и исправлены реальные дефекты: блокировка анимации появления изображений из-за clip-path и IntersectionObserver, а также некорректная работа мобильного меню из-за position:fixed внутри backdrop-blur (решено через React Portal).

Поставка: финальный ZIP-архив с полным исходным кодом, lockfile, README с инструкциями по установке, запуску, сборке и деплою на бесплатный статический хостинг с подключением домена и HTTPS. Проект готов к масштабированию: добавление онлайн-оплаты и системы управления контентом не потребует переписывания страниц.