Add landing page plan with wiki patterns analysis

2026-06-20 18:58:34 +05:00
1 parent 7ce84fc18e
commit 1882c8c35b
@@ -0,0 +1,422 @@
+# План: Лендинг 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 паттернах и исследовании бизнес-метрик.*