Задача
У кофейни нет сайта: меню живёт в соцсетях и быстро устаревает, о завтраках и атмосфере гостям приходится рассказывать в переписке, а бронирование столика — это звонок, который часто пропускают. Такому бизнесу нужен адрес, который можно оставить в карте и соцсетях: страница с меню, фотографиями и возможностью забронировать стол без ожидания ответа. Отдельное требование — чтобы владелец мог сам обновлять блоки без разработчика.
Решение
Одностраничный сайт на тёмной палитре под настроение кофейни: меню с завтраками и напитками, галерея зала, блок отзывов и форма бронирования столика. Заявка из формы уходит владельцу в Telegram — достаточно ответить одним сообщением, чтобы подтвердить бронь. Дисклеймер «концепт-редизайн» вынесен в футер честно и заметно: реальное название и фотографии принадлежат правообладателям.
Что под капотом
- Next.js App Router + Tailwind CSS — статический рендер, мгновенная отдача
- Форма брони с отправкой в Telegram-бот владельцу
- Отзывы в блоке помечены как демонстрационные (дисклеймер в футере)
- Оптимизированные WebP-изображения и next/image без сдвигов вёрстки
- sitemap.xml и robots.txt, SEO-мета под локальные запросы
Метрики — замер Lighthouse 13 по живому адресу
Эмуляция смартфона, замер от 03.09.2026. CLS ноль означает, что вёрстка не «прыгает» при загрузке.
- 93
- PerformanceLighthouse 13, мобильные, 03.09.2026
- 1.2 c
- First Contentful Paintтекст виден почти сразу
- 3.0 c
- Largest Contentful Paint
- 0
- Cumulative Layout Shiftвёрстка не прыгает
- 140 мс
- Total Blocking Time
- 100
- Best PracticesSEO-балл Lighthouse занижен намеренно: демо закрыты от индексации (noindex)
Итог
Структура рассчитана на то, чтобы гость за один экран понял: где кофейня, что в меню, сколько стоит завтрак и как забронировать стол. Показываю этот кейс как пример лендинга HoReCa «под ключ»: от структуры и текстов до формы, которая приносит заявки прямо в карман владельцу.
Хотите так же для своего бизнеса — напишите в Telegram или оставьте заявку на главной.