leto/shkola
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Global-2026-07-16

Browse Source
This commit is contained in:
Dekart Deploy Bot 2026-07-15 21:45:22 +00:00
parent 0a1813337b
commit 2f3f5bb98e
10 changed files with 135 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored
View File

@ -132,14 +132,20 @@ skills-lock.json
# === Audit files — dev-мусор (не в git) ===
*.audit.txt
*.audit.md
spacing.txt
typography.txt
color-tokens.txt
selectors.txt
*.audit.md
dsg.txt
colors.txt
components.txt
selectors.txt
spacing.txt
typography.txt
# === Design system draft (создаётся локально, не в git) ===
design-system-DRAFT.txt
# === Taste Skill — агентские навыки дизайна (не в git) ===
skills/

105
wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css
View File

@ -1,5 +1,5 @@
/* ═══════════════════════════════════════════════════════════
podgotovka-k-shkole.css — v5.1 (Blue+Amber Redesign 2026)
podgotovka-k-shkole.css — v5.2 (Single-Accent Refactor: --color-primary blue)
Page-specific styles for "Подготовка к школе"
Loaded only via page-podgotovka-k-shkole.php template
═══════════════════════════════════════════════════════════ */
@ -12,7 +12,8 @@
All shared tokens live in main.css :root.
═══════════════════════════════════════════════════════════ */
.page-pksh {
--pksh-radius-card: var(--radius-lg, 24px);
--pksh-radius-card: var(--radius-lg, 24px); /* cards & sheets */
/* Radius rule: cards/items=24px (--pksh-radius-card), buttons=28px (--radius-pill), photos=16px, tags/small=12px */
--pksh-bg-warm: #FFFBEB;
--pksh-bg-warm-alt: #FEF3C7;
--pksh-text-warm: #78350F;
@ -20,16 +21,15 @@
--pksh-bg-fomo: color-mix(in oklab, var(--color-secondary), white 70%);
--pksh-border-fomo: color-mix(in oklab, var(--color-secondary), transparent 60%);
--pksh-text-fomo: #78350F;
--pksh-gradient-btn: linear-gradient(135deg, #2563EB 0%, #F59E0B 100%);
--pksh-gradient-btn-hover: linear-gradient(135deg, #1D4ED8 0%, #D97706 100%);
--pksh-gradient-btn-alt: linear-gradient(135deg, #F59E0B 0%, #2563EB 100%);
--pksh-btn-shadow: 0 4px 16px rgba(37,99,235,0.35);
--pksh-btn-shadow-hover: 0 8px 28px rgba(37,99,235,0.45);
/* Bright unified button — emerald green: growth, success, \"зелёный свет\" */
--pksh-gradient-btn-bright: linear-gradient(135deg, #10B981 0%, #059669 100%);
--pksh-gradient-btn-bright-hover: linear-gradient(135deg, #059669 0%, #047857 100%);
--pksh-btn-shadow-bright: 0 4px 20px rgba(16,185,129,0.40);
--pksh-btn-shadow-bright-hover: 0 8px 32px rgba(16,185,129,0.50);
--pksh-gradient-btn: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
--pksh-gradient-btn-hover: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-hover) 100%);
--pksh-gradient-btn-alt: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
--pksh-btn-shadow: 0 4px 16px color-mix(in oklab, var(--color-primary), transparent 65%);
--pksh-btn-shadow-hover: 0 8px 28px color-mix(in oklab, var(--color-primary), transparent 55%);
--pksh-gradient-btn-bright: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
--pksh-gradient-btn-bright-hover: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-hover) 100%);
--pksh-btn-shadow-bright: 0 4px 20px color-mix(in oklab, var(--color-primary), transparent 60%);
--pksh-btn-shadow-bright-hover: 0 8px 32px color-mix(in oklab, var(--color-primary), transparent 50%);
--pksh-shadow-card: 0 2px 20px color-mix(in oklab, var(--color-text), transparent 93%);
--pksh-shadow-card-hover: 0 12px 40px color-mix(in oklab, var(--color-text), transparent 88%);
--pksh-shadow-lift: 0 6px 24px color-mix(in oklab, var(--color-text), transparent 93%);
@ -98,6 +98,19 @@
max-width: 70ch;
}
.page-pksh .section-header--left {
text-align: left;
}
.page-pksh .section-header--left .bento-h2,
.page-pksh .section-header--left .bento-p {
max-width: none;
margin-left: 0;
margin-right: auto;
}
.page-pksh .section-header--left .bento-p {
max-width: 65ch;
}
/* ── Section vertical rhythm ── */
.page-pksh .pksh-section,
.page-pksh .section-bg:not(.ds-hero):not(.faq-section) {
@ -486,7 +499,7 @@
text-align: center;
background: var(--color-bg);
border: 1px solid var(--pksh-border-warm);
border-radius: 20px;
border-radius: var(--pksh-radius-card, 24px);
box-shadow: var(--shadow-sm, 0 2px 12px rgba(15,23,42,0.06));
overflow: hidden;
transition: box-shadow var(--transition-base, 300ms ease-out), transform var(--transition-base, 300ms ease-out);
@ -501,17 +514,11 @@
height: 5px;
flex-shrink: 0;
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__top {
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__top {
background: linear-gradient(90deg, var(--color-rating), var(--color-orange));
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__top {
background: linear-gradient(90deg, var(--color-success), color-mix(in oklab, var(--color-success), white 40%));
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__top,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__top,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__top,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__top {
background: linear-gradient(90deg, var(--color-pink), var(--color-pink-light));
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__body {
@ -536,14 +543,10 @@
}
.page-pksh .social-counter:hover .social-counter__icon { transform: scale(1.08); }
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__icon {
background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08));
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__icon {
background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(52,211,153,0.06));
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__icon,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__icon,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__icon {
background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(244,114,182,0.06));
background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary), transparent 92%), color-mix(in oklab, var(--color-primary-dark), transparent 95%));
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__number {
@ -553,10 +556,10 @@
color: var(--color-text, #1E293B);
line-height: 1;
}
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__number { color: var(--color-primary); }
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__number { color: var(--color-warning); }
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__number { color: var(--color-success); }
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__number { color: var(--color-pink-dark); }
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__number,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__number,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__number,
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__number { color: var(--color-primary); }
.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__label {
font-size: clamp(13px, 1.2vw, 14px);
@ -1014,7 +1017,7 @@
}
.page-pksh .pksh-compare__highlight {
background: var(--accent-light, #F5F3FF);
background: var(--color-primary-light, #EFF6FF);
border-left: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
}
@ -1039,17 +1042,7 @@
.page-pksh .pksh-compare__yes { color: var(--color-success); font-weight: 700; margin-right: 4px; }
.page-pksh .pksh-compare__no { color: var(--color-danger); font-weight: 700; margin-right: 4px; }
.page-pksh .pksh-compare__draft {
display: inline-block;
font-size: 0.7rem;
font-weight: 500;
color: var(--pksh-text-warm);
background: color-mix(in oklab, var(--color-bg-alt), var(--color-warning) 12%);
padding: 1px 6px;
border-radius: 3px;
margin-right: 4px;
}
.page-pksh .pksh-compare__footnote {
font-size: 0.8125rem;
color: var(--color-text-light);
@ -1283,7 +1276,7 @@
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: var(--accent-light, #F5F3FF);
background: var(--color-primary-light, #EFF6FF);
border-radius: var(--space-2, 8px);
font-size: 15px;
font-weight: 600;
@ -1307,7 +1300,7 @@
font-size: 13px;
font-weight: 500;
border-radius: var(--radius-pill, 100px);
background: var(--accent-light, #F5F3FF);
background: var(--color-primary-light, #EFF6FF);
color: var(--color-primary);
}
@ -1322,6 +1315,14 @@
color: var(--color-text-muted);
}
.page-pksh .prog-card__inline-icon {
display: inline;
vertical-align: middle;
margin-top: -2px;
color: var(--color-primary);
opacity: 0.8;
}
.page-pksh .prog-card__trust .prog-card__inline-icon { margin-right: 4px; }
.page-pksh .prog-card__social-proof {
display: flex;
justify-content: center;
@ -1437,7 +1438,7 @@
.page-pksh .pksh-teachers__card {
background: var(--color-bg);
border-radius: 20px;
border-radius: var(--pksh-radius-card, 24px);
overflow: hidden;
box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,0.06));
transition: transform 0.25s ease, box-shadow 0.25s ease;
@ -1511,7 +1512,7 @@
font-size: 0.72rem;
font-weight: 600;
color: var(--color-primary-dark);
background: var(--accent-light, #F5F3FF);
background: var(--color-primary-light, #EFF6FF);
border-radius: var(--radius-pill, 100px);
white-space: nowrap;
}
@ -1670,7 +1671,7 @@
.page-pksh .trust-authority__item {
background: var(--color-bg);
border-radius: 20px;
border-radius: var(--pksh-radius-card, 24px);
padding: clamp(24px, 3vw, 32px) clamp(20px, 2vw, 24px);
text-align: center;
box-shadow: var(--shadow-sm, 0 4px 20px rgba(0,0,0,0.05));
@ -2170,7 +2171,7 @@
@media (max-width: 639px) {
.page-pksh .bento-card {
padding: 20px 16px;
border-radius: 20px;
border-radius: var(--pksh-radius-card, 24px);
}
.page-pksh .bento-h2 { font-size: 1.375rem; }
}

1
wp-content/themes/dekart/template-parts/pksh/checklist.php
View File

@ -14,7 +14,6 @@ if ( ! defined( 'ABSPATH' ) ) {
<div class="bento__full bento-card bento-card--checklist">
<div class="micro-commit">
<div class="micro-commit__content">
<span class="bento-label">Бесплатно</span>
<h2 class="bento-h2">Скачайте чек-лист готовности к школе</h2>
<p class="bento-p">10 признаков, что ваш ребёнок готов к 1-му классу. Проверьте за 5 минут — и узнайте, на какие навыки обратить внимание.</p>
<div class="micro-commit__action">

6
wp-content/themes/dekart/template-parts/pksh/compare.php
View File

@ -15,7 +15,7 @@ $compare_rows = $data->get_compare_rows();
$compare_footnote = $data->get_compare_footnote();
?>
<section class="bento pksh-section" aria-label="Сравнение">
<div class="bento__full section-header--centered">
<div class="bento__full section-header--left">
<span class="bento-label">Почему мы</span>
<h2 class="bento-h2">Как мы отличаемся от репетитора и обычного кружка</h2>
<p class="bento-p">Мы — частная школа с гослицензией, а не кружок. Занятия ведут действующие учителя начальных классов. Результат гарантируем договором.</p>
@ -101,8 +101,8 @@ $compare_footnote = $data->get_compare_footnote();
<tr>
<td class="pksh-compare__label-cell">Цена за 1 занятие</td>
<td class="pksh-compare__highlight">от 1 000 ₽</td>
<td><span class="pksh-compare__draft">[черновик]</span> 1 500–2 500 ₽</td>
<td><span class="pksh-compare__draft">[черновик]</span> 800–1 200 ₽</td>
<td>1 500–2 500 ₽</td>
<td>800–1 200 ₽</td>
</tr>
<tr>
<td class="pksh-compare__label-cell">Педагоги</td>

3
wp-content/themes/dekart/template-parts/pksh/contacts.php
View File

@ -22,8 +22,7 @@ $opt_logistics_parking = $data->get_logistics_parking();
$opt_logistics_nearby = $data->get_logistics_nearby();
?>
<section class="bento pksh-section" id="pksh-contact" aria-label="Контакты">
<div class="bento__full section-header--centered">
<span class="bento-label">Контакты</span>
<div class="bento__full section-header--left">
<h2 class="bento-h2">Наш адрес</h2>
<p class="bento-p">Ждём вас в гости — удобно добираться из любого района города</p>
</div>

2
wp-content/themes/dekart/template-parts/pksh/gallery.php
View File

@ -18,7 +18,7 @@ if ( empty( $gallery ) || ! is_array( $gallery ) ) {
}
?>
<section class="bento pksh-section" id="gallery" aria-label="Фотогалерея">
<div class="bento__full section-header--centered">
<div class="bento__full section-header--left">
<span class="bento-label">Фотогалерея</span>
<h2 class="bento-h2">Как проходят занятия</h2>
<p class="bento-p">Фотографии с наших уроков — посмотрите, как увлекательно и продуктивно проходят занятия в центре «Декарт».</p>

8
wp-content/themes/dekart/template-parts/pksh/hero.php
View File

@ -93,19 +93,19 @@ $hero_metrics = $data->get_social_counters();
</div>
<div class="ds-hero__float ds-hero__float--1">
<span class="ds-hero__float-icon">👩‍🏫</span>
<span class="ds-hero__float-icon"><svg aria-hidden="true" width="24" height="24"><use href="#icon-teacher"/></svg></span>
<span>Педагоги с опытом 15+ лет</span>
</div>
<div class="ds-hero__float ds-hero__float--2">
<span class="ds-hero__float-icon">🎮</span>
<span class="ds-hero__float-icon"><svg aria-hidden="true" width="24" height="24"><use href="#icon-game"/></svg></span>
<span>Игровая методика</span>
</div>
<div class="ds-hero__float ds-hero__float--3">
<span class="ds-hero__float-icon">📚</span>
<span class="ds-hero__float-icon"><svg aria-hidden="true" width="24" height="24"><use href="#icon-book"/></svg></span>
<span>Авторская программа</span>
</div>
<div class="ds-hero__float ds-hero__float--4">
<span class="ds-hero__float-icon">🌟</span>
<span class="ds-hero__float-icon"><svg aria-hidden="true" width="24" height="24"><use href="#icon-star-filled"/></svg></span>
<span>Рейтинг 4.8</span>
</div>

2
wp-content/themes/dekart/template-parts/pksh/how-it-works.php
View File

@ -18,7 +18,6 @@ if ( ! defined( 'ABSPATH' ) ) {
</div>
<div class="bento__half bento-card bento-card--soft">
<span class="bento-label">Структура занятия</span>
<h2 class="bento-h2">Каждый урок — мини-путешествие</h2>
<p class="bento-p">Ребёнок не сидит за партой 30 минут. Мы меняем активность каждые 7 минут — мозг не устаёт, интерес не гаснет.</p>
<div class="steps-3">
@ -53,7 +52,6 @@ if ( ! defined( 'ABSPATH' ) ) {
</div>
<div class="bento__half bento-card bento-card--objections">
<span class="bento-label">Почему родители выбирают нас</span>
<h2 class="bento-h2">Три главных вопроса — честные ответы</h2>
<p class="bento-p">Мы не обещаем чуда — мы даём системную подготовку к школе, которую <strong>видят учителя</strong> в первую же неделю.</p>
<div class="objection-list">

32
wp-content/themes/dekart/template-parts/pksh/programs.php
View File

@ -15,7 +15,7 @@ $base = $data->get_base_program();
$prem = $data->get_premium_program();
?>
<section class="bento pksh-section" id="programs" aria-label="Программы подготовки">
<div class="bento__full section-header--centered">
<div class="bento__full section-header--left">
<span class="bento-label">Программы</span>
<h2 class="bento-h2">Выберите формат подготовки</h2>
<p class="bento-p">Все программы ведут действующие педагоги начальных классов. Группы до 10 человек — каждому ребёнку уделяем внимание.</p>
@ -32,7 +32,7 @@ $prem = $data->get_premium_program();
<div class="prog-card__header">
<div class="prog-card__header-badge">Первое занятие — бесплатно</div>
<div class="prog-card__header-row">
<div class="prog-card__icon prog-card__icon--double">⭐⭐</div>
<div class="prog-card__icon prog-card__icon--double"><svg aria-hidden="true" width="28" height="28"><use href="#icon-star-filled"/></svg><svg aria-hidden="true" width="28" height="28"><use href="#icon-star-filled"/></svg></div>
<div>
<div class="prog-card__name"><?php echo esc_html( $prem['name'] ); ?></div>
<div class="prog-card__subname"><?php echo esc_html( $prem['subname'] ); ?></div>
@ -50,7 +50,7 @@ $prem = $data->get_premium_program();
</div>
<div class="prog-card__result">
<span class="prog-card__result-icon">🎯</span>
<span class="prog-card__result-icon"><svg aria-hidden="true" width="20" height="20"><use href="#icon-target"/></svg></span>
<span><strong>Через 2 месяца</strong> — чтение целыми словами и счёт до 20</span>
</div>
@ -68,7 +68,7 @@ $prem = $data->get_premium_program();
</div>
<div class="prog-card__compare">
<span class="prog-card__compare-icon">📈</span>
<span class="prog-card__compare-icon"><svg aria-hidden="true" width="20" height="20"><use href="#icon-trending-up"/></svg></span>
<span><strong>На 50% больше занятий</strong> — результат наступает на 3 недели раньше, чем при стандартной нагрузке</span>
</div>
@ -89,15 +89,15 @@ $prem = $data->get_premium_program();
</div>
<div class="prog-card__trust">
<span>👥 до 10 детей</span>
<span>🎂 5–7 лет</span>
<span>📍 очно, Щёлково</span>
<span>👩‍🏫 педагог: стаж 12 лет</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-users"/></svg> до 10 детей</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-gift"/></svg> 5–7 лет</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-location-pin"/></svg> очно, Щёлково</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-teacher"/></svg> педагог: стаж 12 лет</span>
</div>
<div class="prog-card__social-proof">
<span class="prog-card__rating">4.8 — рейтинг программы</span>
<span class="prog-card__graduates">🎓 500+ детей уже прошли</span>
<span class="prog-card__graduates"><svg aria-hidden="true" width="18" height="18"><use href="#icon-graduation"/></svg> 500+ детей уже прошли</span>
</div>
<div class="prog-card__btn-wrap">
@ -112,7 +112,7 @@ $prem = $data->get_premium_program();
<div class="prog-card__header">
<div class="prog-card__header-badge">Первое занятие — бесплатно</div>
<div class="prog-card__header-row">
<div class="prog-card__icon">⭐</div>
<div class="prog-card__icon"><svg aria-hidden="true" width="28" height="28"><use href="#icon-star-filled"/></svg></div>
<div>
<div class="prog-card__name"><?php echo esc_html( $base['name'] ); ?></div>
<div class="prog-card__subname"><?php echo esc_html( $base['subname'] ); ?></div>
@ -129,7 +129,7 @@ $prem = $data->get_premium_program();
</div>
<div class="prog-card__result">
<span class="prog-card__result-icon">🎯</span>
<span class="prog-card__result-icon"><svg aria-hidden="true" width="20" height="20"><use href="#icon-target"/></svg></span>
<span><strong>Через 2 месяца</strong> — осознанное чтение по слогам</span>
</div>
@ -160,15 +160,15 @@ $prem = $data->get_premium_program();
</div>
<div class="prog-card__trust">
<span>👥 до 10 детей</span>
<span>🎂 5–7 лет</span>
<span>📍 очно, Щёлково</span>
<span>👩‍🏫 педагог: стаж 12 лет</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-users"/></svg> до 10 детей</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-gift"/></svg> 5–7 лет</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-location-pin"/></svg> очно, Щёлково</span>
<span><svg aria-hidden="true" width="18" height="18" class="prog-card__inline-icon"><use href="#icon-teacher"/></svg> педагог: стаж 12 лет</span>
</div>
<div class="prog-card__social-proof">
<span class="prog-card__rating">4.8 — рейтинг программы</span>
<span class="prog-card__graduates">🎓 500+ детей уже прошли</span>
<span class="prog-card__graduates"><svg aria-hidden="true" width="18" height="18"><use href="#icon-graduation"/></svg> 500+ детей уже прошли</span>
</div>
<div class="prog-card__btn-wrap">

51
wp-content/themes/dekart/template-parts/svg-sprite.php
View File

@ -73,5 +73,54 @@ if ( ! defined( 'ABSPATH' ) ) {
<symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14M12 5l7 7-7 7"/>
</symbol>
</symbol>
<!-- Эмодзи → SVG замены -->
<symbol id="icon-teacher" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="7" r="4"/>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<path d="M16 2l-2 2 2 2"/>
<path d="M20 4l-6 6"/>
</symbol>
<symbol id="icon-game" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="6" width="20" height="12" rx="2"/>
<path d="M6 12h4M8 10v4M15 13h.01M18 11h.01"/>
<circle cx="15.5" cy="13.5" r=".5" fill="currentColor"/>
<circle cx="18.5" cy="11.5" r=".5" fill="currentColor"/>
</symbol>
<symbol id="icon-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
</symbol>
<symbol id="icon-target" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<circle cx="12" cy="12" r="6"/>
<circle cx="12" cy="12" r="2" fill="currentColor"/>
</symbol>
<symbol id="icon-trending-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
<polyline points="17 6 23 6 23 12"/>
</symbol>
<symbol id="icon-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="7" r="4"/>
<path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/>
<circle cx="17" cy="7" r="4"/>
<path d="M21 21v-2a4 4 0 0 0-4-4"/>
</symbol>
<symbol id="icon-graduation" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
<path d="M6 12v5c3 3 9 3 12 0v-5"/>
</symbol>
<symbol id="icon-gift" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="8" width="18" height="16" rx="2"/>
<path d="M12 8v16"/>
<path d="M8 3a3 3 0 1 0 1 5.83"/>
<path d="M16 3a3 3 0 1 1-1 5.83"/>
</symbol>
</svg>