[Сайт / Кофейня]

PEACH

Сайт кофейни с живым меню, каталогом блюд и инструментами для команды.

Клиент: PEACH
Формат: Сайт с админкой + Telegram-боты
Стек: Next.js · TypeScript · PostgreSQL

Смотреть сайт

Главная страница сайта PEACH на компьютере

Главная страница сайта PEACH на телефоне

[ПРОЦЕСС]

Меню с телефона

Структура сайта

Песок, зелень, терракота

Карточка, док и поиск

Навигация по меню

Один каталог для гостя и команды

[Меню с телефона]

Кофейне нужен был сайт, где гость знакомится с местом и смотрит меню, оставляет отзывы и имеет отдельную форму под вакансии. Дизайна не было, поэтому макеты и интерфейс я рисовал сам и сразу переносил в код.

Сначала я разобрался, кто будет пользоваться сайтом. Гость открывает меню с телефона — за столиком или по дороге в кофейню — и хочет быстро увидеть напитки, фото и цены. Сотрудники каждый день меняют позиции и фотографии и должны делать это сами, без разработчика.

[Структура сайта]

Сайт я разделил на две части. Публичная — главная, меню, отзывы и вакансии. Рабочая — админка, где команда правит позиции, загружает фото и читает отзывы.

Отзыв гостя сохраняется в админке, и Telegram-бот сразу пересылает его менеджеру. Отклик на вакансию приходит через отдельную форму и не смешивается с отзывами.

Меню PEACH на компьютере: вкладка «Еда», категория «Завтраки» — Меню с категориями и фильтрами, карточки с фото и ценами.

[Песок, зелень, терракота]

Цвета взял из самой кофейни: песочный фон, как у бумажного меню, тёмно-зелёный для главных кнопок, терракотовый для второстепенных действий. Шалфейный и охристый оставил для сезонных акцентов.

Шрифтов три, и у каждого своя работа: Montserrat — заголовки, Nunito Sans — описания и интерфейс, Golos Text — цены и вес, чтобы цифры читались сразу.

color-brand-light-sandstone#FAE9D2фон страниц

color-text-primary#171713основной текст

color-brand-neutral#D5D3BCмедиазоны и панели

color-brand-chive#4E5237главные кнопки

color-brand-picante#884431вторичные действия

color-brand-sage#92946Fсезонные акценты

color-brand-sandstone#C58869мягкие акценты

Montserrat

Аа Бб Вв 0123 ₽

заголовки и дисплей

Начертания: 800–900

Nunito Sans

Аа Бб Вв 0123 ₽

текст и интерфейс

Начертания: 400–700

Golos Text

Аа Бб Вв 0123 ₽

цены и меры

Начертания: 700–900

12px

панели и секции

16px

карточки товаров

999px

кнопки и чипы

[Карточка, док и поиск]

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

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

Карточка блюда PEACH: фото, описание, вес и цена — Карточка собирает всё важное сразу, поэтому отдельный экран не открывается, а кнопок заказа внутри нет.

Нижний док PEACH на телефоне: переключатель «Напитки / Еда / Все» — Чтобы меню быстро читалось с телефона, все категории собраны в один нижний ряд вместо длинной ленты.

Поиск идёт сразу по напиткам и еде, а после очистки возвращает выбранную раньше группу и фильтр.

[Навигация по меню]

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

Скруглений три: 12 px у панелей, 16 px у карточек, кнопки и чипы — пилюли.

Чипы категорий меню PEACH на компьютере — Верхний свитч делит меню на напитки и еду, а лента чипов ускоряет просмотр внутри группы.

Кнопка «Показать все» под сеткой карточек PEACH — Секция показывает превью из шести–восьми карточек, а остальное открывает одна кнопка.

[Один каталог для гостя и команды]

Сайт написан на Next.js и TypeScript, данные лежат в PostgreSQL. Меню на сайте и в админке берёт данные из одного каталога, поэтому правка сотрудника сразу видна гостям.

Фото при загрузке сжимаются и сохраняются в постоянном хранилище. Вёрстку меню доводил на телефоне, пока две колонки карточек и панель категорий не стали читаться без зума.