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 і нульовий зсув верстки на обох.