Пять лендингов «Внедрение amoCRM»

Пять самостоятельных посадочных страниц по одной структуре: 11 блоков + шапка + модалка. Разные дизайн-подходы, общая папка ассетов, никаких сборщиков и зависимостей — только шрифт Inter с Google Fonts.

Начать: откройте index.html — витрина со всеми пятью. Разбор по маркетинговым метрикам и список обязательных правок перед запуском — в AUDIT.md.

Структура

landings/
├── index.html            витрина: превью и переходы
├── AUDIT.md              маркетинговый аудит + что заменить перед запуском
├── README.md
├── assets/               общие ассеты для всех пяти лендингов
│   ├── icons.js          SVG-спрайт на 18 иконок, общий для всех страниц
│   ├── logos/            amocrm-wordmark.png, интеграции, телефония
│   ├── ui/               скриншоты интерфейса amoCRM
│   └── video/            5 роликов-демо (используются в лендинге 04)
├── 01-classic/           index.html · style.css · app.js
├── 02-dark/
├── 03-guarantee/
├── 04-product/
└── 05-longread/

Каждый лендинг — три файла, полностью независимых от остальных. Можно взять одну папку и залить на хостинг вместе с assets/.

Пять направлений

	Лендинг	Тема	Чем отличается механикой
01	Классика amo	светлая, фирменный синий	3D-наклон скриншота за курсором, 9 шагов карточками, плавающие метрики в hero
02	Тёмный премиум	тёмная, аврора + стекло	bento-сетка на 9 шагов, бегущая строка интеграций, подсветка карточек за курсором
03	Гарантия	светлая, жёлто-чёрная	sticky-карточка условий возврата, интерактивный калькулятор упущенной выручки
04	Продуктовый	много воздуха, крупный шрифт	скролл-сцены (текст ведёт картинку в sticky-стейдже), 5 видео-демо с вкладками
05	Лонг-рид	плотная деловая	оглавление с подсветкой раздела, таблица «что происходит → чего стоит», таблица сравнения пакетов

Общее для всех пяти

Интерактив

Модалка на три экрана: Данные → Проверьте заказ → Готово, с двумя режимами —

«Оформление заявки» и «Задать вопрос» (свой заголовок, дисклеймер и экран успеха).

Маска телефона, валидация, ловушка фокуса, закрытие по Esc и по клику вне окна.
Карусель кейсов: стрелки, точки, свайп, управление с клавиатуры.
FAQ-аккордеон, счётчики цифр, прогресс чтения в шапке, мобильный sticky-CTA.

Анимации — reveal при скролле через IntersectionObserver, параллакс, плавные ховеры. Всё на CSS-трансформах; при prefers-reduced-motion: reduce отключается полностью.

Аналитика — события пишутся в window.dataLayer: form_open, form_step_review, lead_submit, scroll_depth. У каждой кнопки есть data-src с названием блока — видно, какой CTA приносит заявки.

SEO — свои title/description на каждой странице, Open Graph, JSON-LD: Organization, Service с тремя Offer, FAQPage со всеми восемью вопросами.

Единая визуальная система — компонент .shotbox для всех скриншотов (одно соотношение сторон, общая рамка и тень; модификаторы --dark, --fit, --icon для прозрачных, панорамных и знаковых изображений) и общий SVG-спрайт иконок.

Адаптив — три брейкпоинта (1080 / 900 / 680). Проверено: горизонтальной прокрутки нет, широкие таблицы скроллятся внутри своего контейнера.

Доступность — skip-link, alt у всех изображений, label у всех полей, role="dialog" и управление фокусом в модалке, видимый :focus-visible.

Что подключить перед запуском

Полный список с обоснованием — в AUDIT.md, раздел 12. Коротко:

Кейсы в блоке 7 — демонстрационные. Клиенты и цифры вымышленные, публиковать нельзя.
Цены и состав пакетов — рабочий пример, сверьте с прайсом.
Оферта и политика конфиденциальности — сейчас заглушки data-doc.
Отправка формы — в app.js имитация, место помечено комментарием ▸:

$('#sendBtn').addEventListener('click', function () {
  /* ▸ Здесь подключается реальная отправка: fetch('/api/lead', {...}) */
});

ID счётчика аналитики — window.YM_ID и/или GTM-контейнер.

Локальный просмотр

Открывать файлы напрямую через file:// можно, но часть браузеров ограничивает загрузку соседних файлов. Надёжнее поднять статический сервер:

cd landings && python3 -m http.server 4321

Дальше — http://127.0.0.1:4321/.

Замена логотипа

Вордмарк лежит одним файлом: assets/logos/amocrm-wordmark.png — используется в шапке и подвале всех пяти лендингов. Замените файл по этому пути, и логотип обновится везде сразу. Круглый знак — assets/logos/amo-logo.svg (фавикон и финальный блок).