neo/roi24
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neo committed 2026-06-20 19:09:49 +05:00
1 parent 1882c8c35b
commit 38b5723a35
1 file changed
+404 -101
Download Patch File Download Diff File Expand all files Collapse all files
PLAN_LANDING_PAGE.md
+404 -101
View File
@@ -1,13 +1,13 @@
# План: Лендинг ROI24 — Premium Single-Tier Landing # План: Лендинг ROI24 — Premium Single-Tier Landing
> Дата: 2026-06-20 > Дата: 2026-06-20 (обновлено)
> Бюджет: 100 000 руб. под ключ + 20 000 руб./мес поддержка > Бюджет: 100 000 руб. под ключ + 20 000 руб./мес поддержка
> Позиционирование: «Живые цифры бизнеса за 3 дня» > Позиционирование: «Живые цифры бизнеса за 3 дня»
> Цель: Продажа премиум-услуги автоматизированной аналитики > Цель: Продажа премиум-услуги автоматизированной аналитики
--- ---
## ЧАСТЬ 1: СТРУКТУРА ЛЕНДИНГА (10 секций) ## ЧАСТЬ 1: СТРУКТУРА ЛЕНДИНГА (14 секций)
``` ```
Header (sticky) Header (sticky)
@@ -20,17 +20,27 @@ Header (sticky)
↓ ↓
4. Решение — Что такое ROI24 4. Решение — Что такое ROI24
↓ ↓
5. Пример дашборда — Живой мокап 5. Пример дашборда — Интерактив (переключение сегментов)
↓ ↓
6. Как работает — 3 шага 6. Как работает — 5 шагов (детально)
↓ ↓
7. Для кого — 3 сегмента 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 | | Логотип | ROI24 — геометрический sans-serif, моноширинный |
| Навигация | О решении, Пример, Тариф (3 пункта, Hick's Law) | | Навигация | О решении, Пример, Тариф, FAQ (4 пункта, Hick's Law) |
| CTA | «Обсудить проект» — зелёная кнопка | | CTA | «Обсудить проект» — зелёная кнопка, фиксированная |
| Телефон | Кликабельный номер (8-800 или +7) |
**Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header) **Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header), russian-ui-patterns (sticky header with contacts)
**Психология:** CTA в правой части по Z-pattern **Психология:** CTA в правой части по Z-pattern, телефон — сигнал серьёзности для РФ
**Технически:**
- Backdrop blur (glassmorphism)
- Прозрачность 80% наверху → непрозрачный при скролле
- Высота: 72px
--- ---
@@ -54,14 +70,14 @@ Header (sticky)
**H1:** «Вы теряете деньги, не зная почему» **H1:** «Вы теряете деньги, не зная почему»
**H2:** «Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков» **H2:** «Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков»
**CTA:** «Получить демо за 3 дня» (зелёная) **CTA:** «Получить демо за 3 дня» (зелёная, #22c55e)
**Secondary CTA:** «Посмотреть пример дашборда» (outline) **Secondary CTA:** «Посмотреть пример дашборда» (outline, scroll к секции 5)
**Доверие под CTA:** «Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app». **Доверие под CTA:** «Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app»
**Паттерн wiki:** **Паттерн wiki:**
- hero-variations: Split layout (текст слева, дашборд-мокап справа) - 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 - customer-journey: Awareness stage
**Дизайн:** **Дизайн:**
@@ -69,12 +85,14 @@ Header (sticky)
- Мокап дашборда справа (карточка с KPI-числами и мини-графиками) - Мокап дашборда справа (карточка с KPI-числами и мини-графиками)
- Акцент: зелёный (#22c55e) — только для CTA - Акцент: зелёный (#22c55e) — только для CTA
- Геометрические фигуры на фоне (Bauhaus circle/square, opacity 0.03) - Геометрические фигуры на фоне (Bauhaus circle/square, opacity 0.03)
- Анимация: staggered-reveal элементов (текст → CTA → мокап)
--- ---
### Секция 2: Numbers Strip — «Проблема в цифрах» ### Секция 2: Numbers Strip — «Проблема в цифрах»
4 колонки с цифрами: 4 колонки с анимированными счётчиками (count-up при появлении):
``` ```
┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐
│ 70% │ │ 3 дня │ │ 83% │ │ 2.3x │ │ 70% │ │ 3 дня │ │ 83% │ │ 2.3x │
@@ -88,6 +106,7 @@ Header (sticky)
**Паттерн wiki:** testimonials (pattern 3: Stats Bar) **Паттерн wiki:** testimonials (pattern 3: Stats Bar)
**Психология:** Цифры создают «шок-контент», который мотивирует скроллить дальше **Психология:** Цифры создают «шок-контент», который мотивирует скроллить дальше
**Анимация:** числа «набегают» при скролле (GSAP counter)
--- ---
@@ -132,9 +151,16 @@ Header (sticky)
--- ---
### Секция 5: Пример дашборда — «Покажи, а не расскажи» ### Секция 5: Пример дашборда — «Интерактивное демо»
Мокап дашборда ROI24 — живой пример того, что получит клиент. Не статичный мокап. ECharts график, где можно переключаться между типами бизнеса.
**Тогглы сверху:**
```
[Интернет-магазин] [Услуги/Агентство] [Производство]
```
При переключении данные графика меняются в реальном времени — Revenue, конверсия, маржа. Клиент видит, как дашборд выглядит именно под его бизнес.
**Содержимое мокапа (реальные KPI из исследования):** **Содержимое мокапа (реальные KPI из исследования):**
@@ -144,50 +170,62 @@ Header (sticky)
├─────────────────────────────────────────────────────────────┤ ├─────────────────────────────────────────────────────────────┤
│ Выручка: 4.2М ↑12% Маржа: 23% Касса: 1.8М Дебиторка│ │ Выручка: 4.2М ↑12% Маржа: 23% Касса: 1.8М Дебиторка│
├─────────────────────────────────────────────────────────────┤ ├─────────────────────────────────────────────────────────────┤
│ [График выручки 12 месяцев с трендом] │ │ [График выручки 12 месяцев с трендом (ECharts)] │
│ [Воронка: Лиды→Контракт→Оплата] │ │ [Воронка: Лиды→Контракт→Оплата] │
│ [Топ-5 каналов: SEO 35% Контекст 28% Прямой 22%] │ │ [Топ-5 каналов: SEO 35% Контекст 28% Прямой 22%] │
└─────────────────────────────────────────────────────────────┘ └─────────────────────────────────────────────────────────────┘
``` ```
**Паттерн wiki:** **Паттерн wiki:**
- dashboard-tables: KPI cards layout, trend indicators - dashboard-tables: KPI cards layout, trend indicators, score bars
- landing-patterns: Report preview / Product screenshot - landing-patterns: Report preview / Product screenshot
- hero-variations: Split layout (текст слева, мокап справа) - hero-variations: Split layout
- motion: staggered-reveal (элементы мокапа появляются каскадом) - 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. Настраиваем метрики** **1. Брифинг (30 минут)**
10 ключевых показателей под ваш бизнес. Не 50 — только то, что нужно. Звоним, узнаём ваш бизнес, определяем 10 ключевых метрик. Никаких форм — просто звонок.
**3. Смотрите дашборд** **2. Подключение (1-2 дня)**
Каждое утро — обновлённые цифры. Без обучения. Подключаем 1С, CRM, онлайн-банки, рекламные кабинеты. Вы не участвуете.
**Паттерн wiki:** **3. Настройка (1-2 дня)**
- landing-patterns: How it works (3 steps) Настраиваем дашборд под ваши 10 метрик. Не 50 — только то, что реально нужно.
- animation-physics: staggered-reveal (0.06s delay)
- visual-hierarchy: Последовательность — 1, 2, 3 **4. Демо (30 минут)**
Показываем результат. Вносим правки. Вы видите, что работает.
**5. Запуск (день)**
Даём доступ, обучаем команду. Включаем автоматическое обновление. Готово.
**Визуализация:** Вертикальная timeline (линия слева, шаги справа, соединены точками)
**Паттерн wiki:** landing-patterns (How it works), visual-hierarchy (последовательность), animation-physics (staggered-reveal)
--- ---
### Секция 7: Для кого — «3 сегмента» ### Секция 7: Для кого — «3 сегмента»
**Интернет-магазин** 3 карточки в Bento-сетке (асимметричная):
**Интернет-магазин** (большая карточка)
Конверсия, AOV, CAC, CLV, возвраты, оборачиваемость Конверсия, AOV, CAC, CLV, возвраты, оборачиваемость
*Пример: «Сеть из 12 онлайн-магазинов, оборот ₽540М/год»
**Услуги / Агентство** **Услуги / Агентство** (средняя карточка)
Пайплайн, маржинальность проектов, загрузка команды, кэшфлоу Пайплайн, маржинальность проектов, загрузка команды, кэшфлоу
*Пример: «Маркетинговое агентство, 8 сотрудников»
**Производство** **Производство** (средняя карточка)
План/факт, OEE, качество, поставки, себестоимость План/факт, OEE, качество, поставки, себестоимость
*Пример: «Производство мебели, 2 цеха, 45 сотрудников»
**Паттерн wiki:** **Паттерн wiki:**
- bento-grid: 3 карточки разных размеров - 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 месяц | | Поддержка 30 дней | 1 месяц |
| Обновление источников | Включено | | Обновление источников | Включено |
**Цена:** 100 000 ₽ (крупно, monospace шрифт) **Цена:** 100 000 ₽ (крупно, monospace шрифт JetBrains Mono)
**CTA:** «Обсудить проект» (зелёная, крупная) **CTA:** «Обсудить проект» (зелёная, крупная)
**Паттерн wiki:** **Паттерн wiki:**
- landing-page: Pricing — single tier pattern - landing-page: Pricing — single tier pattern
- pricing grid: 3 columns → здесь 1 карточка по центру, широкая
- visual-hierarchy: Цена как фокус-точка - visual-hierarchy: Цена как фокус-точка
- testimonials: Trust badges рядом с ценой - testimonials: Trust badges рядом с ценой
**Важно:** Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо». **Гарантия (под ценой, выделено):**
«30-дневная гарантия. Если дашборд не устроит — вернём деньги за настройку.
Работать будем по этапам, вы видите результат после каждого шага.»
**Дополнительно под ценой:** **Дополнительно:**
«После первого месяца — поддержка 20 000 ₽/мес. Или отключите в любой момент.» «После первого месяца — поддержка 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 минут. Покажем, какие метрики вы упускаете.» Подзаголовок: «Бесплатный аудит аналитики за 30 минут. Покажем, какие метрики вы упускаете.»
CTA: «Записаться на аудит» (зелёная) **CTA варианты (выбор):**
1. Написать в Telegram (крупная зелёная кнопка)
2. Позвонить (номер телефона)
3. Оставить заявку (форма: Имя, Телефон — 2 поля)
**Паттерн wiki:** **Паттерн wiki:**
- landing-patterns: CTA section (bottom) - landing-patterns: CTA section (bottom)
- visual-hierarchy: CTA — самый контрастный элемент - visual-hierarchy: CTA — самый контрастный элемент
- psychological: Loss aversion (боль потери > радость получения) - psychological: Loss aversion (боль потери > радость получения)
- russian-ui-patterns: Telegram кнопка обязательна
--- ---
### Секция 10: Footer — «Тяжёлый» ### Секция 15: Footer — «Тяжёлый»
Колонки: Колонки:
1. **ROI24** — Логотип, описание (2 строки) 1. **ROI24** — Логотип, описание (2 строки)
2. **Контакты** — Телефон, Telegram, Email 2. **Контакты** — Телефон, Telegram, Email
3. **Решение** — О нас, Пример, Тариф, Контакты 3. **Решение** — О нас, Пример, Тариф, FAQ, Контакты
4. **Юридическое** — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ 4. **Юридическое** — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ, Оферта
Правый нижний угол: Telegram кнопка (fixed, bottom-right) **Правый нижний угол:** Telegram кнопка (fixed, bottom-right)
**Cookie banner:** в нижней части экрана (всплывает при первом посещении)
**Паттерн wiki:** **Паттерн wiki:**
- russian-ui-patterns: Тяжёлый footer (реквизиты, контакты, соцсети) - russian-ui-patterns: Тяжёлый footer (реквизиты, контакты, соцсети)
@@ -262,29 +450,34 @@ CTA: «Записаться на аудит» (зелёная)
## ЧАСТЬ 3: ВЫБРАННЫЕ ПАТТЕРНЫ WIKI (список) ## ЧАСТЬ 3: ВЫБРАННЫЕ ПАТТЕРНЫ WIKI (список)
### Layout (структура) ### Layout (структура)
| Паттерн | Где используется | Зачем | | Паттерн | Где используется | Зачем |
|---------|-----------------|-------| |---------|-----------------|-------|
| `layout/hero-variations` — Split | Hero секция | Текст слева, дашборд справа | | `layout/hero-variations` — Split | Hero секция | Текст слева, дашборд справа |
| `layout/card-grid` | Problem, Solution | Адаптивная сетка | | `layout/card-grid` | Problem, Solution, Team | Адаптивная сетка |
| `layout/bento-grid` | Для кого | Асимметричная сетка сегментов | | `layout/bento-grid` | Для кого, Problem | Асимметричная сетка |
| `layout/landing-patterns` | Вся страница | Конверсионный порядок секций | | `layout/landing-patterns` | Вся страница | Конверсионный порядок секций |
| `layout/hero-variations` — Sticky nav | Header | CTA всегда виден |
### Psychology (убеждение) ### Psychology (убеждение)
| Паттерн | Где используется | Зачем | | Паттерн | Где используется | Зачем |
|---------|-----------------|-------| |---------|-----------------|-------|
| `psychology/visual-hierarchy` | Весь лендинг | Один CTA, Z-pattern, размер | | `psychology/visual-hierarchy` | Весь лендинг | Один CTA, Z-pattern, размер |
| `psychology/testimonials` | Numbers, Trust | Социальное доказательство | | `psychology/testimonials` | Numbers, Case study | Социальное доказательство |
| `psychology/trust-signals` | Под CTA, Footer | SSL, данные, гарантии | | `psychology/trust-signals` | Тариф, Footer, Header | SSL, данные, гарантии |
| `psychology/cognitive-fluency` | Hero, Pricing | Простота = доверие | | `psychology/cognitive-fluency` | Hero, Calculator, FAQ | Простота = доверие |
### Motion (анимации) ### Motion (анимации)
| Паттерн | Где используется | Зачем | | Паттерн | Где используется | Зачем |
|---------|-----------------|-------| |---------|-----------------|-------|
| `motion/staggered-reveal` | Все карточки | Элементы появляются каскадом (0.06s delay) | | `motion/staggered-reveal` | Все карточки, секции | Элементы появляются каскадом (0.06s delay) |
| `motion/hover-micro-interaction` | Кнопки, карточки | Тактильность при наведении | | `motion/hover-micro-interaction` | Кнопки, карточки | Тактильность при наведении |
| `motion/animated-gradient` | Фон Hero | Лёгкий градиент, не отвлекает | | `motion/animated-gradient` | Фон Hero | Лёгкий градиент, не отвлекает |
### System (базовая архитектура) ### System (базовая архитектура)
| Паттерн | Где используется | Зачем | | Паттерн | Где используется | Зачем |
|---------|-----------------|-------| |---------|-----------------|-------|
| `system/design-tokens` | Весь CSS | 50+ CSS custom properties | | `system/design-tokens` | Весь CSS | 50+ CSS custom properties |
@@ -292,15 +485,29 @@ CTA: «Записаться на аудит» (зелёная)
| `system/glassmorphism` | Header | Blur backdrop, полупрозрачность | | `system/glassmorphism` | Header | Blur backdrop, полупрозрачность |
### Typography (шрифты) ### Typography (шрифты)
| Паттерн | Где используется | Зачем | | Паттерн | Где используется | Зачем |
|---------|-----------------|-------| |---------|-----------------|-------|
| `typography/gradient-text` | H1 в Hero | Градиентный текст для акцента | | `typography/gradient-text` | H1 в Hero | Градиентный текст для акцента |
### Dashboard (метрики) ### Dashboard (метрики)
| Паттерн | Где используется | Зачем | | Паттерн | Где используется | Зачем |
|---------|-----------------|-------| |---------|-----------------|-------|
| `dashboard-tables` — KPI cards | Пример дашборда | Ключевые метрики с трендами | | `dashboard-tables` — KPI cards | Пример дашборда | Ключевые метрики с трендами |
| `dashboard-tables` — Trend indicators | Пример дашборда | Зелёный/красный тренд | | `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 | Почему НЕ используем | | Паттерн wiki | Почему НЕ используем |
|-------------|---------------------| |-------------|---------------------|
| `layout/sticky-feature` | Не нужно — лендинг одностраничный, без длинного контента | | `layout/sticky-feature` | Не нужно — лендинг одностраничный |
| `layout/full-bleed-content` | Не подходит для B2B SaaS лендинга | | `layout/full-bleed-content` | Не подходит для B2B SaaS лендинга |
| `media/video-mask` | Утяжелит страницу, не критично для конверсии | | `media/video-mask` | Утяжелит страницу, не критично для конверсии |
| `motion/page-transitions` | Одностраничник, переходы не нужны | | `motion/page-transitions` | Одностраничник, переходы не нужны |
| `motion/parallax-scroll` | Минимальные анимации — пользователь ценит скорость | | `motion/parallax-scroll` | Минимальные анимации — скорость |
| `motion/procedural-patterns` | Избыточно для лендинга услуги | | `motion/procedural-patterns` | Избыточно для лендинга услуги |
| `typography/kinetic-text` | Отвлекает, не для B2B | | `typography/kinetic-text` | Отвлекает, не для B2B |
| `layout/overlapping-layers` | Слишком сложно для продающей страницы | | `layout/overlapping-layers` | Слишком сложно для продающей страницы |
| `media/animated-illustration` | Не нужно — мокап дашборда сам по себе |
**Правило:** Лендинг услуги — не арт-объект. Каждый пиксель должен работать на конверсию. **Правило:** Лендинг услуги — не арт-объект. Каждый пиксель должен работать на конверсию.
@@ -324,52 +532,77 @@ CTA: «Записаться на аудит» (зелёная)
## ЧАСТЬ 5: ДИЗАЙН-РЕШЕНИЯ ## ЧАСТЬ 5: ДИЗАЙН-РЕШЕНИЯ
### Цветовая схема ### Цветовая схема
``` ```
--color-bg: #0a0a0a ← Фон (тёмный премиум) --color-bg: #0a0a0a ← Фон (тёмный премиум)
--color-surface: #111111 ← Карточки --color-surface: #111111 ← Карточки
--color-border: rgba(255,255,255,0.06) --color-border: rgba(255,255,255,0.06)
--color-text-primary: #f5f5f5 --color-text-primary: #f5f5f5
--color-text-secondary: #a1a1aa --color-text-secondary: #a1a1aa
--accent: #22c55e ← Зелёный CTA (действие) --accent: #22c55e ← Зелёный CTA (деньги, действие)
--accent-hover: #16a34a --accent-hover: #16a34a
--accent-secondary: #3b82f6 ← Синий для вторичных элементов --accent-secondary: #3b82f6 ← Синий (доверие, финансы — wiki RU психология)
--warning: #f59e0b ← Жёлтый индикатор --warning: #f59e0b ← Жёлтый индикатор
--error: #ef4444 ← Красный индикатор --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) | H1 | clamp(2.5rem, 6vw, 4rem) | Адаптивный |
- Section padding: 128px (премиум whitespace) | 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) | Карточки | Staggered reveal | 0.06s delay |
- Numbers: animated counter (только в Numbers Strip) | 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: ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ ## ЧАСТЬ 6: ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ
### Формат ### Формат
- Single HTML file (как calls24-landing)
- Встроенные CSS + JS (для простоты деплоя) | Параметр | Решение |
- GSAP для анимаций (ScrollTrigger + stagger) |----------|--------|
- ECharts для графиков в мокапе дашборда | Формат | Single HTML file (как calls24-landing) |
- Чистый CSS grid/flexbox (без фреймворков) | 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/ /home/nik/projects/wow-design/roi24/
├── index.html ← Единственный HTML файл ├── index.html ← Единственный HTML файл (~3000 строк)
├── STATUS.md ← Статус разработки ├── STATUS.md ← Статус разработки
├── PLAN_LANDING_PAGE.md ← Этот файл ├── PLAN_LANDING_PAGE.md ← Этот файл
└── research/ └── 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 (обязательно) ### RU Compliance (обязательно)
- [x] Skip link (после body, до header)
- [x] Focus-visible outlines (3px accent-color) | Требование | Статус | Где |
- [x] Telegram кнопка (fixed bottom-right) |-----------|--------|-----|
- [x] Телефон в footer | Skip link (после body) | ✅ | Header |
- [x] ИНН/ОГРН в footer | Focus-visible outlines | ✅ | Все интерактивные элементы |
- [x] 152-ФЗ текст | Telegram кнопка (fixed) | ✅ | Bottom-right |
- [x] Cookie banner | Телефон кликабельный | ✅ | Header, Footer, CTA |
- [x] Privacy policy modal | ИНН/ОГРН | ✅ | Footer |
- [x] Semantic HTML (header, main, footer, nav, section) | 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 лендинг | | Параметр | Конкуренты | ROI24 лендинг |
|----------|-----------|---------------| |----------|-----------|---------------|
| Дизайн | Типовой, шаблонный | Premium (Apple/Stripe level) | | Дизайн | Типовой, шаблонный | Premium (Apple/Stripe level) |
| Контент | Обещания | Реальный мокап дашборда | | Контент | Обещания | Интерактивный мокап дашборда |
| Доверие | Нет цифр | Numbers Strip + Trust signals | | Доверие | Нет цифр | Numbers + Кейс + Команда + FAQ |
| Мобильный | Адаптив | Mobile-first, полностью функционален | | Сравнение | Нет | ROI24 vs «как сейчас» |
| Калькулятор | Нет | Интерактив — пользователь сам считает потери |
| Гарантия | Нет | 30 дней, возврат денег |
| Мобильный | Адаптив | Mobile-first, Telegram CTA |
| Доступность | Ignored | WCAG AA compliant | | Доступность | Ignored | WCAG AA compliant |
| Скорость | 3-5 сек загрузка | <1.5s LCP | | Скорость | 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 руб. Ключевые факторы доверия: Landing должен продавать услугу за 100 000 руб. Ключевые факторы доверия:
1. Реальный мокап дашборда (показать, а не рассказать)
2. Numbers Strip (шох-факты о потере данных) 1. **Интерактивный мокап дашборда** — переключение сегментов, ECharts (показать, а не рассказать)
3. Чёткий список что входит (конкретика = доверие) 2. **Numbers Strip** — шоковые факты о потере данных
4. Premium дизайн (ощущение серьёзности) 3. **Таблица сравнения** — ROI24 vs «как сейчас» (ценность 100К)
5. Контакты и реквизиты (не однодневка) 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-базис.*