BRO.BARBERSHOP

Показать, как выглядит кастомный лендинг для локального бизнеса. Не шаблон из Tilda или Wix — а реальный сайт на Next.js, который можно открыть и потрогать.

Требования: тёмный мужской дизайн, прайс-лист с услугами, блок мастеров с фото-плейсхолдерами, секция «О нас» с историей, встроенная Яндекс.Карта, CTA на запись через Telegram и телефон. Всё адаптивно, с анимациями при скролле.

Палитра: чёрный фон (#0a0a0a), кремовый текст (#e8e2d8), золотой акцент (#c8a96e). Это классика барбершоп-эстетики — маскулинно, но не агрессивно.

Типографика: жирные заголовки (font-black), широкий tracking на подзаголовках, моноширинный шрифт для часов работы. Нумерация секций (01, 02, 03...) как в журнальной вёрстке.

Анимации: Framer Motion — элементы появляются при скролле с лёгким сдвигом вверх. Карточки услуг реагируют на клик (подсветка активной). Навбар с backdrop-blur.

— Фиксированная навигация с blur-эффектом и кнопкой «Записаться»

— Hero-секция: заголовок «Не салон. Барбершоп.», описание, два CTA, статистика (7 лет, 3 мастера, 4.9 рейтинг)

— Услуги и цены: 6 услуг в grid-сетке 2 колонки, каждая с названием, ценой, описанием и длительностью

— Мастера: 3 карточки с аватар-плейсхолдерами, ролью, опытом и специализацией

— О нас: история барбершопа + два информационных блока (что есть, часы работы)

— Запись: CTA с кнопками Telegram и звонок

— Карта: встроенный виджет Яндекс.Карт с инвертированными цветами под тёмную тему

— Футер со ссылкой на TEYA + плавающий бейдж «Сделано TEYA»

Стек: Next.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion.

Страница сделана как client component — анимации требуют 'use client'. Все данные (услуги, мастера, часы) захардкожены в компоненте — для showcase это оптимально, не нужен CMS.

Яндекс.Карта встроена через iframe с CSS-фильтром invert + hue-rotate для тёмной темы. Координаты: Комсомольский проспект, 28 (Хамовники).

Адаптивность: grid переключается с 2 колонок на 1 на мобилках, размеры текста меняются через md: префиксы. Навбар скрывает ссылки на мобилке, оставляя только кнопку записи.

Деплой: Docker-контейнер на том же сервере что и iamteya.ru, роутинг через Traefik. URL: iamteya.ru/showcase/barbershop.

Полноценный лендинг для барбершопа, который можно прямо сейчас открыть: iamteya.ru/showcase/barbershop

От идеи до деплоя — 1 день. Без Figma, без макетов — сразу в код. Это показывает подход: для типового лендинга локального бизнеса не нужны недели дизайна. Достаточно понять задачу и сделать.

Сайт работает как витрина услуги «Лендинг» — клиент видит не абстрактное обещание, а готовый результат.