neo/roi24

0 Fork 0

Files

T

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

2026-06-20 19:09:49 +05:00

40 KiB

Raw Permalink Blame History

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

Дата: 2026-06-20 (обновлено) Бюджет: 100 000 руб. под ключ + 20 000 руб./мес поддержка Позиционирование: «Живые цифры бизнеса за 3 дня» Цель: Продажа премиум-услуги автоматизированной аналитики

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

Header (sticky)
    ↓
1. Hero — Боль + Решение
    ↓
2. Numbers Strip — Проблема в цифрах
    ↓
3. Проблема — 3 боли собственника
    ↓
4. Решение — Что такое ROI24
    ↓
5. Пример дашборда — Интерактив (переключение сегментов)
    ↓
6. Как работает — 5 шагов (детально)
    ↓
7. Для кого — 3 сегмента
    ↓
8. Сравнение — ROI24 vs «как сейчас» (таблица)
    ↓
9. Кейс — Развёрнутый кейс с цифрами
    ↓
10. Команда — Кто делает
    ↓
11. Калькулятор потерь — Интерактив
    ↓
12. Тариф — 100К + гарантии + Trust badges
    ↓
13. FAQ — 6 вопросов-ответов
    ↓
14. CTA — Telegram кнопка + мини-форма
    ↓
15. Footer — Тяжёлый (ЮЛ, реквизиты, соцсети, 152-ФЗ)

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

Элемент	Описание
Логотип	ROI24 — геометрический sans-serif, моноширинный
Навигация	О решении, Пример, Тариф, FAQ (4 пункта, Hick's Law)
CTA	«Обсудить проект» — зелёная кнопка, фиксированная
Телефон	Кликабельный номер (8-800 или +7)

Паттерн wiki: hero-variations (centered nav), landing-patterns (sticky header), russian-ui-patterns (sticky header with contacts) Психология: CTA в правой части по Z-pattern, телефон — сигнал серьёзности для РФ

Технически:

Backdrop blur (glassmorphism)
Прозрачность 80% наверху → непрозрачный при скролле
Высота: 72px

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

H1: «Вы теряете деньги, не зная почему» H2: «Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков» CTA: «Получить демо за 3 дня» (зелёная, #22c55e) Secondary CTA: «Посмотреть пример дашборда» (outline, scroll к секции 5)

Доверие под 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)
Анимация: staggered-reveal элементов (текст → CTA → мокап)

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

4 колонки с анимированными счётчиками (count-up при появлении):

┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐
│   70%      │  │  3 дня     │  │   83%      │  │   2.3x     │
│ компаний   │  │            │  │ маркетоло- │  │ чаще       │
│ не видят   │→│ без дашборда│→│ лов не     │→│ превышают  │
│ деньги     │  │ тратят     │→│ могут      │  │ revenue    │
│ в кассе    │  │ время      │→│ доказать   │  │ goals      │
│ на износ   │  │ на отчеты  │→│ ROI        │  │              │
└────────────┘  └────────────┘  └────────────┘  └────────────┘

Паттерн wiki: testimonials (pattern 3: Stats Bar) Психология: Цифры создают «шок-контент», который мотивирует скроллить дальше Анимация: числа «набегают» при скролле (GSAP counter)

Секция 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: Пример дашборда — «Интерактивное демо»

Не статичный мокап. ECharts график, где можно переключаться между типами бизнеса.

Тогглы сверху:

[Интернет-магазин]  [Услуги/Агентство]  [Производство]

При переключении данные графика меняются в реальном времени — Revenue, конверсия, маржа. Клиент видит, как дашборд выглядит именно под его бизнес.

Содержимое мокапа (реальные KPI из исследования):

┌─────────────────────────────────────────────────────────────┐
│  ROI24 Dashboard                               ● Live       │
├─────────────────────────────────────────────────────────────┤
│  Выручка: 4.2М ↑12%   Маржа: 23%   Касса: 1.8М   Дебиторка│
├─────────────────────────────────────────────────────────────┤
│  [График выручки 12 месяцев с трендом (ECharts)]            │
│  [Воронка: Лиды→Контракт→Оплата]                            │
│  [Топ-5 каналов: SEO 35%  Контекст 28%  Прямой 22%]        │
└─────────────────────────────────────────────────────────────┘

Паттерн wiki:

dashboard-tables: KPI cards layout, trend indicators, score bars
landing-patterns: Report preview / Product screenshot
hero-variations: Split layout
motion: staggered-reveal (элементы мокапа появляются каскадом)
motion/hover-micro-interaction: hover на элементах графика

Реализация: ECharts CDN — интерактивные графики. Переключение сегментов — чистый JS. Без React/Vue, чистый DOM.

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

Детальный процесс — снимает тревогу клиента: «я буду знать, что происходит»

1. Брифинг (30 минут) Звоним, узнаём ваш бизнес, определяем 10 ключевых метрик. Никаких форм — просто звонок.

2. Подключение (1-2 дня) Подключаем 1С, CRM, онлайн-банки, рекламные кабинеты. Вы не участвуете.

3. Настройка (1-2 дня) Настраиваем дашборд под ваши 10 метрик. Не 50 — только то, что реально нужно.

4. Демо (30 минут) Показываем результат. Вносим правки. Вы видите, что работает.

5. Запуск (день) Даём доступ, обучаем команду. Включаем автоматическое обновление. Готово.

Визуализация: Вертикальная timeline (линия слева, шаги справа, соединены точками) Паттерн wiki: landing-patterns (How it works), visual-hierarchy (последовательность), animation-physics (staggered-reveal)

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

3 карточки в Bento-сетке (асимметричная):

Интернет-магазин (большая карточка) Конверсия, AOV, CAC, CLV, возвраты, оборачиваемость *Пример: «Сеть из 12 онлайн-магазинов, оборот ₽540М/год»

Услуги / Агентство (средняя карточка) Пайплайн, маржинальность проектов, загрузка команды, кэшфлоу *Пример: «Маркетинговое агентство, 8 сотрудников»

Производство (средняя карточка) План/факт, OEE, качество, поставки, себестоимость *Пример: «Производство мебели, 2 цеха, 45 сотрудников»

Паттерн wiki:

bento-grid: 3 карточки разных размеров
card-grid: Feature list
responsive-patterns: Mobile-first stacking

Секция 8: Сравнение — «ROI24 vs «как сейчас»»

РФ-пользователи «любят сравнивать» (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 ₽»

Подзаголовок: «Настройка дашборда. Подключение источников. Обучение команды.»

Список включённого (4 колонки):

Что входит	Срок
Подключение 1С / CRM	1 день
Настройка 10 метрик	1 день
Мокап дашборда под вас	1 день
Обучение команды	2 часа
Поддержка 30 дней	1 месяц
Обновление источников	Включено

Цена: 100 000 ₽ (крупно, monospace шрифт JetBrains Mono) CTA: «Обсудить проект» (зелёная, крупная)

Паттерн wiki:

landing-page: Pricing — single tier pattern
visual-hierarchy: Цена как фокус-точка
testimonials: Trust badges рядом с ценой

Гарантия (под ценой, выделено): «30-дневная гарантия. Если дашборд не устроит — вернём деньги за настройку. Работать будем по этапам, вы видите результат после каждого шага.»

Дополнительно: «После первого месяца — поддержка 20 000 ₽/мес. Или отключите в любой момент.»

Trust badges (рядом с ценой): ✓ Данные в РФ (серверы Москва) ✓ 152-ФЗ (персональные данные) ✓ SSL (HTTPS) ✓ Работаем с НДС ✓ Договор и акты ✓ Поддержка по телефону

Важно: Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо».

Секция 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 минут. Покажем, какие метрики вы упускаете.»

CTA варианты (выбор):

Написать в Telegram (крупная зелёная кнопка)
Позвонить (номер телефона)
Оставить заявку (форма: Имя, Телефон — 2 поля)

Паттерн wiki:

landing-patterns: CTA section (bottom)
visual-hierarchy: CTA — самый контрастный элемент
psychological: Loss aversion (боль потери > радость получения)
russian-ui-patterns: Telegram кнопка обязательна

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

Колонки:

ROI24 — Логотип, описание (2 строки)
Контакты — Телефон, Telegram, Email
Решение — О нас, Пример, Тариф, FAQ, Контакты
Юридическое — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ, Оферта

Правый нижний угол: Telegram кнопка (fixed, bottom-right) Cookie banner: в нижней части экрана (всплывает при первом посещении)

Паттерн 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, Team	Адаптивная сетка
`layout/bento-grid`	Для кого, Problem	Асимметричная сетка
`layout/landing-patterns`	Вся страница	Конверсионный порядок секций
`layout/hero-variations` — Sticky nav	Header	CTA всегда виден

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

Паттерн	Где используется	Зачем
`psychology/visual-hierarchy`	Весь лендинг	Один CTA, Z-pattern, размер
`psychology/testimonials`	Numbers, Case study	Социальное доказательство
`psychology/trust-signals`	Тариф, Footer, Header	SSL, данные, гарантии
`psychology/cognitive-fluency`	Hero, Calculator, FAQ	Простота = доверие

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	Пример дашборда	Зелёный/красный тренд
`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` — Гарантия	Тариф	«Вернём деньги»

ЧАСТЬ 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`	Слишком сложно для продающей страницы
`media/animated-illustration`	Не нужно — мокап дашборда сам по себе

Правило: Лендинг услуги — не арт-объект. Каждый пиксель должен работать на конверсию.

ЧАСТЬ 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  ← Синий (доверие, финансы — wiki RU психология)
--warning: #f59e0b           ← Жёлтый индикатор
--error: #ef4444             ← Красный индикатор
--success: #22c55e           ← Зелёный (результат, экономия)

Цветовая психология (wiki russian-user-psychology):

Зелёный = деньги, одобрение (для CTA и результатов)
Синий = консерватизм, надёжность (для B2B, финансов)
Жёлтый/Красный = индикаторы (не danger в РФ, а сигналы внимания)

Шрифты

Шрифт	Где используется	Зачем
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
Section padding	128px	Премиум whitespace
Card padding	32px	Карточки

Анимации

Элемент	Анимация	Параметр
Карточки	Staggered reveal	0.06s delay
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: ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ

Формат

Параметр	Решение
Формат	Single HTML file (как calls24-landing)
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/
├── index.html          ← Единственный HTML файл (~3000 строк)
├── STATUS.md           ← Статус разработки
├── PLAN_LANDING_PAGE.md ← Этот файл
└── research/
    └── DASHBOARD_KPI_RESEARCH_2026.md

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

Метрика	Целевое значение	Как достичь
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 (обязательно)

Требование	Статус	Где
Skip link (после body)	✅	Header
Focus-visible outlines	✅	Все интерактивные элементы
Telegram кнопка (fixed)	✅	Bottom-right
Телефон кликабельный	✅	Header, Footer, CTA
ИНН/ОГРН	✅	Footer
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: ПЕРЕЧЕНЬ ДОПОЛНИТЕЛЬНЫХ ЭЛЕМЕНТОВ (от старых к новым)

Что было, но улучшено:

Элемент	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 лендинг
Дизайн	Типовой, шаблонный	Premium (Apple/Stripe level)
Контент	Обещания	Интерактивный мокап дашборда
Доверие	Нет цифр	Numbers + Кейс + Команда + FAQ
Сравнение	Нет	ROI24 vs «как сейчас»
Калькулятор	Нет	Интерактив — пользователь сам считает потери
Гарантия	Нет	30 дней, возврат денег
Мобильный	Адаптив	Mobile-first, Telegram CTA
Доступность	Ignored	WCAG AA compliant
Скорость	3-5 сек загрузка	<1.5s LCP
RU паттерны	Нет	Telegram, ИНН/ОГРН, 152-ФЗ, калькулятор
Аналитика	Нет	Метрика, вебвизор, OG, JSON-LD

Целевые метрики лендинга

Метрика	Цель	Как измерим
Конверсия в заявку	3-5%	Яндекс.Метрика цели
Доходимость до тарифа	>60%	Скролл-глубина 75%+
Среднее время на странице	>2 мин	Метрика
CTR кнопок CTA	>4%	Метрика цели
LCP	<1.5s	PageSpeed Insights

Цель

Landing должен продавать услугу за 100 000 руб. Ключевые факторы доверия:

Интерактивный мокап дашборда — переключение сегментов, ECharts (показать, а не рассказать)
Numbers Strip — шоковые факты о потере данных
Таблица сравнения — ROI24 vs «как сейчас» (ценность 100К)
Развёрнутый кейс с цифрами — «кейсы с цифрами = #3 доверие РФ»
Калькулятор потерь — пользователь сам считает (cognitive fluency)
Команда — реальные люди, не сток
Гарантия 30 дней — risk reversal
FAQ 6 вопросов — обработка возражений
Trust badges — SSL, 152-ФЗ, серверы РФ, НДС
Premium дизайн — тёмная тема, Bauhaus геометрия, анимации с намерением
Контакты и реквизиты — не однодневка
Telegram CTA — основной канал коммуникации РФ

План основан на анализе 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-базис.

40 KiB Raw Permalink Blame History Unescape Escape

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

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

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

Header (Sticky Navigation)

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

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

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

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

Секция 5: Пример дашборда — «Интерактивное демо»

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

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

Секция 8: Сравнение — «ROI24 vs «как сейчас»»

Секция 9: Кейс — «Развёрнутый кейс с цифрами»

Секция 10: Команда — «Кто делает ваш дашборд»

Секция 11: Калькулятор потерь — «Интерактив»

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

Секция 13: FAQ — «Возражения»

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

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

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

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

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

Motion (анимации)

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

Typography (шрифты)

Dashboard (метрики)

RU Patterns (российская специфика)

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

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

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

Шрифты

Размеры

Анимации

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

Формат

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

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

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

Аналитика

ЧАСТЬ 7: ПЕРЕЧЕНЬ ДОПОЛНИТЕЛЬНЫХ ЭЛЕМЕНТОВ (от старых к новым)

Что было, но улучшено:

Что добавлено нового:

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

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

Целевые метрики лендинга

Цель

40 KiB

Raw Permalink Blame History