diff --git a/PLAN_LANDING_PAGE.md b/PLAN_LANDING_PAGE.md new file mode 100644 index 0000000..1e4632b --- /dev/null +++ b/PLAN_LANDING_PAGE.md @@ -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 паттернах и исследовании бизнес-метрик.*