fitnes: apply the Fitness v2 design

Ports legacy/Fitnes v2 into the React landing.

- Copy: nav is now Экономика / Оборудование / Программы / Интерьер, every
  CTA reads «Получить консультацию», the hero has one button, a new label
  and new facts.
- Calculator: the average check defaults to 2 500 ₽, and a new investment
  field drives payback and 12-month ROI. Adds the ЭкзоКлиник source note
  and a new disclaimer.
- Constructor: «Состав оборудования», indications on the device cards. The
  CTA stays live with fewer than three devices picked, and the copy points
  to a consultation instead.
- «Юридическая рамка» is replaced by «Форматы размещения» (12 / 24 / 36 м²).
- Lead form: city and club format are dropped; company and email are
  optional. The server schema already treats them as optional.
- Section headings share one compact scale (headingScale + a `slim`
  640px variant), as in the design's v7 rule.

Deliberately kept from the current site rather than the mockup: the
+7 927 789-60-71 number and the callback modal behind the header call
button, both newer than the design.

With Inter substituted into the mockup (it ships no font and falls back to
Arial), every section height matches at 900 and 1440 px. At 375 px the
hero is 6 px shorter because of the existing fluid h1 on phones.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Yuriy Panov
2026-09-11 18:37:03 +06:00
co-authored by Claude Opus 5
parent 8af2e463b3
commit 432284eefb
16 changed files with 166 additions and 127 deletions
+18 -4
View File
@@ -113,7 +113,8 @@ src/
shared/lead.ts схема заявки (zod), общая для клиента и сервера
server/src/ Express API + клиент amoCRM
scripts/amo-check.ts диагностика подключения к amoCRM
legacy/index.html исходный однофайловый лендинг (визуальный эталон)
legacy/index.html исходный однофайловый лендинг (первая версия дизайна)
legacy/Fitnes v2/ макет Fitness v2 — текущий визуальный эталон
```
### Дизайн-система
@@ -122,10 +123,17 @@ legacy/index.html исходный однофайловый лендинг (
`@theme` внутри `src/index.css`. Палитра Tailwind по умолчанию отключена
(`--color-*: initial`), поэтому в разметке доступны только цвета EXO.
Брейкпоинты соответствуют исходной вёрстке: `sm` 640, `md` 900, `lg` 1120, плюс
`max-width`-варианты `narrow` (760), `phone` (520), `compact` (680), `tiny` (480).
`max-width`-варианты `narrow` (760), `slim` (640), `phone` (520), `compact` (680),
`tiny` (480).
Вёрстка совпадает с `legacy/index.html` попиксельно: высоты всех секций и общая
высота страницы идентичны на 375 / 480 / 640 / 900 / 1120 / 1440 px.
Визуальный эталон — макет `legacy/Fitnes v2/`. Сам макет Inter не подключает и
рисуется системным шрифтом, поэтому сверять его с сайтом нужно, подставив в него
Inter Variable. На одном шрифте высоты всех секций и общая высота страницы
совпадают на 900 и 1440 px; на 375 px hero ниже на 6 px, потому что на телефонах
h1 масштабируется (`clamp(34px, 11.3vw, 44px)`), а в макете стоит фиксированные 44 px.
Намеренные отличия от макета: телефон +7 927 789-60-71 (в макете старый номер),
кнопка «Звонок» в шапке открывает модальное окно «Перезвоним вам», а не `tel:`.
### Шрифты
@@ -157,6 +165,12 @@ Inter подключён локально пакетом `@fontsource-variable/i
`оплаченные программы в день × средний чек × рабочие дни = выручка в месяц`.
Средний чек по умолчанию — 2 500 ₽ (данные «ЭкзоКлиник», Тольятти). Если указаны
инвестиции в запуск, считаются ещё два показателя, оба без операционных расходов:
* срок возврата = инвестиции ÷ выручка в месяц;
* ROI за 12 месяцев = (выручка в месяц × 12 − инвестиции) ÷ инвестиции.
---
## Известные особенности