# Handoff: Лендинг SENDPUSH

## Overview
Промо-лендинг сервиса SENDPUSH — каскадной отправки сервисных уведомлений в мессенджеры (MAX, Telegram, WhatsApp) с финальным шагом SMS. Подключается к любому продукту через API. Задача страницы — объяснить каскадную модель, показать API, тарифы и привести пользователя к регистрации на https://app.sendpush.ru.

## About the Design Files
Файлы в этом пакете — **дизайн-референсы в HTML** (прототип, показывающий предполагаемый вид и поведение), а не production-код для прямого копирования. Задача: **воссоздать этот дизайн в целевой кодовой базе** (React, Vue, и т.д.) с использованием её паттернов и библиотек. Если окружения ещё нет — выбрать подходящий фреймворк (для лендинга достаточно статического Next.js/Astro или чистого HTML/CSS/JS) и реализовать дизайн там.

Референс: `SENDPUSH Landing v2.dc.html` — одностраничный файл; вся разметка внутри тега `<x-dc>` (шаблон с инлайн-стилями), логика — в классе `Component` в конце файла. Синтаксис `{{ path }}` — подстановки значений из `renderVals()`; `<sc-for>`/`<sc-if>` — циклы/условия; `style-hover` — hover-стили.

## Fidelity
**High-fidelity (hifi)**: финальные цвета, типографика, отступы, копирайтинг и анимации. Воссоздавать пиксель-в-пиксель.

## Design Tokens

### Цвета
- Фон страницы: `#fbfcfb`; карточки/секции-альтернативы: `#fff`
- Тёмные поверхности (тарифная карточка «Доступ к сервису», CTA-секция): `#101815`; код-окно: `#0b120e`
- Текст основной: `#15201a`; вторичный: `#5c6d64`; приглушённый: `#7e948a`, `#8fa196`
- Текст на тёмном: `#f2f6f3`; вторичный на тёмном: `#a9bfb2`; код: `#cdd9d2`
- Акцент (зелёный): `oklch(0.65 0.18 155)`; hover/тёмный акцент: `oklch(0.55 0.16 155)`; ссылки: `oklch(0.55 0.16 155)`, hover `oklch(0.45 0.16 155)`
- Второй градиентный оттенок (заголовок hero): `oklch(0.6 0.16 200)`
- Границы: `#e6ebe8` (карточки), `#d6ded9` (кнопки-аутлайн)
- Статус «не доставлено»: `#b08d3e`

### Типографика
- Заголовки и текст: **Onest** (Google Fonts), веса 400–900
- Моно (бейджи, статусы, код, шаги): **JetBrains Mono**, 400–600
- H1: 56px/1.06, вес 900, letter-spacing −0.025em
- H2: 38px, вес 900, letter-spacing −0.02em
- H3 карточек: 19px, вес 700
- Body: 15–18px, line-height 1.6
- Мелкий моно: 12–13px

### Прочее
- Радиусы: кнопки 10–14px, карточки 16–20px, бейджи 999px
- Тень акцентной кнопки: `0 8px 28px oklch(0.65 0.18 155 / 0.4)`, hover `0 14px 36px / 0.5` + `translateY(-2px)`
- Тень hover-карточек: `0 16px 40px rgba(21,32,26,0.08)`
- Контейнер: max-width 1140px, паддинги секций 96px по вертикали, 24px по горизонтали

## Screens / Views (одна страница, секции сверху вниз)

### 1. Header (sticky)
- 64px высотой, `rgba(251,252,251,0.8)` + `backdrop-filter: blur(14px)`, нижняя граница `#e6ebe8`
- Слева: лого — квадрат 28px, радиус 8px, акцентный фон, белая «S» + «SENDPUSH» 17px/800
- Центр: нав-ссылки «Как работает» (#how), «API» (#api), «Тарифы» (#pricing), 14.5px/500
- Справа: «Войти» (аутлайн) и «Попробовать» (тёмная #15201a, hover — акцент) — **обе ведут на https://app.sendpush.ru**

### 2. Hero
- Грид 1.1fr/0.9fr, gap 64px, паддинг 92px сверху / 100px снизу
- Два размытых «глоу»-пятна на фоне (акцент и сине-зелёный, blur 90–100px), медленно дрейфуют (keyframes floatGlow 14s/18s)
- Бейдж: пилюля с мигающей точкой (blink 1.6s) и моно-текстом «каскадная доставка уведомлений»
- H1: «Уведомления, которые доходят всегда» — «доходят всегда» с анимированным градиентом (background-clip:text, shimmer 5s)
- Подзаголовок (verbatim): «Подключай SENDPUSH к своему бизнесу и отправляй уведомления о заказах, статусах бронирования и благодарности за визит — в мессенджеры, а если не доставилось, автоматически в SMS.»
- CTA: «Подключить бесплатно» (акцентная, → https://app.sendpush.ru) и «Документация API» (аутлайн, → #api)
- Под кнопками моно-факты: «99.2% доставляемость», «подключение за 1 день»
- Все элементы появляются каскадом fadeUp с задержками 0/.1/.2/.3/.4s

### 3. Анимированная демонстрация каскада (правая колонка hero)
- Три карточки каналов: Telegram («мгновенно и бесплатно для клиента»), WhatsApp («второй канал каскада»), SMS («финальный гарантированный канал»); между ними вертикальные пульсирующие линии-стрелки
- Каждая карточка: иконка-квадрат 38px с моно-глифом (TG/WA/SMS), название 15px/700, подпись 13px, статус справа моно 12px
- **Циклическая анимация** (таймер 1400мс, 6 фаз): TG «отправка…» → «не доставлено» → WA «отправка…» → «не доставлено» → SMS «отправка…» → «✓ доставлено», затем цикл заново
  - sending: акцентная рамка, лёгкая тень, scale(1.03), статус акцентным
  - failed: обычная карточка, статус `#b08d3e`
  - delivered: фон `oklch(0.65 0.18 155 / 0.08)`, акцентная рамка/иконка, scale(1.03)
  - Переходы: transition .5s на background/border/shadow/transform
- Подпись снизу (моно): «каскад: следующий канал — только если не доставлено»

### 4. Лента каналов (marquee)
- Белая полоса с бегущей строкой: «MAX · Telegram · WhatsApp · SMS» (повтор ×6), точки-разделители акцентного цвета, анимация translateX(0→−50%) 22s linear infinite

### 5. «Как работает каскад» (#how)
- H2 + лид: «Вы задаёте порядок каналов один раз. SENDPUSH сам пробует каждый канал по очереди и останавливается на первом доставленном — вы платите только за фактическую отправку.»
- 3 карточки (грид 3 колонки, gap 24px), каждая: моно-номер шага акцентом, заголовок, текст:
  1. «Настройте порядок каналов» — «Выберите, куда писать сначала: MAX, Telegram или WhatsApp. SMS — как надёжный финальный шаг.»
  2. «Отправьте через API» — «Один HTTP-запрос из вашей CRM, магазина или системы бронирования. Или используйте готовые интеграции.»
  3. «Получите статус доставки» — «Вебхук сообщит, каким каналом доставлено сообщение. Платите только за сработавший канал.»
- Hover: translateY(−6px) + тень

### 6. «Что отправлять»
- 3 карточки с примерами сообщений (пример оформлен как «пузырь» с радиусом 14/14/14/4 и акцентной полупрозрачной рамкой):
  1. «Статусы заказов» — «Заказ принят, собран, передан курьеру, доставлен — клиент всегда в курсе без звонков в поддержку.» Пример: «Ваш заказ №4812 передан курьеру. Ожидайте сегодня с 18:00 до 20:00»
  2. «Бронирования» — «Подтверждения, напоминания и изменения брони — меньше неявок и отмен в последний момент.» Пример: «Напоминаем: столик на 4 персоны завтра в 19:00. Подтвердите бронь»
  3. «Благодарность за визит» — «Тёплое сообщение после заказа или посещения повышает возвращаемость и собирает отзывы.» Пример: «Спасибо за визит! Будем рады видеть вас снова — вот промокод на 10%»

### 7. API (#api)
- Грид 0.9fr/1.1fr: слева H2 «API для любого продукта», текст «Один запрос — и уведомление уходит по каскаду. Подключается к CRM, интернет-магазину, системе бронирования или собственному бэкенду.» и 3 пункта с акцентными галочками:
  - REST API и вебхуки о статусах доставки
  - Шаблоны сообщений с переменными
  - Готовые библиотеки и подробная документация
- Справа тёмное код-окно (#0b120e, три «светофорные» точки #3a4b42, тень `0 24px 60px rgba(11,18,14,0.25)`) с примером:
```
POST /v1/send
{
  "to": "+7 900 000-00-00",
  "cascade": ["max", "telegram", "whatsapp", "sms"],
  "template": "order_status",
  "vars": { "order": "№4812", "status": "передан курьеру" }
}
```

### 8. Тарифы (#pricing)
- H2 «Тарифы» + лид «Простая формула: доступ к сервису + оплата только за нужные каналы.» (по центру)
- 3 карточки:
  1. **Доступ к сервису** — 1 000 ₽/мес, «за организацию», тёмная карточка (#101815). Фичи: Каскадные отправки; REST API и вебхуки; Шаблоны с переменными; Статистика доставляемости
  2. **Каналы мессенджеров** — 900 ₽/мес, «за каждый канал: MAX, WhatsApp, Telegram». Фичи: Подключайте только нужные; Безлимит сообщений в канале; Включение и отключение в любой месяц
  3. **SMS** — от 9,5 ₽, «за сообщение, по ценам оператора». Фичи: Без абонентской платы за канал; Оплата только за отправленные; Финальный шаг каскада
- Подпись: «Пример: организация с Telegram и WhatsApp — 1 000 ₽ + 2 × 900 ₽ = 2 800 ₽ в месяц, плюс SMS по факту отправки.»

### 9. CTA (#cta)
- Тёмная секция #101815 с акцентным глоу-пятном сверху по центру
- H2 «Подключите SENDPUSH к своему бизнесу», текст «Первые 500 уведомлений — бесплатно. Поможем с интеграцией и настройкой каскада.»
- Кнопка «Попробовать бесплатно» → https://app.sendpush.ru

### 10. Footer
- Светлый, верхняя граница; слева «SENDPUSH» 700, центр — ссылки «Документация» (#api), «Тарифы» (#pricing), «Личный кабинет» (https://app.sendpush.ru), справа «© 2026 SENDPUSH»

## Interactions & Behavior
- Все кнопки регистрации/входа → **https://app.sendpush.ru**; якорные ссылки — плавный скролл к секциям
- Scroll-reveal: элементы с `[data-reveal]` появляются fadeUp (opacity 0→1, translateY 28px→0, .7s ease) при входе в вьюпорт (IntersectionObserver, threshold 0.15). **Обязателен fallback**: если IO не сработал за ~1.5с — показать всё принудительно (страница не должна оставаться пустой)
- Каскад-демо: state-машина из 6 фаз, интервал 1400мс, бесконечный цикл (описано в секции 3)
- Hover-эффекты карточек и кнопок — см. Design Tokens
- Уважать `prefers-reduced-motion`: отключать marquee, glow, shimmer, каскадные fadeUp (в прототипе не реализовано — добавить в production)

## State Management
- `phase: number (0–5)` — фаза анимации каскада, тикает setInterval 1400мс
- Reveal-состояние секций (IO + fallback-таймер)
- Данных с сервера нет; форм нет

## Responsive (в прототипе не реализовано — требуется в production)
Прототип свёрстан под десктоп (контейнер 1140px). Для мобильных: грид hero и API → одна колонка; карточки 3→1; H1 56→36px; header — свернуть нав в меню.

## Assets
Внешних ассетов нет. Шрифты — Google Fonts: Onest (400–900), JetBrains Mono (400–600). Лого — текст + квадрат с буквой «S» (заменить на реальный логотип при наличии).

## Files
- `SENDPUSH Landing v2.dc.html` — hifi-прототип целиком (разметка + логика анимаций)
- `support.js` — рантайм прототипа; должен лежать рядом с HTML, чтобы прототип открывался в браузере локально

## Совместимость
- Цвета акцентов заданы в `oklch()`. Для старых браузеров добавить hex-фолбэки (объявлять hex первым, oklch — следом). Приблизительные эквиваленты:
  - `oklch(0.65 0.18 155)` ≈ `#2fbf71`
  - `oklch(0.55 0.16 155)` ≈ `#199d5c`
  - `oklch(0.45 0.16 155)` ≈ `#0e7a45`
  - `oklch(0.6 0.16 200)` ≈ `#0aa3b5`
- `prefers-reduced-motion: reduce` обязателен в production: отключить marquee, glow-дрейф, shimmer и авто-цикл каскада (показать финальное состояние «SMS доставлено» статично), scroll-reveal — без транзиций.