Auto Fashion Club — сайт сервиса авто, лодок и кастома со своей админкой, Флорида

Обзор проекта

Auto Fashion Club — семейная мастерская в Помпано-Бич (Флорида), которая работает с автомобилями и лодками под одной крышей: диагностика, ремонт и апгрейды авто, морское подразделение AFC Professional Boat Service и кастомные проекты — от карбона и 3D до полных сборок. Опыт основателя — от подготовки раллийных автомобилей в 1990-х до более чем десяти лет морского сервиса в Канаде.

Бизнесу нужен был не буклет. Три направления с 24 категориями и 84 услугами должны были читаться как один премиальный бренд; у каждой категории — своя страница, которую найдут в поиске; каждая заявка — приходить с достаточным контекстом (какая услуга, какое авто или лодка, с какой рекламы), чтобы на неё можно было ответить и её посчитать. И владельцы хотели управлять всем сами, без разработчика.

Моя роль в проекте

Я лично вёл этот проект от дизайна до запущенного сайта и последующих раундов наполнения. Направления, которые я вёл и выполнял непосредственно:

• Дизайн публичного сайта и админ-панели, а затем сборка этого дизайна 1:1 на Next.js 16 с React Server Components
• Модель данных в Supabase: 15 таблиц для каталога, страниц, заявок, портфолио, отзывов, брендов и настроек, с row-level security, чтобы публичный сайт мог читать только опубликованный контент
• Приём заявок: запись с любой кнопки с уже выбранной услугой, проверка на сервере, honeypot и ограничение частоты, письма через Resend и уведомления в Telegram по желанию
• Маркетинговая атрибуция: каждая заявка хранит пять UTM-меток, gclid, fbclid, реферер, страницу входа, страницу формы и устройство
• Админка, которая охватывает весь бизнес: заявки, аналитика, контент, SEO, каталог, портфолио, отзывы и пользователи
• Техническое SEO и аналитика по согласию посетителя, а также тексты и фото владельцев, внесённые постранично в несколько раундов

Что я сделал: публичный сайт

• Главная: hero на весь экран с отдельными фото для десктопа и телефона, лента из 39 логотипов брендов в трёх группах (авто, лодки и яхты, лодочные моторы), три направления, кастомные проекты, карусель портфолио с разделением на Automotive и Boats, история основателя с 1991 года, отзывы Google и мастерская на Google Maps
• 24 страницы категорий, у каждой — свой hero, услуги, фото, FAQ и кнопка записи; у лодочного и кастомного направлений собственные цветовые темы
• Окно записи, которое открывается с любой кнопки с уже заполненными направлением и услугой, и выбор даты поверх формы, который одинаково работает на iOS и Android
• Страницы About, Contact и благодарности; политика конфиденциальности, условия использования и политика cookies с баннером cookies
• Читабельность по правилам владельцев: основной текст не меньше 20 px, заголовки не меньше 27 px

Что я сделал: админка

• Дашборд: новые заявки, конверсия, подтверждённые записи, главный источник, график за 30 дней, заявки по направлениям и последние заявки
• Заявки: воронка от новой к «связались», «записали», «выполнено» или «отказ», с ответственным, заметками и журналом действий и полной атрибуцией в каждой заявке
• Аналитика: воронка «визиты → заявки → записи», просмотры и заявки по страницам, source/medium и кампании — считает собственный счётчик сайта без cookies
• Маркетинг: GA4, GTM, Meta Pixel, метки конверсий Google Ads и тег Search Console вводятся как настройки, плюс генератор UTM-ссылок
• Контент: каждый заголовок, текст и изображение на каждой странице и логотипы брендов — всё редактируется без разработчика
• Страницы: SEO-заголовок, описание, картинка для соцсетей, canonical и noindex для каждой страницы; черновики и публикация
• Каталог услуг, портфолио из 42 проектов с фото и модерация отзывов
• Настройки: данные компании, уведомления на e-mail и в Telegram с тестовым сообщением, пользователи с ролями admin и manager, смена пароля
• На публичном сайте авторизованный администратор видит панель «Admin quick edit», которая открывает нужный редактор для текущей страницы; посетители её никогда не загружают

Стек и SEO

Сайт работает на Next.js 16 (App Router) с React 19 и строгим TypeScript на Vercel. Страницы генерируются статически и обновляются в тот же момент, когда что-то сохраняют в админке. Supabase отвечает за базу данных, вход и хранилище изображений; Resend отправляет письма с заявками.

У каждой страницы свои заголовок, описание и сгенерированная карточка для соцсетей. Структурированные данные описывают мастерскую как бизнес AutoRepair с адресом, координатами и часами работы, а каждая страница категории добавляет разметку Service, FAQ и хлебных крошек. Переименованные страницы сохраняют поисковую историю благодаря постоянным редиректам, а фавикон и иконки приложения нарисованы из буквы «A» самого логотипа. Скрипты отслеживания загружаются только после согласия посетителя на cookies (Consent Mode v2). PageSpeed Insights даёт главной 100 по производительности на десктопе и 94 на мобильном, 100 по SEO и best practices и нулевой сдвиг вёрстки на обоих.