Четыре направления для главной страницы клиентского приложения. Открой любой, чтобы посмотреть в полную ширину (mobile-first, 390px).
Карточная сетка (refined)
Текущий подход в чистом виде: 2×2 больших градиентных карточки + горизонтальный скроллер мелких сервисов + последние адреса.
Эволюция текущего 2Hero-поиск (Glovo/Uber)
Поисковая строка «Куда везём?» — центральный hero на верху. Сервисы — горизонтальные иконки-пилюли. Под ними промо-баннер и история.
Search-first 3Карта сверху (Yandex Go)
Превью карты на пол-экрана с маркером «Откуда». Внизу — выезжающая шторка с сервисами и адресами. Самый «транспортный» подход.
Map-first 4Сториз + 16:9 карточки
Сториз сверху, 4 сервиса картинками 16:9 с подписью снизу, подписка Batele+, поиск «Куда везём?», адреса, нижняя навигация.
Content-rich 5Без нижней навигации
То же, что 4-й, но без bottom nav. Профиль и уведомления — в правом верхнем углу. Контент не обрезан снизу.
No bottom navАдаптация клиентского приложения под широкий экран — 4 направления. Не растянутая мобилка, а пересобранные под desktop макеты.
Дашборд (сайдбар)
Левый сайдбар-навигация + топбар с поиском. Сетка услуг, активные заказы и правый рейл (адреса, статистика, промо). SaaS-подход.
Sidebar + rail W2Hero + карта
Крупный «Куда везём?» с формой откуда/куда слева, живая карта с курьерами справа. Снизу — лента услуг. Uber/Glovo desktop.
Split hero W3Карта во весь экран
Карта-холст на всю область, плавающая панель заказа слева, активные доставки справа. Операционный режим (Yandex Go / диспетчер).
Map-first W4Витрина
Sticky-навбар, hero-баннер с поиском, сториз, карточки услуг 16:9 и сетка ресторанов рядом с бейджами режимов. Под флоу заказа еды.
StorefrontКаждый экран приложения, пересобранный под широкий экран. По 2 варианта (A/B) в каждом файле, обёрнуты в рамку браузера.
Заказ доставки
«Куда везём» — форма откуда/куда, тарифы, оплата. A: форма + живая карта. B: визард со степпером.
Delivery.tsx ↗Мои заказы
Доставки + еда, активные и завершённые. A: список + фильтр-рейл. B: таблица + превью.
/deliveries ↗Трекинг доставки
Карта + таймлайн статусов, курьер, действия. A: карта-доминанта. B: документ-карточка.
DeliveryDetail.tsx ↗Детали заказа (еда)
Navat #91 — позиции, статус, итог. A: чек + статус. B: hero-статус + сетка.
OrderDetail.tsx ↗Рестораны рядом
Филиалы с рейтингом, ETA, бейджами режимов. A: список + карта. B: витрина-сетка.
branches/nearby ↗Ресторан · меню+корзина
Меню по категориям, корзина, чекаут. A: 3 колонки. B: витрина + one-page чекаут.
POST /client/order ↗QR-меню (гость)
Публичное меню со столика, заказ на посадку. A: список + корзина. B: сетка + плавающая корзина.
/m/:code ↗Мои адреса
Сохранённые адреса + добавление. A: список + форма с картой. B: карта-пикер + сетка.
Addresses.tsx ↗Для бизнеса
A: лендинг (hero, преимущества, тарифы, заявка). B: корп-дашборд с таблицей доставок.
Business.tsx ↗Профиль / настройки
Данные, оплата, уведомления, язык, Batele+. A: settings-навигация. B: карточный дашборд.
Profile.tsx ↗Публичный трекинг /d
Анонимная страница по share-токену, без app-навигации. A: карта + инфо-карточка. B: бренд-карточка.
/d?t=… ↗Вход / регистрация
Телефон +996 → OTP. A: сплит-экран с бренд-панелью. B: центр-карточка со степпером.
/auth/*Варианты остальных публичных экранов клиентского приложения.
Главная · Активные
Секция «Активные» на главной — доставки + заказы еды вместе. 3 варианта (скроллер, список, hero-трекер). Прогресс/ETA, тип 🛵/🍽.
Home.tsx ↗Мои заказы
Два таба: 🛵 Доставки + 🍽 Заказы (еда). Внутри активные и завершённые вместе. 3 варианта вёрстки, цветной статус, A→B / ресторан+позиции.
/deliveries ↗Share delivery
Публичная страница доставки по share-токену — 5 вариантов (Yandex-style, bottom-sheet, hero, minimal, brand).
/d?t=… ↗QR-меню (BOARDING)
Публичное меню гостя по QR со столика — 4 варианта (список, сетка карточек, brand hero, минимал без фото).
/menu?orgId&branchId&resourceId ↗Заказ на посадку
Оформление анонимного заказа со столика — корзина-шторка, чекаут, brand, экран успеха + пустые состояния.
POST /menu/orderКлиентский флоу заказа еды: найти филиал → выбрать способ (самовывоз / посадка / доставка) → меню/бронь → оформление.
Выбранный флоу (на согласование)
Поток: Филиалы V1 (карта) → Меню V1 → Корзина+оформление V3 (один экран). Способ получения — инлайн (merge V2+V4). Ветка Посадка → Бронь V1. Поля выверены по client swagger.
⭐ итог · ждёт одобрения ↗Филиалы поблизости
Список ресторанов рядом — 4 варианта (карта сверху, карточки с фото, лента кухонь, минимал). Бейджи режимов получения на каждом.
GET /client/branches/nearby ↗Способ получения
Выбор Самовывоз / Посадка / Доставка — 4 варианта (большие карточки, сегмент+контекст, bottom-sheet, инлайн в чекауте).
PICKUP · DINE_IN · DELIVERY ↗Выбор столика для брони
Бронь стола для посадки — 4 варианта (план зала, список столов, сетка слотов времени, brand-визард). Дата · время · гости · зона.
POST /client/booking ↗Заказ еды (ресторан)
Карточка ресторана с меню, корзиной и оформлением — 4 варианта (hero+список, сетка+комбо, чекаут, минимал). Переключатель самовывоз/доставка.
POST /client/order