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:
co-authored by
Claude Opus 5
parent
7ce8bee320
commit
1ee5431b92
+29
-18
@@ -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г..» → «2025–2026 гг.».
|
||||
* Модальное окно «Перезвоним вам» взято с фитнес-лендинга (светлые поля,
|
||||
согласие отдельным чекбоксом), а не вёрстка `.exo-callback` из макета; маски
|
||||
телефона, как и на фитнесе, нет. Тексты окна — из макета.
|
||||
|
||||
### Шрифты
|
||||
|
||||
|
||||
Reference in New Issue
Block a user