---
id: pattern.page.landing
status: stable
version: 1.0.0
owner: AI CJM
evidence: https://aicjm.ru/edu/
---

# Landing page pattern

## Назначение и evidence

Landing ведёт от рабочей перемены к проверяемому следующему шагу.
Production observation: `/edu/` связывает hero, proof, кейсы, пять этапов,
корпоративный контур, outputs, форматы, команду, отзывы, форму и FAQ.

## Композиция

`header → hero → proof strip → problem/cases → method → navy operational → outputs →
formats → experts → reviews → lead flow → FAQ → footer`.
Можно убрать вторичную секцию, но нельзя убирать claim, proof и primary action.
Hero — единая светлая редакционная плоскость, а не legacy split-screen.

## Компоненты

Stable registry IDs: `site-header`, `hero`, `metric`, `card`, `diagram`,
`people`, `testimonial`, `lead-form`, `faq`,
`site-footer`.

## Токены

Exact token IDs: `surface.page`, `surface.subtle`, `text.primary`, `text.secondary`,
`layout.container-max`, `layout.gutter-desktop`, `layout.gutter-tablet`,
`layout.gutter-mobile`, `layout.section-space-min`, `layout.section-space-max`,
`action.primary`, `action.primary-hover`, `action.on-primary`. Navy только через
[`pattern.section.navy-operational`](navy-operational.md).

## Адаптивность и доступность

Проверка 375/768/1024/1440. На mobile DOM-order не меняется, grids становятся
одноколоночными, CTA не уезжает за viewport. Один `h1`, логичные headings,
landmarks, skip link, keyboard/focus-visible, reduced motion и alt/provenance для assets обязательны.

## Контент

Hero: аудитория + изменение в работе + предметная CTA. Каждое сильное
обещание получает ближайшее proof. Форма объясняет, что будет после submit.
Метрики, цитаты и логотипы требуют provenance.

## Разрешено и запрещено

**Разрешено:** крупный тезис на белом, следом метрика/кейс и путь работы.

**Запрещено:** split-screen hero, сплошная navy-страница, карусель без
управления, абстрактный AI-декор вместо proof.

## Acceptance criteria

- claim, proof и primary action присутствуют и связаны;
- использованы только stable registry IDs и semantic tokens;
- пройдены four-viewports, keyboard, WCAG 2.2 AA и content-evidence checks;
- compliance report содержит patterns/components/sources и нуль молчаливых exceptions.

## V2 exact composition

Pattern ID: `pattern.page.landing`. Complete visual reference:
`/brandbook/web/examples/landing/`.

Required sequence:

1. `section.hero.editorial`
2. `section.proof.strip`
3. `section.task.framing`
4. `section.case.showcase`
5. `section.method.process`
6. `section.outputs.grid`
7. `section.programs.formats`
8. `section.people.experts`
9. `section.disclosure.faq`
10. `section.lead.form`

Shared shell: exactly one stable `site-header` and one stable `site-footer`.
Heading: one H1; accent may wrap one semantic phrase in
`aicjm-headline__accent`. Every following section owns one H2.

## V2 responsive contract

Desktop preserves the declared grid and evidence adjacency. Mobile uses one
semantic reading column, preserves every required section and action, and
permits local horizontal scrolling only for explicit filter/navigation rails.
Page-level horizontal overflow is prohibited.

## V2 state and content contract

Filters expose selected and result status. Forms expose validation, loading,
success and error through the shared lead flow. Empty states explain the query
and a recovery action. Every metric, logo, portrait, case and quotation keeps
its source. Placeholder claims remain visibly `[уточнить]` and never ship as proof.

## V2 acceptance

- one H1, valid H2/H3 hierarchy and named landmarks;
- one primary action per semantic stage;
- all components and sections resolve to stable registry IDs;
- 1440, 1024, 768 and 375 px pass without content loss or page overflow;
- keyboard, focus, reduced motion, links, assets and source labels pass QA.