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

Вся магия фильтрации работает на полном соответствии между атрибутом data-filter в меню и обычным class внутри карточки товара.

📋 Карта тегов и категорий

Используйте эту таблицу как справочник при создании или редактировании карточек решений:

💡 Как правильно присваивать теги карточкам

1. Если товар подходит только в ОДНУ категорию

Просто добавьте класс этой категории в верхнюю строчку карточки рядом с типом фона (например, card-cyan или card-pink).

<div class="product-card card-pink cat-getcourse">
    ...
</div>

2. Если товар мультиплатформенный (подходит в ДВЕ и более категории)

Вы можете указать несколько тегов через пробел. Тогда карточка автоматически отобразится в каждой из этих вкладок! Например, Колесо Фортуны работает и на Продамусе, и на сторонних сайтах:

<div class="product-card card-cyan cat-prodamus cat-sites">
    ...
</div>

🛠 Как добавить свою НОВУЮ категорию (если понадобится)

Если в будущем вы захотите добавить, например, категорию «Для Telegram», вам нужно сделать всего два шага:

1. В блоке меню (Секция 1) добавить новую кнопку с любым придуманным тегом, например cat-telegram: ```html 🤖 Для Telegram

2. **В блоке карточек (Секция 2)** нужным товарам просто дописать этот класс в главную обертку:
```html
<div class="product-card card-white cat-telegram">

Никакой JS-код при этом переписывать не придется, система автоматически подхватит новый тег!