> 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/vitrina.md).

# Витрина

Витрина - это первое впечатление о платформе. Ее задача не просто показать список блогеров, а создать ощущение живого премиального каталога, которому можно доверять.

{% hint style="success" %}
Хорошее оформление витрины должно помогать продаже: фон задает атмосферу, карточки быстро читаются, кнопки подталкивают к действию, а общий стиль не спорит с нишей блогеров.
{% endhint %}

### Общая визуальная концепция

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

{% tabs %}
{% tab title="Премиальная" %}
Подходит для каталога крупных блогеров, агентств, luxury-сегмента, fashion, lifestyle и дорогих рекламных интеграций.

Используйте спокойный видеофон, темные или глубокие оттенки, аккуратный логотип, короткие тексты и минимум визуального шума.
{% endtab %}

{% tab title="Динамичная" %}
Подходит для entertainment, TikTok, YouTube, gaming, music и молодежных ниш.

Можно использовать более активный фон, контрастные акценты, яркую кнопку связи и живые фотографии блогеров.
{% endtab %}

{% tab title="Деловая" %}
Подходит для B2B, экспертов, финансов, образования, недвижимости и профессиональных услуг.

Лучше работают чистые фоны, строгая цветовая схема, понятные категории, сдержанные фотографии и тексты без лишней эмоциональности.
{% endtab %}
{% endtabs %}

<details>

<summary>Как быстро проверить, что концепция выбрана правильно</summary>

Откройте главную страницу витрины и ответьте на три вопроса:

* понятно ли за 3-5 секунд, что это каталог блогеров;
* не мешает ли фон читать карточки;
* хочется ли нажать на карточку, корзину или кнопку связи.

Если хотя бы один ответ отрицательный, лучше сначала упростить оформление: приглушить фон, усилить контраст карточек и убрать лишние декоративные элементы.

</details>

### Видеофон

Видеофон создает настроение всей витрины. Он должен быть красивым, но не должен становиться главным объектом страницы.

Рекомендации:

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

{% hint style="warning" %}
Самая частая ошибка - поставить слишком яркий или контрастный фон. В результате карточки, фильтры и кнопки становятся визуально слабее, хотя технически все работает правильно.
{% endhint %}

Рекомендуемые имена файлов для медиа:

* `storefront-background.mp4` - основной видеофон;
* `storefront-background-preview.jpg` - статичный кадр для превью или документации;
* `storefront-background-mobile.mp4` - облегченная версия, если нужен отдельный мобильный фон.

### Логотип

Логотип должен хорошо читаться поверх выбранного фона и не спорить с интерфейсом.

Практические советы:

* используйте прозрачный `PNG` или `SVG`, если логотип без сложных эффектов;
* не делайте логотип слишком детальным: в Telegram Mini App мелкие элементы быстро теряются;
* проверьте логотип на темном и светлом участках фона;
* если логотип цветной, подберите цветовую схему витрины так, чтобы она поддерживала его, а не конкурировала с ним.

<details>

<summary>Когда лучше использовать текстовый логотип</summary>

Текстовый логотип подходит, если бренд еще не имеет сильного фирменного знака. В этом случае лучше выбрать чистое название без мелких декоративных элементов.

Для витрины важнее читаемость, чем сложная айдентика. Если пользователь не может быстро прочитать название проекта на мобильном экране, логотип стоит упростить.

</details>

### Цветовая схема

Цветовая схема влияет на ощущение бренда и на читаемость интерфейса. Лучше выбрать 2-3 основных цвета и не расширять палитру без необходимости.

{% tabs %}
{% tab title="Основной цвет" %}
Используется для главных акцентов: активных кнопок, выбранных элементов, важных состояний.

Он должен быть заметным, но не кислотным. Если основной цвет слишком яркий, интерфейс начинает выглядеть дешевле.
{% endtab %}

{% tab title="Фоновый цвет" %}
Помогает связать видеофон, маску и карточки.

Фоновые оттенки лучше делать глубокими или нейтральными, чтобы карточки оставались главным рабочим слоем.
{% endtab %}

{% tab title="Цвет текста" %}
Главное требование - читаемость.

Текст на карточках, в фильтрах и кнопках должен читаться без напряжения как в браузере, так и внутри Telegram.
{% endtab %}
{% endtabs %}

### Зернистость и контраст

Зернистость помогает сделать фон дороже и мягче, но ее нужно использовать аккуратно. Она должна создавать фактуру, а не грязь.

Хорошая настройка выглядит так:

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

{% hint style="info" %}
Если после смены фона интерфейс кажется слишком белым, серым или плоским, чаще всего нужно не менять карточки, а настроить маску, затемнение и контраст акцентного цвета.
{% endhint %}

### Фотографии блогеров

Фотографии блогеров продают карточку быстрее, чем текст. Они должны выглядеть единообразно, даже если блогеры из разных ниш.

Рекомендации:

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

<details>

<summary>Как понять, что фото портит карточку</summary>

Фото стоит заменить, если оно:

* выглядит заметно хуже остальных;
* плохо кадрируется в карточке;
* содержит лишний текст или логотипы;
* выглядит как чужой рекламный баннер;
* создает ощущение, что карточка взята из другой системы.

</details>

Рекомендуемые имена файлов для документации:

* `blogger-photo-example-01.png`;
* `blogger-photo-example-02.png`;
* `blogger-card-expanded.png`.

### Читаемость карточек

Карточка должна отвечать на основные вопросы без лишнего клика: кто блогер, какая ниша, какая аудитория, сколько стоит интеграция и почему он подходит.

Проверяйте:

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

{% hint style="warning" %}
Не перегружайте карточку длинным описанием. Если пользователь видит стену текста до того, как понял ценность блогера, карточка начинает работать хуже.
{% endhint %}

### CTA и контактная кнопка

CTA - это действие, которое вы хотите получить от пользователя: открыть карточку, добавить блогера в корзину, связаться с менеджером или перейти к обсуждению.

Хорошая контактная кнопка:

* заметна на фоне всей страницы;
* называется понятно, без сложных формулировок;
* ведет к ожидаемому действию;
* не конфликтует с корзиной и карточками;
* одинаково хорошо работает в браузере и Telegram Mini App.

{% tabs %}
{% tab title="Хорошо" %}
Короткие формулировки:

* `Contact`;
* `Get proposal`;
* `Discuss campaign`;
* `Open catalog`.
  {% endtab %}

{% tab title="Плохо" %}
Слишком общие или длинные формулировки:

* `Click here`;
* `Submit an interaction request`;
* `Use this button to communicate with administration`;
* `Information`.
  {% endtab %}
  {% endtabs %}

### Проверка на мобильном и в Telegram Mini App

Витрину нужно проверять не только в обычном браузере. Значительная часть пользователей будет открывать каталог из Telegram.

Обязательный чек-лист:

* главная страница открывается в мобильном браузере;
* главная страница открывается в Telegram Mini App;
* карточки раскрываются без обрезания важных элементов;
* корзина и профиль доступны без лишнего скролла;
* фон не тормозит интерфейс;
* кнопка связи не перекрывает важные элементы;
* текст читается на маленьком экране;
* фильтры и поиск удобно использовать пальцем.

<details>

<summary>Минимальная проверка перед запуском</summary>

Откройте витрину на телефоне и пройдите путь обычного клиента:

1. открыть главную;
2. найти блогера через поиск или фильтр;
3. раскрыть карточку;
4. добавить в корзину;
5. перейти в корзину;
6. нажать кнопку связи;
7. открыть профиль.

Если путь занимает больше времени из-за визуального шума или непонятных кнопок, оформление стоит упростить.

</details>

### Типичные ошибки оформления

{% hint style="danger" %}
Плохое оформление редко ломает платформу технически, но может сильно снижать доверие и конверсию. Особенно это заметно в дорогих нишах, где клиент ожидает аккуратную презентацию.
{% endhint %}

Частые ошибки:

* слишком активный видеофон;
* низкий контраст текста и карточек;
* случайные фотографии разного качества;
* слишком много цветов;
* логотип плохо читается на фоне;
* карточки перегружены длинными описаниями;
* CTA-кнопка выглядит как второстепенный элемент;
* мобильная версия проверялась только в браузере, но не в Telegram;
* оформление витрины не соответствует тону бота;
* демо-контент выглядит как реальная база без пояснения.

### Итоговый принцип

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


---

# 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/vitrina.md?ask=<question>&goal=<user_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.