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