> 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-overview/home.md). # Home The storefront home page is a catalog of bloggers and the main selection screen. Here the user sees cards, searches for suitable creators, narrows the results with filters, launches AI search, and adds selected bloggers to the cart. {% hint style="success" %} The main storefront is built as a fast interactive catalog: the user can start with a regular search, then refine the selection with tags, price, audience size, or describe the task to the AI agent in plain language. {% endhint %} ### What’s on the home page On the annotated screenshot of the home page, it is convenient to mark: * project logo; * video background and visual layer of the storefront; * search bar; * advanced search button; * sort button; * tags block; * price range; * subscriber range; * AI search field; * grid of blogger cards; * add to cart button; * the bottom navigation; * pagination and selection of the number of cards per page. ```mermaid flowchart TD A["User opens the storefront"] --> B["Views the catalog"] B --> C["Searches by text"] B --> D["Opens advanced search"] D --> E["Selects tags and ranges"] D --> F["Launches AI search"] C --> G["Gets an updated set of results"] E --> G F --> G G --> H["Opens a card"] H --> I["Adds the blogger to the cart"] ``` ### Search bar The regular search is located at the top of the storefront and is suitable for quick queries: blogger name, topic, niche, description, keyword. Search works together with the other tools. If the user has already selected tags or ranges, the text query does not reset them, but additionally refines the results. {% hint style="info" %} On the annotated screenshot, it is best to highlight the search bar as the first and most understandable way to interact with the catalog. {% endhint %} ### Advanced search The advanced search button opens a panel with additional parameters. Inside are tags, price and subscriber ranges, as well as AI search. The panel opens in the storefront style: with a liquid glass effect, smooth animation, and preservation of the overall visual logic of the interface.
What to explain to the user on the advanced search screenshot Advanced search is needed not only for precise selection, but also to demonstrate the platform’s value. The buyer sees that the catalog can be used as a working tool for media planning: select bloggers by topic, budget, audience size, and then assemble a request.
### Tags Tags help quickly narrow the catalog by category. The user can select one or more tags, and the storefront will immediately update the list of cards. Tags are managed from the admin panel: the owner can add new ones, hide unnecessary ones, change names and icons. Only tags enabled for display are shown on the storefront. {% tabs %} {% tab title="For the user" %} Tags speed up selection and make it unnecessary to read the entire catalog manually. Just choose the desired topic, format, or platform. {% endtab %} {% tab title="For the owner" %} Tags turn the blogger database into a manageable catalog. They can be adapted to a niche, country, market, or a specific sales style. {% endtab %} {% endtabs %} ### Price and subscriber ranges Ranges make it possible to limit results by budget and audience size. The user can set minimum and maximum values to see only relevant cards. This is especially useful when the catalog is large: instead of manually browsing dozens or hundreds of bloggers, the user immediately gets a more precise selection. ### AI search AI search lets you describe the task in plain language. For example: “need bloggers to advertise cosmetics,” “select authors for a premium brand,” “find bloggers with a young audience.” The AI agent analyzes the request and returns suitable cards from the database. The user sees the agent’s response and the updated results. If the result is no longer needed, it can be reset and you can return to the regular catalog. {% hint style="warning" %} AI search does not replace the database. It selects bloggers from the cards that have already been added to the system by the owner. {% endhint %} ### Sorting Sorting changes the order of cards in the catalog. The user can choose the default order, price, alphabet, or number of subscribers. The sort direction is toggled with a separate button: ascending or descending. This is convenient when you need to quickly view the most expensive, most affordable, or largest bloggers. | Mode | When useful | | ----------- | -------------------------------------------- | | No | Shows the order set in the database | | Price | Helps keep budget in view | | Alphabet | Convenient for searching for a specific name | | Subscribers | Helps compare audience size | ### Blogger cards The card shows key information about the blogger: image, name, short description, social icons, and an add-to-cart button. When clicked, the card opens in a modal window. In the expanded view, the user sees more text, a larger image, and an action button. On the annotated screenshot, it is useful to separately mark: * blogger photo; * name or handle; * short description; * social media icons; * add button; * “already added” state; * expanded modal window.
Which animations should be shown in video or GIF It is better to record hovering over a card, expanding a card, adding to cart, opening advanced search, switching sorting, selecting tags, and transitions through the bottom navigation. These are the movements that create the feeling of a “live” storefront.
### Pagination Pagination is located at the bottom of the screen. It shows the current number of displayed cards and allows you to move between pages. The user can also choose how many cards to show per page: for example 9, 18, or 27. This is convenient for different scenarios: quick viewing on a phone or denser viewing on a large screen. ### Bottom navigation The bottom navigation opens the main sections of the storefront: * home; * cart; * profile. If there are selected bloggers in the cart, the navigation visually highlights this state. The user understands that the selection has already been assembled and can be sent to a manager. ### Visual design and animations The storefront uses a video background, glass effects, smooth expansions, card animations, and soft transitions between modes. This is important not only for beauty: the interface feels like a premium product, not an ordinary blogger table. {% hint style="success" %} In a client presentation, it is better to show the home page in motion: search, filters, cards, and cart reveal the value of the storefront much more strongly than a static screenshot. {% 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/product-docs/product-docs-en/showcase-overview/home.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.