Plan Site Content

Концепция сайта и интерфейса

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

Ниже структура страниц, блоков и сценариев с разбивкой по этапам. Пометка есть значит, что это уже работает (описание: Фронтенд); остальное план.

Простой пример

Блок «Горячие предложения» на главной задуман как карусель туров с кнопкой «Хочу». Сейчас на главной есть hero, «Почему мы», направления и отзывы, а блок горячих предложений скрыт в коде до появления выдачи (#74). Витрина «горящие туры и цены от» запланирована в #152.

Этапы

Этап	Содержание
Этап 1	Главная (hero, поиск, горячие предложения, отзывы); каталог с фильтрами и страницей тура; регистрация и вход, личный кабинет клиента, заявки; кабинет менеджера (заявки, статусы, предложение тура, конструктор туров); избранное; всплывающие уведомления; мобильная версия.
Этап 2	Интерактивная карта направлений; блог и статьи; расширенная аналитика и экспорт отчётов; вход через Google и VK; дополнительные эффекты интерфейса.

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

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

2. Публичная часть

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

Блок	Описание
Шапка	Логотип; навигация (Туры, Страны, Отзывы, Контакты); «Избранное», «Войти». При скролле липкая шапка с размытием фона. Пункт «Направления» планируется убрать (#90).
Hero	Фоновое видео или фото; заголовок «Путешествуй без забот», подзаголовок; строка поиска (Куда, Когда, Туристы, «Найти»); внизу иконки преимуществ. Новая форма поиска: #138.
Почему мы	3 или 4 карточки с иконкой, заголовком и текстом; при наведении подъём и тень.
Горячие предложения	Карусель карточек туров (фото, название, страна, даты, цена); кнопка «Хочу» при наведении; на мобильном свайп. Сейчас скрыт (#74), витрина «горящие туры и цены от»: #152.
Карта направлений	Этап 2: интерактивная карта. На этапе 1 блок «Популярные направления» карточками.
Отзывы	Слайдер карточек (фото, имя, дата, текст, рейтинг).
Блог	Этап 2 или простой статичный блок.
Подвал	Логотип, меню, соцсети, подписка на новости, контакты.

Каталог туров (есть, /tours)

• Две колонки: слева фильтры, справа сетка карточек.
• Карточка: фото, название, описание, «В избранное».
• Сортировка и постраничный вывод. В API есть сортировка по дате создания, названию, цене и длительности; «популярность» пока план.

Страница тура (есть, /tours/:id)

• Галерея: главное фото и миниатюры, просмотр всех фото.
• Описание, программа по дням, включено и не включено, питание и проживание, предложения с датами и ценами.
• Кнопка «Оставить заявку».
• План: вкладка отзывов, календарь цен с итоговой ценой, блок похожих туров.

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

• Вход и регистрация (есть): модальное окно, вкладки, email и пароль. Вход через соцсети на этапе 2.
• Всплывающие уведомления (есть, react-hot-toast): «Добавлено в избранное», «Заявка отправлена».
• Подтверждение действий: диалог при удалении и подобном.
• План: быстрый просмотр тура; пошаговая форма заявки (направление и даты, туристы и бюджет, контакты) с полосой прогресса (поля заявки: #84).

3. Личный кабинет клиента (есть, /dashboard)

• Главная кабинета: приветствие, плитки «Мои заявки», «Избранное».
• Мои заявки: список с цветным статусом; по клику страница заявки с чатом.
• Страница заявки: слева данные заявки и предложения, справа чат. План: «Прикрепить файл», «Оплатить».
• Профиль: имя, фамилия, телефон сохраняются; email только показывается. Поле «Паспорт» в форме есть, но не сохраняется. План: паспорт и аватар (#101).
• Избранное: сетка карточек, можно убрать тур.

4. Рабочее место менеджера (есть, /manager)

• Главная: число новых и активных заявок, последние заявки. План: конверсия, посещаемость, графики.
• Заявки: список и страница заявки с чатом, сменой статуса и отправкой предложения. План: фильтры по статусу, менеджеру, дате, направлению; поиск; шаблоны в чате; счёт и заметки.
• Туры: список и конструктор из 7 шагов с загрузкой фото (Конструктор и публикация тура). План: поиск и фильтры в списке, перетаскивание фото.
• Клиенты: список клиентов, собранный по заявкам. План: отдельный список пользователей с контактами и карточка клиента (#105).
• Статистика: этап 2 или 3, расширенная аналитика и выгрузка в Excel.

5. Навигация

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

6. Сценарии

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

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

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

1. Вход, /manager: новые заявки.
2. «Заявки», открыть новую.
3. Взять в работу (статус «В обработке»), написать в чат, отправить предложение по туру из каталога.
4. Клиент подтверждает, менеджер закрывает заявку.

7. Параметры API, которых пока нет

Интерфейс задуман с параметрами, которых в API сейчас нет. Это план; фактический API: Публичный API.

Задумано	Сейчас
GET /catalog/tours?featured=true для горячих предложений	нет; витрина в #152
GET /catalog/tours?travelers=...	нет параметра числа туристов
GET /catalog/tours/{id}/prices	нет; цены приходят в составе страницы тура (offers)
GET /bookings?status=...&manager=...	нет фильтров, отдаются все заявки
POST /media/presign	закрыт на Gateway (404)