> For the complete documentation index, see [llms.txt](https://vitrina-blogerov.gitbook.io/bloggers-showcase/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vitrina-blogerov.gitbook.io/bloggers-showcase/obzor-vitriny/glavnaya.md). # Главная Главная страница витрины - это каталог блогеров и основной экран подбора. Здесь пользователь видит карточки, ищет подходящих авторов, сужает выдачу фильтрами, запускает AI-поиск и добавляет выбранных блогеров в корзину. {% hint style="success" %} Главная витрина сделана как быстрый интерактивный каталог: пользователь может начать с обычного поиска, затем уточнить подбор тегами, ценой, аудиторией или описать задачу AI-агенту обычным языком. {% endhint %} ### Что находится на главной На размеченном скриншоте главной страницы удобно отметить: * логотип проекта; * видеофон и визуальный слой витрины; * строку обычного поиска; * кнопку расширенного поиска; * кнопку сортировки; * блок тегов; * диапазон цены; * диапазон подписчиков; * поле AI-поиска; * сетку карточек блогеров; * кнопку добавления в корзину; * нижнюю навигацию; * пагинацию и выбор количества карточек на странице. ```mermaid flowchart TD A["Пользователь открывает витрину"] --> B["Смотрит каталог"] B --> C["Ищет по тексту"] B --> D["Открывает расширенный поиск"] D --> E["Выбирает теги и диапазоны"] D --> F["Запускает AI-поиск"] C --> G["Получает обновленную выдачу"] E --> G F --> G G --> H["Открывает карточку"] H --> I["Добавляет блогера в корзину"] ``` ### Строка поиска Обычный поиск находится в верхней части витрины и подходит для быстрых запросов: имя блогера, тематика, ниша, описание, ключевое слово. Поиск работает вместе с остальными инструментами. Если пользователь уже выбрал теги или диапазоны, текстовый запрос не сбрасывает их, а дополнительно уточняет выдачу. {% hint style="info" %} На размеченном скриншоте строку поиска лучше выделять как первый и самый понятный способ взаимодействия с каталогом. {% endhint %} ### Расширенный поиск Кнопка расширенного поиска раскрывает панель с дополнительными параметрами. Внутри находятся теги, диапазоны цены и подписчиков, а также AI-поиск. Панель раскрывается в стиле витрины: с liquid glass-эффектом, мягкой анимацией и сохранением общей визуальной логики интерфейса.
Что объяснять пользователю на скриншоте расширенного поиска Расширенный поиск нужен не только для точного отбора, но и для демонстрации ценности платформы. Покупатель видит, что каталог можно использовать как рабочий инструмент для медиапланирования: отобрать блогеров по тематике, бюджету, размеру аудитории и затем собрать заявку.
### Теги Теги помогают быстро сузить каталог по категориям. Пользователь может выбрать один или несколько тегов, а витрина сразу обновит список карточек. Теги управляются из админ-панели: владелец может добавлять новые, скрывать ненужные, менять названия и иконки. На витрине отображаются только те теги, которые включены для показа. {% tabs %} {% tab title="Для пользователя" %} Теги ускоряют подбор и позволяют не читать весь каталог вручную. Достаточно выбрать нужную тематику, формат или платформу. {% endtab %} {% tab title="Для владельца" %} Теги превращают базу блогеров в управляемый каталог. Их можно адаптировать под нишу, страну, рынок или конкретный стиль продаж. {% endtab %} {% endtabs %} ### Диапазоны цены и подписчиков Диапазоны позволяют ограничить выдачу по бюджету и размеру аудитории. Пользователь может указать минимальное и максимальное значение, чтобы увидеть только релевантные карточки. Это особенно полезно, когда каталог большой: вместо ручного просмотра десятков или сотен блогеров пользователь сразу получает более точную подборку. ### AI-поиск AI-поиск позволяет описать задачу обычным языком. Например: “нужны блогеры для рекламы косметики”, “подобрать авторов для премиального бренда”, “найти блогеров с молодой аудиторией”. AI-агент анализирует запрос и возвращает подходящие карточки из базы. Пользователь видит ответ агента и обновленную выдачу. Если результат больше не нужен, его можно сбросить и вернуться к обычному каталогу. {% hint style="warning" %} AI-поиск не заменяет базу данных. Он подбирает блогеров из тех карточек, которые уже добавлены владельцем в систему. {% endhint %} ### Сортировка Сортировка меняет порядок карточек в каталоге. Пользователь может выбрать стандартный порядок, цену, алфавит или количество подписчиков. Направление сортировки переключается отдельной кнопкой: по возрастанию или по убыванию. Это удобно, когда нужно быстро посмотреть самых дорогих, самых доступных или самых крупных блогеров. | Режим | Когда полезен | | ---------- | ----------------------------------- | | Нет | Показывает порядок, заданный в базе | | Цена | Помогает ориентироваться по бюджету | | Алфавит | Удобно для поиска конкретного имени | | Подписчики | Помогает сравнить размер аудитории | ### Карточки блогеров Карточка показывает ключевую информацию о блогере: изображение, имя, краткое описание, социальные иконки и кнопку добавления в корзину. При нажатии карточка раскрывается в модальном окне. В расширенном просмотре пользователь видит больше текста, крупное изображение и кнопку действия. На размеченном скриншоте карточки удобно отдельно отметить: * фото блогера; * имя или ник; * краткое описание; * иконки социальных сетей; * кнопку добавления; * состояние “уже добавлено”; * раскрытое модальное окно.
Какие анимации стоит показать в видео или gif Лучше записать наведение на карточку, раскрытие карточки, добавление в корзину, открытие расширенного поиска, переключение сортировки, выбор тегов и переходы через нижнюю навигацию. Именно эти движения создают ощущение “живой” витрины.
### Пагинация Пагинация находится в нижней части экрана. Она показывает текущее количество отображенных карточек и позволяет переходить между страницами. Пользователь также может выбрать, сколько карточек показывать на странице: например 9, 18 или 27. Это удобно для разных сценариев: быстрый просмотр на телефоне или более плотный просмотр на большом экране. ### Нижняя навигация Нижняя навигация открывает основные разделы витрины: * главная; * корзина; * профиль. Если в корзине есть выбранные блогеры, навигация визуально подсвечивает это состояние. Пользователь понимает, что подборка уже собрана и ее можно отправить менеджеру. ### Визуальное оформление и анимации Витрина использует видеофон, glass-эффекты, плавные раскрытия, анимацию карточек и мягкие переходы между режимами. Это важно не только для красоты: интерфейс ощущается как премиальный продукт, а не как обычная таблица блогеров. {% hint style="success" %} В клиентской демонстрации главную страницу лучше показывать в движении: поиск, фильтры, карточки и корзина раскрывают ценность витрины гораздо сильнее, чем статичный скриншот. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://vitrina-blogerov.gitbook.io/bloggers-showcase/obzor-vitriny/glavnaya.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.