Batele C2C — варианты главной

Четыре направления для главной страницы клиентского приложения. Открой любой, чтобы посмотреть в полную ширину (mobile-first, 390px).

1

Карточная сетка (refined)

Текущий подход в чистом виде: 2×2 больших градиентных карточки + горизонтальный скроллер мелких сервисов + последние адреса.

Эволюция текущего
2

Hero-поиск (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

Веб-версия (desktop)

Адаптация клиентского приложения под широкий экран — 4 направления. Не растянутая мобилка, а пересобранные под desktop макеты.

W1

Дашборд (сайдбар)

Левый сайдбар-навигация + топбар с поиском. Сетка услуг, активные заказы и правый рейл (адреса, статистика, промо). SaaS-подход.

Sidebar + rail
W2

Hero + карта

Крупный «Куда везём?» с формой откуда/куда слева, живая карта с курьерами справа. Снизу — лента услуг. Uber/Glovo desktop.

Split hero
W3

Карта во весь экран

Карта-холст на всю область, плавающая панель заказа слева, активные доставки справа. Операционный режим (Yandex Go / диспетчер).

Map-first
W4

Витрина

Sticky-навбар, hero-баннер с поиском, сториз, карточки услуг 16:9 и сетка ресторанов рядом с бейджами режимов. Под флоу заказа еды.

Storefront

Веб-страницы (desktop) — все экраны

Каждый экран приложения, пересобранный под широкий экран. По 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

Заказ еды (C2C)

Клиентский флоу заказа еды: найти филиал → выбрать способ (самовывоз / посадка / доставка) → меню/бронь → оформление.

Выбранный флоу (на согласование)

Поток: Филиалы 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