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 паттернах и исследовании бизнес-метрик.*