medcenterphysio: apply the v3 design and add the callback dialog

v3 differs from legacy/new only by the callback dialog; the new phone
number was already in the React landing.

The header «Звонок» button opens the «Перезвоним вам» dialog from the
fitness landing (name, phone, consent), ported the same way as in
medcenterstart: the phone field keeps this landing's +7 mask and refuses
fewer than 11 digits, as the mockup does. The server accepts form
'callback', names the deal «Обратный звонок — <имя>» and tags it
«обратный звонок». The phone link inside the dialog and the call button
in the mobile action bar still report a call click.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Yuriy Panov
2026-09-11 23:46:16 +06:00
co-authored by Claude Opus 5
parent cbf253c573
commit 23986ff5ad
11 changed files with 299 additions and 32 deletions
+15 -4
View File
@@ -62,18 +62,25 @@ npm run amo:check
email дописывается в карточку.
2. Если контакта нет — создаётся новый с именем, телефоном и email.
3. Создаётся сделка в воронке `AMO_PIPELINE_ID`, в её **первом этапе**,
с тегами `AMO_LEAD_TAGS` + тег `заявка с сайта`.
с тегами `AMO_LEAD_TAGS` + тег формы (`заявка с сайта` / `обратный звонок`).
4. Данные, для которых в аккаунте есть подходящее поле (компания, состояние
кабинета, профиль, `utm_*` и т.д.), пишутся в поля; всё остальное — в
примечание к сделке. Ничего настраивать в amoCRM заранее не нужно.
Форм две. Основная — блок заявки внизу страницы: обязательны имя и телефон;
сделка называется `Физиотерапия — <центр или имя>`. Вторая — модальное окно
«Перезвоним вам», его открывает кнопка «Звонок» в шапке (то же окно, что на
фитнес-лендинге): имя, телефон и согласие на обработку данных. Без 11 цифр
номера форма не отправляется. Сделка называется `Обратный звонок — <имя>`, в
поле или примечании «Форма» — «Быстрый обратный звонок».
Если amoCRM недоступна, заявка **не теряется**: она пишется в лог сервера
(`[lead] payload was: …`) и сохраняется в `localStorage` браузера, а посетитель
видит телефон для связи.
### 4. Что происходит при клике на телефон
Кнопка звонка (в шапке и в нижней мобильной панели) помимо набора номера отправляет
Ссылка с номером (в окне «Перезвоним вам» и кнопка звонка в нижней мобильной панели) помимо набора номера отправляет
`POST /api/leads/medical-centers-existing-physio/call` — маячком `navigator.sendBeacon`, чтобы
запрос пережил переход браузера на `tel:`.
@@ -107,14 +114,18 @@ index.html точка входа Vite (meta, Open Graph, JSON-LD)
src/
components/ секции лендинга и UI-примитивы
data/content.ts весь текстовый контент страницы
hooks/useReveal.ts анимация появления секций при скролле
hooks/ появление секций при скролле, блокировка прокрутки и
Escape для модального окна
lib/ отправка заявки, маска телефона
assets/images/ 12 изображений, извлечённых из исходного 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/new/ макет с калькулятором
legacy/v3/ макет v3 — текущий визуальный эталон (legacy/new + окно
обратного звонка и новый номер)
```
### Дизайн-система