423 lines
20 KiB
Markdown
423 lines
20 KiB
Markdown
# План: Лендинг ROI24 — Premium Single-Tier Landing
|
||
|
||
> Дата: 2026-06-20
|
||
> Бюджет: 100 000 руб. под ключ + 20 000 руб./мес поддержка
|
||
> Позиционирование: «Живые цифры бизнеса за 3 дня»
|
||
> Цель: Продажа премиум-услуги автоматизированной аналитики
|
||
|
||
---
|
||
|
||
## ЧАСТЬ 1: СТРУКТУРА ЛЕНДИНГА (10 секций)
|
||
|
||
```
|
||
Header (sticky)
|
||
↓
|
||
1. Hero — Боль + Решение
|
||
↓
|
||
2. Numbers Strip — Проблема в цифрах
|
||
↓
|
||
3. Проблема — 3 боли собственника
|
||
↓
|
||
4. Решение — Что такое ROI24
|
||
↓
|
||
5. Пример дашборда — Живой мокап
|
||
↓
|
||
6. Как работает — 3 шага
|
||
↓
|
||
7. Для кого — 3 сегмента
|
||
↓
|
||
8. Тариф — 1 премиум-карточка
|
||
↓
|
||
9. CTA — Призыв к действию
|
||
↓
|
||
10. Footer — Юридическое + контакты
|
||
```
|
||
|
||
---
|
||
|
||
## ЧАСТЬ 2: ПОДРОБНОЕ ОПИСАНИЕ КАЖДОЙ СЕКЦИИ
|
||
|
||
### Header (Sticky Navigation)
|
||
|
||
| Элемент | Описание |
|
||
|---------|----------|
|
||
| Логотип | ROI24 — моноширинный или geometric sans |
|
||
| Навигация | О решении, Пример, Тариф (3 пункта, Hick's Law) |
|
||
| CTA | «Обсудить проект» — зелёная кнопка |
|
||
|
||
**Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header)
|
||
**Психология:** CTA в правой части по Z-pattern
|
||
|
||
---
|
||
|
||
### Секция 1: Hero — «Боль + Решение»
|
||
|
||
**H1:** «Вы теряете деньги, не зная почему»
|
||
**H2:** «Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков»
|
||
**CTA:** «Получить демо за 3 дня» (зелёная)
|
||
**Secondary CTA:** «Посмотреть пример дашборда» (outline)
|
||
|
||
**Доверие под 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)
|
||
|
||
---
|
||
|
||
### Секция 2: Numbers Strip — «Проблема в цифрах»
|
||
|
||
4 колонки с цифрами:
|
||
```
|
||
┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐
|
||
│ 70% │ │ 3 дня │ │ 83% │ │ 2.3x │
|
||
│ компаний │ │ │ │ маркетоло- │ │ чаще │
|
||
│ не видят │→│ без дашборда│→│ лов не │→│ превышают │
|
||
│ деньги │ │ тратят │→│ могут │ │ revenue │
|
||
│ в кассе │ │ время │→│ доказать │ │ goals │
|
||
│ на износ │ │ на отчеты │→│ ROI │ │ │
|
||
└────────────┘ └────────────┘ └────────────┘ └────────────┘
|
||
```
|
||
|
||
**Паттерн wiki:** testimonials (pattern 3: Stats Bar)
|
||
**Психология:** Цифры создают «шок-контент», который мотивирует скроллить дальше
|
||
|
||
---
|
||
|
||
### Секция 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: Пример дашборда — «Покажи, а не расскажи»
|
||
|
||
Мокап дашборда ROI24 — живой пример того, что получит клиент.
|
||
|
||
**Содержимое мокапа (реальные KPI из исследования):**
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ ROI24 Dashboard ● Live │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ Выручка: 4.2М ↑12% Маржа: 23% Касса: 1.8М Дебиторка│
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ [График выручки 12 месяцев с трендом] │
|
||
│ [Воронка: Лиды→Контракт→Оплата] │
|
||
│ [Топ-5 каналов: SEO 35% Контекст 28% Прямой 22%] │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Паттерн wiki:**
|
||
- dashboard-tables: KPI cards layout, trend indicators
|
||
- landing-patterns: Report preview / Product screenshot
|
||
- hero-variations: Split layout (текст слева, мокап справа)
|
||
- motion: staggered-reveal (элементы мокапа появляются каскадом)
|
||
|
||
**Реализация:** Статичный мокап с CSS-анимациями (без тяжёлых библиотек). KPI-карточки с трендами, график revenue, воронка, топ каналов.
|
||
|
||
---
|
||
|
||
### Секция 6: Как работает — «3 шага»
|
||
|
||
**1. Подключаем источники**
|
||
1С, CRM, онлайн-банки, рекламные кабинеты — за 1 день.
|
||
|
||
**2. Настраиваем метрики**
|
||
10 ключевых показателей под ваш бизнес. Не 50 — только то, что нужно.
|
||
|
||
**3. Смотрите дашборд**
|
||
Каждое утро — обновлённые цифры. Без обучения.
|
||
|
||
**Паттерн wiki:**
|
||
- landing-patterns: How it works (3 steps)
|
||
- animation-physics: staggered-reveal (0.06s delay)
|
||
- visual-hierarchy: Последовательность — 1, 2, 3
|
||
|
||
---
|
||
|
||
### Секция 7: Для кого — «3 сегмента»
|
||
|
||
**Интернет-магазин**
|
||
Конверсия, AOV, CAC, CLV, возвраты, оборачиваемость
|
||
|
||
**Услуги / Агентство**
|
||
Пайплайн, маржинальность проектов, загрузка команды, кэшфлоу
|
||
|
||
**Производство**
|
||
План/факт, OEE, качество, поставки, себестоимость
|
||
|
||
**Паттерн wiki:**
|
||
- bento-grid: 3 карточки разных размеров
|
||
- card-grid: Feature list
|
||
- responsive-patterns: Mobile-first stacking
|
||
|
||
---
|
||
|
||
### Секция 8: Тариф — «Один тариф. Всё включено.»
|
||
|
||
**Заголовок:** «Под ключ за 100 000 ₽»
|
||
|
||
Подзаголовок: «Настройка дашборда. Подключение источников. Обучение команды.»
|
||
|
||
**Список включённого (4 колонки):**
|
||
|
||
| Что входит | Срок |
|
||
|-----------|------|
|
||
| Подключение 1С / CRM | 1 день |
|
||
| Настройка 10 метрик | 1 день |
|
||
| Мокап дашборда под вас | 1 день |
|
||
| Обучение команды | 2 часа |
|
||
| Поддержка 30 дней | 1 месяц |
|
||
| Обновление источников | Включено |
|
||
|
||
**Цена:** 100 000 ₽ (крупно, monospace шрифт)
|
||
**CTA:** «Обсудить проект» (зелёная, крупная)
|
||
|
||
**Паттерн wiki:**
|
||
- landing-page: Pricing — single tier pattern
|
||
- pricing grid: 3 columns → здесь 1 карточка по центру, широкая
|
||
- visual-hierarchy: Цена как фокус-точка
|
||
- testimonials: Trust badges рядом с ценой
|
||
|
||
**Важно:** Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо».
|
||
|
||
**Дополнительно под ценой:**
|
||
«После первого месяца — поддержка 20 000 ₽/мес. Или отключите в любой момент.»
|
||
|
||
---
|
||
|
||
### Секция 9: CTA — «Готовы видеть деньги?»
|
||
|
||
Заголовок: «Узнайте, сколько теряет ваш бизнес каждый месяц»
|
||
Подзаголовок: «Бесплатный аудит аналитики за 30 минут. Покажем, какие метрики вы упускаете.»
|
||
|
||
CTA: «Записаться на аудит» (зелёная)
|
||
|
||
**Паттерн wiki:**
|
||
- landing-patterns: CTA section (bottom)
|
||
- visual-hierarchy: CTA — самый контрастный элемент
|
||
- psychological: Loss aversion (боль потери > радость получения)
|
||
|
||
---
|
||
|
||
### Секция 10: Footer — «Тяжёлый»
|
||
|
||
Колонки:
|
||
1. **ROI24** — Логотип, описание (2 строки)
|
||
2. **Контакты** — Телефон, Telegram, Email
|
||
3. **Решение** — О нас, Пример, Тариф, Контакты
|
||
4. **Юридическое** — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ
|
||
|
||
Правый нижний угол: Telegram кнопка (fixed, bottom-right)
|
||
|
||
**Паттерн 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 | Адаптивная сетка |
|
||
| `layout/bento-grid` | Для кого | Асимметричная сетка сегментов |
|
||
| `layout/landing-patterns` | Вся страница | Конверсионный порядок секций |
|
||
|
||
### Psychology (убеждение)
|
||
| Паттерн | Где используется | Зачем |
|
||
|---------|-----------------|-------|
|
||
| `psychology/visual-hierarchy` | Весь лендинг | Один CTA, Z-pattern, размер |
|
||
| `psychology/testimonials` | Numbers, Trust | Социальное доказательство |
|
||
| `psychology/trust-signals` | Под CTA, Footer | SSL, данные, гарантии |
|
||
| `psychology/cognitive-fluency` | Hero, Pricing | Простота = доверие |
|
||
|
||
### 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 | Пример дашборда | Зелёный/красный тренд |
|
||
|
||
---
|
||
|
||
## ЧАСТЬ 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` | Слишком сложно для продающей страницы |
|
||
|
||
**Правило:** Лендинг услуги — не арт-объект. Каждый пиксель должен работать на конверсию.
|
||
|
||
---
|
||
|
||
## ЧАСТЬ 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 ← Синий для вторичных элементов
|
||
--warning: #f59e0b ← Жёлтый индикатор
|
||
--error: #ef4444 ← Красный индикатор
|
||
```
|
||
|
||
### Шрифты
|
||
- Основной: Inter (кириллическая поддержка, чистый, современный)
|
||
- Моноширинный: 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)
|
||
|
||
### Анимации
|
||
- 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)
|
||
|
||
---
|
||
|
||
## ЧАСТЬ 6: ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ
|
||
|
||
### Формат
|
||
- Single HTML file (как calls24-landing)
|
||
- Встроенные CSS + JS (для простоты деплоя)
|
||
- GSAP для анимаций (ScrollTrigger + stagger)
|
||
- ECharts для графиков в мокапе дашборда
|
||
- Чистый CSS grid/flexbox (без фреймворков)
|
||
|
||
### Структура файлов
|
||
```
|
||
/home/nik/projects/wow-design/roi24/
|
||
├── index.html ← Единственный HTML файл
|
||
├── STATUS.md ← Статус разработки
|
||
├── PLAN_LANDING_PAGE.md ← Этот файл
|
||
└── research/
|
||
└── DASHBOARD_KPI_RESEARCH_2026.md
|
||
```
|
||
|
||
### Производительность
|
||
- LCP < 1.5s (шрифты preload, критический CSS inline)
|
||
- INP < 100ms (минимальный JS)
|
||
- CLS < 0.05 (все размеры фиксированы)
|
||
- Без внешних зависимостей кроме GSAP CDN + ECharts CDN
|
||
|
||
### 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)
|
||
|
||
---
|
||
|
||
## ЧАСТЬ 7: СТАТУС-КВАНТИФИКАЦИЯ
|
||
|
||
### Что отличает этот лендинг от конкурентов
|
||
|
||
| Параметр | Конкуренты | ROI24 лендинг |
|
||
|----------|-----------|---------------|
|
||
| Дизайн | Типовой, шаблонный | Premium (Apple/Stripe level) |
|
||
| Контент | Обещания | Реальный мокап дашборда |
|
||
| Доверие | Нет цифр | Numbers Strip + Trust signals |
|
||
| Мобильный | Адаптив | Mobile-first, полностью функционален |
|
||
| Доступность | Ignored | WCAG AA compliant |
|
||
| Скорость | 3-5 сек загрузка | <1.5s LCP |
|
||
| RU паттерны | Нет | Telegram, ИНН/ОГРН, 152-ФЗ |
|
||
|
||
### Цель
|
||
Landing должен продавать услугу за 100 000 руб. Ключевые факторы доверия:
|
||
1. Реальный мокап дашборда (показать, а не рассказать)
|
||
2. Numbers Strip (шох-факты о потере данных)
|
||
3. Чёткий список что входит (конкретика = доверие)
|
||
4. Premium дизайн (ощущение серьёзности)
|
||
5. Контакты и реквизиты (не однодневка)
|
||
|
||
---
|
||
|
||
*План основан на анализе 12+ паттернов из wow-design-wiki, 8 принципах психологии конверсии, 10 RU UI паттернах и исследовании бизнес-метрик.*
|