# Промт: Лендинг Möbel&Zeit — тёмная премиум-версия
## Задача
Создай одностраничный лендинг для бренда диванов **Möbel&Zeit** в тёмной премиум-эстетике.
Стек: React 18 + Babel standalone (JSX в браузере), чистый CSS, без сборщиков.
---
## Бренд и контент
**Название:** Möbel&Zeit
**Позиционирование:** «Высокая мода» в мебельной инженерии. Диваны 5-го поколения с режимом Zero Gravity.
**Телефон:** 8 804 555-10-46 (tel:+78045551046)
**Telegram:** https://t.me/Mobelzeit_sale
**MAX (мессенджер):** https://max.ru/u/f9LHodD0cOLrGjtdGvd4gpV_ilQWyu1QALtqY8MeCFnLuARq7hEpnpkJMEU
**Юрлицо:** ООО «Кардиналис» · ИНН 9724122835
---
## Структура страницы (сверху вниз)
### 1. Шапка (Header) — fixed
- Слева: логотип `möbel&zeit` — блок с красным фоном (#d10a09), белый текст, шрифт Manrope 800, `&` — тонким начертанием. Рядом — тег «Высокая мода в мебельной инженерии» (мелко, приглушённо).
- Справа: иконки соцсетей (Telegram SVG + MAX — фирменная иконка-спираль, SVG-круг с дыркой), телефон крупным шрифтом.
- Под шапкой — анимированная светящаяся линия: красная подложка + золотой блик, который бежит по линии слева направо каждые 5.5 с (keyframes hlineSweep).
- При скролле шапка становится матово-прозрачной с backdrop-filter blur(24px).
- Золотой ореол (header-aura): фиксированный radial-gradient сверху страницы, чуть светится.
### 2. Hero
- **Сетка:** 2 колонки — текст слева (0.92fr), фото дивана справа (1.08fr).
- **Заголовок h1:** «Диваны 5-го поколения с режимом ZERO GRAVITY» — Manrope 800, uppercase, font-size clamp(32px, 3.6vw, 52px), золотой градиент (от #fbf1da до #b08a3f), shimmer-анимация при появлении.
- **Eyebrow:** «Коллекция 2026 · Ограниченная партия» — заглавными, 12px, золотой, с горизонтальной черточкой слева.
- **Лид:** «Идеально для больших гостиных и домашних кинотеатров. От 450 000 ₽.» — `От 450 000 ₽` выделен gold-bright.
- **Заметка:** «До 30 июня дарим 100 000 ₽ сертификат при встрече в шоуруме. Только 10 бонусов в месяц.» — с левым золотым бордером.
- **CTA строка:** красная кнопка «Подобрать диван» (крупная, 27px padding, shimmer sweep при hover) + индикатор «Остаётся сертификатов: N» с пульсирующей красной точкой. Счётчик: первый визит = 3, через 90 секунд — меняется на 2, кукис сохраняет состояние.
- **Фото дивана:** с 3D-tilt эффектом при движении мыши (perspective rotateX/Y + параллакс ореола). Тонкая золотая рамка. Ореол — radial-gradient золото, анимация breathe (scale 1→1.06, 7s infinite).
### 3. Триплет (3 карточки преимуществ)
Карточки в ряд, вариант «minimal»: без фона, только верхняя золотая черта, большие иконки 48px.
| № | Заголовок | Акцент | Текст |
|---|-----------|--------|-------|
| 01 | Комфорт | 5-го поколения | Мягкость индивидуально адаптируется под вас. Комфортно сидеть, отдыхать и спать — посадка меняется от лёгкого прикосновения. |
| 02 | Сертификат на | 100 000 ₽ | Дизайнер встретит вас в шоуруме. 100 000 ₽ зачтём в стоимость дивана по акции до 30 июня. Число сертификатов ограничено. |
| 03 | Ограниченная | партия | Собрано вручную в России, кожа специальной выделки. Каждый диван уникален — повтора не будет. |
Иконки — SVG-линейная графика (strokeWidth 1.35): диван с ножками (01), лента-бант (02), ромб со стрелками (03).
Hover: карточка поднимается -6px, spotlight следует за курсором (CSS custom props --mx/--my + radial-gradient).
### 4. Видео-секция (второй экран)
- **Сетка:** 1.25fr видео | 0.75fr текст, выровнены по центру.
- **Видео-плеер:** превью-изображение + кнопка Play (красная, пульсирует). При клике — iframe kinescope: `https://kinescope.io/embed/sbpWXFVHmdQSjdf3FZ1JmC?autoplay=1`. Подпись снизу слева: «Моментальное восстановление формы».
- **Текст:**
- Eyebrow: «Смотрите вживую»
- H2: «Через экран можно передать всё, но не **ощущения**» (слово «ощущения» gold-bright)
- Абзац: «Идеальный диван — это когда детали восхищают при любом приближении. Наши дизайнеры помогут подобрать и органично вписать диван Möbel&Zeit в ваш интерьер.»
- Кнопка: «Подобрать диван» (красная, меньше чем hero CTA)
### 5. Подвал (Footer)
Два блока в flex row:
- **Левый:** логотип + абзац «Высокая мода в мебельной инженерии. Диваны нового поколения с режимом Zero Gravity, собранные вручную.»
- **Правый (выровнен вправо):** телефон крупно → копирайт «© 2026 Möbel&zeit · ООО «Кардиналис» · ИНН 9724122835» → ссылка «Политика обработки персональных данных»
- Ниже — разделитель и два абзаца мелкого юридического дисклеймера (11.5px, приглушённый):
> *Акции и скидки, указанные на сайте, не являются публичной офертой. Условия акций и скидок, а также сроки их проведения могут быть изменены в одностороннем порядке без предварительного уведомления.*
> *Вся предоставленная на сайте информация о товаре, касающаяся внешнего вида, характеристик, габаритных размеров и т. д., в том числе цена товара, носит информационный характер и ни при каких условиях не является публичной офертой.*
---
## Дизайн-система
### Цвета (CSS переменные)
```css
--bg: #0c0a07; /* основной фон */
--bg-2: #110e09;
--bg-3: #17120b;
--bg-card: #120e08;
--ink: #f3ece0; /* основной текст */
--ink-2: #b7ac99; /* вторичный */
--ink-3: #877d6c; /* третичный */
--gold: #d8b275;
--gold-bright: #f2dca8;
--gold-deep: #b08a3f;
--gold-line: rgba(216,178,117,.22);
--gold-line-2: rgba(216,178,117,.40);
--gold-glow: rgba(216,178,117,.55);
--red: #d10a09;
--red-deep: #a90707;
```
### Шрифты
```
Manrope (400/600/700/800) — display: заголовки, кнопки, цифры
Onest (400/500/600/700) — body: основной текст
```
Подключать через Google Fonts.
### Анимации
- **Reveal:** элементы появляются снизу (translateY 22px → 0, opacity 0→1, 0.8s ease-out). Управляется IntersectionObserver + класс `html.anim` (добавляется через двойной rAF при загрузке).
- **Reveal-mask:** clip-path inset(0 0 100% 0) → inset(0 0 0 0) — для медиа.
- **Hero h1 shine:** при появлении — одиночный brightness/drop-shadow sweep.
- **Halo breathe:** scale 1→1.06, 7s infinite ease-in-out.
- **Header line sweep:** золотой блик по красной линии, 5.5s, translateX(-120% → 360%).
- **Play pulse:** box-shadow пульс на кнопке воспроизведения, 2.6s.
- **CTA dot:** пульс красной точки, 2s.
- Все анимации уважают `prefers-reduced-motion: reduce`.
### Кнопки
- **btn-red** (основная CTA): красный градиент (#e84040 → #d10a09 → #960000 → #6a0000), большой padding (27px 66px для hero), shimmer sweep при hover, тень 0 22px 60px -18px rgba(209,10,9,.9).
- **btn-ghost**: прозрачный фон, 1px золотая обводка inset.
- Arrow SVG справа внутри кнопки, translateX(5px) при hover.
### Tweaks-панель
Инлайновые твики через useTweaks:
- **header**: aura / line / off
- **halo**: warm / spot / off
- **triplet**: glass / outline / minimal
- **button**: red / outline / glow
- **glow** (слайдер 0–140%): управляет --halo и --hglow
---
## Технические требования
### Файловая структура
```
index.html — точка входа
premium.css — все стили
premium-app.jsx — React-компоненты (Header, Hero, Triplet, VideoBand, Footer, App)
tweaks-panel.jsx — стартовый компонент TweaksPanel
assets/img/
sofa-grey-wide.png — фото дивана в hero
relax-topdown.jpg — превью для видео-секции
```
### HTML (index.html)
```html
Möbel&Zeit — Диваны 5-го поколения с режимом Zero Gravity
```
data-атрибуты на `` управляют всеми CSS-вариантами — не менять их через JS напрямую, только через Tweaks → useEffect → `document.body.dataset`.
### Прочее
- `scrollToId(id)` — плавный скролл с учётом высоты шапки (-70px).
- `.wrap` — ширина 80%, max-width 1600px, auto margin.
- Фото дивана: `aspect-ratio: 3/2.55`, object-fit cover.
- Видео-iframe: `aspect-ratio: 16/9`.
- Счётчик сертификатов хранится в cookie `mz_v` (60 дней), меняется через setTimeout(90000).
---
## Что делать с картинками
Если грузишь на хостинг как один файл — конвертируй JPG/PNG в base64 и помести в отдельный `img-data.js` (plain JS, не через Babel). В JSX ссылайся: `src={(window.__imgData?.['sofa-grey-wide.png'])||'assets/img/sofa-grey-wide.png'}`. Подключай ` 