{label}
{value}
diff --git a/hotel/src/components/Button.tsx b/hotel/src/components/Button.tsx
index 228fd7a..7b321af 100644
--- a/hotel/src/components/Button.tsx
+++ b/hotel/src/components/Button.tsx
@@ -18,7 +18,7 @@ const base =
const defaultSize = 'min-h-[52px] px-[22px]'
/** `.btn--header` — smaller, and never stretched to the full width on phones. */
-export const headerSize = 'min-h-[44px] px-[17px] text-[13px] tiny:w-auto'
+export const headerSize = 'min-h-[44px] px-[17px] text-[13px] tiny:w-auto micro:px-[13px] micro:text-[12px]'
const variants: Record = {
primary:
diff --git a/hotel/src/components/CallbackModal.tsx b/hotel/src/components/CallbackModal.tsx
new file mode 100644
index 0000000..d69f75f
--- /dev/null
+++ b/hotel/src/components/CallbackModal.tsx
@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useRef, useState, type FormEvent } from 'react'
+import { contacts } from '../data/content'
+import { useBodyLock } from '../hooks/useBodyLock'
+import { useEscapeKey } from '../hooks/useEscapeKey'
+import { reportCallClick, submitLead } from '../lib/lead'
+import { cx } from '../lib/cx'
+import { Button } from './Button'
+import { ConsentCheckbox, Honeypot, TextField } from './FormField'
+import { ArrowRightIcon } from './Icons'
+
+type Status = { text: string; tone: 'idle' | 'success' | 'error' }
+
+/**
+ * Compact second entry point: name + phone only. Leads land in the same
+ * amoCRM pipeline, tagged so they can be told apart from the full request.
+ * Same dialog as the fitness landing's.
+ */
+export function CallbackModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+ const formRef = useRef(null)
+ const firstFieldRef = useRef(null)
+ const [name, setName] = useState('')
+ const [phone, setPhone] = useState('')
+ const [consent, setConsent] = useState(false)
+ const [honeypot, setHoneypot] = useState('')
+ const [pending, setPending] = useState(false)
+ const [status, setStatus] = useState({ text: '', tone: 'idle' })
+
+ const close = useCallback(() => onClose(), [onClose])
+ useBodyLock(open)
+ useEscapeKey(open, close)
+
+ useEffect(() => {
+ if (open) firstFieldRef.current?.focus()
+ }, [open])
+
+ if (!open) return null
+
+ async function onSubmit(event: FormEvent) {
+ event.preventDefault()
+ const form = formRef.current
+ if (!form) return
+
+ if (!form.checkValidity()) {
+ form.reportValidity()
+ setStatus({ text: 'Проверьте обязательные поля и согласие.', tone: 'error' })
+ return
+ }
+
+ if (honeypot) return
+
+ setPending(true)
+ setStatus({ text: '', tone: 'idle' })
+
+ const result = await submitLead('callback', { name, phone, website: honeypot })
+
+ if (result.ok) {
+ setName('')
+ setPhone('')
+ setConsent(false)
+ setStatus({ text: 'Спасибо. Мы перезвоним в ближайшее рабочее время.', tone: 'success' })
+ } else {
+ setStatus({ text: result.error ?? 'Не удалось отправить заявку.', tone: 'error' })
+ }
+
+ setPending(false)
+ }
+
+ return (
+
+
@@ -179,7 +181,7 @@ function RevenueCalculator() {
{
+ if (event.target === event.currentTarget) close()
+ }}
+ className="fixed inset-0 z-100 flex items-center justify-center bg-[#020D16]/[0.92] p-[18px] backdrop-blur-[10px]"
+ >
+
+ )
+}
diff --git a/hotel/src/components/EconomicsSection.tsx b/hotel/src/components/EconomicsSection.tsx
index bbb979a..93ccf25 100644
--- a/hotel/src/components/EconomicsSection.tsx
+++ b/hotel/src/components/EconomicsSection.tsx
@@ -3,6 +3,8 @@ import { econGain, econLoss, econMetrics, econOps } from '../data/content'
import { useReveal } from '../hooks/useReveal'
import { formatMoney, formatNumber, parseAmount } from '../lib/format'
import { cx } from '../lib/cx'
+import { ButtonLink } from './Button'
+import { ArrowRightIcon } from './Icons'
import { Container, Section } from './Layout'
const panelItem = 'grid grid-cols-[34px_1fr] items-start gap-[11px] rounded-[16px] p-[13px]'
@@ -27,7 +29,7 @@ export function EconomicsSection() {
Экономика текущего гостевого потока
-
+
+
+
+ + Перезвоним вам +
++ Оставьте имя и телефон — наш специалист свяжется с вами и ответит на вопросы. Или позвоните сами:{' '} + + {contacts.phone} + + . +
+ + +
+
Номер уже продан. Следующая выручка — внутри маршрута гостя
@@ -171,7 +173,7 @@ function RevenueCalculator() { Посчитайте дополнительную выручку на своих тарифах
- Введите фактическое число оплаченных программ, средний чек и рабочие дни. + Введите фактическое число оплаченных сеансов, средний чек сеанса и рабочие дни.
+
+ Ориентир для расчёта
+
+
+
+ + Средний чек сеанса составляет 2 500 ₽, + по данным нашей клиники «ЭкзоКлиник» в городе Тольятти за период 2025г.–2026г. +
+ + Средний чек сеанса может меняться в зависимости от региона и сезонных предложений. + +
+
+ Получить консультацию
+
+
+
Сценарный калькулятор, а не финансовая гарантия. CAPEX, ФОТ, налоги, расходники, тарифы и фактическая загрузка
рассчитываются после аудита отеля.
diff --git a/hotel/src/components/EquipmentSection.tsx b/hotel/src/components/EquipmentSection.tsx
index 23ce2bc..1c16262 100644
--- a/hotel/src/components/EquipmentSection.tsx
+++ b/hotel/src/components/EquipmentSection.tsx
@@ -18,9 +18,9 @@ export function EquipmentSection() {
diff --git a/hotel/src/components/FormField.tsx b/hotel/src/components/FormField.tsx
index 5d696d8..c2de930 100644
--- a/hotel/src/components/FormField.tsx
+++ b/hotel/src/components/FormField.tsx
@@ -1,16 +1,44 @@
import type { ComponentPropsWithRef, ReactNode } from 'react'
import { cx } from '../lib/cx'
-/** Glass controls on the navy CTA panel. */
-const controlClass =
- 'w-full rounded-[14px] border border-white/[0.18] bg-[#041624]/[0.44] text-white outline-none ' +
- 'transition-[border-color,box-shadow,background-color] duration-200 placeholder:text-white/[0.34] ' +
- 'focus:border-teal focus:bg-[#041624]/[0.62] focus:shadow-[0_0_0_4px_rgb(0_196_180/0.13)]'
+/**
+ * `glass` — controls on the navy CTA panel; `light` — on the white callback
+ * dialog, the same fields as the fitness landing's.
+ */
+type Tone = 'glass' | 'light'
-function Field({ id, label, full, children }: { id: string; label: string; full?: boolean; children: ReactNode }) {
+const controlClass: Record = {
+ glass:
+ 'w-full rounded-[14px] border border-white/[0.18] bg-[#041624]/[0.44] px-[15px] text-white outline-none ' +
+ 'transition-[border-color,box-shadow,background-color] duration-200 placeholder:text-white/[0.34] ' +
+ 'focus:border-teal focus:bg-[#041624]/[0.62] focus:shadow-[0_0_0_4px_rgb(0_196_180/0.13)]',
+ light:
+ 'w-full rounded-[15px] border border-navy/15 bg-field px-[15px] py-[14px] text-ink outline-none ' +
+ 'transition-[border-color,box-shadow,background-color] duration-200 ' +
+ 'focus:border-teal focus:bg-white focus:shadow-[0_0_0_4px_rgb(0_196_180/0.10)]',
+}
+
+const labelClass: Record = {
+ glass: 'text-[12px] font-[680] text-white/[0.74]',
+ light: 'text-[11px] font-extrabold text-muted',
+}
+
+function Field({
+ id,
+ label,
+ full,
+ tone,
+ children,
+}: {
+ id: string
+ label: string
+ full?: boolean
+ tone: Tone
+ children: ReactNode
+}) {
return (
-