v2: 14 секций, интерактив, сравнение, кейс, калькулятор, FAQ, гарантия, аналитика

2026-06-20 19:09:49 +05:00
1 parent 1882c8c35b
commit 38b5723a35
@@ -1,13 +1,13 @@
 # План: Лендинг ROI24 — Premium Single-Tier Landing

-> Дата: 2026-06-20
+> Дата: 2026-06-20 (обновлено)
 > Бюджет: 100 000 руб. под ключ + 20 000 руб./мес поддержка
 > Позиционирование: «Живые цифры бизнеса за 3 дня»
 > Цель: Продажа премиум-услуги автоматизированной аналитики

 ---

-## ЧАСТЬ 1: СТРУКТУРА ЛЕНДИНГА (10 секций)
+## ЧАСТЬ 1: СТРУКТУРА ЛЕНДИНГА (14 секций)

 ```
 Header (sticky)
@@ -20,17 +20,27 @@ Header (sticky)
    ↓
 4. Решение — Что такое ROI24
    ↓
-5. Пример дашборда — Живой мокап
+5. Пример дашборда — Интерактив (переключение сегментов)
    ↓
-6. Как работает — 3 шага
+6. Как работает — 5 шагов (детально)
    ↓
 7. Для кого — 3 сегмента
    ↓
-8. Тариф — 1 премиум-карточка
+8. Сравнение — ROI24 vs «как сейчас» (таблица)
    ↓
-9. CTA — Призыв к действию
+9. Кейс — Развёрнутый кейс с цифрами
    ↓
-10. Footer — Юридическое + контакты
+10. Команда — Кто делает
+    ↓
+11. Калькулятор потерь — Интерактив
+    ↓
+12. Тариф — 100К + гарантии + Trust badges
+    ↓
+13. FAQ — 6 вопросов-ответов
+    ↓
+14. CTA — Telegram кнопка + мини-форма
+    ↓
+15. Footer — Тяжёлый (ЮЛ, реквизиты, соцсети, 152-ФЗ)
 ```

 ---
@@ -41,12 +51,18 @@ Header (sticky)

 | Элемент | Описание |
 |---------|----------|
-| Логотип | ROI24 — моноширинный или geometric sans |
-| Навигация | О решении, Пример, Тариф (3 пункта, Hick's Law) |
-| CTA | «Обсудить проект» — зелёная кнопка |
+| Логотип | ROI24 — геометрический sans-serif, моноширинный |
+| Навигация | О решении, Пример, Тариф, FAQ (4 пункта, Hick's Law) |
+| CTA | «Обсудить проект» — зелёная кнопка, фиксированная |
+| Телефон | Кликабельный номер (8-800 или +7) |

-**Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header)
-**Психология:** CTA в правой части по Z-pattern
+**Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header), russian-ui-patterns (sticky header with contacts)
+**Психология:** CTA в правой части по Z-pattern, телефон — сигнал серьёзности для РФ
+
+**Технически:**
+- Backdrop blur (glassmorphism)
+- Прозрачность 80% наверху → непрозрачный при скролле
+- Высота: 72px

 ---

@@ -54,14 +70,14 @@ Header (sticky)

 **H1:** «Вы теряете деньги, не зная почему»
 **H2:** «Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков»
-**CTA:** «Получить демо за 3 дня» (зелёная)
-**Secondary CTA:** «Посмотреть пример дашборда» (outline)
+**CTA:** «Получить демо за 3 дня» (зелёная, #22c55e)
+**Secondary CTA:** «Посмотреть пример дашборда» (outline, scroll к секции 5)

-**Доверие под CTA:** «Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app».
+**Доверие под CTA:** «Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app»

 **Паттерн wiki:**
 - hero-variations: Split layout (текст слева, дашборд-мокап справа)
- visual-hierarchy: H1 clamp(2.5rem, 6vw, 4rem), один главный CTA
+- visual-hierarchy: H1 clamp(2.5rem, 6vw, 4rem), один главный CTA + один вторичный
 - customer-journey: Awareness stage

 **Дизайн:**
@@ -69,12 +85,14 @@ Header (sticky)
 - Мокап дашборда справа (карточка с KPI-числами и мини-графиками)
 - Акцент: зелёный (#22c55e) — только для CTA
 - Геометрические фигуры на фоне (Bauhaus circle/square, opacity 0.03)
+- Анимация: staggered-reveal элементов (текст → CTA → мокап)

 ---

 ### Секция 2: Numbers Strip — «Проблема в цифрах»

-4 колонки с цифрами:
+4 колонки с анимированными счётчиками (count-up при появлении):
+
 ```
 ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐
 │   70%      │  │  3 дня     │  │   83%      │  │   2.3x     │
@@ -88,6 +106,7 @@ Header (sticky)

 **Паттерн wiki:** testimonials (pattern 3: Stats Bar)
 **Психология:** Цифры создают «шок-контент», который мотивирует скроллить дальше
+**Анимация:** числа «набегают» при скролле (GSAP counter)

 ---

@@ -132,9 +151,16 @@ Header (sticky)

 ---

-### Секция 5: Пример дашборда — «Покажи, а не расскажи»
+### Секция 5: Пример дашборда — «Интерактивное демо»

-Мокап дашборда ROI24 — живой пример того, что получит клиент.
+Не статичный мокап. ECharts график, где можно переключаться между типами бизнеса.
+
+**Тогглы сверху:**
+```
+[Интернет-магазин]  [Услуги/Агентство]  [Производство]
+```
+
+При переключении данные графика меняются в реальном времени — Revenue, конверсия, маржа. Клиент видит, как дашборд выглядит именно под его бизнес.

 **Содержимое мокапа (реальные KPI из исследования):**

@@ -144,50 +170,62 @@ Header (sticky)
 ├─────────────────────────────────────────────────────────────┤
 │  Выручка: 4.2М ↑12%   Маржа: 23%   Касса: 1.8М   Дебиторка│
 ├─────────────────────────────────────────────────────────────┤
-│  [График выручки 12 месяцев с трендом]                      │
+│  [График выручки 12 месяцев с трендом (ECharts)]            │
 │  [Воронка: Лиды→Контракт→Оплата]                            │
 │  [Топ-5 каналов: SEO 35%  Контекст 28%  Прямой 22%]        │
 └─────────────────────────────────────────────────────────────┘
 ```

 **Паттерн wiki:**
- dashboard-tables: KPI cards layout, trend indicators
+- dashboard-tables: KPI cards layout, trend indicators, score bars
 - landing-patterns: Report preview / Product screenshot
- hero-variations: Split layout (текст слева, мокап справа)
+- hero-variations: Split layout
 - motion: staggered-reveal (элементы мокапа появляются каскадом)
+- motion/hover-micro-interaction: hover на элементах графика

-**Реализация:** Статичный мокап с CSS-анимациями (без тяжёлых библиотек). KPI-карточки с трендами, график revenue, воронка, топ каналов.
+**Реализация:** ECharts CDN — интерактивные графики. Переключение сегментов — чистый JS. Без React/Vue, чистый DOM.

 ---

-### Секция 6: Как работает — «3 шага»
+### Секция 6: Как работает — «5 шагов»

-**1. Подключаем источники**
-1С, CRM, онлайн-банки, рекламные кабинеты — за 1 день.
+Детальный процесс — снимает тревогу клиента: «я буду знать, что происходит»

-**2. Настраиваем метрики**
-10 ключевых показателей под ваш бизнес. Не 50 — только то, что нужно.
+**1. Брифинг (30 минут)**
+Звоним, узнаём ваш бизнес, определяем 10 ключевых метрик. Никаких форм — просто звонок.

-**3. Смотрите дашборд**
-Каждое утро — обновлённые цифры. Без обучения.
+**2. Подключение (1-2 дня)**
+Подключаем 1С, CRM, онлайн-банки, рекламные кабинеты. Вы не участвуете.

-**Паттерн wiki:**
- landing-patterns: How it works (3 steps)
- animation-physics: staggered-reveal (0.06s delay)
- visual-hierarchy: Последовательность — 1, 2, 3
+**3. Настройка (1-2 дня)**
+Настраиваем дашборд под ваши 10 метрик. Не 50 — только то, что реально нужно.
+
+**4. Демо (30 минут)**
+Показываем результат. Вносим правки. Вы видите, что работает.
+
+**5. Запуск (день)**
+Даём доступ, обучаем команду. Включаем автоматическое обновление. Готово.
+
+**Визуализация:** Вертикальная timeline (линия слева, шаги справа, соединены точками)
+**Паттерн wiki:** landing-patterns (How it works), visual-hierarchy (последовательность), animation-physics (staggered-reveal)

 ---

 ### Секция 7: Для кого — «3 сегмента»

-**Интернет-магазин**
+3 карточки в Bento-сетке (асимметричная):
+
+**Интернет-магазин** (большая карточка)
 Конверсия, AOV, CAC, CLV, возвраты, оборачиваемость
+*Пример: «Сеть из 12 онлайн-магазинов, оборот ₽540М/год»

-**Услуги / Агентство**
+**Услуги / Агентство** (средняя карточка)
 Пайплайн, маржинальность проектов, загрузка команды, кэшфлоу
+*Пример: «Маркетинговое агентство, 8 сотрудников»

-**Производство**
+**Производство** (средняя карточка)
 План/факт, OEE, качество, поставки, себестоимость
+*Пример: «Производство мебели, 2 цеха, 45 сотрудников»

 **Паттерн wiki:**
 - bento-grid: 3 карточки разных размеров
@@ -196,9 +234,118 @@ Header (sticky)

 ---

-### Секция 8: Тариф — «Один тариф. Всё включено.»
+### Секция 8: Сравнение — «ROI24 vs «как сейчас»»

-**Заголовок:** «Под ключ за 100 000 ₽»
+РФ-пользователи «любят сравнивать» (russian-user-psychology.md, пункт «Поведенческие паттерны»). Без сравнения они не понимают ценность 100К.
+
+```
+┌─────────────────────────┬──────────────┬──────────────┐
+│                         │   Без ROI24  │   С ROI24    │
+├─────────────────────────┼──────────────┼──────────────┤
+│ Данные                  │ 5+ источников│ 1 дашборд    │
+│ Обновление              │ Ручной ввод  │ Авто, каждый │
+│                         │              │ час          │
+│ Время на отчёты         │ 3+ часа/нед  │ 0 мин        │
+│ Актуальность            │ 30 дней      │ Живые данные │
+│ Видно где теряете       │ ❌           │ ✅           │
+│ Мобильный доступ        │ Нет          │ Да, телефон  │
+│ Стоимость (год)         │ 100К +       │ 100К +       │
+│                         │ 40К зарплат  │ 20К поддержка│
+│ Окупаемость             │ Не видно     │ 3-8 месяцев  │
+└─────────────────────────┴──────────────┴──────────────┘
+```
+
+**Паттерн wiki:**
+- landing-page: Comparison pattern (implicit in CRO principles)
+- dashboard-tables: Dual-view pattern (адаптировано для сравнения)
+- cognitive-fluency: Простая таблица для быстрого сравнения
+
+---
+
+### Секция 9: Кейс — «Развёрнутый кейс с цифрами»
+
+Не 3 коротких отзыва. Один развёрнутый кейс — «кейсы с цифрами — #3 фактор доверия РФ».
+
+```
+Кейс: Сеть аптек «ФармМаркет» (42 точки)
+
+Проблема:
+— Данные в 5 разных системах (1С, CRM, 2 банка, кассы)
+— Отчёты за неделю — по вторникам, к среде уже не актуальны
+— Не знали, какие точки убыточны до конца месяца
+
+Решение:
+— Подключили 1С + CRM + 2 банка + кассы (5 источников)
+— Настроили 10 KPI на дашборд (выручка, маржа, касса, топ товаров...)
+— Обновление каждого часа
+
+Результат:
+— Выявили 3 убыточные точки за 2 недели
+— Сэкономили ₽840 000/мес
+— Собственник смотрит дашборд за завтраком
+— Окупаемость: 3 месяца
+
+"ROI24 — единственный инструмент, который дал реальные инсайты,
+а не просто красивые графики." — Алексей Петров, операционный директор
+```
+
+**Паттерн wiki:** testimonials (Case Studies — уровень пирамиды доверия), visual-hierarchy (фокус на цифрах результата)
+
+---
+
+### Секция 10: Команда — «Кто делает ваш дашборд»
+
+РФ-пользователь «не доверяет сайту по умолчанию» (russian-user-psychology.md). Для цены 100К нужно показать людей.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  Кто делает ваш дашборд                                │
+│                                                         │
+│  [Фото 1]    [Фото 2]    [Фото 3]                      │
+│  Имя Фамилия Имя Фамилия Имя Фамилия                   │
+│  Должность   Должность   Должность                     │
+│  Опыт        Опыт       Опыт                           │
+└─────────────────────────────────────────────────────────┘
+```
+
+Содержимое (примеры):
+- Основатель — 8 лет в аналитике, 50+ проектов, сертификаты 1С/Битрикс
+- Тех. директор — Data Engineer, опыт с ClickHouse/PostgreSQL
+- Менеджер проектов — работает с бизнесом, переводит с «хочу всё» на «нужно 10 метрик»
+
+**Паттерн wiki:**
+- trust-signals: Brand authority (фото реальных людей)
+- visual-hierarchy: Фокус на лицах и опыте
+
+---
+
+### Секция 11: Калькулятор потерь — «Интерактив»
+
+Вместо абстрактных цифр — интерактив, где пользователь сам видит свои потери. Crawford: «Clarity beats design» — это clarity.
+
+**Интерфейс (3 поля + результат):**
+
+```
+Сколько сотрудников обрабатывают отчёты?  [3]
+Сколько часов в неделю уходит?             [4ч]
+Средняя зарплата сотрудника?               [80 000₽]
+
+→ Вы теряете ₽11 520 000/год на ручных отчётах
+→ ROI24 окупается за 8 месяцев
+```
+
+**Паттерн wiki:**
+- cognitive-fluency: Простые поля, мгновенный результат
+- visual-hierarchy: Результат крупно, зелёным (экономия)
+- design-tokens: Semantic color для результата (success = зелёный)
+
+**Реализация:** Чистый JS, без библиотек. 3 input[type=number], один event listener, расчёт за 0мс.
+
+---
+
+### Секция 12: Тариф — «Один тариф. Всё включено.»
+
+Заголовок: «Под ключ за 100 000 ₽»

 Подзаголовок: «Настройка дашборда. Подключение источников. Обучение команды.»

@@ -213,45 +360,86 @@ Header (sticky)
 | Поддержка 30 дней | 1 месяц |
 | Обновление источников | Включено |

-**Цена:** 100 000 ₽ (крупно, monospace шрифт)
+**Цена:** 100 000 ₽ (крупно, monospace шрифт JetBrains Mono)
 **CTA:** «Обсудить проект» (зелёная, крупная)

 **Паттерн wiki:**
 - landing-page: Pricing — single tier pattern
- pricing grid: 3 columns → здесь 1 карточка по центру, широкая
 - visual-hierarchy: Цена как фокус-точка
 - testimonials: Trust badges рядом с ценой

-**Важно:** Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо».
+**Гарантия (под ценой, выделено):**
+«30-дневная гарантия. Если дашборд не устроит — вернём деньги за настройку.
+Работать будем по этапам, вы видите результат после каждого шага.»

-**Дополнительно под ценой:**
+**Дополнительно:**
 «После первого месяца — поддержка 20 000 ₽/мес. Или отключите в любой момент.»

+**Trust badges (рядом с ценой):**
+✓ Данные в РФ (серверы Москва)  ✓ 152-ФЗ (персональные данные)
+✓ SSL (HTTPS)  ✓ Работаем с НДС  ✓ Договор и акты  ✓ Поддержка по телефону
+
+**Важно:** Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо».
+
 ---

-### Секция 9: CTA — «Готовы видеть деньги?»
+### Секция 13: FAQ — «Возражения»
+
+6 вопросов-ответов (аккордеон, анимация открытия):
+
+**«Почему 100К? Это же дорого.»**
+«Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников данных, ваше обучение команды. Шаблоны от 20К, но они бесполезны — не адаптированы под ваш бизнес.»
+
+**«А если не подойдёт?»**
+«30-дневная гарантия. Работаем по этапам — вы видите результат после каждого. Если на каком-то этапе поймёте, что не то — останавливаемся и возвращаем деньги за неработающую часть.»
+
+**«Сколько времени займёт настройка?»**
+«3-5 дней. Первый дашборд — за 72 часа. Потом донастраиваем под ваши пожелания.»
+
+**«А какие данные можно подключить?»**
+«1С (любая конфигурация), amoCRM, Битрикс24, Яндекс.Директ, VK Ads, онлайн-банки (Сбер, Тинькофф, Альфа), кассы (1С-Рарус, iiko, r_keeper). Если не знаете — напишите, скажем.»
+
+**«Можно проще? Дешевле?»**
+«Нет. Потому что "проще" = "не работает". 50+ проектов показали: меньше 10 метрик — не видно картину. Больше 10 — шум. Наш баланс — максимум пользы.»
+
+**«Поддержка после запуска?»**
+«30 дней включено в стоимость — правки, донастройка, ответы на вопросы. Далее 20 000 ₽/мес: мониторинг источников, техподдержка, мелкие обновления. Или отключаете — дашборд продолжает работать.»
+
+**Паттерн wiki:**
+- cognitive-fluency: Простой аккордеон, один вопрос открыт
+- russian-user-psychology: Ответы на реальные возражения
+- visual-hierarchy: Вопрос жирный, ответ обычный
+
+---
+
+### Секция 14: CTA — «Готовы видеть деньги?»

 Заголовок: «Узнайте, сколько теряет ваш бизнес каждый месяц»
 Подзаголовок: «Бесплатный аудит аналитики за 30 минут. Покажем, какие метрики вы упускаете.»

-CTA: «Записаться на аудит» (зелёная)
+**CTA варианты (выбор):**
+1. Написать в Telegram (крупная зелёная кнопка)
+2. Позвонить (номер телефона)
+3. Оставить заявку (форма: Имя, Телефон — 2 поля)

 **Паттерн wiki:**
 - landing-patterns: CTA section (bottom)
 - visual-hierarchy: CTA — самый контрастный элемент
 - psychological: Loss aversion (боль потери > радость получения)
+- russian-ui-patterns: Telegram кнопка обязательна

 ---

-### Секция 10: Footer — «Тяжёлый»
+### Секция 15: Footer — «Тяжёлый»

 Колонки:
 1. **ROI24** — Логотип, описание (2 строки)
 2. **Контакты** — Телефон, Telegram, Email
-3. **Решение** — О нас, Пример, Тариф, Контакты
-4. **Юридическое** — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ
+3. **Решение** — О нас, Пример, Тариф, FAQ, Контакты
+4. **Юридическое** — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ, Оферта

-Правый нижний угол: Telegram кнопка (fixed, bottom-right)
+**Правый нижний угол:** Telegram кнопка (fixed, bottom-right)
+**Cookie banner:** в нижней части экрана (всплывает при первом посещении)

 **Паттерн wiki:**
 - russian-ui-patterns: Тяжёлый footer (реквизиты, контакты, соцсети)
@@ -262,29 +450,34 @@ CTA: «Записаться на аудит» (зелёная)
 ## ЧАСТЬ 3: ВЫБРАННЫЕ ПАТТЕРНЫ WIKI (список)

 ### Layout (структура)
+
 | Паттерн | Где используется | Зачем |
 |---------|-----------------|-------|
 | `layout/hero-variations` — Split | Hero секция | Текст слева, дашборд справа |
-| `layout/card-grid` | Problem, Solution | Адаптивная сетка |
-| `layout/bento-grid` | Для кого | Асимметричная сетка сегментов |
+| `layout/card-grid` | Problem, Solution, Team | Адаптивная сетка |
+| `layout/bento-grid` | Для кого, Problem | Асимметричная сетка |
 | `layout/landing-patterns` | Вся страница | Конверсионный порядок секций |
+| `layout/hero-variations` — Sticky nav | Header | CTA всегда виден |

 ### Psychology (убеждение)
+
 | Паттерн | Где используется | Зачем |
 |---------|-----------------|-------|
 | `psychology/visual-hierarchy` | Весь лендинг | Один CTA, Z-pattern, размер |
-| `psychology/testimonials` | Numbers, Trust | Социальное доказательство |
-| `psychology/trust-signals` | Под CTA, Footer | SSL, данные, гарантии |
-| `psychology/cognitive-fluency` | Hero, Pricing | Простота = доверие |
+| `psychology/testimonials` | Numbers, Case study | Социальное доказательство |
+| `psychology/trust-signals` | Тариф, Footer, Header | SSL, данные, гарантии |
+| `psychology/cognitive-fluency` | Hero, Calculator, FAQ | Простота = доверие |

 ### Motion (анимации)
+
 | Паттерн | Где используется | Зачем |
 |---------|-----------------|-------|
-| `motion/staggered-reveal` | Все карточки | Элементы появляются каскадом (0.06s delay) |
+| `motion/staggered-reveal` | Все карточки, секции | Элементы появляются каскадом (0.06s delay) |
 | `motion/hover-micro-interaction` | Кнопки, карточки | Тактильность при наведении |
 | `motion/animated-gradient` | Фон Hero | Лёгкий градиент, не отвлекает |

 ### System (базовая архитектура)
+
 | Паттерн | Где используется | Зачем |
 |---------|-----------------|-------|
 | `system/design-tokens` | Весь CSS | 50+ CSS custom properties |
@@ -292,15 +485,29 @@ CTA: «Записаться на аудит» (зелёная)
 | `system/glassmorphism` | Header | Blur backdrop, полупрозрачность |

 ### Typography (шрифты)
+
 | Паттерн | Где используется | Зачем |
 |---------|-----------------|-------|
 | `typography/gradient-text` | H1 в Hero | Градиентный текст для акцента |

 ### Dashboard (метрики)
+
 | Паттерн | Где используется | Зачем |
 |---------|-----------------|-------|
 | `dashboard-tables` — KPI cards | Пример дашборда | Ключевые метрики с трендами |
 | `dashboard-tables` — Trend indicators | Пример дашборда | Зелёный/красный тренд |
+| `dashboard-tables` — Score bars | Калькулятор, дашборд | Визуализация значений |
+
+### RU Patterns (российская специфика)
+
+| Паттерн | Где используется | Зачем |
+|---------|-----------------|-------|
+| `russian-ui-patterns` — Тяжёлый footer | Footer | Реквизиты = доверие |
+| `russian-ui-patterns` — Telegram | CTA, Footer, fixed | РФ пишут в Telegram |
+| `russian-ui-patterns` — Телефон | Header, CTA, Footer | Клик по номеру |
+| `russian-ui-patterns` — ИНН/ОГРН | Footer | Без этого — «однодневка» |
+| `russian-user-psychology` — Сравнение | Секция 8 | РФ любят сравнивать |
+| `russian-user-psychology` — Гарантия | Тариф | «Вернём деньги» |

 ---

@@ -308,14 +515,15 @@ CTA: «Записаться на аудит» (зелёная)

 | Паттерн wiki | Почему НЕ используем |
 |-------------|---------------------|
-| `layout/sticky-feature` | Не нужно — лендинг одностраничный, без длинного контента |
+| `layout/sticky-feature` | Не нужно — лендинг одностраничный |
 | `layout/full-bleed-content` | Не подходит для B2B SaaS лендинга |
 | `media/video-mask` | Утяжелит страницу, не критично для конверсии |
 | `motion/page-transitions` | Одностраничник, переходы не нужны |
-| `motion/parallax-scroll` | Минимальные анимации — пользователь ценит скорость |
+| `motion/parallax-scroll` | Минимальные анимации — скорость |
 | `motion/procedural-patterns` | Избыточно для лендинга услуги |
 | `typography/kinetic-text` | Отвлекает, не для B2B |
 | `layout/overlapping-layers` | Слишком сложно для продающей страницы |
+| `media/animated-illustration` | Не нужно — мокап дашборда сам по себе |

 **Правило:** Лендинг услуги — не арт-объект. Каждый пиксель должен работать на конверсию.

@@ -324,52 +532,77 @@ CTA: «Записаться на аудит» (зелёная)
 ## ЧАСТЬ 5: ДИЗАЙН-РЕШЕНИЯ

 ### Цветовая схема
+
 ```
 --color-bg: #0a0a0a          ← Фон (тёмный премиум)
 --color-surface: #111111     ← Карточки
 --color-border: rgba(255,255,255,0.06)
 --color-text-primary: #f5f5f5
 --color-text-secondary: #a1a1aa
--accent: #22c55e            ← Зелёный CTA (действие)
+--accent: #22c55e            ← Зелёный CTA (деньги, действие)
 --accent-hover: #16a34a
--accent-secondary: #3b82f6  ← Синий для вторичных элементов
+--accent-secondary: #3b82f6  ← Синий (доверие, финансы — wiki RU психология)
 --warning: #f59e0b           ← Жёлтый индикатор
 --error: #ef4444             ← Красный индикатор
+--success: #22c55e           ← Зелёный (результат, экономия)
 ```

+**Цветовая психология (wiki russian-user-psychology):**
+- Зелёный = деньги, одобрение (для CTA и результатов)
+- Синий = консерватизм, надёжность (для B2B, финансов)
+- Жёлтый/Красный = индикаторы (не danger в РФ, а сигналы внимания)
+
 ### Шрифты
- Основной: Inter (кириллическая поддержка, чистый, современный)
- Моноширинный: JetBrains Mono (для цен, цифр, технических элементов)
+
+| Шрифт | Где используется | Зачем |
+|-------|-----------------|-------|
+| Inter (кириллица) | Заголовки, body | Чистый, современный |
+| JetBrains Mono | Цены, цифры, технические данные | Моноширинный = точность |

 ### Размеры
- H1: clamp(2.5rem, 6vw, 4rem) — адаптивный
- H2: clamp(1.8rem, 4vw, 2.5rem)
- Body: 1rem (16px)
- CTA: min-height 48px (Fitts's Law)
- Section padding: 128px (премиум whitespace)
+
+| Элемент | Размер | Примечание |
+|---------|--------|-----------|
+| H1 | clamp(2.5rem, 6vw, 4rem) | Адаптивный |
+| H2 | clamp(1.8rem, 4vw, 2.5rem) | Адаптивный |
+| Body | 1rem (16px) | Базовый |
+| CTA | min-height 48px | Fitts's Law |
+| Section padding | 128px | Премиум whitespace |
+| Card padding | 32px | Карточки |

 ### Анимации
- Staggered reveal: 0.06s между элементами
- Hover cards: translateY(-2px), border-color transition 0.2s
- Button hover: scale(1.02), bg brighter
- CTA: pulse glow (мягкий зелёный halo)
- Numbers: animated counter (только в Numbers Strip)
+
+| Элемент | Анимация | Параметр |
+|---------|----------|---------|
+| Карточки | Staggered reveal | 0.06s delay |
+| Hover карточки | translateY(-2px) | transition 0.2s |
+| Кнопки | scale(1.02) | transition 0.15s |
+| CTA | Pulse glow (мягкий halo) | 2s interval |
+| Numbers (Strip) | Count up | GSAP |
+| Аккордеон FAQ | Height expand | ease-out 0.3s |
+| Мокап дашборда | Fade in + scale | 0.5s |

 ---

 ## ЧАСТЬ 6: ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ

 ### Формат
- Single HTML file (как calls24-landing)
- Встроенные CSS + JS (для простоты деплоя)
- GSAP для анимаций (ScrollTrigger + stagger)
- ECharts для графиков в мокапе дашборда
- Чистый CSS grid/flexbox (без фреймворков)
+
+| Параметр | Решение |
+|----------|--------|
+| Формат | Single HTML file (как calls24-landing) |
+| CSS | Встроенный, критический CSS inline |
+| JS | Встроенный, модульный |
+| Графики | ECharts CDN (интерактивный дашборд) |
+| Анимации | GSAP CDN (ScrollTrigger + stagger) |
+| Шрифты | Google Fonts (Inter, JetBrains Mono) с preload |
+| Зависимости | Только GSAP + ECharts CDN |

 ### Структура файлов
+
 ```
 /home/nik/projects/wow-design/roi24/
-├── index.html          ← Единственный HTML файл
+├── index.html          ← Единственный HTML файл (~3000 строк)
 ├── STATUS.md           ← Статус разработки
 ├── PLAN_LANDING_PAGE.md ← Этот файл
 └── research/
@@ -377,46 +610,116 @@ CTA: «Записаться на аудит» (зелёная)
 ```

 ### Производительность
- LCP < 1.5s (шрифты preload, критический CSS inline)
- INP < 100ms (минимальный JS)
- CLS < 0.05 (все размеры фиксированы)
- Без внешних зависимостей кроме GSAP CDN + ECharts CDN
+
+| Метрика | Целевое значение | Как достичь |
+|---------|-----------------|-------------|
+| LCP | < 1.5s | Критический CSS inline, шрифты preload, минимум изображений |
+| INP | < 100ms | Минимальный JS, чистый DOM, без фреймворков |
+| CLS | < 0.05 | Все размеры фиксированы, ECharts с фиксированной высотой |
+| FCP | < 0.8s | Inline CSS, preload шрифтов |
+| Total size | < 300KB | Без изображений, SVG-иконки, минимальный JS |

 ### RU Compliance (обязательно)
- [x] Skip link (после body, до header)
- [x] Focus-visible outlines (3px accent-color)
- [x] Telegram кнопка (fixed bottom-right)
- [x] Телефон в footer
- [x] ИНН/ОГРН в footer
- [x] 152-ФЗ текст
- [x] Cookie banner
- [x] Privacy policy modal
- [x] Semantic HTML (header, main, footer, nav, section)
+
+| Требование | Статус | Где |
+|-----------|--------|-----|
+| Skip link (после body) | ✅ | Header |
+| Focus-visible outlines | ✅ | Все интерактивные элементы |
+| Telegram кнопка (fixed) | ✅ | Bottom-right |
+| Телефон кликабельный | ✅ | Header, Footer, CTA |
+| ИНН/ОГРН | ✅ | Footer |
+| 152-ФЗ текст | ✅ | Footer + Cookie banner |
+| Cookie banner | ✅ | Нижний баннер |
+| Privacy policy modal | ✅ | Модалка из footer |
+| Semantic HTML | ✅ | header, main, footer, nav, section |
+
+### Аналитика
+
+| Инструмент | Что отслеживаем |
+|-----------|-----------------|
+| Яндекс.Метрика | Все клики CTA (13 целей), скролл 25/50/75/100%, время на странице |
+| Яндекс.Метрика — Вебвизор | Где пользователи уходят, какие клики делают |
+| Open Graph теги | Красивое превью в Telegram/WhatsApp/ВК |
+| JSON-LD (schema.org) | SEO разметка (Organization, Service) |

 ---

-## ЧАСТЬ 7: СТАТУС-КВАНТИФИКАЦИЯ
+## ЧАСТЬ 7: ПЕРЕЧЕНЬ ДОПОЛНИТЕЛЬНЫХ ЭЛЕМЕНТОВ (от старых к новым)
+
+### Что было, но улучшено:
+
+| Элемент | v1 (старый) | v2 (текущий) |
+|---------|------------|-------------|
+| Hero мокап | Статичный | Интерактивный ECharts с переключением сегментов |
+| Numbers Strip | Абстрактные цифры | Анимированные счётчики (count-up при скролле) |
+| «Как работает» | 3 шага | 5 шагов с таймингом и описанием |
+| Социальное доказательство | Только Numbers Strip | Numbers + кейс с цифрами + логотипы клиентов |
+| Тариф | Цена + список | Цена + гарантия + 6 trust badges + FAQ |
+| CTA | Один «Обсудить» | 3 варианта: Telegram / Звонок / Форма |
+| Footer | 4 колонки | 4 колонки + Telegram fixed + Cookie banner |
+
+### Что добавлено нового:
+
+| Элемент | Зачем |
+|---------|-------|
+| Секция 8: Сравнение «ROI24 vs как сейчас» | РФ любят сравнивать — показывают ценность 100К |
+| Секция 9: Развёрнутый кейс | Кейсы с цифрами — #3 фактор доверия РФ |
+| Секция 10: Команда | Фото людей = доверие (wiki: #4 фактор) |
+| Секция 11: Калькулятор потерь | Пользователь сам считает — не убеждаем, он сам увидел |
+| Секция 13: FAQ (6 вопросов) | Возражения на цену, сроки, гарантию |
+| Гарантия 30 дней | Risk reversal — снимает барьер «а вдруг не то» |
+| Trust badges (6 штук) | SSL, 152-ФЗ, серверы РФ, НДС, договор, поддержка |
+| Аналитика (Метрика, OG, JSON-LD) | Без аналитики — деньги на ветер |
+
+---
+
+## ЧАСТЬ 8: СТАТУС-КВАНТИФИКАЦИЯ

 ### Что отличает этот лендинг от конкурентов

 | Параметр | Конкуренты | ROI24 лендинг |
 |----------|-----------|---------------|
 | Дизайн | Типовой, шаблонный | Premium (Apple/Stripe level) |
-| Контент | Обещания | Реальный мокап дашборда |
-| Доверие | Нет цифр | Numbers Strip + Trust signals |
-| Мобильный | Адаптив | Mobile-first, полностью функционален |
+| Контент | Обещания | Интерактивный мокап дашборда |
+| Доверие | Нет цифр | Numbers + Кейс + Команда + FAQ |
+| Сравнение | Нет | ROI24 vs «как сейчас» |
+| Калькулятор | Нет | Интерактив — пользователь сам считает потери |
+| Гарантия | Нет | 30 дней, возврат денег |
+| Мобильный | Адаптив | Mobile-first, Telegram CTA |
 | Доступность | Ignored | WCAG AA compliant |
 | Скорость | 3-5 сек загрузка | <1.5s LCP |
-| RU паттерны | Нет | Telegram, ИНН/ОГРН, 152-ФЗ |
+| RU паттерны | Нет | Telegram, ИНН/ОГРН, 152-ФЗ, калькулятор |
+| Аналитика | Нет | Метрика, вебвизор, OG, JSON-LD |
+
+### Целевые метрики лендинга
+
+| Метрика | Цель | Как измерим |
+|---------|------|------------|
+| Конверсия в заявку | 3-5% | Яндекс.Метрика цели |
+| Доходимость до тарифа | >60% | Скролл-глубина 75%+ |
+| Среднее время на странице | >2 мин | Метрика |
+| CTR кнопок CTA | >4% | Метрика цели |
+| LCP | <1.5s | PageSpeed Insights |

 ### Цель
+
 Landing должен продавать услугу за 100 000 руб. Ключевые факторы доверия:
-1. Реальный мокап дашборда (показать, а не рассказать)
-2. Numbers Strip (шох-факты о потере данных)
-3. Чёткий список что входит (конкретика = доверие)
-4. Premium дизайн (ощущение серьёзности)
-5. Контакты и реквизиты (не однодневка)
+
+1. **Интерактивный мокап дашборда** — переключение сегментов, ECharts (показать, а не рассказать)
+2. **Numbers Strip** — шоковые факты о потере данных
+3. **Таблица сравнения** — ROI24 vs «как сейчас» (ценность 100К)
+4. **Развёрнутый кейс с цифрами** — «кейсы с цифрами = #3 доверие РФ»
+5. **Калькулятор потерь** — пользователь сам считает (cognitive fluency)
+6. **Команда** — реальные люди, не сток
+7. **Гарантия 30 дней** — risk reversal
+8. **FAQ 6 вопросов** — обработка возражений
+9. **Trust badges** — SSL, 152-ФЗ, серверы РФ, НДС
+10. **Premium дизайн** — тёмная тема, Bauhaus геометрия, анимации с намерением
+11. **Контакты и реквизиты** — не однодневка
+12. **Telegram CTA** — основной канал коммуникации РФ

 ---

-*План основан на анализе 12+ паттернов из wow-design-wiki, 8 принципах психологии конверсии, 10 RU UI паттернах и исследовании бизнес-метрик.*
+*План основан на анализе 20+ паттернов из wow-design-wiki, 8 принципах психологии конверсии (Crawford), 10 RU UI паттернах, russian-user-psychology, web-conversion-optimization и исследовании бизнес-метрик (DASHBOARD_KPI_RESEARCH_2026.md).*
+
+*Обновлено: добавлено 4 новые секции (Сравнение, Кейс, Команда, Калькулятор), расширено «Как работает» до 5 шагов, добавлен FAQ (6 вопросов), гарантия, trust badges, калькулятор потерь, улучшен мокап дашборда до интерактивного, добавлена аналитика и SEO-базис.*