# План: Лендинг ROI24 — Premium Single-Tier Landing

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

---

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

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

---

## ЧАСТЬ 2: ПОДРОБНОЕ ОПИСАНИЕ КАЖДОЙ СЕКЦИИ

### Header (Sticky Navigation)

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

**Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header), russian-ui-patterns (sticky header with contacts)
**Психология:** CTA в правой части по Z-pattern, телефон — сигнал серьёзности для РФ

**Технически:**
- Backdrop blur (glassmorphism)
- Прозрачность 80% наверху → непрозрачный при скролле
- Высота: 72px

---

### Секция 1: Hero — «Боль + Решение»

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

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

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

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

---

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

4 колонки с анимированными счётчиками (count-up при появлении):

```
┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐
│   70%      │  │  3 дня     │  │   83%      │  │   2.3x     │
│ компаний   │  │            │  │ маркетоло- │  │ чаще       │
│ не видят   │→│ без дашборда│→│ лов не     │→│ превышают  │
│ деньги     │  │ тратят     │→│ могут      │  │ revenue    │
│ в кассе    │  │ время      │→│ доказать   │  │ goals      │
│ на износ   │  │ на отчеты  │→│ ROI        │  │              │
└────────────┘  └────────────┘  └────────────┘  └────────────┘
```

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

---

### Секция 3: Проблема — «3 боли собственника»

3 карточки в bento-сетке:

**1. «Данные разбросаны»**
Данные в 1С, Excel, CRM, банках. Каждый раз — ручная сводка. Нет единой картины.

**2. «Непонятно где теряете»**
Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов.

**3. «Отчёты приходят слишком поздно»**
В понедельник смотрит отчёт за прошлую неделю. Когда увидел проблему — деньги уже потеряны.

**Паттерн wiki:**
- card-grid: Bento grid (asymmetric)
- landing-patterns: Problem statement section
- visual-hierarchy: Проблема → Решение → Доказательство

---

### Секция 4: Решение — «Что такое ROI24»

Заголовок: «Один дашборд. Все ключевые цифры.»

Подзаголовок: ROI24 собирает данные из ваших источников и показывает 10 метрик, которые нужно смотреть каждое утро. Без обучения, без Excel.

**3 карточки преимуществ:**

| Преимущество | Описание |
|-------------|----------|
| ⚡ Живые данные | Обновляются автоматически — 1С, CRM, банки, реклама |
| 👁 Видно где теряете | Цветовые индикаторы: зелёный/жёлтый/красный |
| 📱 С телефона | Собственник смотрит дашборд с телефона каждое утро |

**Паттерн wiki:**
- feature-list: 3-column grid with icons
- landing-patterns: Features section
- design-tokens: Semantic color tokens (success/warning/error)

---

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

Не статичный мокап. ECharts график, где можно переключаться между типами бизнеса.

**Тогглы сверху:**
```
[Интернет-магазин]  [Услуги/Агентство]  [Производство]
```

При переключении данные графика меняются в реальном времени — Revenue, конверсия, маржа. Клиент видит, как дашборд выглядит именно под его бизнес.

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

```
┌─────────────────────────────────────────────────────────────┐
│  ROI24 Dashboard                               ● Live       │
├─────────────────────────────────────────────────────────────┤
│  Выручка: 4.2М ↑12%   Маржа: 23%   Касса: 1.8М   Дебиторка│
├─────────────────────────────────────────────────────────────┤
│  [График выручки 12 месяцев с трендом (ECharts)]            │
│  [Воронка: Лиды→Контракт→Оплата]                            │
│  [Топ-5 каналов: SEO 35%  Контекст 28%  Прямой 22%]        │
└─────────────────────────────────────────────────────────────┘
```

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

**Реализация:** ECharts CDN — интерактивные графики. Переключение сегментов — чистый JS. Без React/Vue, чистый DOM.

---

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

Детальный процесс — снимает тревогу клиента: «я буду знать, что происходит»

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

**2. Подключение (1-2 дня)**
Подключаем 1С, CRM, онлайн-банки, рекламные кабинеты. Вы не участвуете.

**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 карточки разных размеров
- card-grid: Feature list
- responsive-patterns: Mobile-first stacking

---

### Секция 8: Сравнение — «ROI24 vs «как сейчас»»

РФ-пользователи «любят сравнивать» (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 ₽»

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

**Список включённого (4 колонки):**

| Что входит | Срок |
|-----------|------|
| Подключение 1С / CRM | 1 день |
| Настройка 10 метрик | 1 день |
| Мокап дашборда под вас | 1 день |
| Обучение команды | 2 часа |
| Поддержка 30 дней | 1 месяц |
| Обновление источников | Включено |

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

**Паттерн wiki:**
- landing-page: Pricing — single tier pattern
- visual-hierarchy: Цена как фокус-точка
- testimonials: Trust badges рядом с ценой

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

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

**Trust badges (рядом с ценой):**
✓ Данные в РФ (серверы Москва)  ✓ 152-ФЗ (персональные данные)
✓ SSL (HTTPS)  ✓ Работаем с НДС  ✓ Договор и акты  ✓ Поддержка по телефону

**Важно:** Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо».

---

### Секция 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 варианты (выбор):**
1. Написать в Telegram (крупная зелёная кнопка)
2. Позвонить (номер телефона)
3. Оставить заявку (форма: Имя, Телефон — 2 поля)

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

---

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

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

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

**Паттерн wiki:**
- russian-ui-patterns: Тяжёлый footer (реквизиты, контакты, соцсети)
- landing-page: RU compliance (skip-link, focus-visible, Telegram, телефон, ИНН/ОГРН, 152-ФЗ, cookie banner, privacy policy)

---

## ЧАСТЬ 3: ВЫБРАННЫЕ ПАТТЕРНЫ WIKI (список)

### Layout (структура)

| Паттерн | Где используется | Зачем |
|---------|-----------------|-------|
| `layout/hero-variations` — Split | Hero секция | Текст слева, дашборд справа |
| `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, Case study | Социальное доказательство |
| `psychology/trust-signals` | Тариф, Footer, Header | SSL, данные, гарантии |
| `psychology/cognitive-fluency` | Hero, Calculator, FAQ | Простота = доверие |

### Motion (анимации)

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

### System (базовая архитектура)

| Паттерн | Где используется | Зачем |
|---------|-----------------|-------|
| `system/design-tokens` | Весь CSS | 50+ CSS custom properties |
| `system/noise-texture` | Фон Hero | Зернистость для премиум-ощущения |
| `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` — Гарантия | Тариф | «Вернём деньги» |

---

## ЧАСТЬ 4: НЕ ИСПОЛЬЗУЕМ (и почему)

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

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

---

## ЧАСТЬ 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-hover: #16a34a
--accent-secondary: #3b82f6  ← Синий (доверие, финансы — wiki RU психология)
--warning: #f59e0b           ← Жёлтый индикатор
--error: #ef4444             ← Красный индикатор
--success: #22c55e           ← Зелёный (результат, экономия)
```

**Цветовая психология (wiki russian-user-psychology):**
- Зелёный = деньги, одобрение (для CTA и результатов)
- Синий = консерватизм, надёжность (для B2B, финансов)
- Жёлтый/Красный = индикаторы (не danger в РФ, а сигналы внимания)

### Шрифты

| Шрифт | Где используется | Зачем |
|-------|-----------------|-------|
| 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 |
| Card padding | 32px | Карточки |

### Анимации

| Элемент | Анимация | Параметр |
|---------|----------|---------|
| Карточки | 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 | Встроенный, критический 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 файл (~3000 строк)
├── STATUS.md           ← Статус разработки
├── PLAN_LANDING_PAGE.md ← Этот файл
└── research/
    └── DASHBOARD_KPI_RESEARCH_2026.md
```

### Производительность

| Метрика | Целевое значение | Как достичь |
|---------|-----------------|-------------|
| 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 (обязательно)

| Требование | Статус | Где |
|-----------|--------|-----|
| 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: ПЕРЕЧЕНЬ ДОПОЛНИТЕЛЬНЫХ ЭЛЕМЕНТОВ (от старых к новым)

### Что было, но улучшено:

| Элемент | 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 + Кейс + Команда + FAQ |
| Сравнение | Нет | ROI24 vs «как сейчас» |
| Калькулятор | Нет | Интерактив — пользователь сам считает потери |
| Гарантия | Нет | 30 дней, возврат денег |
| Мобильный | Адаптив | Mobile-first, Telegram CTA |
| Доступность | Ignored | WCAG AA compliant |
| Скорость | 3-5 сек загрузка | <1.5s LCP |
| RU паттерны | Нет | Telegram, ИНН/ОГРН, 152-ФЗ, калькулятор |
| Аналитика | Нет | Метрика, вебвизор, OG, JSON-LD |

### Целевые метрики лендинга

| Метрика | Цель | Как измерим |
|---------|------|------------|
| Конверсия в заявку | 3-5% | Яндекс.Метрика цели |
| Доходимость до тарифа | >60% | Скролл-глубина 75%+ |
| Среднее время на странице | >2 мин | Метрика |
| CTR кнопок CTA | >4% | Метрика цели |
| LCP | <1.5s | PageSpeed Insights |

### Цель

Landing должен продавать услугу за 100 000 руб. Ключевые факторы доверия:

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** — основной канал коммуникации РФ

---

*План основан на анализе 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-базис.*