Site Content

Содержимое сайта и визуальная концепция

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

Ниже — структура страниц, блоков и сценариев с разбивкой по этапам MVP и V2.

---

Содержание

1. Скоуп MVP (V1) и расширение (V2)
2. Общая концепция дизайна
3. Публичная часть
4. Личный кабинет клиента
5. Рабочее место менеджера
6. Навигация и переходы
7. Примеры сценариев

---

Важно: скоуп MVP (V1) и расширение (V2)

Этап	Содержание
MVP (V1)	Главная (hero, поиск, горячие предложения, отзывы); каталог с фильтрами и карточкой тура; регистрация/вход, ЛК клиента, заявки; кабинет менеджера (заявки, статусы, предложение тура); избранное; toast-уведомления; адаптивная мобильная версия.
V2	Интерактивная карта направлений; блог/статьи; расширенная аналитика и экспорт отчётов; соцлогин (Google/VK); дополнительные UI-эффекты.

---

1. Общая концепция дизайна

Элемент	Описание
Цвета	База — белый и тёплые светлые оттенки (песочный, кремовый). Акценты — приглушённый терракотовый, оливковый или глубокий синий.
Типографика	Крупные гротески (Mont, Inter) для заголовков; читаемый текст с хорошей высотой строки. Заголовки до 72px, спокойный мелкий текст для второстепенного.
Формы и тени	Скругления 12–20px; тени мягкие, без резких границ.
Анимация	Микроанимации при наведении, плавный скролл, fade-in при прокрутке, плавные переходы между страницами.
Фотографии	Крупные, качественные, единый стиль (тёплые тона). На всю ширину, overlay-градиенты для читаемости текста.

---

2. Публичная часть (для гостей и клиентов)

Главная страница

Страница-лендинг с плавными переходами между блоками.

Блок	Описание
Хедер	Логотип; навигация (Туры, Страны, Отзывы, Контакты); иконка «Избранное», кнопка «Войти». При скролле — липкий хедер с размытием фона.
Hero	Фоновое видео или фото; заголовок «Путешествуй без забот», подзаголовок; поисковая строка (Куда / Когда / Туристы + «Найти»); внизу — иконки преимуществ.
Почему мы	Сетка 3–4 карточек с иконкой, заголовком и текстом; при наведении — подъём и тень; опционально анимированные цифры.
Горячие предложения	Карусель карточек туров (фото, название, страна, даты, цена, звёзды); кнопка «Хочу» при наведении; стрелки/точки, на мобильном — свайп.
Карта направлений	V2: интерактивная карта с точками. В MVP — блок «Популярные направления» карточками.
Отзывы	Слайдер с карточками-облачками (фото, имя, дата, текст, рейтинг).
Блог/статьи	V2 или простой статичный блок в MVP.
Футер	Логотип, меню, соцсети, подписка на новости, контакты.

Каталог туров

• Две колонки: слева — фильтры (аккордеон, чекбоксы-пилюли, ползунок цен), справа — сетка карточек.
• Карточки: фото, рейтинг, описание, кнопка «В избранное».
• Сортировка (популярность, цена, дата), пагинация («Показать ещё» или номера страниц).

Карточка тура

• Фотогалерея (главное фото + миниатюры, лайтбокс «Все фото»).
• Вкладки: Описание, Удобства, Отзывы туристов, Цены.
• Календарь цен с доступными датами; при выборе дат — итоговая цена; кнопка «Забронировать» / «Задать вопрос».
• Блок похожих туров (слайдер).

Модальные окна

• Быстрый просмотр тура — попап с краткой информацией и «Забронировать».
• Вход / регистрация — модальное окно, переключение вкладок, плавающие подписи полей; в MVP — email+password, соцлогин в V2.
• Форма заявки — шаги (направление и даты → туристы и бюджет → контакты), прогресс-бар.
• Toast — «Добавлено в избранное», «Заявка отправлена», «Новое сообщение»; авто-исчезновение ~3 сек.
• Подтверждение действий — диалог при удалении и т.п.

---

3. Личный кабинет клиента

• Дашборд: приветствие, плитки «Новая заявка», «Мои заявки», «Избранное»; виджет активной заявки; блок «Вам может понравиться».
• Мои заявки: список с фильтрами по статусу; карточки с направлением, датой, цветным статусом (Новая / В обработке / Подтверждена); при клике — страница заявки с чатом.
• Страница заявки: слева — данные заявки, справа — чат (сообщения менеджера/клиента, даты, поле ввода, «Прикрепить файл»); статус и «Завершить»; карточка предложенного тура с «Оплатить» при наличии оплаты.
• Профиль: ФИО, телефон, email, паспорт; аватарка; «Сохранить» с уведомлением об успехе.
• Избранное: сетка карточек туров с возможностью убрать из избранного.

---

4. Рабочее место менеджера

• Дашборд: KPI (новые заявки сегодня, активные в работе, конверсия, посещаемость); в MVP — первые два KPI + последние заявки; в V2 — графики.
• Управление заявками: фильтры (статус, менеджер, дата, направление), поиск; таблица (ID, клиент, направление, дата, статус, последнее сообщение, действия). Страница заявки: три колонки — данные клиента и заявки, чат (с шаблонами), действия (статус, прикрепить тур, счёт, заметки).
• Управление турами: список с поиском и фильтрами; «+ Создать тур»; форма с вкладками (Основное, Фото, Цены и календарь, Описание); drag-and-drop фото.
• База клиентов: список пользователей с контактами и количеством заявок; по клику — профиль и история заявок.
• Статистика: V2 — расширенная аналитика, экспорт в Excel; в MVP — базовая отчётность на дашборде.

---

5. Навигация и переходы

• Главное меню в шапке; на мобильном — бургер.
• Хлебные крошки на внутренних страницах (Главная / Каталог / Турция / Отель Rixos).
• Плавные переходы (fade), кнопка «Наверх» при скролле.

---

6. Примеры пользовательских сценариев

Клиент: подбор тура

1. Заход на главную → поиск «Турция», даты → «Найти».
2. Каталог: просмотр карточек, добавление в избранное (toast «Добавлено в избранное»).
3. Карточка тура → «Забронировать» → модалка «Необходимо войти» → регистрация → перенаправление в «Мои заявки».
4. Заявка со статусом «Новая»; при ответе менеджера — toast и переход в чат, просмотр предложенного тура.

Менеджер: обработка заявки

1. Вход по /manager → дашборд (новые заявки, графики в V2).
2. «Управление заявками» → фильтр «Новые» → открытие заявки.
3. Три колонки: данные клиента, чат, действия. Приветствие, прикрепление тура из каталога, смена статуса на «В обработке».
4. Диалог в реальном времени; по договорённости — «Создать счёт», статус «Подтверждена».

---

Связь экранов с API описана на странице Соответствие экранов и API. Бэкенд — в Архитектуре.