hotel: apply the v7 design and add the callback dialog

Ports legacy/hotel v7 into the React landing.

- Copy: nav is Экономика / Для гостя / Интерьер / Сервис, and «Интерьер»
  now comes before «Сервис». The hero keeps one button and gets the
  2 500 ₽ / 600 000 ₽ / 7,2 млн ₽ facts. New headings and leads for the
  interior, service and request blocks. Session lengths 10–15 and 30–60
  min, area 12–36 m².
- Calculator counts sessions and gains the ЭкзоКлиник benchmark and a
  «Получить консультацию» button.
- Request form: company and email are optional. The server schema
  already treats them as optional.
- v8 phone type scale (≤620px), a 380px `micro` step, and a `slim`
  (≤640px) variant. The max-width variants are now declared widest first,
  so the narrower one wins where two apply.
- The market charts' SVGs stay inline, as in the mockup.

The header «Звонок» button opens the «Перезвоним вам» dialog from the
fitness landing (name, phone, consent). The server accepts form
'callback', names the deal «Обратный звонок — <имя>» and tags it
«обратный звонок». The phone link inside the dialog still reports a call
click.

With Inter substituted into the mockup, the page text matches it line for
line (except the fixed «2025–2026 гг.» typo), and every section height
matches at 360–1440 px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Yuriy Panov
2026-09-11 19:00:20 +06:00
co-authored by Claude Opus 5
parent 7ce8bee320
commit 1ee5431b92
21 changed files with 454 additions and 109 deletions
+29 -18
View File
@@ -67,18 +67,26 @@ npm run amo:check
email дописывается в карточку.
2. Если контакта нет — создаётся новый с именем, телефоном и email.
3. Создаётся сделка в воронке `AMO_PIPELINE_ID`, в её **первом этапе**,
с тегами `AMO_LEAD_TAGS` + тег `заявка с сайта`.
с тегами `AMO_LEAD_TAGS` + тег формы (`заявка с сайта` / `обратный звонок`).
4. Данные, для которых в аккаунте есть подходящее поле (отель, комментарий,
`utm_*` и т.д.), пишутся в поля; всё остальное — в примечание к сделке.
Ничего настраивать в amoCRM заранее не нужно.
Форм две. Основная — блок «Следующий шаг» внизу страницы: обязательны только
имя и телефон, отель, email и комментарий по желанию; сделка называется
`ЭкзоОтель — <отель или имя>`. Вторая — модальное окно «Перезвоним вам», его
открывает кнопка «Звонок» в шапке (то же окно, что на фитнес-лендинге): имя,
телефон и согласие на обработку данных. Сделка называется
`Обратный звонок — <имя>`, в поле или примечании «Форма» — «Быстрый обратный
звонок».
Если amoCRM недоступна, заявка **не теряется**: она пишется в лог сервера
(`[lead] payload was: …`) и сохраняется в `localStorage` браузера, а посетитель
видит телефон для связи.
### 4. Что происходит при клике на телефон
Кнопка звонка (в шапке) помимо набора номера отправляет
Ссылка с номером в модальном окне «Перезвоним вам» помимо набора номера отправляет
`POST /api/leads/hotels/call` — маячком `navigator.sendBeacon`, чтобы
запрос пережил переход браузера на `tel:`.
@@ -112,14 +120,15 @@ index.html точка входа Vite (meta, Open Graph, JSON-LD)
src/
components/ секции лендинга и UI-примитивы
data/content.ts весь текстовый контент страницы
hooks/ useReveal, useScrolled, useAnchorScroll
hooks/ useReveal, useScrolled, useAnchorScroll, useBodyLock, useEscapeKey
lib/ отправка заявки, форматирование чисел
assets/images/ 11 изображений, извлечённых из исходного HTML
index.css дизайн-токены Tailwind v4 (@theme) и базовые стили
shared/lead.ts схема заявки (zod), общая для клиента и сервера
server/src/ Express API + клиент amoCRM
scripts/amo-check.ts диагностика подключения к amoCRM
legacy/index.html исходный однофайловый лендинг (визуальный эталон)
legacy/index.html исходный однофайловый лендинг (первая версия дизайна)
legacy/hotel v7/ макет v7 — текущий визуальный эталон
public/ favicon.png и og-image.jpg
```
@@ -129,30 +138,32 @@ public/ favicon.png и og-image.jpg
`@theme` внутри `src/index.css`. Палитра Tailwind по умолчанию отключена
(`--color-*: initial`), поэтому в разметке доступны только цвета EXO.
Брейкпоинты соответствуют исходной вёрстке: `sm` 640, `md` 900, плюс
`max-width`-варианты `tiny` (430), `phone` (480), `compact` (620),
`narrow` (780).
`max-width`-варианты `narrow` (780), `slim` (640), `compact` (620), `phone` (480),
`tiny` (430), `micro` (380). Tailwind выводит пользовательские варианты в порядке
объявления, поэтому они объявлены от широкого к узкому: где действуют два,
побеждает более узкий — как в каскаде макета.
Ряды карточек (выгоды, гости, оборудование, сценарии, программы) до 900px
скроллятся по горизонтали со snap, выше — становятся сеткой. Это единственный
крупный кусок вёрстки, оставшийся классом (`.scroll-cards` в `index.css`):
`grid-auto-columns` не выражается утилитами, а сам ряд используется пять раз.
### Соответствие исходной вёрстке
### Соответствие макету
Текст страницы совпадает с `legacy/index.html` строка в строку (проверено
диффом `innerText`), высоты секций — в пределах 0,6% на 375 и 1440 px.
Расхождения дают метрики настоящего Inter: исходная страница просила Inter, но
нигде его не подключала и рисовалась системным фолбэком.
Визуальный эталон — макет `legacy/hotel v7/`. Сам макет Inter не подключает и
рисуется системным шрифтом, поэтому сверять его с сайтом нужно, подставив в него
Inter Variable. На одном шрифте текст страницы совпадает с макетом строка в строку
(дифф `innerText`), а высоты всех секций и общая высота страницы — попиксельно на
360 / 375 / 430 / 480 / 620 / 640 / 780 / 900 / 1120 / 1440 px.
Три отличия сделаны намеренно:
Намеренные отличия от макета:
* `.eyebrow` и `.lead` в блоке заявки исходно оставались тёмными
(`#008F84` и `#60778B`) на тёмно-синем фоне — контраст 3,4–3,8:1. Здесь они
светлые, как в остальных тёмных секциях.
* На экранах ≤430px значение в карточке hero-факта («4 аппарата», «1 оператор»)
не помещалось в колонку 80px и наезжало на подпись. Колонка расширена до
124px.
* `.eyebrow` в блоке заявки в макете остаётся тёмным (`#008F84`) на тёмно-синем
фоне. Здесь он светлый, как в остальных тёмных секциях.
* В подписи к рыночному блоку исправлена опечатка «2025–2026г..» → «20252026 гг.».
* Модальное окно «Перезвоним вам» взято с фитнес-лендинга (светлые поля,
согласие отдельным чекбоксом), а не вёрстка `.exo-callback` из макета; маски
телефона, как и на фитнесе, нет. Тексты окна — из макета.
### Шрифты