Введение

Создание высокоэффективных лэндингов[^1] требует комплексного подхода, объединяющего современные технологические решения, психологические принципы и стратегическое маркетинговое мышление. Данная документация предоставляет профессиональные промты[^2] для разработки лэндингов, которые не только визуально привлекательны и быстро загружаются, но и оптимизированы для поисковых систем, адаптированы для всех устройств и поддерживают автоматическое определение темной и светлой схем оформления.

Используя эти промты с инструментами искусственного интеллекта, такими как ChatGPT, Claude, Copilot и другими, разработчики и маркетологи могут значительно сократить время разработки, обеспечивая при этом высокое качество результата. Каждый промт разработан с учетом лучших практик индустрии и включает подробные инструкции по реализации.

1. Основные концепции и методология

1.1 Типология лэндингов и их характеристики

Современная экосистема лэндингов включает множество типов, каждый из которых имеет свои уникальные цели, структуру и оптимизационные стратегии.

1.1.1 Классификация по целям

Лэндинги генерации лидов[^3] предназначены для сбора контактной информации потенциальных клиентов. Эти страницы сосредоточены на минимизации трений[^4] и максимизации количества заполненных форм.

Лэндинги продаж ориентированы на прямое преобразование посетителей в покупателей. Они содержат подробную информацию о продукте, его преимуществах, социальные доказательства[^5] и убедительные призывы к действию[^6].

Лэндинги бренда создаются для повышения осведомленности о бренде и установления эмоциональной связи с аудиторией. Они часто используют видео, интерактивные элементы[^7] и нарративы, ориентированные на историю.

Лэндинги мероприятий предназначены для регистрации на вебинары, конференции, семинары и другие события. Они содержат информацию о времени, месте, спикерах и логистике.

Лэндинги на льготу (промо, скидки) создаются для скоротечных кампаний с ограниченным предложением. Они используют срочность[^8] и дефицит[^9] как мотивационные факторы.

1.1.2 Приоритеты при разработке

Каждый тип лэндинга требует иерархии приоритетов при разработке. Для лэндингов генерации лидов приоритет уделяется простоте формы и минимизации отвлекающих элементов. Для лэндингов электронной коммерции приоритет отдается каталогизации продуктов, системе фильтрации и безопасности платежей.

1.2 Основной цикл разработки

1.2.1 Фаза исследования

Перед началом разработки необходимо провести тщательное исследование целевой аудитории[^10], конкурентов и рыночных тенденций. Это включает анализ демографических данных, психографических профилей и поведенческих паттернов.

1.2.2 Фаза проектирования

На этой фазе создается структура страницы, определяются ключевые разделы, иерархия информации и расположение элементов интерфейса[^11]. Используются инструменты, такие как Figma, Adobe XD или Wireframe.cc, для создания макетов.

1.2.3 Фаза разработки

Разработчики преобразуют макеты в функциональный код HTML, CSS и JavaScript. На этом этапе реализуются все интерактивные элементы, оптимизация производительности[^12] и кроссбраузерная совместимость[^13].

1.2.4 Фаза тестирования и оптимизации

Проводится тестирование на различных устройствах, браузерах и сетевых скоростях. Реализуется A/B тестирование[^14] элементов, анализируется поведение пользователей через аналитику и выполняются необходимые оптимизации.

2. Технические основы лэндингов

2.1 Архитектура и структура кода

2.1.1 Семантическая разметка HTML

Использование семантической разметки[^15] HTML критически важно для доступности[^16], SEO и структурированности кода. Основные семантические элементы включают:

<header>          <!-- Шапка страницы -->
<nav>             <!-- Навигация -->
<main>            <!-- Основной контент -->
<section>         <!-- Логические разделы -->
<article>         <!-- Содержимое статей -->
<aside>           <!-- Боковое содержимое -->
<footer>          <!-- Подвал страницы -->
<figure>          <!-- Изображения с подписями -->
<figcaption>      <!-- Подписи к изображениям -->

Семантическая разметка улучшает восприятие структуры документа экранными читалками[^17] и помогает поисковым системам лучше понимать содержание.

2.1.2 Структура папок проекта

project/
├── index.html           # Главная страница
├── css/
│   ├── variables.css    # CSS переменные для тем
│   ├── base.css         # Базовые стили
│   ├── components.css   # Стили компонентов
│   └── responsive.css   # Медиа-запросы
├── js/
│   ├── theme.js         # Логика переключения тем
│   ├── components.js    # Функциональность компонентов
│   └── analytics.js     # Отслеживание и анализ
├── assets/
│   ├── images/          # Изображения
│   ├── fonts/           # Веб-шрифты
│   └── icons/           # SVG иконки
└── README.md            # Документация проекта

2.2 CSS архитектура и переменные

2.2.1 Система CSS переменных для теминга

CSS переменные[^18] (Custom Properties) позволяют создавать гибкую систему теминга:

:root {
  /* Цветовая палитра */
  --color-primary: #0066cc;
  --color-secondary: #6b21a8;
  --color-success: #10b981;
  --color-danger: #ef4444;

  /* Нейтральные цвета */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #111827;

  /* Типография */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;

  /* Размеры */
  --size-xs: 0.5rem;
  --size-sm: 0.75rem;
  --size-md: 1rem;
  --size-lg: 1.5rem;
  --size-xl: 2rem;

  /* Тени */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Переходы */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* Светлая тема */
:root[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}

/* Темная тема */
:root[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
}

2.2.2 Использование переменных в компонентах

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  transition: background-color var(--transition-normal),
              color var(--transition-normal);
}

.card {
  background-color: var(--bg-secondary);
  box-shadow: var(--shadow-md);
  padding: var(--size-lg);
  border-radius: 0.5rem;
}

.button {
  background-color: var(--color-primary);
  color: white;
  padding: var(--size-md) var(--size-lg);
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              transform var(--transition-fast);
}

.button:hover {
  transform: translateY(-2px);
}

2.3 JavaScript инфраструктура

2.3.1 Система управления темой

/**
 * ThemeManager - управление темой оформления страницы
 * Автор: mid1977@gmail.com
 * Сайт: https://deynekin.com
 */
class ThemeManager {
  constructor() {
    this.STORAGE_KEY = 'app-theme';
    this.LIGHT_THEME = 'light';
    this.DARK_THEME = 'dark';
    this.SYSTEM_PREFERENCE = 'system';
    this.init();
  }

  /**
   * Инициализация системы управления темой
   */
  init() {
    this.loadTheme();
    this.observeSystemPreference();
    this.attachEventListeners();
  }

  /**
   * Загрузка сохраненной темы или определение системной
   */
  loadTheme() {
    const savedTheme = localStorage.getItem(this.STORAGE_KEY);

    if (savedTheme && savedTheme !== this.SYSTEM_PREFERENCE) {
      this.setTheme(savedTheme);
    } else {
      this.applySystemTheme();
    }
  }

  /**
   * Определение системной темы через Media Query
   */
  applySystemTheme() {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = isDarkMode ? this.DARK_THEME : this.LIGHT_THEME;
    this.setTheme(theme);
  }

  /**
   * Установка темы
   */
  setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem(this.STORAGE_KEY, theme);

    // Обновление метаданных для браузера
    this.updateMetaThemeColor(theme);
  }

  /**
   * Наблюдение за изменением системной темы
   */
  observeSystemPreference() {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      const theme = e.matches ? this.DARK_THEME : this.LIGHT_THEME;
      this.setTheme(theme);
    });
  }

  /**
   * Обновление цвета метатега theme-color
   */
  updateMetaThemeColor(theme) {
    const color = theme === this.DARK_THEME ? '#111827' : '#ffffff';
    let metaTheme = document.querySelector('meta[name="theme-color"]');

    if (!metaTheme) {
      metaTheme = document.createElement('meta');
      metaTheme.setAttribute('name', 'theme-color');
      document.head.appendChild(metaTheme);
    }

    metaTheme.setAttribute('content', color);
  }

  /**
   * Получение текущей темы
   */
  getCurrentTheme() {
    return document.documentElement.getAttribute('data-theme');
  }

  /**
   * Переключение темы
   */
  toggleTheme() {
    const current = this.getCurrentTheme();
    const next = current === this.LIGHT_THEME ? this.DARK_THEME : this.LIGHT_THEME;
    this.setTheme(next);

    // Отправка события об изменении темы
    window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: next } }));
  }

  /**
   * Присоединение обработчиков событий к кнопкам переключения
   */
  attachEventListeners() {
    const toggleButtons = document.querySelectorAll('[data-theme-toggle]');
    toggleButtons.forEach(btn => {
      btn.addEventListener('click', () => this.toggleTheme());
    });
  }
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
  new ThemeManager();
});

2.3.2 Обнаружение возможностей браузера

/**
 * FeatureDetection - обнаружение возможностей браузера
 * Автор: mid1977@gmail.com
 */
class FeatureDetection {
  static supportsWebP() {
    const canvas = document.createElement('canvas');
    return canvas.toDataURL('image/webp').indexOf('image/webp') === 5;
  }

  static supportsAVIF() {
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 1;
    return canvas.toDataURL('image/avif').indexOf('image/avif') === 5;
  }

  static supportsIntersectionObserver() {
    return 'IntersectionObserver' in window;
  }

  static supportsLazyLoading() {
    return 'loading' in HTMLImageElement.prototype;
  }

  static getCSSVariablesSupport() {
    const element = document.createElement('span');
    element.style.setProperty('--test', '1px');
    return element.style.getPropertyValue('--test') === '1px';
  }
}

3. Лэндинги для SaaS и B2B

3.1 Концепция и целевая аудитория

3.1.1 Определение SaaS лэндинга

SaaS лэндинги[^19] (Software as a Service) предназначены для привлечения и конвертации компаний и профессионалов, ищущих облачные решения для автоматизации бизнес-процессов. Эти лэндинги требуют глубокого объяснения технических возможностей, демонстрации ROI[^20] и укрепления доверия.

3.1.2 Целевая аудитория и их боль

Целевая аудитория SaaS лэндингов включает: IT директоров, управляющих проектов, владельцев бизнеса, операционных менеджеров. Их основные боли[^21]: неэффективные процессы, высокие операционные затраты, проблемы с масштабируемостью, недостаток интеграции между системами.

3.2 Профессиональный промт для SaaS лэндинга

3.2.1 Комплексный промт для AI-генерации

Создай HTML/CSS/JavaScript лэндинг для SaaS продукта со следующими характеристиками:

ТЕХНИЧЕСКОЕ ЗАДАНИЕ:
- Продукт: [НАЗВАНИЕ И ОПИСАНИЕ]
- Целевая аудитория: [ИТ ДИРЕКТОРА / ОПЕРАЦИОННЫЕ МЕНЕДЖЕРЫ / ПРЕДПРИНИМАТЕЛИ]
- Основная боль аудитории: [ОПИСАНИЕ ПРОБЛЕМЫ]
- Главное решение: [ЧТО РЕШАЕТ ПРОДУКТ]
- Целевое действие: [ЗАРЕГИСТРИРОВАТЬСЯ / ПОЛУЧИТЬ ДЕМО / НАЧАТЬ ПРОБНЫЙ ПЕРИОД]

СТРУКТУРА СТРАНИЦЫ:
1. Hero Section (800px высота)
   - Краткое описание ценности в 5 слов
   - Подзаголовок с описанием основной выгоды (макс 15 слов)
   - CTA кнопка + видео демонстрация (встроенное видео с превью)
   - Фоновое изображение/градиент, создающие ощущение современности

2. Problems Section
   - 3-4 основные проблемы целевой аудитории
   - Для каждой проблемы: иконка, заголовок, описание
   - Левая колонка - текст, правая - изображение/иллюстрация

3. Solution Section
   - Описание того, как продукт решает каждую проблему
   - Соответствие структуре Problems Section для когнитивного соответствия
   - Подчеркивание практических результатов и метрик

4. Features Section
   - Сетка из 6 основных функций (2 колонки, 3 ряда на мобильном - 1 колонна)
   - Для каждой: иконка, название, описание в 1-2 предложениях
   - Интерактивность: при наведении - легкая анимация, поднятие карточки

5. Benefits Section (ROI-ориентированная)
   - Три основные выгоды с метриками:
     * Увеличение производительности на [X]%
     * Снижение затрат на [Y]%
     * Сокращение времени на [Z]%
   - Большие цифры (72pt), сравнение "до/после"

6. Social Proof Section
   - Логотипы 5-7 известных компаний-клиентов
   - 3-4 отзыва в виде карточек: фото, имя, должность, компания, цитата
   - Рейтинг (5 звезд) для каждого отзыва
   - Статистика: количество пользователей, рейтинг, награды

7. Pricing Section
   - 3 плана: Стартер, Профессиональный, Корпоративный
   - Для каждого: цена, включенные функции (чек-лист), CTA кнопка
   - Подсвечивание рекомендуемого плана (Профессиональный)
   - Toggle: месячная / годовая подписка (годовая - скидка 20%)

8. FAQ Section
   - 8-10 часто задаваемых вопросов в аккордеоне
   - Категории: Общее, Цена, Интеграция, Безопасность
   - При клике: плавное раскрытие с микро-анимацией
   - Быстрый поиск по FAQ (фильтрация в реальном времени)

9. CTA Section (перед футером)
   - Заголовок: "Начните трансформацию своего бизнеса сегодня"
   - Два варианта действия: получить демо / получить консультацию
   -背景 с легким градиентом или паттерном

10. Footer
    - Навигация по основным разделам
    - Ссылки на политику конфиденциальности, условия использования
    - Контактная информация: email, телефон
    - Социальные сети (иконки ссылок)
    - Copyright

ДИЗАЙН И ИНТЕРФЕЙС:
- Цветовая палитра: основной цвет [ОСНОВНОЙ ЦВЕТ], акцентный - [АКЦЕНТНЫЙ ЦВЕТ]
- Типография: Заголовки - [ШРИФТ], Основной текст - [ШРИФТ]
- Иконки: используй Feather Icons или Font Awesome
- Пространство: обильное пространство между разделами (min 4rem), padding внутри 2-3rem

ТЕМНАЯ И СВЕТЛАЯ ТЕМА:
- Реализуй автоматическое определение системной темы через prefers-color-scheme
- Светлая тема: белый фон #ffffff, текст #111827, акценты [ОСНОВНОЙ ЦВЕТ]
- Темная тема: фон #111827, текст #f9fafb, акценты [ОСНОВНОЙ ЦВЕТ] (с регулировкой)
- Кнопка переключения в шапке (иконка луны/солнца)
- Плавный переход между темами (300ms)

ПРОИЗВОДИТЕЛЬНОСТЬ:
- Все изображения: WebP с fallback на JPG/PNG
- Ленивая загрузка изображений через loading="lazy"
- Минимальное количество внешних шрифтов (max 2)
- Сжатие CSS/JS через минификацию
- Критический CSS встроен в <head>

SEO ОПТИМИЗАЦИЯ:
- Мета-теги: title, description, og:*, twitter:*
- Schema.org разметка для SoftwareApplication
- Структурированные данные для отзывов (aggregateRating)
- Заголовки (h1, h2, h3) - правильная иерархия
- Alt-текст для всех изображений

МОБИЛЬНАЯ АДАПТИВНОСТЬ:
- Брейкпоинты: 480px, 768px, 1024px, 1440px
- Навигация: хамбургер-меню на мобильных
- Сетки: 1 колонна на мобильном, 2 на планшете, 3+ на десктопе
- Шрифты: увеличены на мобильном (базовый размер 16px)
- Touch-friendly кнопки (min 44x44px)

ИНТЕРАКТИВНОСТЬ:
- Гладкая прокрутка к якорям
- Анимация появления элементов при прокрутке (Intersection Observer)
- Микро-анимации на кнопках (scale + box-shadow)
- Плавные переходы между состояниями (300ms ease-in-out)

ДОСТУПНОСТЬ:
- ARIA-метки для интерактивных элементов
- Правильные семантические тэги (<button>, <a>, <form>)
- Контрастность текста не менее 4.5:1
- Фокусируемые элементы четко видны (outline)
- Работает на скорости 3G и старше

ФОРМА ОБРАТНОЙ СВЯЗИ:
- Минимум полей: Email, Компания, Телефон (опционально)
- Валидация в реальном времени
- CTA: "Получить демо бесплатно" / "Зарегистрироваться"
- После отправки: всплывающее окно благодарности (modal)

ДОПОЛНИТЕЛЬНО:
- Установи favicon
- Добавь Google Analytics tracking
- Реализуй отслеживание events (click, scroll, form submission)
- Добавь Yandex.Metrica если для РФ аудитории
- Обеспечь HTTPS и правильные security headers

РЕЗУЛЬТАТ:
- Одиночный HTML-файл с встроенным CSS и JS (или отдельные файлы в структуре)
- Готов к развертыванию на любом хостинге
- Код хорошо документирован и поддерживаемый
- Включи комментарии для ключевых секций

3.3 Раздел по адаптации промта

3.3.1 Варианты для разных сегментов SaaS

Для B2B платформ коллаборации:

• Акцент на интеграции и совместной работе
• Примеры использования для различных ролей (менеджер, разработчик, дизайнер)
• Демонстрация интеграций с популярными инструментами

Для финтех решений:

• Максимальный акцент на безопасность и соответствие нормативам
• Trust badges[^22] и сертификации
• Примеры калькуляторов ROI для финансовых метрик

Для аналитических платформ:

• Интерактивные диаграммы и графики
• Примеры анализа данных
• Case studies с конкретными результатами

4. Лэндинги для электронной коммерции

4.1 Специфика е-коммерс лэндингов

4.1.1 Отличия от других типов лэндингов

Лэндинги электронной коммерции[^23] имеют уникальные характеристики: необходимость отображения каталога продуктов, системы фильтрации, интеграция платежных систем, управление инвентарем, система рейтингов и отзывов, решение проблемы доверия к неизвестному продавцу.

4.1.2 Психология покупателя онлайн

Покупатели онлайн движимы несколькими ключевыми факторами: видимый социальный прогноз (рейтинги, отзывы), ощущение ценности, минимизация риска через гарантии возврата, скорость доставки, безопасность данных платежа.

4.2 Комплексный промт для E-Commerce Landing

4.2.1 Промт для каталога товаров

Создай е-коммерс лэндинг для продажи [КАТЕГОРИЯ ТОВАРА] со следующими параметрами:

ИНФОРМАЦИЯ О БИЗНЕСЕ:
- Тип товара: [ОПИСАНИЕ]
- Ценовой диапазон: от [MIN] до [MAX] [ВАЛЮТА]
- Количество товаров: [ЧИСЛО]
- Целевая география: [СТРАНА/РЕГИОН]
- Способы доставки: [СПОСОБЫ]
- Платежные системы: [СИСТЕМЫ]

МАКЕТ И СТРУКТУРА:

1. Шапка (Header)
   - Логотип слева
   - Поле поиска в центре с автодополнением
   - Корзина (с счетчиком товаров) справа
   - Уровень 2: навигация по категориям (горизонтальная)
   - На мобильном: хамбургер меню

2. Hero Section
   - Основной бaннер с ротацией (3-5 изображений)
   - Текст на баннере: выгода, скидка, сезонное предложение
   - Navigation dots для переключения слайдов
   - Таймер скидки (если ограничение по времени)

3. Featured Products Section (выше основного каталога)
   - Карусель из 6-8 самых популярных/новых товаров
   - Для мобильного: одна колонна с боковой прокруткой
   - Для планшета: 2 колонны
   - Для десктопа: 3-4 колонны
   - Кнопки навигации: предыдущий/следующий

4. Filters Sidebar (левая колонна)
   - Фильтр по категории (древовидная структура)
   - Фильтр по цене (range slider)
   - Фильтр по рейтингу (звезды)
   - Фильтр по наличию (в наличии / нет)
   - Фильтр по брендам (чек-боксы)
   - Фильтр по скидкам (чек-боксы: 0-10%, 10-30%, 30%+)
   - Кнопка "Применить фильтры"
   - Кнопка "Очистить фильтры"
   - На мобильном: collapsible accordion

5. Product Grid (основная область)
   - Адаптивная сетка: 1 колонна (мобильное), 2-3 (планшет), 3-4 (десктоп)
   - Карточка товара включает:
     * Изображение товара (с zoom при наведении на десктопе)
     * Галерея изображений (миниатюры)
     * Название товара
     * Краткое описание (1-2 строки)
     * Рейтинг (звезды) и количество отзывов
     * Цена (оригинальная зачеркнута, актуальная выделена)
     * Badge для скидки/новинки/популярное
     * Кнопка "В корзину" (меняет цвет при наведении)
     * Иконка "Добавить в избранное"
     * Быстрый просмотр (modal с деталями)

6. Sorting Options (над сеткой)
   - Dropdown: "Сортировать по" (популярности, цене, новизне, рейтингу)
   - Отображение: "Показывать X товаров на странице"
   - Кнопки вида отображения: сетка / список

7. Pagination (или infinite scroll)
   - Традиционная пагинация с номерами страниц
   - Или infinite scroll с кнопкой "Загрузить еще"

8. Product Detail Modal (Quick View)
   - Галерея изображений (большое изображение + миниатюры)
   - Информация: название, цена, рейтинг, количество отзывов
   - Выбор вариантов (размер, цвет, количество)
   - Кнопки: "В корзину", "В избранное"
   - Информация о доставке
   - Гарантия возврата
   - Кнопка "Открыть полное описание"

9. Trust Badges Section
   - Безопасность платежей (иконки)
   - Гарантия возврата
   - Быстрая доставка
   - Поддержка 24/7

10. Testimonials (отзывы)
    - Слайдер из 4-6 отзывов
    - Для каждого: фото, имя, рейтинг, текст отзыва, дата

11. Footer
    - Категории товаров
    - Информация о компании
    - Контакты
    - Социальные сети
    - Подписка на рассылку
    - Политика конфиденциальности

ФУНКЦИОНАЛЬНОСТЬ:

Фильтрация и поиск:
- Динамическая фильтрация без перезагрузки страницы (AJAX)
- URL изменяется при применении фильтров (для sharing)
- Поиск в реальном времени с подсказками
- История поиска

Корзина:
- Добавление/удаление товаров
- Изменение количества
- Персистентность (localStorage или БД)
- Сохранение корзины для авторизованных пользователей
- Расчет сумм: подитог, налоги, доставка, итого

Рейтинги и отзывы:
- Система 5-звездочного рейтинга
- Фильтр отзывов по количеству звезд
- Сортировка отзывов: новые, полезные
- Модерация отзывов перед публикацией

Рекомендации:
- "Часто покупают вместе" (на основе данных)
- "Похожие товары"
- "Вы недавно смотрели"

ДИЗАЙН:

Цветовая палитра:
- Основной цвет: [ОСНОВНОЙ] (для кнопок CTA)
- Вторичный цвет: [ВТОРИЧНЫЙ]
- Нейтральные цвета: белый, серые оттенки, черный
- Цвет успеха (зеленый): для положительных статусов
- Цвет ошибки (красный): для отрицательных статусов

Типография:
- Заголовки (h1-h3): [ШРИФТ], bold/semibold, размеры 24-48px
- Основной текст: [ШРИФТ], 14-16px
- Меньший текст (labels, hints): 12-14px

ТЕМНАЯ И СВЕТЛАЯ ТЕМА:
- Реализуй полную поддержку обеих тем
- Светлая: яркий фон, темный текст
- Темная: темный фон, светлый текст
- Изображения товаров хорошо видны в обеих темах
- Toggle в шапке страницы

ПРОИЗВОДИТЕЛЬНОСТЬ:
- Изображения: WebP + JPEG fallback
- Ленивая загрузка изображений
- Code splitting для JS
- Кэширование на браузере
- CDN для статических файлов
- Размер бандла: < 500KB для критического пути

SEO:
- Уникальные meta description для каждой категории
- Schema.org для Product, Offer, Review
- Canonical URLs
- Open Graph для социальных сетей
- Структурированные данные для rich snippets

МОБИЛЬНАЯ АДАПТИВНОСТЬ:
- Touch-friendly фильтры (larger targets)
- Быстрая загрузка на 3G
- Легко свайпить галереи изображений
- Фиксированная кнопка "В корзину" на мобильном

ИНТЕГРАЦИИ:
- Платежная система: [СИСТЕМА]
- Система доставки: [СИСТЕМА]
- CRM для отслеживания заказов
- Email marketing для рассылок

БЕЗОПАСНОСТЬ:
- SSL/HTTPS обязателен
- Валидация всех форм на серверной стороне
- Защита от CSRF[^24]
- Шифрование данных платежей
- GDPR соответствие

5. Лэндинги для генерации лидов

5.1 Объяснение и целевые метрики

5.1.1 Определение лид-генерации

Генерация лидов[^25] — это процесс привлечения и сбора информации о потенциальных клиентах для дальнейшей обработки и продажи. Ключевыми метриками являются: количество лидов, стоимость лида (CPL), процент конверсии, качество лидов.

5.1.2 Метрики успеха

• Conversion Rate: отношение числа заполненных форм к количеству посещений (целевой диапазон 2-10%)
• Cost Per Lead: стоимость привлечения одного лида через рекламу
• Lead Quality Score: определяется на этапе постпродажного анализа
• Form Completion Rate: процент пользователей, начавших заполнять форму и закончивших её

5.2 Мощный промт для лид-генерирующего лэндинга

5.2.1 Полный промт для генерации лидов

Разработай высококонвертирующий лэндинг для генерации лидов со следующими характеристиками:

СТРАТЕГИЯ И ЦЕЛИ:

Основное предложение: [ОПИСАНИЕ ПРЕДЛОЖЕНИЯ]
Целевая аудитория: [ОПИСАНИЕ АУДИТОРИИ]
Основной КПД: [КОЛИЧЕСТВО В МЕСЯЦ/СТОИМОСТЬ]
Целевой процент конверсии: [%]
Метод привлечения: [PAID TRAFFIC / ORGANIC / DIRECT]

АРХИТЕКТУРА СТРАНИЦЫ (Минималистичный подход):

1. Navigation (Миниальная)
   - Только логотип
   - На мобильном: скрыта или сворачивается при прокрутке вниз

2. Hero Section (фокус на выгоде)
   - Заголовок (h1): [ГЛАВНОЕ ПРЕДЛОЖЕНИЕ] (макс 10 слов)
   - Подзаголовок: [ОПИСАНИЕ ВЫГОДЫ] (макс 20 слов)
   - Form справа (на десктопе) или снизу (на мобильном)
   - Фоновое изображение/видео (не отвлекающее)

3. Value Proposition (3-4 основных выгоды)
   - Иконка + заголовок + краткое описание
   - Горизонтальное расположение
   - Убирается на мобильном (или переходит в вертикальное)

4. Social Proof
   - Логотипы компаний (5-7)
   - Рейтинг (⭐ 4.8 из 5)
   - Количество заполненных форм / пользователей

5. Form Section (самое важное)
   - Заголовок: "Получить [ЦЕННОСТЬ]"
   - Поля формы (минимум, максимум 5):
     * Email (обязательно)
     * Имя (опционально)
     * Компания (если B2B)
     * Телефон (для холодной связи)
     * Дополнительное поле (специфичное для вашей ниши)
   - CTA кнопка: "Да, отправить мне" / "Получить доступ"
   - Checkbox согласия с политикой конфиденциальности

6. FAQ (4-6 вопросов в accordion)
   - Адресует основные возражения
   - Быстрые ответы (1-3 предложения)

7. Testimonials (2-3 отзыва)
   - Короткие цитаты (1 предложение)
   - Фото, имя, должность
   - Результат: "Получили X лидов за Y дней"

8. Final CTA (перед footer)
   - Повторение основного предложения
   - Вторая форма (или ссылка на первую)
   - Чувство срочности ("Доступно только сегодня")

9. Footer
   - Минимум: контакты, политика конфиденциальности, социальные сети

ДИЗАЙН ФОРМЫ:

Структура формы:
- Заголовок: [ОСНОВНОЕ ПРЕДЛОЖЕНИЕ]
- Подзаголовок (опционально): [ОПИСАНИЕ, ЧТО ПОЛУЧИТ ПОЛЬЗОВАТЕЛЬ]

Поля формы (progressive disclosure):
- 1-е поле: Email (фокус по умолчанию)
- 2-е поле: Имя
- 3-е поле: Компания (если B2B) / Телефон
- 4-е поле: Опциональное специфичное поле
- Кнопка: CTA

Валидация:
- Email: проверка формата
- Имя: минимум 2 символа
- Телефон: проверка формата для страны
- При ошибке: красная подсвечивание поля, error message

Success State:
- После отправки: замена формы на success message
- Сообщение: "Спасибо! Проверьте email"
- Секундное задержка перед редиректом (если нужно)
- Или: автоматическое появление в modal

ОПТИМИЗАЦИЯ КОНВЕРСИИ:

Форма:
- Минимум полей (max 5)
- Автофокус на первом поле при загрузке
- Автозаполнение (autocomplete attributes)
- Single column layout (даже для нескольких полей)
- Кнопка на всю ширину

Психологические элементы:
- Urgency: "Осталось [X] мест"
- Social proof: "Уже [Y] человек получили"
- Benefit-driven: "Что вы получите?"
- Trust: контакты компании, время ответа, гарантии

Анимация:
- Появление полей с задержкой (stagger)
- Микро-взаимодействия при фокусе на полях
- Плавное появление success state

ТЕМНАЯ И СВЕТЛАЯ ТЕМА:
- Автоопределение через prefers-color-scheme
- Высокий контраст в обеих темах (WCAG AA)
- Form хорошо видна в обеих темах
- Background: контрастный на светлой, приглушенный на темной

МОБИЛЬНАЯ АДАПТИВНОСТЬ:
- Form в полную ширину на мобильном
- Шрифты: h1 32px, основной текст 16px
- Пространство: больше вертикальное, меньше горизонтальное
- Кнопка: высота 44px (touch-friendly)
- Области нажатия: 48x48px минимум

ПРОИЗВОДИТЕЛЬНОСТЬ:
- Размер страницы: < 100KB
- Время загрузки: < 2 сек на 3G
- Нет внешних зависимостей (или критическое встроено)
- Критический CSS встроен в <head>

SEO:
- Meta: title, description, og:*
- h1 с основным ключевым словом
- Schema.org: LandingPage, Organization
- Canonical URL

ИНТЕГРАЦИИ:

Сбор данных:
- Отправка на email: [SMTP SERVER]
- Интеграция с CRM: [НАЗВАНИЕ]
- Webhook для дополнительной обработки
- Google Analytics event tracking

Email после отправки:
- Welcome email: подтверждение, спасибо
- Lead magnet (если есть): ссылка для скачивания / доступ

ДОСТУПНОСТЬ:
- Семантические элементы (<form>, <input>, <button>)
- ARIA labels для всех input'ов
- Focus order логичен
- Ошибки четко видны и объяснены
- Работает без JavaScript (graceful degradation)

АНАЛИТИКА:
- Отслеживание: Page View
- Event: Form Start, Form Field Focus, Form Submission
- Goal: Form Submission
- Отслеживание времени на странице
- Отслеживание источника трафика

РЕЗУЛЬТАТ:
- Готовый к развертыванию HTML/CSS/JS
- Ясная структура, легко модифицировать
- Хорошо документирован для передачи другому разработчику

6. Лэндинги для мероприятий

6.1 Типы мероприятий и их специфика

6.1.1 Различные форматы мероприятий

Лэндинги для мероприятий[^26] (вебинары, конференции, семинары, воркшопы, тренинги) должны содержать четкую информацию о времени, месте, спикерах, программе и легкую регистрацию. Они часто используют скорость как аргумент продажи («осталось 20 мест») и социальное доказательство через списки спикеров.

6.1.2 Психология регистрации на события

Люди регистрируются на события, когда видят: авторитетных спикеров, четкую программу, социальное доказательство (сколько уже зарегистрировано), преимущества участия, четкую информацию о времени/месте, отсутствие скрытых платежей.

6.2 Промт для вебинара/конференции

6.2.1 Комплексный промт

Создай лэндинг для регистрации на [ВЕБИНАР / КОНФЕРЕНЦИЯ / ВОРКШОП] с параметрами:

ДЕТАЛИ СОБЫТИЯ:

Название события: [НАЗВАНИЕ]
Описание: [ОПИСАНИЕ В 2-3 ПРЕДЛОЖЕНИЯХ]
Формат: [ВЕБИНАР / ОЧНОЕ / ГИБРИДНОЕ]
Дата: [ДАТА И ВРЕМЯ]
Временная зона: [ЧАСОВОЙ ПОЯС]
Продолжительность: [ДЛИТЕЛЬНОСТЬ]
Язык: [ЯЗЫК]
Максимум участников: [ЧИСЛО] (если есть ограничение)
Стоимость: [СТОИМОСТЬ] или "Бесплатно"
Адрес (если очное): [АДРЕС]
Ссылка на трансляцию (если вебинар): [ССЫЛКА]

СПИКЕРЫ:

Для каждого спикера:
- Имя и должность
- Компания
- Фото (200x200px)
- Краткая биография (3-5 предложений)
- Социальные сети (LinkedIn, Twitter)

ПРОГРАММА:

Расписание по часам:
- [ВРЕМЯ] - [НАЗВАНИЕ СЕССИИ] - [СПИКЕР]
- [ВРЕМЯ] - [НАЗВАНИЕ СЕССИИ] - [СПИКЕР]
- ...

МАКЕТ СТРАНИЦЫ:

1. Header
   - Логотип события (или компании)
   - На мобильном: скрывается или адаптивно

2. Hero Section
   - Большой баннер с названием события
   - Подзаголовок: в чем смысл события
   - Дата, время, формат (выделены)
   - Кнопка: "Зарегистрироваться сейчас"
   - Фоновое изображение или видео (релевантное событию)

3. Event Overview
   - Основная информация в легко сканируемом формате:
     * Дата / Время
     * Формат
     * Количество мест (и сколько осталось)
     * Язык
   - Используй иконки для каждого элемента

4. Why Attend Section
   - 3-4 причины участвовать:
     * Иконка
     * Заголовок
     * Описание (2-3 предложения)
   - Визуальное выделение выгод

5. Speakers Section
   - Для каждого спикера:
     * Фото (квадратное, высокое качество)
     * Имя и должность
     * Компания
     * Краткая биография
     * Социальные сети (иконки ссылок)
   - Расположение: сетка 2-3 колонны на десктопе, 1 на мобильном
   - При клике: modal с полной биографией (опционально)

6. Agenda Section
   - Временная линия[^27] (vertical timeline)
   - Для каждого пункта:
     * Время
     * Название
     * Описание сессии (2-3 предложения)
     * Спикер (фото + имя)
   - На мобильном: горизонтальная временная линия с боковой прокруткой
   - Цветовая кодировка для разных типов сессий (keynote, workshop, break)

7. Registration Form (выделенное место)
   - Поля: Email, Имя, Фамилия, Компания (если B2B)
   - Опциональные: телефон, должность, выбор сессий (если есть)
   - Checkbox: согласие с условиями, подписка на рассылку
   - CTA: "Зарегистрироваться"

8. FAQ Section
   - Ответы на частые вопросы о событии
   - Категории: Общее, Логистика, Техническое, Возврат

9. Testimonials (от предыдущих событий)
   - Фото, имя, цитата, результат
   - Слайдер или grid

10. Social Proof
    - "Уже зарегистрировано: [X] человек"
    - Логотипы компаний участников
    - Рейтинг предыдущего события (⭐ 4.8)

11. Final CTA
    - Заголовок: "Не пропустите эту возможность"
    - Повтор даты, времени, количества оставшихся мест
    - Кнопка: "Зарегистрироваться"

12. Footer
    - Контакты организатора
    - Социальные сети
    - Политика конфиденциальности

ОСОБЕННОСТИ И ФУНКЦИОНАЛЬНОСТЬ:

Срочность (Urgency):
- Обратный отсчет до события (использовать с осторожностью, только если осталось мало времени)
- "Осталось [X] мест из [Y]"
- "Регистрация закроется [ДАТА]"
- Динамическое обновление количества мест

Напоминания:
- После регистрации: email с подтверждением
- За день до события: reminder email
- За 1 час: финальное напоминание с ссылкой
- После события: email со ссылкой на запись (если есть)

Интеграции:
- Синхронизация с Google Calendar
- Синхронизация с Outlook Calendar
- Добавление в Apple Calendar
- Ссылка на скачивание в календарь

Управление регистрацией:
- Проверка дубликатов по email
- Автоматическое заполнение данных для зарегистрированного пользователя
- Отмена регистрации (если нужна)

ДИЗАЙН:

Цветовая палитра:
- Основной цвет: [ОСНОВНОЙ] (для CTA)
- Вторичный: [ВТОРИЧНЫЙ]
- Нейтральные: белый, серые оттенки

Типография:
- Заголовки: [ШРИФТ], bold, 28-48px
- Основной текст: [ШРИФТ], regular, 16px
- Меньший текст: 14px

ТЕМНАЯ И СВЕТЛАЯ ТЕМА:
- Полная поддержка обеих тем
- Высокий контраст (WCAG AA минимум)
- Изображения спикеров хорошо видны в обеих темах

МОБИЛЬНАЯ АДАПТИВНОСТЬ:
- Полный responsive design
- Touch-friendly элементы
- Быстрая загрузка на 3G
- Форма регистрации: полная ширина, single column

ПРОИЗВОДИТЕЛЬНОСТЬ:
- Оптимизированные изображения (WebP + fallback)
- Ленивая загрузка
- Размер страницы: < 200KB
- Время загрузки: < 3 сек на 3G

SEO:
- Meta description с ключевыми словами
- Schema.org: Event + LocalBusiness (если очное)
- Open Graph теги
- Canonical URL

ДОСТУПНОСТЬ:
- Семантическая разметка
- ARIA-live для обновления "осталось мест"
- Хорошая контрастность
- Фокусируемые элементы видны

АНАЛИТИКА:
- Event tracking для важных действий
- Отслеживание источника регистрации
- Отслеживание времени на странице
- Отслеживание scroll depth

РЕЗУЛЬТАТ:
- Полностью функциональный лэндинг
- Готов к публикации
- Адаптирован под различные устройства
- Интегрирован с системой управления событиями

7. Лэндинги для контента

7.1 Цели и структура контент-лэндингов

7.1.1 Определение контент-лэндинга

Контент-лэндинги[^28] создаются для распространения ценного контента: e-books, вебинаров, шаблонов, гайдов, в обмен на контактную информацию посетителя. Эти лэндинги часто получают органический трафик из поисковых систем и служат как инструмент SEO.

7.1.2 Структура контент-лэндинга

Типичная структура включает: описание ценности контента, список того, что получит пользователь, социальные доказательства, форму регистрации, краткие сведения о авторе, соответствующие контенты.

7.2 Промт для контент-лэндинга (e-book, вебинар, шаблон)

7.2.1 Полный промт

Создай лэндинг для распространения [E-BOOK / ВЕБИНАРА / ШАБЛОНА / ГАЙДА] с параметрами:

ИНФОРМАЦИЯ О КОНТЕНТЕ:

Название контента: [НАЗВАНИЕ]
Тип контента: [E-BOOK / ВЕБИНАР / ШАБЛОН / ГАЙД / ЧЕКЛИСТ]
Описание: [ОПИСАНИЕ В 3-5 ПРЕДЛОЖЕНИЯХ]
Целевая аудитория: [ОПИСАНИЕ]
Главная выгода: [ОСНОВНАЯ ВЫГОДА]
Количество страниц / уроков: [ЧИСЛО]
Формат файла: [ФОРМАТ]
Язык: [ЯЗЫК]

СОДЕРЖАНИЕ КОНТЕНТА (для описания):

Основные разделы / уроки:
- [РАЗДЕЛ / УРОК 1]
- [РАЗДЕЛ / УРОК 2]
- [РАЗДЕЛ / УРОК 3]
- [РАЗДЕЛ / УРОК 4]
- [РАЗДЕЛ / УРОК 5]

Что получит пользователь:
- [ВЫГОДА 1]
- [ВЫГОДА 2]
- [ВЫГОДА 3]

МАКЕТ СТРАНИЦЫ:

1. Header (Минимальный)
   - Логотип
   - Возможно: навигация

2. Hero Section (Split Layout на десктопе)
   - Левая колонна (текст):
     * h1: Название контента (привлекательно сформулированное)
     * Подзаголовок: основная выгода (2-3 предложения)
     * 3-4 bullet points с основными выгодами
     * Опционально: элемент срочности ("Доступно ограниченное время")

   - Правая колонна (форма + обложка контента):
     * Обложка контента (высокое качество, макет книги / чеклист / шаблон)
     * Форма регистрации:
       - Email (обязательно)
       - Имя (опционально)
       - Компания (если B2B)
     * Кнопка: "Получить [НАЗВАНИЕ]"

   - На мобильном: вертикальное расположение, обложка сверху, затем форма

3. What's Inside Section (Содержание)
   - Для каждого основного раздела:
     * Номер / иконка
     * Название раздела
     * Краткое описание (1-2 предложения)
   - Расположение: вертикальная линия[^29] или grid
   - Интерактивность: развертывание подробностей при клике (опционально)

4. Benefits Section (Почему нужно получить)
   - 4-5 основных преимуществ контента
   - Для каждого: иконка, заголовок, описание
   - Визуализация: может быть в виде карточек

5. Social Proof
   - Количество скачиваний / просмотров
   - Средний рейтинг
   - Отзывы (2-3 цитаты с фото)
   - Логотипы компаний, которые используют / рекомендуют контент

6. FAQ Section
   - 5-7 часто задаваемых вопросов
   - Accordion или toggle формат
   - Категории: Общее, Доступ, Содержание, Использование

7. CTA Section (финальный)
   - Заголовок: мотивирующий (не просто "скачай", а "начни трансформацию")
   - Повторение основной выгоды (1-2 предложения)
   - Кнопка: "Да, дай мне [НАЗВАНИЕ]"

8. Footer
   - Контакты
   - Социальные сети
   - Политика конфиденциальности

ПСИХОЛОГИЧЕСКИЕ ЭЛЕМЕНТЫ:

Привлекательность заголовка (h1):
- Включить результат: "Как..." / "Полное руководство..."
- Включить целевую аудиторию: "Для начинающих / опытных профессионалов"
- Быть конкретным: числа, метрики, результаты
- Пример: "Полное руководство по SEO оптимизации для новичков: от теории к практике"

Создание FOMO (Fear of Missing Out)[^30]:
- "Осталось [X] мест" (если правда)
- "Промокод истекает через [ВРЕМЯ]"
- "Скоро закончим распространение бесплатно"

Демонстрация ценности:
- Показать размер: "120 страниц"
- Показать время создания: "[X] часов исследований"
- Показать автора: авторитет, опыт

ФОРМА:

Структура:
- Минимум полей: Email + Name (опционально)
- Если B2B: + Company
- При сложной регистрации: progressive profiling (несколько форм)

Текст кнопки:
- Не просто "Submit"
- Ориентирована на результат: "Скачать PDF", "Получить доступ", "Отправить мне"

Текст согласия:
- Ясно: что получит, как часто, какой контент

ДИЗАЙН:

Обложка контента:
- Размер: макет 3D обложки книги (для e-books)
- Размеры: 300x400px на веб-странице
- Включить название, автора, цитату о ценности
- Высокое качество, профессиональный дизайн

Цветовая палитра:
- Основной цвет: [ОСНОВНОЙ] (кнопка)
- Вторичный: [ВТОРИЧНЫЙ]
- Акцент для выделения: [АКЦЕНТ]

Типография:
- Заголовки: [ШРИФТ], bold/semibold, 28-48px
- Основной текст: [ШРИФТ], regular, 16px
- Меньший текст: 14px

ТЕМНАЯ И СВЕТЛАЯ ТЕМА:
- Обложка контента: инвариантна в обеих темах
- Фон страницы: адаптирован к теме
- Высокий контраст текста во всех местах

МОБИЛЬНАЯ АДАПТИВНОСТЬ:
- Обложка: полная ширина на мобильном
- Форма: полная ширина, single column
- Текст: увеличен на мобильном (16px минимум)
- Кнопка: 44x44px минимум, full width

ПРОИЗВОДИТЕЛЬНОСТЬ:
- Обложка контента: оптимизирована (WebP + fallback)
- Размер страницы: < 150KB
- Время загрузки: < 2 сек на 3G
- Ленивая загрузка изображений

SEO ОПТИМИЗАЦИЯ:

Meta description:
- Включить основное преимущество
- Включить ключевое слово
- 150-160 символов

Структурированные данные:
- Schema.org: CreativeWork + Author
- Rich snippet для рейтинга

Заголовки:
- h1: основной заголовок (только один)
- h2, h3: логичная иерархия

Текстовый контент:
- Минимум 500 слов (для SEO)
- Вхождение ключевого слова: 1-2% от текста
- Внутренние ссылки (если возможно)

ДОСТУПНОСТЬ:
- Семантические элементы
- ARIA-labels для форм
- Alt-текст для изображений
- Высокий контраст: 4.5:1 минимум

ИНТЕГРАЦИИ:

Email маркетинг:
- Добавление email в список рассылки
- Отправка welcome email с ссылкой
- Автоматизированная последовательность email

CRM:
- Создание контакта в системе
- Добавление tag'a для типа контента

Аналитика:
- Отслеживание заполнения формы
- Отслеживание конверсии
- Отслеживание источника трафика

Результат:
- Готовый лэндинг
- Хорошо оптимизирован для SEO
- Интегрирован с email маркетингом
- Адаптирован для всех устройств

8. Оптимизация производительности

8.1 Core Web Vitals[^31] и метрики производительности

8.1.1 Что такое Core Web Vitals

Core Web Vitals — это набор метрик, разработанных Google для измерения качества пользовательского опыта веб-страницы. Они включают:

• LCP (Largest Contentful Paint): время, за которое на странице отображается наибольший элемент контента. Цель: < 2.5 сек
• FID (First Input Delay): время от пользовательского взаимодействия до ответа браузера. Цель: < 100 мс
• CLS (Cumulative Layout Shift): мера неожиданного смещения содержимого на странице. Цель: < 0.1

8.1.2 Дополнительные метрики

• TTFB (Time to First Byte): время до получения первого байта данных
• FCP (First Contentful Paint): время до отображения первого контента
• SI (Speed Index): среднее время, за которое видимые части страницы становятся интерактивными

8.2 Техники оптимизации

8.2.1 Оптимизация изображений

/* Использование picture элемента для разных форматов */
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

/* Ленивая загрузка */
<img src="image.jpg" loading="lazy" alt="Description">

/* CSS для адаптивных изображений */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Предотвращает CLS */
  object-fit: cover;
}

8.2.2 Критический CSS

<!-- Встроить критический CSS в <head> -->
<style>
  /* Только стили, необходимые для отображения Above the Fold */
  body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
  .hero { background: linear-gradient(...); }
  .button { padding: 0.75rem 1.5rem; background: #0066cc; color: white; }
</style>

<!-- Отложенная загрузка остального CSS -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

8.2.3 Оптимизация JavaScript

// Код-разделение: загрузка JS только когда нужен
if (document.querySelector('[data-theme-toggle]')) {
  import('./theme.js').then(module => {
    new module.ThemeManager();
  });
}

// Отложенная загрузка некритического JS
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    import('./analytics.js');
  });
} else {
  setTimeout(() => {
    import('./analytics.js');
  }, 2000);
}

// Минификация встроенного JS
const minifyJS = code => code.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '').trim();

8.2.4 Стратегии кэширования

<!-- Service Worker для кэширования -->
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}
</script>

<!-- Cache headers в .htaccess (Apache) -->
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 month"
  ExpiresByType image/webp "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 week"
</IfModule>

9. SEO и структурированные данные

9.1 Основы SEO для лэндингов

9.1.1 Ключевые элементы на странице

Мета-теги: Title (50-60 символов), Description (150-160 символов), Keywords (устаревший, но может использоваться)

Структура заголовков: h1 (один на странице), h2 (основные разделы), h3 (подразделы)

Альтернативные тексты изображений: описание должно быть релевантным, содержать ключевые слова где это уместно

Якорные текст внутренних ссылок: должны быть описательными, содержать ключевые слова

Мобильная оптимизация: мобильный-первый индекс[^32] — страница должна хорошо выглядеть на мобильных

9.2 Schema.org разметка

9.2.1 Основные типы Schema для лэндингов

<!-- Schema для посадочной страницы SaaS -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Название приложения",
  "description": "Описание приложения",
  "url": "https://example.com",
  "applicationCategory": "BusinessApplication",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "1500"
  },
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
}
</script>

<!-- Schema для отзывов -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Review",
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "5"
  },
  "author": {
    "@type": "Person",
    "name": "Имя автора"
  },
  "reviewBody": "Текст отзыва"
}
</script>

<!-- Schema для организации -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Название компании",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "Customer Service",
    "telephone": "+1-800-123-4567",
    "email": "support@example.com"
  }
}
</script>

9.2.2 Проверка Schema разметки

• Google Rich Results Test: https://search.google.com/test/rich-results
• Schema.org Validator: https://validator.schema.org/

10. Темная и светлая тема

10.1 Реализация автоопределения темы

10.1.1 CSS Media Query для определения темы

/* Светлая тема (по умолчанию) */
:root {
  --bg-primary: #ffffff;
  --text-primary: #111827;
  --color-primary: #0066cc;
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --text-primary: #f9fafb;
    --color-primary: #3b82f6;
  }
}

/* Применение переменных */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

10.1.2 JavaScript для отслеживания изменений темы

/**
 * Отслеживание изменения системной темы в реальном времени
 * Автор: mid1977@gmail.com
 */
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');

darkModeQuery.addEventListener('change', (e) => {
  const isDarkMode = e.matches;
  document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');

  // Отправить событие для других частей приложения
  window.dispatchEvent(new CustomEvent('themechange', { 
    detail: { isDark: isDarkMode } 
  }));
});

10.1.3 Проверка поддержки темной темы

/* Использование light-dark() функции (современный подход) */
:root {
  --bg: light-dark(white, #111827);
  --text: light-dark(#111827, white);
}

/* Fallback для старых браузеров */
body {
  background-color: var(--bg, #ffffff);
  color: var(--text, #111827);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111827;
    color: #f9fafb;
  }
}

10.2 Тестирование темной темы

// Тестирование темной темы без системных настроек
const fakeMediaQuery = () => ({
  matches: true,
  media: '(prefers-color-scheme: dark)',
  onchange: null,
  addListener: () => {},
  removeListener: () => {},
  addEventListener: () => {},
  removeEventListener: () => {},
  dispatchEvent: () => {}
});

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: fakeMediaQuery
});

11. Психология конверсии

11.1 Ключевые психологические принципы

11.1.1 Принцип социального доказательства[^33]

Люди склонны верить информации, которую видят у других людей. На лэндингах это проявляется через:

• Отзывы и рейтинги: показывают, что другие люди доверяют вашему продукту
• Логотипы известных клиентов: создают впечатление авторитета и надежности
• Счетчики: «уже 10,000 человек используют наше решение»
• Видео отзывы: более убедительны, чем текстовые, так как содержат личный контакт

11.1.2 Принцип срочности и дефицита

Люди совершают действия быстрее, когда понимают, что возможность ограничена во времени или количестве:

• Обратный отсчет: «Акция заканчивается через 2 часа»
• Ограниченное количество мест: «Осталось только 5 мест из 100»
• Ограниченное предложение: «Доступно только в этом месяце»

Важно: используйте эти принципы честно, не создавайте искусственную срочность

11.1.3 Принцип якоря (Anchoring Effect)

Первая информация, которую видит человек, становится якорем для его решений. На лэндингах:

• Первое число в ценовом предложении: если показать высокую цену первой, последующие снижения будут казаться хорошей сделкой
• Заголовок: первый заголовок задает тон всей страницы

11.1.4 Принцип взаимности

Когда кто-то дает нам что-то, мы естественным образом хотим отдать в ответ. Применение:

• Бесплатные инструменты: калькуляторы, чек-листы, шаблоны
• Бесплатная консультация: предложение первичной помощи без обязательств
• Lead magnet: бесплатный контент в обмен на email

11.2 Копирайтинг для лэндингов

11.2.1 Формула AIDA[^34]

A — Attention (Внимание): привлечение внимания через заголовок и визуальные элементы

❌ Плохо: "Программное обеспечение для управления задачами"
✅ Хорошо: "Завершите в 2 раза больше задач за то же время"

I — Interest (Интерес): создание интереса через описание преимуществ

❌ Плохо: "Наше приложение имеет 50 функций"
✅ Хорошо: "Автоматизируйте рутинные задачи и сосредоточьтесь на стратегических решениях"

D — Desire (Желание): создание желания через демонстрацию результатов и социального доказательства

❌ Плохо: "Люди используют нашу платформу"
✅ Хорошо: "5,000+ компаний экономят в среднем 10 часов в неделю"

A — Action (Действие): четкое призывание к действию

❌ Плохо: "Узнать больше"
✅ Хорошо: "Начать бесплатный пробный период на 14 дней"

11.2.2 Формула PAS[^35]

P — Problem (Проблема): описание боли целевой аудитории

A — Agitation (Волнение): углубление проблемы, показ ее последствий

S — Solution (Решение): представление вашего решения как ответа

Пример:

P: "Ежедневно вы теряете часы, переходя между разными приложениями для управления проектами"

A: "Это означает потерю продуктивности, увеличение стресса у команды, пропуск важных сроков и потенциальную потерю клиентов"

S: "Наша платформа объединяет все необходимое в одном месте, позволяя вашей команде сосредоточиться на работе, а не на инструментах"

11.3 Цвет и его психологическое воздействие

Глоссарий

[^1]: Лэндинг (Landing Page) — веб-страница, на которую попадает пользователь после клика на ссылку. Предназначена для выполнения конкретного действия: регистрации, покупки, скачивания.

[^2]: Промт (Prompt) — указание или инструкция для системы искусственного интеллекта, описывающее, что нужно создать или сделать.

[^3]: Лэндинг генерации лидов (Lead Generation Landing Page) — страница, предназначенная для сбора контактной информации потенциальных клиентов через заполнение формы.

[^4]: Трение (Friction) — препятствие или сложность, которую испытывает пользователь при выполнении действия. Минимизация трения увеличивает конверсию.

[^5]: Социальное доказательство (Social Proof) — психологический принцип, когда люди верят информации, потому что другие люди ей верят. Примеры: отзывы, рейтинги, логотипы клиентов.

[^6]: Призыв к действию (CTA — Call To Action) — элемент на странице, который побуждает пользователя совершить определенное действие: кликнуть, заполнить форму, купить.

[^7]: Интерактивные элементы (Interactive Elements) — элементы страницы, с которыми пользователь может взаимодействовать: кнопки, формы, слайдеры, аккордеоны.

[^8]: Срочность (Urgency) — психологический принцип, побуждающий людей действовать быстро, создавая ощущение ограничения по времени.

[^9]: Дефицит (Scarcity) — психологический принцип, когда люди воспринимают ограниченное количество товара/услуги как более ценное.

[^10]: Целевая аудитория (Target Audience) — группа людей, на которых направлена маркетинговая кампания или продукт.

[^11]: Интерфейс (Interface) — средство взаимодействия пользователя с системой, включающее расположение элементов, навигацию, формы.

[^12]: Оптимизация производительности (Performance Optimization) — процесс улучшения скорости загрузки и отзывчивости веб-страницы.

[^13]: Кроссбраузерная совместимость (Cross-browser Compatibility) — способность веб-страницы корректно работать во всех популярных браузерах.

[^14]: A/B тестирование (A/B Testing) — метод сравнения двух версий страницы (A и B) путем показа их разным пользователям для определения, какая из них лучше.

[^15]: Семантическая разметка (Semantic Markup) — использование HTML элементов, которые передают смысл содержания, а не только его внешний вид.

[^16]: Доступность (Accessibility) — способность веб-сайта быть использованным людьми с ограничениями, включая слепых, глухих, с моторными нарушениями.

[^17]: Экранная читалка (Screen Reader) — программное обеспечение, которое читает вслух текст на экране для слепых и слабовидящих пользователей.

[^18]: CSS переменные (Custom Properties) — способ определения значений в CSS, которые можно переиспользовать и динамически изменять через JavaScript.

[^19]: SaaS (Software as a Service) — модель доставки программного обеспечения как онлайн-услуги, обычно на основе подписки.

[^20]: ROI (Return On Investment) — возврат инвестиций, показатель эффективности инвестиций в виде отношения прибыли к затратам.

[^21]: Боли (Pain Points) — проблемы, потребности или трудности, которые испытывает целевая аудитория.

[^22]: Trust Badge — элемент на сайте, который повышает доверие пользователя: сертификаты, награды, печати безопасности.

[^23]: Электронная коммерция (E-commerce) — покупка и продажа товаров через интернет.

[^24]: CSRF (Cross-Site Request Forgery) — тип атаки, когда злоумышленник заставляет пользователя выполнить действие без его ведома.

[^25]: Генерация лидов (Lead Generation) — процесс привлечения и сбора информации о потенциальных клиентах.

[^26]: Мероприятия (Events) — вебинары, конференции, семинары, воркшопы, тренинги и другие сборки людей.

[^27]: Временная линия (Timeline) — визуальное представление последовательности событий во времени.

[^28]: Контент-лэндинг (Content Landing Page) — страница для распространения ценного контента (e-books, вебинары, шаблоны) в обмен на контактную информацию.

[^29]: Вертикальная линия — графический элемент, соединяющий элементы в вертикальном расположении.

[^30]: FOMO (Fear of Missing Out) — страх упустить возможность, психологический принцип, который побуждает людей действовать быстро.

[^31]: Core Web Vitals — набор метрик Google для измерения качества пользовательского опыта веб-страницы.

[^32]: Мобильный-первый индекс (Mobile-First Index) — приоритизация мобильной версии сайта при индексировании и ранжировании в поисковых системах.

[^33]: Принцип социального доказательства — психологический принцип, когда люди склонны верить и действовать так, как действуют другие люди.

[^34]: Формула AIDA — маркетинговая модель: Attention (внимание) → Interest (интерес) → Desire (желание) → Action (действие).

[^35]: Формула PAS — копирайтинговая формула: Problem (проблема) → Agitation (волнение) → Solution (решение).

Заключение

Данная документация представляет собой полный справочник по разработке современных, быстрых, красивых и SEO-оптимизированных лэндингов с поддержкой темной и светлой тем. Используя предоставленные промты, разработчики и маркетологи могут создавать высокоэффективные страницы, адаптированные под различные целевые аудитории и типы кампаний.

Ключевые принципы успеха:

1. Минимализм в дизайне — каждый элемент должен иметь цель
2. Четкая иерархия информации — важнейшая информация должна быть видна первой
3. Психологическая оптимизация — использование принципов психологии для увеличения конверсии
4. Техническое совершенство — оптимизация производительности и доступности
5. Адаптивность — полная поддержка всех устройств и тем оформления

Помните, что лучший лэндинг — это не красивый или трендовый дизайн, а результат ориентированного подхода, фокусирующегося на конверсии и пользовательском опыте.

Автор документации: mid1977@gmail.com
Сайт: https://deynekin.com
Дата: November 2025
Версия: 1.0