neo/roi24

0 Fork 0

Files

T

neo 1882c8c35b Add landing page plan with wiki patterns analysis

2026-06-20 18:58:34 +05:00

20 KiB

Raw Blame History

План: Лендинг 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: ПОДРОБНОЕ ОПИСАНИЕ КАЖДОЙ СЕКЦИИ

Элемент	Описание
Логотип	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 — «Тяжёлый»

Колонки:

ROI24 — Логотип, описание (2 строки)
Контакты — Телефон, Telegram, Email
Решение — О нас, Пример, Тариф, Контакты
Юридическое — ИНН/ОГРН, Политика конфиденциальности, 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 (обязательно)

Skip link (после body, до header)
Focus-visible outlines (3px accent-color)
Telegram кнопка (fixed bottom-right)
Телефон в footer
ИНН/ОГРН в footer
152-ФЗ текст
Cookie banner
Privacy policy modal
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 руб. Ключевые факторы доверия:

Реальный мокап дашборда (показать, а не рассказать)
Numbers Strip (шох-факты о потере данных)
Чёткий список что входит (конкретика = доверие)
Premium дизайн (ощущение серьёзности)
Контакты и реквизиты (не однодневка)

План основан на анализе 12+ паттернов из wow-design-wiki, 8 принципах психологии конверсии, 10 RU UI паттернах и исследовании бизнес-метрик.

20 KiB Raw Blame History Unescape Escape

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

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

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

Header (Sticky Navigation)

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

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

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

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

Секция 5: Пример дашборда — «Покажи, а не расскажи»

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

Секция 7: Для кого — «3 сегмента»

Секция 8: Тариф — «Один тариф. Всё включено.»

Секция 9: CTA — «Готовы видеть деньги?»

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

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

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

Psychology (убеждение)

Motion (анимации)

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

Typography (шрифты)

Dashboard (метрики)

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

ЧАСТЬ 5: ДИЗАЙН-РЕШЕНИЯ

Цветовая схема

Шрифты

Размеры

Анимации

ЧАСТЬ 6: ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ

Формат

Структура файлов

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

RU Compliance (обязательно)

ЧАСТЬ 7: СТАТУС-КВАНТИФИКАЦИЯ

Что отличает этот лендинг от конкурентов

Цель

20 KiB

Raw Blame History