Создание сайта с нуля · React + Vite · 2026

Сайт производства бань с нуля: клиент сам смотрит бани и цены и оставляет заявку

У производства бань и бытовок в Краснодаре не было сайта: заказы шли только со слов и с площадки. Собрали сайт с нуля — живое видео и цены на первом экране, 20 смысловых секций, отзывы и интерактивная карта. Путь клиента простой: увидел баню → увидел цену → позвонил.

Обсудить похожий проект →

Сайт с нуля React + Vite Видео на первом экране Меню и структура Яндекс.Карта Отзывы Замеры Playwright
Сайт: byrakovskie-bani.ru Клиент: «Бурлаковские бани» Ниша: бани и бытовки под ключ в Краснодаре CMS: нет — одностраничник на React + Vite Период: 2026
Первый экран сайта на большом экране
Первый экран сайта — так его видит посетитель (большой экран)
видео
Живое видео и цены на первом экране
клиент сразу видит продукт, а не стоковую картинку
20
Смысловых секций — путь от бани к звонку
увидел баню → увидел цену → позвонил
карта
Интерактивная карта и контакты
производство видно на карте
мобильно
Версия для телефона и поисковые основы настроены
один заголовок h1 и описание страницы

Что вы получите

Клиент видит бани вживую

Видео и фото, а не стоковая картинка: первый экран показывает продукт в деле.

Цены стоят рядом с моделями

Не приходится отвечать на «сколько стоит» в каждом звонке — ответ уже на странице.

Структура ведёт к звонку

Собственное производство, договор и гарантия чек-списком, карта на месте — от показа к заявке без лишних переходов.

Задача

Производство бань и бытовок в Краснодаре: бани минибруса, бытовки, хозблоки — под ключ. Сайта не было вовсе: клиент брал заказы со словесной рекламы и готовых бань «на площадке». Нужен был свой сайт, который продаёт готовые бани за один день.

Что должно было появиться у клиента:

Сайт собран с нуля — раздела «Было» в этом кейсе нет: сравнивать было не с чем.

Что сделано

Все работы сделал сам, с нуля: структура, дизайн, код, скорость. Замеры — Playwright (Chromium, десктоп 1440, замер 09.10.2026).

Работа 1 · дизайн и структура
Выполнено

Структура из 20 смысловых секций

Что сделано

Спроектировал порядок экранов так, чтобы человек за одну прокрутку прошёл путь «увидел баню → посмотрел цены → поверил → позвонил»: первый экран с видео, слоган и чек-список (собственное производство, договор, гарантия), цены в карточках, отзывы, карта, кнопки действия.

Результат

20 смысловых секций на одной странице, логика «от бани к звонку» без лишних переходов.

Работа 2 · вёрстка и код
Выполнено

Одностраничник на React + Vite

Что сделано

Собрал сайт как одну страницу на современной сборке (React). В шапке — логотип, меню («Комплектация и цены», «Почему мы», «Рассчитать стоимость», «Отзывы»), телефон с кнопкой «Заказать». Живой контент — без шаблонов: заголовок h1 в единственном числе, у каждой секции свой смысл.

Результат

Каркас страницы — 694 узла, один скрипт index-C_0A7mQy.js: код компактный, правки вносятся быстро.

Работа 3 · медиа
Выполнено

Видео в шапке и 8 фотографий

Что сделано

Поставил короткое видео с подписью «короткое видео — как выглядят наши бани живым» и 8 фотографий бань. Уникальность подачи держится на связке: живой h1 + видео-баннер + кнопки действия в нужных местах страницы.

Результат

Первый экран показывает продукт в деле, а не стоковую картинку. Обратная сторона — вес: фото 15,7 МБ и видео 11,4 МБ (см. таблицу ниже), это точка роста для дальнейшей оптимизации.

Работа 4 · карта и контакты
Выполнено

Интерактивная Яндекс.Карта

Что сделано

Встроил интерактивную Яндекс.Карту на страницу. Карта грузится отдельным набором запросов (тайлы и символы) — она не тормозит открытие основного кода страницы.

Результат

Карта работает как отдельный блок, основная страница от неё не зависит.

Работа 5 · поисковые основы
Выполнено

Заголовок, описание, язык страницы

Что сделано

Настроил поисковые основы: ровно один заголовок h1 («Производство бань и бытовок в Краснодаре»), мета-описание description заполнено, язык страницы lang="ru".

Результат

Страница корректно представлена для поисковиков. В резерве — og:image (превью для соцсетей и мессенджеров): сейчас его нет, при отправке ссылки обложка не подтянется.

Работа 6 · превью для мессенджеров
В резерве

og:image — точка роста

Что сделано

Превью для мессенджеров и соцсетей (картинка, которую показывает мессенджер при отправке ссылки) пока не задано. Это единственная работа, не закрытая на момент замера.

Результат

План: добавить og:image и og-теги — сайт станет красивым превью в соцсетях и мессенджерах. Отмечено честно, без выдуманного «сделано».

Этапы и сроки

  1. Разбор и структура — 1–2 дня: какие секции нужны и в каком порядке идёт путь к звонку.
  2. Дизайн и вёрстка — первый экран с видео, карточки моделей и цен.
  3. Медиа и карта — сборка видео и фото, подключение интерактивной карты.
  4. Сборка и выкладка — проверка на телефоне и поисковых основ, публикация, замеры.

Сроки беру из реального проекта; по вашему сайту назову после бесплатного разбора.

Стало — результат

Сайт собран и опубликован. Все цифры — из замера Playwright (Chromium, десктоп 1440, 09.10.2026). Цифры до не существуют — сайт создан с нуля.

ПоказательЗамер (09.10.2026)
Ответ сервера (TTFB)96 мс
Время до готовности (DOMContentLoaded/Load)3,55 с
Запросов при полной загрузке233
Полный трафик одной страницы~38,5 МБ (в основном видео 11,4 МБ и фото 15,7 МБ)
Скрипты (js)5,0 МБ
Интерактивная картаотдельный набор запросов (тайлы и глифы), не грузит основную страницу
Смысловых секций20
Фотографий (img)8
DOM — каркас страницы694 узлов
Заголовок h1ровно один — «Производство бань и бытовок в Краснодаре»
Мета-описание и языкdescription задано, lang="ru"
Превью для мессенджеров (og:image)нет — точка роста (резерв)

Честно про вес: 38,5 МБ — это почти целиком медиа (видео 11,4 МБ, фото 15,7 МБ). Сам код страницы — 5,0 МБ скриптов плюс лёгкая верстка; для сайтов-одностраничников, где продукт «продаёт картинка», такая экономика типична.

Пруфы

Скриншоты живого сайта после запуска. Кликните, чтобы открыть в полном размере.

Сколько стоит

Разбор и план

Бесплатно: смотрю задачу и нишу, показываю, какие секции нужны, и даю план и срок.

Сайт под ключ

Дизайн, вёрстка, видео и фото, карта — стоимость считаю после разбора: она зависит от объёма и числа моделей. Точную вилку называю до начала, без сюрпризов в процессе.

Цены не публикую: они зависят от задачи. Оставьте заявку — пришлю вилку под ваш случай в тот же день.

Частые вопросы

Сколько заявок уже приходит и откуда?
Замеров обращений у этого кейса нет — сайт собран и опубликован, аналитику звонков только предстоит настроить. Рост честно не обещаю.

Что нужно от меня?
Видео и фото с производства, модели и цены. Плюс 15 минут на вводные.

Сколько это займёт времени?
Точный срок назову после бесплатного разбора — зависит от объёма медиа и числа моделей.

Почему сайт весит много?
Основа веса — видео и фото, а не код. Это точка роста: медиа можно сжать, не теряя качества.

Кто будет менять цены и фото после сдачи?
Вы или помощник: правки вносятся быстро, переделка структуры не нужна.

Нужен сайт с нуля под ваш бизнес?

Соберу одностраничник со структурой «от показа продукта до заявки», с замерами скорости и честным отчётом по каждой работе.

Сайт: byrakovskie-bani.ru

Обсудить проект →