> 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/product-docs/product-docs-en/showcase.md).

# Showcase

The storefront is the first impression of the platform. Its job is not just to show a list of bloggers, but to create the feeling of a live premium catalog that can be trusted.

{% hint style="success" %}
Good storefront design should help sell: the background sets the mood, the cards are easy to read, the buttons prompt action, and the overall style does not clash with the bloggers’ niche.
{% endhint %}

### Overall visual concept

Before setting up the design, it is better to choose one clear direction. The storefront looks stronger when the background, logo, colors, photos, and text all work in the same tone.

{% tabs %}
{% tab title="Premium" %}
Suitable for a catalog of major bloggers, agencies, the luxury segment, fashion, lifestyle, and high-end advertising integrations.

Use a calm video background, dark or deep shades, a neat logo, short text, and minimal visual noise.
{% endtab %}

{% tab title="Dynamic" %}
Suitable for entertainment, TikTok, YouTube, gaming, music, and youth-oriented niches.

You can use a more active background, contrasting accents, a bright contact button, and lively photos of bloggers.
{% endtab %}

{% tab title="Business-like" %}
Suitable for B2B, experts, finance, education, real estate, and professional services.

Clean backgrounds, a strict color scheme, clear categories, restrained photos, and text without unnecessary emotion work better.
{% endtab %}
{% endtabs %}

<details>

<summary>How to quickly check whether the concept was chosen correctly</summary>

Open the storefront home page and answer three questions:

* is it clear within 3-5 seconds that this is a blogger catalog;
* does the background make the cards hard to read;
* do you want to click a card, the cart, or the contact button.

If even one answer is no, it is better to simplify the design first: mute the background, increase card contrast, and remove unnecessary decorative elements.

</details>

### Video background

The video background sets the mood for the entire storefront. It should be beautiful, but it should not become the main object on the page.

Recommendations:

* use a short looping video without sudden flashes;
* choose a background with smooth motion so it does not distract from the cards;
* avoid videos with large text, faces, or important details in the center;
* check how the background looks under a darkening mask;
* keep the file light enough so the storefront opens quickly on mobile.

{% hint style="warning" %}
The most common mistake is using a background that is too bright or too high-contrast. As a result, the cards, filters, and buttons become visually weaker, even though everything technically works correctly.
{% endhint %}

Recommended file names for media:

* `storefront-background.mp4` - main video background;
* `storefront-background-preview.jpg` - a static frame for preview or documentation;
* `storefront-background-mobile.mp4` - a lightweight version if a separate mobile background is needed.

### Logo

The logo should remain clearly readable over the chosen background and should not clash with the interface.

Practical tips:

* use transparent `PNG` or `SVG`if the logo has no complex effects;
* do not make the logo too detailed: in Telegram Mini Apps, small elements get lost quickly;
* check the logo on both dark and light areas of the background;
* if the logo is colorful, choose a storefront color scheme that supports it rather than competes with it.

<details>

<summary>When it is better to use a text logo</summary>

A text logo works if the brand does not yet have a strong symbol. In this case, it is better to choose a clean name without small decorative elements.

For a storefront, readability is more important than complex identity. If the user cannot quickly read the project name on a mobile screen, the logo should be simplified.

</details>

### Color scheme

The color scheme affects the brand feeling and the readability of the interface. It is better to choose 2-3 main colors and not expand the palette unless necessary.

{% tabs %}
{% tab title="Primary color" %}
Used for the main accents: active buttons, selected elements, important states.

It should be noticeable, but not neon-bright. If the primary color is too vivid, the interface starts to look cheaper.
{% endtab %}

{% tab title="Background color" %}
Helps tie together the video background, the mask, and the cards.

Background shades are better made deep or neutral so that the cards remain the main working layer.
{% endtab %}

{% tab title="Text color" %}
The main requirement is readability.

Text on cards, in filters, and on buttons should be easy to read both in the browser and inside Telegram.
{% endtab %}
{% endtabs %}

### Grain and contrast

Grain helps make the background feel more premium and softer, but it must be used carefully. It should create texture, not dirtiness.

A good setup looks like this:

* the background stays lively but does not steal attention;
* text and cards are readable without highlighting with the mouse;
* buttons do not get lost in the background;
* the expanded card is visually separated from the page.

{% hint style="info" %}
If after changing the background the interface feels too white, gray, or flat, most often you do not need to change the cards, but rather adjust the mask, darkening, and contrast of the accent color.
{% endhint %}

### Blogger photos

Blogger photos sell a card faster than text. They should look consistent, even if the bloggers are from different niches.

Recommendations:

* use images of similar quality and scale;
* avoid random screenshots, watermarks, and different aspect ratios;
* do not use overly dark photos if the entire storefront is already dark;
* do not use real photos of people without usage rights;
* for demos and public presentations, it is safer to use generated or licensed images.

<details>

<summary>How to tell when a photo is hurting the card</summary>

A photo should be replaced if it:

* looks noticeably worse than the others;
* crops poorly inside the card;
* contains extra text or logos;
* looks like someone else’s ad banner;
* creates the feeling that the card was taken from a different system.

</details>

Recommended file names for documentation:

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

### Card readability

A card should answer the main questions without an extra click: who the blogger is, what niche they are in, what audience they have, how much the integration costs, and why they are a fit.

Check:

* the name and nickname should be visible right away;
* the price should not get lost among secondary parameters;
* tags should help with filtering, not turn into noise;
* the description should be short and useful;
* the expanded card should provide more information, not repeat the same thing in larger type.

{% hint style="warning" %}
Do not overload the card with a long description. If the user sees a wall of text before understanding the blogger’s value, the card starts working worse.
{% endhint %}

### CTA and contact button

CTA is the action you want from the user: open the card, add the blogger to the cart, contact the manager, or move to discussion.

A good contact button:

* is noticeable against the whole page;
* has a clear name, without complex wording;
* leads to the expected action;
* does not conflict with the cart and cards;
* works equally well in the browser and in Telegram Mini App.

{% tabs %}
{% tab title="Good" %}
Short wording:

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

{% tab title="Bad" %}
Too generic or long wording:

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

### The storefront needs to be tested not only in a regular browser. A significant share of users will open the catalog from Telegram.

Mandatory checklist:

the home page opens in a mobile browser;

* the home page opens in Telegram Mini App;
* cards expand without cutting off important elements;
* the cart and profile are accessible without excessive scrolling;
* the background does not slow down the interface;
* the contact button does not cover important elements;
* text is readable on a small screen;
* filters and search are convenient to use with a finger.
* Minimum pre-launch check

<details>

<summary>Open the storefront on a phone and go through the path of a regular customer:</summary>

open the home page;

1. find a blogger through search or filters;
2. open the card;
3. add to cart;
4. go to cart;
5. press the contact button;
6. open the profile.
7. If the path takes too long because of visual noise or unclear buttons, the design should be simplified.

Typical design mistakes

</details>

### Bad design rarely breaks the platform technically, but it can greatly reduce trust and conversion. This is especially noticeable in expensive niches, where the client expects a polished presentation.

{% hint style="danger" %}
too active a video background;
{% endhint %}

Common mistakes:

* low contrast between text and cards;
* random photos of varying quality;
* too many colors;
* the logo is hard to read on the background;
* cards are overloaded with long descriptions;
* the CTA button looks like a secondary element;
* the mobile version was tested only in the browser, not in Telegram;
* the storefront design does not match the bot’s tone;
* the demo content looks like a real database without explanation.
* The storefront should look like a ready-made commercial product, not like an admin database with a nice background. If the user quickly understands the value of the catalog, trusts the cards, and reaches contact without effort, the design is working correctly.

### Final principle

The storefront should look like a ready-made commercial product, not like an admin database with a nice background. If the user quickly understands the value of the catalog, trusts the cards, and reaches contact without effort, the design is working correctly.


---

# 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/product-docs/product-docs-en/showcase.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.