From 38b5723a356780b45340ebca3a6e41d6fc0d6d45 Mon Sep 17 00:00:00 2001 From: neo Date: Sat, 20 Jun 2026 19:09:49 +0500 Subject: [PATCH] =?UTF-8?q?v2:=2014=20=D1=81=D0=B5=D0=BA=D1=86=D0=B8=D0=B9?= =?UTF-8?q?,=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B0=D0=BA=D1=82=D0=B8?= =?UTF-8?q?=D0=B2,=20=D1=81=D1=80=D0=B0=D0=B2=D0=BD=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5,=20=D0=BA=D0=B5=D0=B9=D1=81,=20=D0=BA=D0=B0=D0=BB=D1=8C?= =?UTF-8?q?=D0=BA=D1=83=D0=BB=D1=8F=D1=82=D0=BE=D1=80,=20FAQ,=20=D0=B3?= =?UTF-8?q?=D0=B0=D1=80=D0=B0=D0=BD=D1=82=D0=B8=D1=8F,=20=D0=B0=D0=BD?= =?UTF-8?q?=D0=B0=D0=BB=D0=B8=D1=82=D0=B8=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- PLAN_LANDING_PAGE.md | 505 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 404 insertions(+), 101 deletions(-) diff --git a/PLAN_LANDING_PAGE.md b/PLAN_LANDING_PAGE.md index 1e4632b..3a991c0 100644 --- a/PLAN_LANDING_PAGE.md +++ b/PLAN_LANDING_PAGE.md @@ -1,13 +1,13 @@ # План: Лендинг ROI24 — Premium Single-Tier Landing -> Дата: 2026-06-20 +> Дата: 2026-06-20 (обновлено) > Бюджет: 100 000 руб. под ключ + 20 000 руб./мес поддержка > Позиционирование: «Живые цифры бизнеса за 3 дня» > Цель: Продажа премиум-услуги автоматизированной аналитики --- -## ЧАСТЬ 1: СТРУКТУРА ЛЕНДИНГА (10 секций) +## ЧАСТЬ 1: СТРУКТУРА ЛЕНДИНГА (14 секций) ``` Header (sticky) @@ -20,17 +20,27 @@ Header (sticky) ↓ 4. Решение — Что такое ROI24 ↓ -5. Пример дашборда — Живой мокап +5. Пример дашборда — Интерактив (переключение сегментов) ↓ -6. Как работает — 3 шага +6. Как работает — 5 шагов (детально) ↓ 7. Для кого — 3 сегмента ↓ -8. Тариф — 1 премиум-карточка +8. Сравнение — ROI24 vs «как сейчас» (таблица) ↓ -9. CTA — Призыв к действию +9. Кейс — Развёрнутый кейс с цифрами ↓ -10. Footer — Юридическое + контакты +10. Команда — Кто делает + ↓ +11. Калькулятор потерь — Интерактив + ↓ +12. Тариф — 100К + гарантии + Trust badges + ↓ +13. FAQ — 6 вопросов-ответов + ↓ +14. CTA — Telegram кнопка + мини-форма + ↓ +15. Footer — Тяжёлый (ЮЛ, реквизиты, соцсети, 152-ФЗ) ``` --- @@ -41,12 +51,18 @@ Header (sticky) | Элемент | Описание | |---------|----------| -| Логотип | ROI24 — моноширинный или geometric sans | -| Навигация | О решении, Пример, Тариф (3 пункта, Hick's Law) | -| CTA | «Обсудить проект» — зелёная кнопка | +| Логотип | ROI24 — геометрический sans-serif, моноширинный | +| Навигация | О решении, Пример, Тариф, FAQ (4 пункта, Hick's Law) | +| CTA | «Обсудить проект» — зелёная кнопка, фиксированная | +| Телефон | Кликабельный номер (8-800 или +7) | -**Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header) -**Психология:** CTA в правой части по Z-pattern +**Паттерн wiki:** hero-variations (centered nav), landing-patterns (sticky header), russian-ui-patterns (sticky header with contacts) +**Психология:** CTA в правой части по Z-pattern, телефон — сигнал серьёзности для РФ + +**Технически:** +- Backdrop blur (glassmorphism) +- Прозрачность 80% наверху → непрозрачный при скролле +- Высота: 72px --- @@ -54,14 +70,14 @@ Header (sticky) **H1:** «Вы теряете деньги, не зная почему» **H2:** «Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков» -**CTA:** «Получить демо за 3 дня» (зелёная) -**Secondary CTA:** «Посмотреть пример дашборда» (outline) +**CTA:** «Получить демо за 3 дня» (зелёная, #22c55e) +**Secondary CTA:** «Посмотреть пример дашборда» (outline, scroll к секции 5) -**Доверие под CTA:** «Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app». +**Доверие под CTA:** «Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app» **Паттерн wiki:** - hero-variations: Split layout (текст слева, дашборд-мокап справа) -- visual-hierarchy: H1 clamp(2.5rem, 6vw, 4rem), один главный CTA +- visual-hierarchy: H1 clamp(2.5rem, 6vw, 4rem), один главный CTA + один вторичный - customer-journey: Awareness stage **Дизайн:** @@ -69,12 +85,14 @@ Header (sticky) - Мокап дашборда справа (карточка с KPI-числами и мини-графиками) - Акцент: зелёный (#22c55e) — только для CTA - Геометрические фигуры на фоне (Bauhaus circle/square, opacity 0.03) +- Анимация: staggered-reveal элементов (текст → CTA → мокап) --- ### Секция 2: Numbers Strip — «Проблема в цифрах» -4 колонки с цифрами: +4 колонки с анимированными счётчиками (count-up при появлении): + ``` ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ 70% │ │ 3 дня │ │ 83% │ │ 2.3x │ @@ -88,6 +106,7 @@ Header (sticky) **Паттерн wiki:** testimonials (pattern 3: Stats Bar) **Психология:** Цифры создают «шок-контент», который мотивирует скроллить дальше +**Анимация:** числа «набегают» при скролле (GSAP counter) --- @@ -132,9 +151,16 @@ Header (sticky) --- -### Секция 5: Пример дашборда — «Покажи, а не расскажи» +### Секция 5: Пример дашборда — «Интерактивное демо» -Мокап дашборда ROI24 — живой пример того, что получит клиент. +Не статичный мокап. ECharts график, где можно переключаться между типами бизнеса. + +**Тогглы сверху:** +``` +[Интернет-магазин] [Услуги/Агентство] [Производство] +``` + +При переключении данные графика меняются в реальном времени — Revenue, конверсия, маржа. Клиент видит, как дашборд выглядит именно под его бизнес. **Содержимое мокапа (реальные KPI из исследования):** @@ -144,50 +170,62 @@ Header (sticky) ├─────────────────────────────────────────────────────────────┤ │ Выручка: 4.2М ↑12% Маржа: 23% Касса: 1.8М Дебиторка│ ├─────────────────────────────────────────────────────────────┤ -│ [График выручки 12 месяцев с трендом] │ +│ [График выручки 12 месяцев с трендом (ECharts)] │ │ [Воронка: Лиды→Контракт→Оплата] │ │ [Топ-5 каналов: SEO 35% Контекст 28% Прямой 22%] │ └─────────────────────────────────────────────────────────────┘ ``` **Паттерн wiki:** -- dashboard-tables: KPI cards layout, trend indicators +- dashboard-tables: KPI cards layout, trend indicators, score bars - landing-patterns: Report preview / Product screenshot -- hero-variations: Split layout (текст слева, мокап справа) +- hero-variations: Split layout - motion: staggered-reveal (элементы мокапа появляются каскадом) +- motion/hover-micro-interaction: hover на элементах графика -**Реализация:** Статичный мокап с CSS-анимациями (без тяжёлых библиотек). KPI-карточки с трендами, график revenue, воронка, топ каналов. +**Реализация:** ECharts CDN — интерактивные графики. Переключение сегментов — чистый JS. Без React/Vue, чистый DOM. --- -### Секция 6: Как работает — «3 шага» +### Секция 6: Как работает — «5 шагов» -**1. Подключаем источники** -1С, CRM, онлайн-банки, рекламные кабинеты — за 1 день. +Детальный процесс — снимает тревогу клиента: «я буду знать, что происходит» -**2. Настраиваем метрики** -10 ключевых показателей под ваш бизнес. Не 50 — только то, что нужно. +**1. Брифинг (30 минут)** +Звоним, узнаём ваш бизнес, определяем 10 ключевых метрик. Никаких форм — просто звонок. -**3. Смотрите дашборд** -Каждое утро — обновлённые цифры. Без обучения. +**2. Подключение (1-2 дня)** +Подключаем 1С, CRM, онлайн-банки, рекламные кабинеты. Вы не участвуете. -**Паттерн wiki:** -- landing-patterns: How it works (3 steps) -- animation-physics: staggered-reveal (0.06s delay) -- visual-hierarchy: Последовательность — 1, 2, 3 +**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 карточки разных размеров @@ -196,9 +234,118 @@ Header (sticky) --- -### Секция 8: Тариф — «Один тариф. Всё включено.» +### Секция 8: Сравнение — «ROI24 vs «как сейчас»» -**Заголовок:** «Под ключ за 100 000 ₽» +РФ-пользователи «любят сравнивать» (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 ₽» Подзаголовок: «Настройка дашборда. Подключение источников. Обучение команды.» @@ -213,45 +360,86 @@ Header (sticky) | Поддержка 30 дней | 1 месяц | | Обновление источников | Включено | -**Цена:** 100 000 ₽ (крупно, monospace шрифт) +**Цена:** 100 000 ₽ (крупно, monospace шрифт JetBrains Mono) **CTA:** «Обсудить проект» (зелёная, крупная) **Паттерн wiki:** - landing-page: Pricing — single tier pattern -- pricing grid: 3 columns → здесь 1 карточка по центру, широкая - visual-hierarchy: Цена как фокус-точка - testimonials: Trust badges рядом с ценой -**Важно:** Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо». +**Гарантия (под ценой, выделено):** +«30-дневная гарантия. Если дашборд не устроит — вернём деньги за настройку. +Работать будем по этапам, вы видите результат после каждого шага.» -**Дополнительно под ценой:** +**Дополнительно:** «После первого месяца — поддержка 20 000 ₽/мес. Или отключите в любой момент.» +**Trust badges (рядом с ценой):** +✓ Данные в РФ (серверы Москва) ✓ 152-ФЗ (персональные данные) +✓ SSL (HTTPS) ✓ Работаем с НДС ✓ Договор и акты ✓ Поддержка по телефону + +**Важно:** Поскольку тариф один — он не «выделен» как featured. Он единственный. Это создаёт ощущение: «мы не делим на тарифы, мы делаем хорошо». + --- -### Секция 9: CTA — «Готовы видеть деньги?» +### Секция 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: «Записаться на аудит» (зелёная) +**CTA варианты (выбор):** +1. Написать в Telegram (крупная зелёная кнопка) +2. Позвонить (номер телефона) +3. Оставить заявку (форма: Имя, Телефон — 2 поля) **Паттерн wiki:** - landing-patterns: CTA section (bottom) - visual-hierarchy: CTA — самый контрастный элемент - psychological: Loss aversion (боль потери > радость получения) +- russian-ui-patterns: Telegram кнопка обязательна --- -### Секция 10: Footer — «Тяжёлый» +### Секция 15: Footer — «Тяжёлый» Колонки: 1. **ROI24** — Логотип, описание (2 строки) 2. **Контакты** — Телефон, Telegram, Email -3. **Решение** — О нас, Пример, Тариф, Контакты -4. **Юридическое** — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ +3. **Решение** — О нас, Пример, Тариф, FAQ, Контакты +4. **Юридическое** — ИНН/ОГРН, Политика конфиденциальности, 152-ФЗ, Оферта -Правый нижний угол: Telegram кнопка (fixed, bottom-right) +**Правый нижний угол:** Telegram кнопка (fixed, bottom-right) +**Cookie banner:** в нижней части экрана (всплывает при первом посещении) **Паттерн wiki:** - russian-ui-patterns: Тяжёлый footer (реквизиты, контакты, соцсети) @@ -262,29 +450,34 @@ CTA: «Записаться на аудит» (зелёная) ## ЧАСТЬ 3: ВЫБРАННЫЕ ПАТТЕРНЫ WIKI (список) ### Layout (структура) + | Паттерн | Где используется | Зачем | |---------|-----------------|-------| | `layout/hero-variations` — Split | Hero секция | Текст слева, дашборд справа | -| `layout/card-grid` | Problem, Solution | Адаптивная сетка | -| `layout/bento-grid` | Для кого | Асимметричная сетка сегментов | +| `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, Trust | Социальное доказательство | -| `psychology/trust-signals` | Под CTA, Footer | SSL, данные, гарантии | -| `psychology/cognitive-fluency` | Hero, Pricing | Простота = доверие | +| `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/staggered-reveal` | Все карточки, секции | Элементы появляются каскадом (0.06s delay) | | `motion/hover-micro-interaction` | Кнопки, карточки | Тактильность при наведении | | `motion/animated-gradient` | Фон Hero | Лёгкий градиент, не отвлекает | ### System (базовая архитектура) + | Паттерн | Где используется | Зачем | |---------|-----------------|-------| | `system/design-tokens` | Весь CSS | 50+ CSS custom properties | @@ -292,15 +485,29 @@ CTA: «Записаться на аудит» (зелёная) | `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` — Гарантия | Тариф | «Вернём деньги» | --- @@ -308,14 +515,15 @@ CTA: «Записаться на аудит» (зелёная) | Паттерн wiki | Почему НЕ используем | |-------------|---------------------| -| `layout/sticky-feature` | Не нужно — лендинг одностраничный, без длинного контента | +| `layout/sticky-feature` | Не нужно — лендинг одностраничный | | `layout/full-bleed-content` | Не подходит для B2B SaaS лендинга | | `media/video-mask` | Утяжелит страницу, не критично для конверсии | | `motion/page-transitions` | Одностраничник, переходы не нужны | -| `motion/parallax-scroll` | Минимальные анимации — пользователь ценит скорость | +| `motion/parallax-scroll` | Минимальные анимации — скорость | | `motion/procedural-patterns` | Избыточно для лендинга услуги | | `typography/kinetic-text` | Отвлекает, не для B2B | | `layout/overlapping-layers` | Слишком сложно для продающей страницы | +| `media/animated-illustration` | Не нужно — мокап дашборда сам по себе | **Правило:** Лендинг услуги — не арт-объект. Каждый пиксель должен работать на конверсию. @@ -324,52 +532,77 @@ CTA: «Записаться на аудит» (зелёная) ## ЧАСТЬ 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: #22c55e ← Зелёный CTA (деньги, действие) --accent-hover: #16a34a ---accent-secondary: #3b82f6 ← Синий для вторичных элементов +--accent-secondary: #3b82f6 ← Синий (доверие, финансы — wiki RU психология) --warning: #f59e0b ← Жёлтый индикатор --error: #ef4444 ← Красный индикатор +--success: #22c55e ← Зелёный (результат, экономия) ``` +**Цветовая психология (wiki russian-user-psychology):** +- Зелёный = деньги, одобрение (для CTA и результатов) +- Синий = консерватизм, надёжность (для B2B, финансов) +- Жёлтый/Красный = индикаторы (не danger в РФ, а сигналы внимания) + ### Шрифты -- Основной: Inter (кириллическая поддержка, чистый, современный) -- Моноширинный: JetBrains Mono (для цен, цифр, технических элементов) + +| Шрифт | Где используется | Зачем | +|-------|-----------------|-------| +| 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) + +| Элемент | Размер | Примечание | +|---------|--------|-----------| +| 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 между элементами -- 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) + +| Элемент | Анимация | Параметр | +|---------|----------|---------| +| Карточки | 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 + JS (для простоты деплоя) -- GSAP для анимаций (ScrollTrigger + stagger) -- ECharts для графиков в мокапе дашборда -- Чистый CSS grid/flexbox (без фреймворков) + +| Параметр | Решение | +|----------|--------| +| Формат | 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 файл +├── index.html ← Единственный HTML файл (~3000 строк) ├── STATUS.md ← Статус разработки ├── PLAN_LANDING_PAGE.md ← Этот файл └── research/ @@ -377,46 +610,116 @@ CTA: «Записаться на аудит» (зелёная) ``` ### Производительность -- LCP < 1.5s (шрифты preload, критический CSS inline) -- INP < 100ms (минимальный JS) -- CLS < 0.05 (все размеры фиксированы) -- Без внешних зависимостей кроме GSAP CDN + ECharts CDN + +| Метрика | Целевое значение | Как достичь | +|---------|-----------------|-------------| +| 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 (обязательно) -- [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) + +| Требование | Статус | Где | +|-----------|--------|-----| +| 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: СТАТУС-КВАНТИФИКАЦИЯ +## ЧАСТЬ 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 Strip + Trust signals | -| Мобильный | Адаптив | Mobile-first, полностью функционален | +| Контент | Обещания | Интерактивный мокап дашборда | +| Доверие | Нет цифр | Numbers + Кейс + Команда + FAQ | +| Сравнение | Нет | ROI24 vs «как сейчас» | +| Калькулятор | Нет | Интерактив — пользователь сам считает потери | +| Гарантия | Нет | 30 дней, возврат денег | +| Мобильный | Адаптив | Mobile-first, Telegram CTA | | Доступность | Ignored | WCAG AA compliant | | Скорость | 3-5 сек загрузка | <1.5s LCP | -| RU паттерны | Нет | Telegram, ИНН/ОГРН, 152-ФЗ | +| RU паттерны | Нет | Telegram, ИНН/ОГРН, 152-ФЗ, калькулятор | +| Аналитика | Нет | Метрика, вебвизор, OG, JSON-LD | + +### Целевые метрики лендинга + +| Метрика | Цель | Как измерим | +|---------|------|------------| +| Конверсия в заявку | 3-5% | Яндекс.Метрика цели | +| Доходимость до тарифа | >60% | Скролл-глубина 75%+ | +| Среднее время на странице | >2 мин | Метрика | +| CTR кнопок CTA | >4% | Метрика цели | +| LCP | <1.5s | PageSpeed Insights | ### Цель + Landing должен продавать услугу за 100 000 руб. Ключевые факторы доверия: -1. Реальный мокап дашборда (показать, а не рассказать) -2. Numbers Strip (шох-факты о потере данных) -3. Чёткий список что входит (конкретика = доверие) -4. Premium дизайн (ощущение серьёзности) -5. Контакты и реквизиты (не однодневка) + +1. **Интерактивный мокап дашборда** — переключение сегментов, ECharts (показать, а не рассказать) +2. **Numbers Strip** — шоковые факты о потере данных +3. **Таблица сравнения** — ROI24 vs «как сейчас» (ценность 100К) +4. **Развёрнутый кейс с цифрами** — «кейсы с цифрами = #3 доверие РФ» +5. **Калькулятор потерь** — пользователь сам считает (cognitive fluency) +6. **Команда** — реальные люди, не сток +7. **Гарантия 30 дней** — risk reversal +8. **FAQ 6 вопросов** — обработка возражений +9. **Trust badges** — SSL, 152-ФЗ, серверы РФ, НДС +10. **Premium дизайн** — тёмная тема, Bauhaus геометрия, анимации с намерением +11. **Контакты и реквизиты** — не однодневка +12. **Telegram CTA** — основной канал коммуникации РФ --- -*План основан на анализе 12+ паттернов из wow-design-wiki, 8 принципах психологии конверсии, 10 RU UI паттернах и исследовании бизнес-метрик.* +*План основан на анализе 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-базис.*