По средам и воскресеньям мы запускаем демо-лендинг для новой ниши. Сегодня — спешелти-кофейня. Не шаблонная страница с адресом и телефоном, а живой сайт с характером, который хочется открыть, полистать и сразу пойти за кофе.
Что за ниша
Кофейни — один из самых конкурентных сегментов микробизнеса. В одной Москве их тысячи. И сайт здесь — не про «быть в интернете», а про атмосферу. Посетитель хочет почувствовать место до того, как переступит порог. Увидеть меню. Понять, варят ли здесь всерьёз или просто наливают.
При этом у большинства кофеен сайта нет вообще. Есть страница в Яндекс.Картах, иногда — Instagram с фотографиями латте-арта. Но меню спрятано в закрепах сторис, интерьер видно только на четырёх случайных фото, а контакты теряются.
Мы сделали лендинг для Brew & Bloom — вымышленной, но абсолютно реалистичной спешелти-кофейни на Патриарших прудах в Москве. Тёплый дизайн, кофейная палитра, живые тексты и анимации.
Как это выглядит
Первый экран — крупное фото интерьера с тёмным градиентом, название кофейни, эмоциональный заголовок. Четыре показателя (год открытия, сорта, методы заваривания, рейтинг) и две кнопки: «Смотреть меню» и «История кофейни».
Под hero — тёмная полоса с тремя преимуществами: собственная обжарка, 6 методов заваривания, фермерский кофе от прямых поставщиков. Сразу даём понять: здесь не просто льют, здесь разбираются.
Меню — сетка 2x2 с карточками напитков. У каждой — фото, название, описание и цена. Одна карточка выделена как хит сезона: золотая рамка, бейдж, чуть больше воздуха. Капучино за 290, фильтр V60 за 340, авторский раф с лавандой за 420.
Дальше — история кофейни в две колонки: фото интерьера и живой рассказ от первого лица. Как съездили в Эфиопию, увидели кофейные фермы и через три месяца открыли своё место. Три цифры: 14 сортов в ротации, 300+ чашек в день, 96% гостей возвращаются.
Процесс заваривания — тёмная секция с четырьмя шагами: отбор зерна, обжарка, заваривание, чашка. Крупные номера, медные линии, короткие пояснения. Работает на доверие: гость понимает, за что платит.
Галерея — 4 фото в ряд. Клик открывает полноэкранный просмотр с навигацией между кадрами. Стрелки, Escape, плавные переходы. Отзывы — три карточки со звёздами и живыми цитатами от реальных гостей. Контакты — адрес, часы, телефон, кнопки Telegram и Яндекс.Карты. Декоративная карта с анимированным пином.
Отдельно стоит сказать про дизайн. Мы ушли от стандартных решений: не Roboto, не Inter, не системные шрифты. Cormorant Garamond для заголовков + Space Grotesk для текста — это даёт премиальное ощущение с характером. Палитра: глубокий коричневый, медь, кремовый. Кастомный курсор — медный круг, следующий за мышью (на десктопе).
Анимации: блоки появляются снизу при скролле (scroll reveal), три размытых «кофейных зерна» в hero двигаются с параллаксом, цифры анимированно набираются при прокрутке, хедер меняется с прозрачного на тёмный с блюром. Всё живое, всё дышит.
Сколько заняло
Лендинг — результат одного диалога с AI. Примерно час от первого сообщения до публикации. Дизайн, вёрстка, четыре сгенерированных изображения интерьера и напитков, тексты под стиль кофейни — всё в одном чате.
AI-бюджет: 2 кредита. Один на картинки, один на вёрстку и стилизацию. Платформа: 3 дня по 36 руб. Итого старт — около 300 руб.
Готовый рецепт
Хотите такой же сайт для своей кофейни? Вот рецепт — скопируйте и отправьте ассистенту:
Создай сайт-лендинг для кофейни. Название: [название кофейни] Город: [ваш город], [район или улица] Что варим: - Капучино — [цена] руб. - Фильтр-кофе V60 — [цена] руб. - Авторский раф — [цена] руб. - Флэт Уайт — [цена] руб. Расскажи историю кофейни: как открылись, почему кофе, как выбираем зерно. Включи меню с карточками напитков, процесс заваривания (от зерна до чашки), галерею интерьера с полноэкранным просмотром, отзывы гостей, контакты с картой и кнопками Telegram. Дизайн — тёплый, кофейный, с анимациями.
Подставьте свои напитки, цены, город — и через час у вас готовый лендинг.
А если хотите точно такой же стиль с анимациями, параллаксом и кастомным курсором — на SEO-странице лежит полный подробный промпт для AI. Скопируйте и получите лендинг с тем же уровнем дизайна.
Ссылки
Демо-лендинг Brew & Bloom — посмотрите целиком.
Как сделать сайт для кофейни: готовый рецепт — SEO-страница с описанием, скриншотами и полным промптом.
Если у вас кофейня или вы только думаете её открыть — сайт делается проще, чем кажется. Рецепт выше, ассистент в чате.