АйДаКемп — Дизайн-система v3 (Soft Orange + Attention)

1. Философия

Не дизайнерская, а маркетинговая. Дизайн = инструмент конверсии.

Принцип 1: Photo emotion > graphic effects.
Дарья покупает «социально-одобряемое». Фото улыбающегося ребёнка работает в 10× раз сильнее, чем gradient orbs.

Принцип 2: Soft orange.
Brand-color #ec9b44 (голова робота), не #ec9b44. Hard orange = «реклама»; soft = «премиум».

Принцип 3: Avoid aggressive fills.
Где можно — outline вместо fill. Например, secondary CTA: border 1.5px orange вместо bg orange.

Принцип 4: Один accent per screen.
На каждом экране — 1 точка внимания. Если их 3, мама уходит. Это правило важнее эстетики.

Принцип 5: Информационные vs Конверсионные блоки.
Info-блоки (Reviews, About, FAQ) = navy + white, без orange. Conversion-блоки (Hero, Shifts, BookingBar) = soft orange acent.

Принцип 6: Конверсия = звонок.
Лучшие клиенты ЗВОНЯТ, не оставляют формы. Phone в header = главный CTA, должен быть всегда виден.

Принцип 7: Mobile-first.
Дарья на мобиле. Desktop = upscaled mobile с большими отступами, не наоборот.

2. Палитра

Soft orange (#ec9b44 — как голова робота) + navy + neutrals + 1 success accent.

Primary — soft orange (новый, светлее)

100

200

300

400

500 brand

600

700

800

900

950

Текущий #ec9b44 остаётся как алиас для совместимости, но в новых компонентах используем #ec9b44 (50950 шкала выше).

Navy — фон, тёмные секции

100

200

300

400

500

600

700

800

900

950 hero bg

Neutrals (текст, рамки) + success

white

gray-50

border

text-muted

text-body

text-strong

success

stars-only

Сравнение: Hard vs Soft Orange

Текущий (Hard #ec9b44)

«Реклама», агрессивно, крикливо

Новый (Soft #ec9b44)

«Премиум», спокойно, как у Apple/Stripe

3. Типографика

Mobile-first шкала. На десктопе — те же размеры × 1.2-1.5.

Hero H1Летний IT-лагерь38/44 · 800 · -0.03em

Section H2Как проходит смена26/32 · 700 · -0.02em

Card H3Программирование18/20 · 700

Body largeДети уезжают с готовым проектом18/18 · 400 · 1.5

BodyОсновной текст в статьях и описаниях смен16/16 · 400 · 1.65

CaptionМета, подписи, дата14/14 · 400

Label UCЗАПИСЬ ОТКРЫТА12/12 · 600 · 0.06em UC

Минимум на мобилке: 16px для body. Меньше — только caption/label/disclaimer.

4. Кнопки

3 уровня + правило: fill ТОЛЬКО для primary CTA. Остальное — outline/ghost.

Primary (1 на экран)

Soft orange fill. Только для конверсии.

Secondary

Outline orange + text dark.

Ghost (link-style)

Лёгкий border, для tertiary actions.

Phone (всегда наверху)

+7 (495) 128-44-29

Не fill. Просто текст с иконкой. Главный путь = звонок.

5. Блоки сайта — Info vs Conversion

Каждый блок имеет тип. Info = navy/white, без orange. Conv = soft orange accent.

INFORMATIONAL — закрывают страхи, дают доверие

Hero фотоЭмоция — улыбающийся мальчик

INFO Лицо ребёнка

Stats (7 лет / 1200 детей / 5.0)Социальное доказательство

INFO Цифры

About (что мы делаем)Кратко, фото, без воды

INFO Иконки + 3 факта

ReviewsОтзывы реальных мам с

INFO Лица + рейтинг

Mentors / TeamКому доверяешь ребёнка — фото и опыт

INFO Лица педагогов

Stay (размещение)Безопасность, корпуса, столовая

INFO Фото комнат

Trust (Лицензия / Медсестра / Страховка)Закрывает страх безопасности

INFO Иконки документов

FAQЗакрывает оставшиеся вопросы

INFO Вопрос/ответ

CONVERSION — вызывают действие

Phone в HeaderГлавный CTA — звонок

CONV Phone link

Age picker (главная цель Метрики)Первое осознанное действие

CONV 4 кнопки возраста

Hero CTA «Выбрать смену»Primary action на первом экране

CONV Soft orange button

Bot CTA «Спросите анонимно»Снимает страх спама

CONV Cycling word + ⛨ icon

Shifts (выбор смены + цены)Решение о покупке

CONV Цена + «Выбрать»

BookingBar (звонок-форма)«Перезвоним за 10 мин»

CONV Phone + Submit

6. Точки внимания на блок

Правило: 1 главная точка внимания на блок. Если 2 — глаз прыгает, конверсия падает.

Блок	Главная точка	Чем привлекаем	Что НЕ должно конкурировать
Hero	Лицо мальчика + Phone в header	Эмоция фото + soft orange phone	Никаких других orange акцентов
Age picker	4 кнопки возраста	Soft orange ring/border	Никаких баннеров рядом
Shifts	Цена + «Выбрать»	Bold price + soft orange CTA	Не выделять иконки rating ярко
Reviews	rating + лица	Yellow stars + photo	Не делать orange CTA «Все отзывы»
About	3 ключевых факта	Bold цифры (navy, не orange)	Никаких CTA
FAQ	Список вопросов	Tight typography, читаемость	Никаких иллюстраций
BookingBar	Phone number + Submit	Phone bold + soft orange button	Не делать форму с 5 полями
Footer	Контакты	Phone, email, адрес	Не дублировать CTA

7. Mobile vs Desktop — адаптивность

Mobile-first: сначала проектируем 390px, затем upscale до 1280px+.

Параметр	Mobile (≤768px)	Desktop (≥1024px)
Hero H1	38px / 800 / -0.03em	56px / 800 / -0.04em
Section H2	26px	36px
Body	16px (мин!)	16px (тот же — читаемость)
Section padding	40px (py-10)	64px (py-16)
Container max-width	full width	1280px (max-w-[1280px])
Cards в row	1 col (stacked)	2-3 cols (grid)
Header CTA	Phone icon + burger	Phone full + nav-links + CTA
Hero photo	Full bleed bg, soft mask	Right column 50%, left text
Touch target	44×44 min	32×32 ok (mouse)

8. SEO / GEO / AEO — обязательные элементы

Каждый блок должен быть оптимизирован под Google/Yandex (SEO), AI-search (Perplexity/ChatGPT — GEO) и featured snippets (AEO).

Schema.org разметка по блокам

Блок	Schema type	Что внутри
Header / Footer	`Organization` + `LocalBusiness`	name, url, logo, telephone, address, sameAs (соцсети), aggregateRating
Hero	`WebPage` + `BreadcrumbList`	name, description, primaryImageOfPage, breadcrumbs
Shifts (программы)	`Course` + `Offer`	name, description, provider, offers (price, priceCurrency, availability, validFrom/validThrough)
Reviews	`Review` + `AggregateRating`	author, reviewBody, reviewRating, datePublished — minimum 5 reviews для rich snippet
FAQ	`FAQPage`	mainEntity[] с Question/Answer — для Google FAQ rich snippet
Mentors / Team	`Person`	name, jobTitle, image, sameAs
Articles (блог)	`Article` + `Person author`	headline, datePublished, dateModified, author, image, articleSection
Stay / Размещение	`Place` + `LodgingBusiness`	name, address, geo, amenityFeature
Contacts	`ContactPoint`	telephone, email, contactType, areaServed, availableLanguage

Meta tags — обязательны на каждой странице

Tag	Правила	Пример
title	50-65 chars, ключ + бренд	`Летний IT-лагерь в Подмосковье 2026 — АйДаКемп`
description	140-160 chars, USP + цена + CTA	`Программирование, AI, бассейн. Смены с 30 мая. От 48 000 ₽. Налоговый вычет 13%.`
canonical	Абсолютный URL, без trailing slash mismatch	`<link rel="canonical" href="https://aidacamp.ru/" />`
og:image	1200×630 webp, под 100kB	`/images/og-default.webp`
og:title / og:description	Может отличаться от meta для соцсетей	—
twitter:card	`summary_large_image`	—
robots	`index,follow` для всех публичных. `noindex` для /demo/, /admin/	—
html lang	`ru`	`<html lang="ru">`

Иерархия заголовков H1-H6

Правило: 1 H1 на страницу. H2 — основные секции (Shifts, Reviews, FAQ). H3 — подсекции/карточки. H4-H6 — редко.

Тег	Сколько	Что внутри
H1	1 на страницу (НЕ больше)	Главное ключевое слово + описание услуги: «Летний IT-лагерь в Подмосковье 2026»
H2	5-10 на страницу	Названия секций: «Как проходит смена», «Отзывы», «FAQ» — должны содержать LSI-ключи
H3	10-30	Подсекции, заголовки карточек смен/отзывов/FAQ-вопросов

Mobile + Desktop hero — оба H1 в потоке (visible по соответствующему breakpoint). НЕ скакать через уровень (H1 H3 без H2).

Изображения — alt + lazy + format

Правило	Что
Format priority	AVIF WebP JPEG fallback (через `<picture>`)
Hero LCP image	`loading="eager" fetchpriority="high"` + `<link rel="preload">`
Below-fold images	`loading="lazy" decoding="async"`
Alt text	Все meaningful images. Декоративные — `alt=""` + `aria-hidden="true"`
Width/height	Обязательно для предотвращения CLS
Srcset для responsive	Минимум 2 размера: `-600w` и `-900w`
Alt example	`alt="Дети программируют на занятии в IT-лагере АйДаКемп, лето 2026"` — описание + ключи

Internal linking

Из каждой страницы — минимум 3 внутренних ссылки на родственные landing pages (через RelatedPages компонент).

Контекст	Куда вести
Hero CTA	#shifts — выбор смены
В тексте «программирование»	/programmirovanie-dlya-detei/
В тексте «возраст 12 лет»	/it-lager-12-let/
FAQ ответы	На статьи /stati/ и спец. landing
Footer	Карта сайта, политики, документы

Core Web Vitals — мобильные цели

Метрика	Цель Google	Наш SLA
LCP (Largest Contentful Paint)	< 2.5s	< 2.0s — hero photo preload
INP (Interaction to Next Paint)	< 200ms	< 150ms — нет тяжёлых JS
CLS (Cumulative Layout Shift)	< 0.1	< 0.05 — все img с width/height
TTFB	< 0.8s	SSR на VPS, nginx с brotli

GEO — Generative Engine Optimization (для Perplexity/ChatGPT/Gemini)

Принцип GEO: AI-поисковики цитируют конкретные факты, цифры, citations. Структурируем контент так, чтобы AI мог взять короткий блок и процитировать.

Конкретные цифры в каждом блоке: «От 48 000 ₽ за 7 дней», «66 км от МКАД», «1200+ выпускников»
Bullet lists и таблицы — AI любит структурированный контент
Author bylines — на каждой статье Person author в Schema.org + видимый автор в HTML
📅 Daterefreshed — dateModified на статьях (AI предпочитает свежие)
External citations — ссылки на vc.ru, incamp.ru, Яндекс.Карты как trust сигналы
Q&A формат в FAQ — точно такой как пользователь спросит у AI
One-fact paragraphs — каждый абзац = 1 факт. Легко извлечь.

AEO — Answer Engine Optimization (featured snippets)

Тип snippet	Как попадаем
Paragraph snippet	Прямой ответ в 40-60 словах сразу под H2-вопросом
List snippet	Нумерованный/маркированный список под вопросом «Как…»
Table snippet	HTML `<table>` для сравнений (цены смен, возрастные группы)
Video snippet	YouTube embed + `VideoObject` Schema с transcript
FAQ Schema rich snippet	Только если > 4 вопросов с реальными ответами
People Also Ask	Включаем в FAQ типичные «А правда что…», «Можно ли…», «Как…»

Технические SEO-правила

Файл	Что должно быть
robots.txt	Allow: /, Disallow: /demo/, /admin/, /api/. Sitemap: /sitemap.xml
sitemap.xml	Auto-generated через @astrojs/sitemap. Все public pages с lastmod
404.html	Custom + ссылки на главные страницы
htaccess / nginx	301 redirects старых URL, brotli/gzip compression
hreflang	Не нужен (только ru)
IndexNow	API ping в Yandex/Bing при добавлении новых страниц

SEO Checklist для каждого нового блока/страницы

H1 один, содержит главное ключевое слово
H2-H3 содержат LSI-ключи (semantic synonyms)
Meta title 50-65 chars, description 140-160 chars
Schema.org разметка по типу контента (см. таблицу выше)
Все img: alt + width + height + lazy (кроме hero LCP)
Минимум 3 внутренних ссылки на родственные страницы
Canonical URL без mismatch
Open Graph image 1200×630
Sitemap включает страницу
LCP < 2.0s (тест в PageSpeed)
Один factor per paragraph (для GEO)
FAQ или Q&A блок где уместно (для AEO)

9. Порядок блоков — на данных Метрики

Воронка за 30 дней: 2827 человек вошли в hero 692 (24%) выбрали возраст 6 (0.2%) отправили форму. Перестраиваем block order под реальное поведение.

Реальная конверсия по целям (последние 30 дней)

Действие	Reaches	% от entered	Тип
Scroll 25% (entered hero)	2827	100%	baseline
Scroll 90% (full view)	1445	51%	engagement
Выбор возраста	692	24%	conv #1 — главная цель оптимизации
Открыл инфо о смене	221	7%	conv #2
Посмотреть смены	185	6%	conv #3
«Выбрать смену»	115	4%	conv #4
Нижняя плашка возраста	76	3%	conv #5
FAQ открыто	74	2%	info high
Открытие фото	60	2%	info
Клик телефон (auto+manual)	48	1.7%	conv #6
Открытие видео	25	0.9%	info low
Отправка заявки	6	0.2%	conv DEAD

Текущий order (21 блок) vs Рекомендованный

Сейчас (хаос)

Hero
ShiftOccupancy + MomStory
About
Journey
Economy (налоговый вычет)
BookingBar #1
SoftStart
Shifts главная цена тут
BookingBar #2
SummerCta
Hackathon
Gallery
Videos мёртвый блок 0.9%
Reviews опаздывает
FAQ опаздывает
Team
Mentors дубль с Team
Stay
Contacts
SeoTextBlock
RelatedPages

Предлагаю (на данных)

Hero — фото + age_picker (24% conv) + phone в header
ShiftOccupancy — «осталось N мест» (urgency)
Shifts поднимаем! Цены + «Выбрать»
Reviews + rating поднимаем! Соц. proof
About — что мы делаем
Journey — как проходит смена
Trust block (Лицензия/медсестра/страховка) новый отдельный блок
MomStory — эмоция мамы
Mentors+Team (объединить!)
Stay — где живут дети (закрытие страха)
FAQ поднимаем! 2% conv
Economy — налоговый вычет (рациональная мама)
BookingBar (1 шт., финальный «Перезвоним»)
Gallery — soft sell, фото впечатлений
Hackathon — что в финале (бренд)
Videos — оптально, либо удалить
SoftStart — мини-пример
SummerCta
Contacts — финал
SeoTextBlock — для поисковиков
RelatedPages — internal linking

Принцип: 3 «волны» внимания

Wave 1 (Hero + Shifts + Reviews): закрываем главную задачу — «куда деть ребёнка летом» через emotion + цена + соц. proof. Большинство converters в первых 3-х блоках.

Wave 2 (About Trust Mentors Stay): закрываем страхи безопасности и доверия. Дарья «холодно» оценивает.

Wave 3 (FAQ Economy BookingBar): финальное снятие возражений + рациональный закрывающий аргумент (вычет 13%) + последний CTA.

Что предлагаю удалить или сократить

Videos	0.9% conv. Если нет, освобождаем место для важного
BookingBar #2 (дубль)	Один достаточно. Дублирование = распределение клика 50/50
Mentors отдельно от Team	Объединить — оба про людей, экономия скролла
SoftStart, SummerCta, Hackathon	Под вопросом — измерять отдельно. Возможно объединить в 1 блок «что в смене»

10. Метрика-цели — обязательны для каждого CTA

Каждое действие = trackable goal. Без событий — нет данных для оптимизации Директа/VK.

Текущие активные цели

Цель	ID	Что отслеживает	Где навешано
Выбор возраста-new	541048270	Главная цель оптимизации Директа	Age picker (4 кнопки), Нижняя плашка
Открыл инфо о смене	—	Клик карточки смены	Shifts cards
Посмотреть смены	—	Клик «Подробнее»	Shifts
Кнопка «Выбрать смену»	—	Финальное действие	Shifts CTA
Открытие FAQ-new	—	Клик аккордеона	FAQ
Открытие видео-new / фото-new	—	Lightbox open	Gallery / Videos
Автоцель: клик по номеру телефона	auto	Любой `tel:` link	Header, Footer, BookingBar

Naming convention для новых целей

Формат: {Действие}-{Контекст}-{Версия}. Пример: «Клик-БотCTA-v3», «Открытие-AgePopup-v2». Версия меняется при изменении дизайна — старые данные сохраняются.

Чек-лист: каждый новый CTA должен иметь

data-analytics-goal="goal_name" атрибут
data-analytics-label="context" для сегментации
Цель создана в Метрика Настройки Цели
Если это conversion — добавлена в Директ как «Цель оптимизации»
Сохранён prev/next в воронке для измерения retention

11. Brand Voice — тон коммуникации

Язык — главный носитель ощущения «я хорошая мама». Каждое слово работает на это.

Тон голоса — характеристики

Параметр	Уровень	Пояснение
Формальность	Низкая	На «вы», но как подруга, не как банк
Эмоциональность	Средняя	Тёплая забота, без слащавости
Юмор	Лёгкий	Уместная ирония, никогда сарказм
Экспертность	Скрытая	Не говорим «эксперты», показываем фактами
Срочность	Точечная	«Осталось 14 мест», но не «СПЕШИТЕ!!»
Назидание	Запрещено	Никогда не учим маму как воспитывать

Работает (тон «Пивоваров»)

Подтверждение принципа: мы коммуницируем правду без провокаций любопытства. «Анонимно», «налоговый вычет 13%», «без телефонов» — это факты, а не триггеры тревоги. Не «А вы знали...?», не «Узнайте секрет...», не «Что скрывают другие лагеря...». Просто прямо — что есть.

Принцип Пивоварова: «Решение всегда остаётся за вами. Мы посоветуем, расскажем, поможем — но выбор ваш. Мы вас за это ценим». Не давим, не звонят, не торопим — уважаем взрослого человека.

«Пока другие на даче — ваш сделает AI-проект» — лёгкая зависть от подруг
«Вам — 14 дней для себя» — закрывает вторичную выгоду
«Как у нас в семье» — личная история Дарьи (наш founder)
«Спросите анонимно про минусы» — провокация любопытства, снимает barrier
«Анонимно, без регистрации» — снимает страх спама (42% россиян не оставляют контакты)
«Налоговый вычет 13%» — рациональный аргумент
«Решение остаётся за вами» — закрытие любого блока
«У нас есть философия — мы не про телефоны» — наш USP, см. раздел 14

Не работает (закрывает кошелёк / запрещено)

«Перезвоним за 10 минут» — мусорное обещание, как у всех
«Самые выгодные», «лучшие цены» — клише, не верят
«Звоните!», «Пишите!» — давление, обратное эффект (см. Пивоваров tone)
Слова «дети», «ребёнок» — где можно избегать. Не «ваш ребёнок будет», а «ваш сделает». Не «дети программируют», а «сделают свой проект»
«Бот» — никогда. У 42% россиян = «опять менеджер заберёт телефон». Использовать «спросите анонимно» вместо «спросите бота»
«Ваш ребёнок не получает должного внимания» — обвинение
«Soft skills будущего», «уникальная методика», «лидеры рынка», «эксперты», «топовые программы», «инновационный» — пустые слова
«Запишитесь сейчас», «Заходите, не пожалеете» — продажные клише
«Ребёнку нужно X» — мы решаем за маму, она этого не любит
«Гарантируем результат» — невозможно гарантировать

Микрокопирайтинг — конкретные правила

Контекст	Шаблон
CTA primary	«Глагол + объект» — «Выбрать смену», «Узнать цены», «Спросить про…»
CTA secondary	Подтверждение действия — «Узнать больше», «Посмотреть фото»
Form labels	Что-нужно-сделать вместо что-это-такое: «Как вас зовут?» вместо «Имя*»
Error messages	«Похоже, телефон не записался — проверим?» вместо «Ошибка: invalid input»
Empty states	«Тут пока пусто — посмотрите смены лета 2026» вместо «No data»
Loading	«Считаем места…» вместо «Loading…»
Confirmation	«Отлично! Перезвоним за 10 минут» вместо «Спасибо, заявка принята»

Слова-маркеры что нельзя

«безусловно», «качественный», «настоящий», «каждый ребёнок», «современный», «инновационный», «гарантия», «эксклюзивный», «уникальный», «лидер», «топовый» — все эти слова сигнализируют о слабом продукте.

12. Доступность (a11y) — что это и зачем

a11y = accessibility (a + 11 букв + y = «доступность»). Сайт должен работать для людей с инвалидностью: слабовидящих, слепых, моторных нарушений.

Зачем нам:
1. SEO: Google ранжирует выше доступные сайты
2. +5% аудитории: у мам бывают слабовидящие родители (бабушки) которые помогают выбирать лагерь
3. Закон: ФЗ «О защите прав потребителей» обязывает делать инфо доступным
4. Mobile UX: крупные touch targets выгодны и без инвалидности

WCAG 2.1 AA — минимум для прода

Критерий	Что значит	Как проверить
Contrast 4.5:1	Обычный текст должен иметь контраст ≥4.5:1 с фоном	WebAIM Color Checker
Contrast 3:1	Большой текст (18px+ или 14px+ bold) — минимум 3:1	Тоже WebAIM
Touch targets 44×44	Кнопки на мобиле минимум 44×44px (Apple HIG)	Просто измерить
Alt text	Все meaningful images имеют alt	Lighthouse a11y audit
Focus visible	Tab по клавиатуре подсвечивает элемент	Tab в браузере
aria-label	Кнопки только с иконкой имеют aria-label	Code review
Form labels	Каждый input имеет связанный	Lighthouse
Heading hierarchy	H1 H2 H3 без перескоков	headingsMap extension
Lang attribute	`<html lang="ru">`	View source
Reduced motion	Уважать `prefers-reduced-motion`	System preference тест

Что у нас проблемно сейчас

Был text-white/35, text-white/45 — контраст FAIL (исправлено в DESIGN_SYSTEM.md, но не везде в коде)
Hero gradient text — теряет контраст на pink части
Cookie banner перекрывает CTA — keyboard users не могут пройти
Иконки в trust badges (emerald/rose/sky) — низкий контраст с тёмным фоном

Инструменты для проверки

Chrome DevTools Lighthouse Accessibility (бесплатно, в браузере)
WAVE — детальный audit с подсветкой ошибок
WebAIM Color Contrast Checker
VoiceOver (Mac) или TalkBack (Android) — реальный тест screen reader

13. Микроанимации — радуют, не отвлекают

Принцип: анимация работает на UX (даёт feedback, обозначает состояние), а не на «красиво».

Можно — функциональные анимации

Где	Что	Длительность
Hover на кнопках	Tailwind `hover:-translate-y-[1px]` + shadow	200ms ease-out
Active на кнопках	`active:translate-y-0` + opacity 0.9	100ms
Открытие FAQ accordion	height 0 auto + chevron rotate 180°	250ms ease-in-out
Modal появление	opacity 01 + scale(0.951) + backdrop fade	200ms
Fade-in при scroll	IntersectionObserver, opacity 01 + translateY 120	400ms ease-out
Cycling text в боте	opacity 01 со сменой слова	200ms, цикл 2.2s
Pulse на «Запись открыта»	opacity 0.6↔1 + scale(1↔1.3)	1.5s infinite, но ТОЛЬКО 1 элемент

Можно умеренно — декоративные анимации

Floating orbs — макс 2 элемента, blur(60px+), opacity < 0.4, animation 8-15s. Если их 5 — это уже шум.
Parallax photo — НЕ на mobile (тяжело для GPU). Только desktop.
Counter animation (числа считаются) — только на view, один раз.

Запрещено категорически

Авто-карусели быстрее 5 секунд (раздражают)
Bounce-effect на кнопках (несерьёзно)
Mouseover wave/ripple везде (Material Design overkill)
Анимация background-image, width, height — НЕ GPU-acelerated, лагает
Pulse на 5+ элементах (визуальный хаос)
Loop scroll-triggered animations (раздражают)

Performance rules

Animatable properties	Только `transform` (translate/scale/rotate) и `opacity`
FPS target	60 FPS на iPhone SE 1st gen (8 лет старого устройства)
Длительность	150-300ms для micro, 400-600ms для большие переходы
Easing	`ease-out` для появления, `ease-in-out` для toggle
prefers-reduced-motion	Все анимации respect `@media (prefers-reduced-motion: reduce)` и отключаются для пользователей с настройкой «уменьшать движение» в системе

«Радуют» — где конкретно

Hero H1 fade-up на 0.6s ease-out — приятный entrance
Cycling word в bot CTA — magnet attention без шума
Stars rating «вспыхивают» по очереди (50ms delay each) — micro-detail
Счётчик «1200+ детей» count-up за 1.2s — wow без отвлечения
Shift card hover lift + shadow — premium feel
FAQ chevron smoothly rotates 180° — приятная mechanic

14. USP — что подсвечиваем (главные differentiators)

3 штуки которые отличают нас от 100 других лагерей. Везде и всегда.

1. Отрыв от телефонов — наша философия.
В отличие от других лагерей, мы НЕ про телефоны. Очень легко занять детей телефоном — поиграл-позавтракал-всех в телефоны, после ужина 2 часа английского — снова в телефоны. Мы делаем осознанно по-другому. Мы лагерь не для всех — для думающих родителей, кто хочет показать ребёнку другую сторону жизни.

2. Экономика (налоговый вычет 13%).
Не «дешевле всех» (это не правда), а «можно вернуть 13% через ФНС». Это рациональный аргумент для папы, который принимает финальное решение по бюджету. Документы для вычета даём автоматически.

3. Внутренняя экономика — реальный AI-проект.
«Ваш сделает AI-проект» — не курсы по «информатике», а реальный продукт за 7-14 дней. Игра, бот, сайт — что-то конкретное, что можно показать в чате с подругами / на родительском собрании.

Где подсвечивать каждое USP

USP	Где	Как
Отрыв от телефонов	Hero subtitle, About, отдельный блок «Наша философия», в FAQ	Не «без телефонов» (звучит как наказание), а «другая сторона» (звучит как опыт)
Налоговый вычет	Hero (микро-метка), Shifts (под ценой), Economy (отдельный блок), FAQ	Конкретные суммы по сменам: ~2 800 / 4 800 / 5 434 ₽
AI-проект	Hero subtitle, Journey, Hackathon (что в финале)	Показывать реальные проекты прошлых смен с фото/видео

Tone of voice для USP

«Мы не для всех — для тех кто хочет показать другую сторону жизни»
«Не про телефоны. Не запретами. По выбору.»
«Государство возвращает 13% — мы готовим документы»
«За 14 дней — реальный AI-проект. Можно показать всем.»

15. Customer Journey — «скользкая горка»

Каждый блок заканчивается крючком — вопросом, который заставляет идти дальше. Цель: чтобы мама не остановилась, а проскользнула до конца.

Принцип «скользкой горки» (Sugarman): Конец каждого блока должен быть таким, что хочется читать следующий. Вопрос, незавершённое утверждение, обещание ответа.

Простые навигационные подсказки (БЕЗ провокаций любопытства)

Принцип Пивоварова: просто называем что дальше. Без «Сомневаетесь?», «А вы знали?», «Хотите узнать?». Прямая коммуникация — взрослые сами решат идти или нет.

Блок	Заканчивается на	Ведёт к
Hero	Возраст ребёнка	Age picker
Age picker	Подходящие смены	Shifts (filtered)
Shifts	Как проходит день в смене	Journey
Journey	Хакатон в финале смены	Hackathon / About
About	Команда и менторы	Team+Mentors
Team+Mentors	Размещение и безопасность	Stay + Trust
Stay+Trust	Отзывы родителей	Reviews
Reviews	Стоимость и налоговый вычет	Economy
Economy	Частые вопросы	FAQ
FAQ	Не нашли ответ — спросите анонимно	Anon Q&A CTA

3 типа путей клиента (на основе Метрики)

Путь	Сценарий	Длина
1. Быстрый (~24% — главный)	Hero Age picker Shifts Звонок	3-4 экрана, 1-2 минуты
2. Глубокий (~7%)	Hero Age Shifts Journey Reviews FAQ Звонок	10-15 минут
3. Параноик (~3%)	Hero Все блоки FAQ Анон бот Яндекс.Карты Звонок мужу	2-3 сессии

Где явные сигналы навигации

В конце каждого блока — иконка или ведущая на следующий
Sticky bottom bar с прогресс-баром (например: «Возраст Смена Цена Запись»)
«Вы тут» indicator
Quick jump menu сбоку (на десктопе) для путь #2 и #3

16. Меню — что отображать (сейчас часть, нужно пересобрать)

Сейчас в меню часть пунктов важных, часть нет, и не все блоки представлены. Пересобираем по приоритетам.

Текущее меню — критика

Пункт	Есть в меню?	Нужен?
О лагере	Да	Да
Смены	Да	Да
Фото	Да	На отдельную страницу
Как проходит смена	Да (под more)	Да
Видео	Да (под more)	На отдельную страницу + редко
Отзывы	Да	Да
FAQ	Да	Да
Команда	Да	Да (с менторами вместе)
Размещение	Да	Да
Контакты	Да	Да
Цены / Налоговый вычет	НЕТ	Должно быть!
Философия / Без телефонов	НЕТ	Должно быть! USP #1
Документы / Лицензия	НЕТ	Должно быть (страх безопасности)
Поиск по сайту	НЕТ	Полезно для глубокого пути

Предлагаю новое меню

Уровень	Пункты
Top (mobile + desktop)	Смены · Цены · Философия · Спросить анонимно
📂 More (dropdown)	О лагере · Как проходит смена · Команда · Размещение · Отзывы · FAQ · Документы
📁 Footer (sitemap)	Все основные + Фото · Видео · Контакты · Политика · Пользовательское
Search	Иконка лупа в header — поиск по статьям/FAQ/смене

17. Отдельные страницы (что выносим с главной)

Чтобы главная грузилась быстрее (LCP < 2s) и была сфокусирована — выносим тяжёлый контент.

Кандидаты на вынос

Блок	Куда	Зачем
Gallery (фото)	/foto/ или /galereya/	10-30 фото лагеря, занимает много места + load time
Videos	/video/	YouTube embed = тяжёлый load. Конверсия 0.9% — не оправдывает место на главной
Mentors (детально)	/komanda/	На главной кратко (3-4 фото), полная команда — внутри
Документы / Лицензия	/dokumenty/ (уже есть!)	Просто ссылка из trust-блока + footer
Stay (детально)	/razmeshenie/	На главной — 1 фото + ключи. Полная инфа — внутри

Эффект: главная сократится с ~21 блока до ~12. Time to interactive улучшится в 1.5-2x.

18. Бронирование — внутри карточек, не отдельный блок

Убираем BookingBar (2 шт. сейчас на главной). Бронирование появляется ТОЛЬКО внутри выбранной смены, после выбора возраста.

Принцип: «Не назойливо». Не толкаем человека «Звоните! Пишите!». Кто хочет — позвонит сам (телефон в header). Кто хочет глубже — выберет возраст выберет смену внутри смены увидит «Забронировать».

Новый flow бронирования

Шаг	Что показываем
1. Hero Age picker	«Подходит ли возраст?» 4 кнопки
2. Shifts (filtered)	Карточки смен подходящих по возрасту
3. Клик на смену Modal	Детали + цена + что включено
4. Inside Modal	«Забронировать» кнопка появляется ТУТ, не раньше
5. Booking form	Минимум полей. Имя + телефон + email опционально

Что убираем

BookingBar #1 (после Economy) — удалить
BookingBar #2 (после Shifts) — удалить
«Перезвоним за 10 минут» — мусорное обещание
«Звоните!» вездесущее — заменить на телефон в header

Что оставляем для звонящих

Phone link в header (всегда виден на mobile)
Phone в Contacts блоке (один раз внизу)
Phone в Footer
Telegram / WhatsApp иконки (Telegram первым — наш основной канал) в header (для тех кто не любит звонить)

19. Бот — никогда не называем «бот»

42% россиян не оставляют контакты на сайтах из-за страха спама. Слово «бот» = «опять менеджер заберёт телефон». Используем «спросите анонимно».

Формулировки

Запрещено	Нужно
«Спросите бота»	«Спросите анонимно»
«Чат-бот ответит»	«Получите ответ за минуту»
«AI-помощник»	«Узнайте всё про лагерь»
«Telegram-бот»	«Через мессенджер»
«Напишите боту»	«Спросите про лагерь / еду / минусы»

CTA для бота

СПРОСИТЕ ПРО

минусы

Анонимно, без регистрации

Cycling words (нейтральные, без провокаций любопытства): лагерь · еду · бассейн · размещение · стоимость · программу · безопасность. Убрали: «минусы», «косяки», «правду о ценах» — это провокация любопытства, не наш tone. Просто перечисляем темы.

UX-детали — конкретные правила

Список конкретных UX-улучшений из обратной связи — что важно для нашего сайта.

Sticky bottom CTA на mobile

Когда mobile-юзер проскролил Hero и не выбрал возраст — снизу появляется sticky-bar с выбором возраста (главная цель Метрики, ID 541048270). НЕ «Выбрать смену» — потому что age_picker идёт первым в воронке. После выбора возраста sticky меняется на «Выбрать смену».

Skeleton loading — что это

Skeleton = серые placeholder'ы (полоски и круги) которые показываются пока контент грузится. Создаёт ощущение что страница «жива», даже если интернет медленный.

Где НЕ нужны:

Static контент — он сразу в HTML, грузится мгновенно
Hero — фото с preload, не нужен skeleton

Где нужны:

API-driven блоки — например, ShiftOccupancy (если данные с сервера)
Bot interface при первой загрузке chat history
Lightbox при открытии большой фотки

Бот — error states не нужны

Если бот недоступен — бот сам скажет «Извините, я временно не отвечаю, перезвоните по ...». Не делаем UI-уведомлений на сайте.

Back-to-top button

Параметр	Значение
Когда появляется	После прокрутки > 800px
Где	Sticky right bottom (mobile: bottom-right; desktop: bottom-right с margin)
Размер	44×44px (touch-friendly), круглая
Иконка	`bi-arrow-up` (Bootstrap Icons)
Стиль	Soft white/glass, не яркая (ненавязчивая)
Анимация	Fade-in 200ms когда появляется. Smooth scroll-to-top при клике

404 страница — «Возможно вы искали»

Что должно быть
1. Большой H1: «Эта страница переехала или удалена»
2. «Возможно вы искали:» список из 5-7 популярных страниц
3. Поиск по сайту (input)
4. Кнопка «На главную»
5. Phone в header (если хочет позвонить)

Поиск по сайту

Иконка лупа в header (после телефона). Клик открывает overlay с полем поиска. Ищет по: статьям /stati/, FAQ-вопросам, названиям смен. Используем Pagefind (open-source, статический) — не требует backend.

Mobile keyboard — viewport jump

Когда mobile-клавиатура поднимается, viewport сжимается kнопки уезжают / контент перекрывается. Решение:
html { height: 100%; } body { min-height: 100svh; } + visualViewport API для критичных форм.

Mail.ru webview — dead clicks

Mail.ru использует свой WebView, в котором <details/summary> часто не работает (dead clicks). Используем <button data-faq-toggle> + JS для accordion'ов.

Photo Gallery — отдельная страница, премиум

URL	`/foto/`
Layout	Masonry grid (Pinterest-style), 2 col mobile / 4 col desktop
Lightbox	Swipe для переключения, pinch zoom, ESC для закрытия
Lazy loading	Intersection Observer, грузить по мере скролла
Image format	AVIF + WebP fallback, multiple sizes (300w/600w/1200w)
Категории	Tabs: «Занятия», «Бассейн», «Природа», «Хакатон», «Команда»
Performance	Initial load: только превью первого экрана

Программа смены — печать в PDF

Папа распечатает программу — должна красиво лечь на A4. Используем @media print stylesheet. Скрываем nav/footer/CTA, оставляем только программу с большими полями для заметок.

Дата формат: ВСЕГДА «30 мая»

Неправильно	Правильно
30.05.2026	30 мая 2026
May 30	30 мая
30/05	30 мая
2026-05-30	30 мая 2026 (для людей)

В <time datetime="2026-05-30">30 мая 2026</time> — ISO в атрибуте, человеческий формат внутри.

Контакты — порядок везде ОДИНАКОВЫЙ

Phone +7 (495) 128-44-29 — главный канал
Telegram — наш основной мессенджер для общения
WhatsApp — второй мессенджер для тех кто не Telegram
Email hello@codims.ru — для документов

НЕ менять порядок! Telegram всегда перед WhatsApp.

Уведомление о наполненности — уже есть

ShiftOccupancy.astro — «Осталось N мест» — компонент уже работает. Не дублируем функционал.

22. Чего категорически не делать

Hard orange #ec9b44 в новых компонентах. Используй #ec9b44 (soft).

Iridescent / multi-hue gradients. Pink, violet, cyan — не наша палитра. Только soft orange + navy.

Несколько orange CTA на одном экране. Только 1 primary. Остальное — outline/ghost.

Эмодзи в UI. Только Bootstrap Icons.

Жёсткие края фото в hero. Soft mask или vignette.

Pulse-animation на множестве элементов. Только 1, и pacing 4-5с (не 1.5).

Текст < 16px на mobile body. Safari делает auto-zoom, ломает UX.

Inline стили style="color:...". Только Tailwind tokens.

Назидание / экспертный тон. Дарья закрывает кошелёк. Лёгкий тон подруги.

«Перезвоним за 10 минут», «Самые выгодные цены», «Лучшее предложение». Мусорные обещания, у всех такие, не верят.

Слова «дети», «ребёнок» где можно избегать. Заменять на «ваш», «он/она», «подросток» — звучит более adult и менее назидательно.

Слово «бот» в любой форме. 42% россиян боятся, что у них заберут контакты. «Спросите анонимно» вместо «Спросите бота».

Везущие призывы «Звоните!», «Пишите!», «Запишитесь!» Тон Пивоварова: «Решение остаётся за вами. Мы посоветуем, но выбор ваш».

BookingBar как отдельный блок. Бронирование появляется ТОЛЬКО внутри карточки смены, после выбора возраста.

v3 · 2026-05-01 · Soft Orange + Attention-driven · АйДаКемп