IT + Творчество
27 июня — 10 июля
14 дней
59 000 ₽
Питание, проживание, программа
занято 8 свободно 4
01
Карта компонентов сайта
65 Astro компонентов, разбитых по зонам влияния на конверсию
Tier 1 — Конверсия (критично)
hero/Mobile.astro
Главный экран мобиль — фото + CTA + метрики
hero/Desktop.astro
Главный экран десктоп — плашка с ценой
hero/DesktopTrust.astro
Trust badges под кнопкой десктоп
shifts/ShiftCard.astro
Карточка смены с ценой и кнопкой «Выбрать»
Shifts.astro
Контейнер с горизонтальным скроллом смен
LeadForm.astro
Форма захвата лида (возраст + телефон)
StickyCta.astro
Липкая кнопка снизу мобильного экрана
SummerCta.astro
CTA-блок «Записаться» с формой
HeroModals.astro
Попапы с деталями смен
Tier 2 — Доверие (важно)
Reviews.astro
Отзывы с Яндекс.Карт 5.0
Mentors.astro
Преподаватели / Команда
Team.astro
Расширенная команда
About.astro
О лагере — история, Дарья
Hackathon.astro
Блок про хакатон и дипломы
Stay.astro
Условия проживания
Gallery.astro
Фотогалерея
Videos.astro
Видео
Economy.astro
Налоговый вычет / Экономика
Journey.astro
День в лагере по часам
MomStory.astro
История мамы / кейс
Contacts.astro
Контакты, карта
Tier 3 — SEO & Утилиты
SeoTextBlock.astro
SEO-текст с внутренними ссылками
FAQ.astro
Аккордеон часто задаваемых вопросов
SchemaOrg.astro
JSON-LD структурированные данные
FAQSchema.astro
Schema.org для FAQ
CourseSchema.astro
Schema.org для курсов
Header.astro
Хедер с навигацией
Footer.astro
Футер с ссылками
MobileMenu.astro
Мобильное меню
PhoneDropdown.astro
Дропдаун с номером телефона
BrandName.astro
Логотип / название бренда
BookingBar.astro
Полоса бронирования
StatCallout.astro
Статистика-выноска
AgeBar.astro
Возрастная шкала
BlogCTA.astro
CTA в конце статьи блога
RelatedArticles.astro
Похожие статьи
02
Цвета и токены
Единственный источник правды — src/styles/global.css → @theme . Никаких hex в компонентах.
Brand Orange
bg-primary
#ec7c00
Основная кнопка CTA, акценты
bg-primary-hover
#d46e00
Hover состояние кнопок
bg-primary-light
#f59332
Иконки, подчёркивания
bg-primary-soft
#fff1df
Мягкий фон, бейджи
bg-primary-muted
rgba(236,124,0,0.12)
Ghost-элементы
Brand Blue
text-blue
#1b4fd8
Ссылки, трастовые бейджи
text-blue-l
#3b82f6
Акценты, иконки
bg-blue-s
#eff6ff
Фон секции Shifts, FAQ
bg-navy
#0d1a2b
Hero фон, overlay
Surfaces
bg-white
#ffffff — Карточки
bg-surface
#f7f8fb — Фон страницы
bg-surface-alt
#f0f4ff — Голубой фон (FAQ, Reviews)
bg-surface-warm
#f7f5f2 — Тёплый (About, цитата Дарьи)
Проблема: 7 вариантов оранжевого в коде
Найдено в компонентах сейчас:
bg-[#ec7c00] ✓ Правильный токен bg-orange-500 ✗ Tailwind-orange bg-orange-600 ✗ Tailwind-orange bg-[#ea580c] ✗ Другой hex bg-[#f97316] ✗ Другой hex text-orange-600 ✗ Text вариант border-orange-400 ✗ Border вариант
→ Заменить ВСЕ на
bg-primary / text-primary 03
Кнопки
Текущая оранжевая кнопка «тяжёлая» — слишком насыщенная, текст тёмный на ярком. Вот варианты на основе HyperUI.
Текущий вариант (используется в LeadForm + StickyCta)
Проблемы
1. Текст
2. Нет
3. Разные радиусы: LeadForm
4. Разные размеры: h-[48px] vs py-3 — непоследовательно
#1e2430 (тёмный) на #ec7c00 — необычно, большинство ожидают белый2. Нет
text-white → контраст 4.1:1 (WCAG AA не проходит для нормального текста 16px)3. Разные радиусы: LeadForm
rounded-[10px], StickyCta rounded-xl (12px), ShiftCard rounded-xl4. Разные размеры: h-[48px] vs py-3 — непоследовательно
CTA Primary — «Написать в бот» / «Выбрать смену»
A — Текущий (темный текст)
✗ Контраст 4.1:1 WCAG не проходит
B — Белый текст (HyperUI pattern)
✓ Контраст 5.2:1 WCAG AA
C — CTA с иконкой (Mobile Hero)
✓ Для Mobile Hero — главный CTA
D — Ghost (вторичный)
Secondary / Utility кнопки (ShiftCard)
Текущие — border-slate-200
Предложение — glass + синяя рамка
Кнопки Sticky CTA (мобиль низ экрана)
Текущий StickyCta
Размерная шкала кнопок
04
Типографика
Inter — единственный шрифт. Минимум 16px для читаемого контента. 14px только для лейблов и бейджей.
Лагерь для детей
text-4xl · 44px
H1 Desktop Hero
Программирование + отдых
text-3xl · 36px
H1 Mobile Hero
Выбери свою смену
text-2xl · 28px
H2 Mobile large
Почему выбирают нас
text-xl · 24px
H2 Desktop
IT + Творчество
text-lg · 20px
H3 карточки
Занятия каждый день
text-md · 18px
Подзаголовки
Каждый ребёнок уезжает с проектом
text-base · 16px
Основной текст
Открытая запись
text-sm · 14px
Labels / badges
7 лет на рынке
text-xs · 12px
Иконки-подписи
Радиус — шкала из 6 значений
rounded-sm · 8px
Кнопки, input, маленькие элементы
rounded-md · 12px
Badges, chips, small cards
rounded-lg · 16px
Карточки мобиль
rounded-xl · 20px
Карточки десктоп, hero-блоки
rounded-2xl · 24px
Секции, большие контейнеры
rounded-pill · 100px
Теги, pills, trust badges
Сейчас в коде: rounded-[8px], [10px], [12px], [14px], [16px], [18px], [20px], rounded-xl, rounded-2xl, rounded-lg, rounded-full — 11 разных значений.
Нужно привести к шкале выше.
Нужно привести к шкале выше.
Тени
Карточки обычные
0 6px 18px rgba(15,23,42,0.04)
Карточки hover
0 14px 32px rgba(15,23,42,0.08)
Glass карточки (синий тинт)
0 8px 24px rgba(27,79,216,0.12)
CTA кнопка оранжевая
0 4px 20px rgba(236,124,0,0.38)
05
Формы
LeadForm.astro — конверсионный элемент. Минимум полей, максимум доверия. Не ломать логику — только CSS-косметика.
Текущая LeadForm (воспроизведение)
Возраст
Ваш телефон
Лицензия Минобрнауки Медработник Страховка
Предложение — токены + белый текст на кнопке
Возраст ребёнка
Ваш телефон
Лицензия Минобрнауки Медработник 24/7 Страховка
Отвечаем в течение 15 минут
Состояния инпута
Default
Focus
Error
Введите полный номер
Disabled
06 Открыта Открыта 3 места
Карточки смен (ShiftCard)
ShiftCard.astro — самый сложный компонент. Цена, даты, прогресс, кнопки «Выбрать». Нужно: glassmorphism поверх #eff6ff фона.
Текущий — bg-slate-50, белый фон секции
Предложение — glass-surface поверх #eff6ff
IT + Творчество
27 июня — 10 июля
14 дней
59 000 ₽
Питание, проживание, программа
занято 8 свободно 4
Популярная смена — badge + border
Популярная
Хакатон Pro
11 — 24 июля
65 000 ₽
занято 9 свободно 1
07
Badges, Pills, Trust-элементы
Используются в Reviews, Hero, ShiftCard, LeadForm. Правило: только bi-иконки, 12–13px, min-height 28px.
Status Badges (ShiftCard)
Открыта Мало мест Заполнена Скоро
Trust Pills (Hero Mobile / LeadForm)
Лицензия Минобрнауки
Медработник 24/7
Страховка
Glass Trust Pills (для Hero на тёмном фоне)
Лицензия
Медсестра
Страховка
Метрики Hero 2×2 (текущие)
7
лет опыта
1200+
детей
5.0
Я.Карты
ТОП-4
в России
Иконки — карта замен (из CLAUDE.md)
| Контекст | Нельзя | Нужно |
|---|---|---|
| Кнопка CTA | 🚀 🎯 | bi-telegram, bi-send-fill |
| Доверие | ✅ 🛡 | bi-patch-check-fill, bi-shield-fill |
| Медицина | ❤️ 💊 | bi-heart-pulse-fill |
| Лагерь | 🏕 ⛺ | bi-house-heart-fill |
| Программирование | 💻 🖥 | bi-laptop |
| Популярное | 🔥 | bi-fire |
| Рейтинг | ⭐ | bi-star-fill (или ★ typography) |
| Внимание | ⚠️ | bi-exclamation-triangle-fill |
| Документ | 📄 | bi-file-earmark-text |
| Телефон | 📞 | bi-telephone-fill |
08
Glass-эффекты — когда и как
Glass работает ТОЛЬКО на цветном/тёмном фоне. На белом — невидимо и бессмысленно.
glass-dark — поверх тёмного фото (Hero mobile)
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px) saturate(200%);
border: 1px solid rgba(255,255,255,0.12);
glass-surface — поверх голубого градиента (Shifts)
СМЕНЫ ЛЕТА 2026
IT + Творчество
59 000 ₽
background: rgba(255,255,255,0.72);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255,255,255,0.8);
CTA-блок — тёмно-синий фон (SummerCta)
Записаться на смену
Осталось 4 места на июль
Налоговый вычет 13% — до 5 434 ₽
/* CTA форма поверх синего */
background: rgba(255,255,255,0.10);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255,255,255,0.20);
09
Hero Mobile — концепция v2
Структура снизу вверх: glass-метрики → кнопка бот → цена → фото. Добавлен «Пока другие на даче» (из коммита a0b554b).
Структура Mobile Hero (сверху вниз)
1
Фотография детей с улыбками
Эмоция "я хочу туда" — без изменений
2
«Пока другие на даче...»
Восстановить из коммита a0b554b — цепляет
3
H1 заголовок + цена
Конкретно: «от 48 000 ₽ · с 30 мая»
4
CTA кнопка — Написать в бот
Добавлена в dev. Главное действие.
5
Метрики 2×2 (glass-dark)
7 лет / 1200+ / 5.0 / ТОП-4
6
Trust pills (glass-dark)
Лицензия / Медсестра / Страховка
«Пока другие на даче» — восстановить?
Фраза была в коммите
Зацепляет целевую аудиторию (мама с телефоном, лето, FOMO).
Предлагаю: восстановить как оранжевый тег над заголовком.
a0b554b, убрана при откате.Зацепляет целевую аудиторию (мама с телефоном, лето, FOMO).
Предлагаю: восстановить как оранжевый тег над заголовком.
10
Do / Don't — итоговые правила
Чек-лист перед каждым PR в ветку dev.
Делай
bg-primary / text-primary / border-primary — только токены
text-white на оранжевой кнопке (контраст 5.2:1)
min-h-[48px] для всех интерактивных элементов (touch)
glass только на цветном/тёмном фоне
Inter — единственный шрифт (не Comfortaa!)
min 16px для читаемого контента
bi-* иконки с aria-hidden="true"
Только иконки из icons-manifest.json
Отдельная ветка design/glassmorphism-v1
PR в dev, не прямой merge
Не делай
#ec7c00 хардкодом (только через токен)
Тёмный текст на оранжевой кнопке
bg-orange-500, bg-orange-600, text-orange-600
Glass на белом фоне — невидимо
Comfortaa или другие шрифты в production
Эмодзи как иконки (🚀 🎯 ⚡ 🔥)
rounded-[14px] или другие произвольные значения
Коммит в main/dev напрямую (без MASTER_AGENT=1)
Partytown (@astrojs/partytown)
Педагогические термины (soft-skills, компетенции)
Приоритеты имплементации (design/glassmorphism-v1)
P1 · 2 часа
Быстрые победы
bg-primary токены · радиусы · 16px везде
P2 · 3 часа
Shifts glassmorphism
Фон #eff6ff · glass-surface карточки · glass кнопки
P3 · 2 часа
Hero mobile
glass-dark метрики · glass trust pills · «Пока другие...»
P4 · 3 часа
Hero desktop
Нижняя плашка → glass-surface · бот-кнопка рядом
P5 · 1 час
CTA-блок
Синий фон + оранжевая кнопка + glass-форма