From 432284eefb06e0ccc091568881361dd9b8ff528b Mon Sep 17 00:00:00 2001 From: Yuriy Panov Date: Fri, 11 Sep 2026 18:37:03 +0600 Subject: [PATCH] fitnes: apply the Fitness v2 design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- fitnes/README.md | 22 +++++-- fitnes/src/components/ConstructorSection.tsx | 23 +++----- fitnes/src/components/EconomicsSection.tsx | 60 +++++++++++++++++--- fitnes/src/components/FormField.tsx | 18 ------ fitnes/src/components/Hero.tsx | 11 +--- fitnes/src/components/Layout.tsx | 11 +++- fitnes/src/components/LeadForm.tsx | 36 +++--------- fitnes/src/components/MobileCta.tsx | 2 +- fitnes/src/components/RequestSection.tsx | 4 +- fitnes/src/components/SiteHeader.tsx | 2 +- fitnes/src/components/WhyExoSection.tsx | 18 +++--- fitnes/src/data/content.ts | 30 +++++----- fitnes/src/data/devices.ts | 17 ++++-- fitnes/src/hooks/useConstructor.ts | 31 ++++++---- fitnes/src/index.css | 3 + fitnes/src/lib/format.ts | 5 ++ 16 files changed, 166 insertions(+), 127 deletions(-) diff --git a/fitnes/README.md b/fitnes/README.md index 6b32a60..018beff 100644 --- a/fitnes/README.md +++ b/fitnes/README.md @@ -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 − инвестиции) ÷ инвестиции. + --- ## Известные особенности diff --git a/fitnes/src/components/ConstructorSection.tsx b/fitnes/src/components/ConstructorSection.tsx index 9fff8e0..1538f70 100644 --- a/fitnes/src/components/ConstructorSection.tsx +++ b/fitnes/src/components/ConstructorSection.tsx @@ -43,9 +43,6 @@ export function ConstructorSection({
-

- Нажмите на аппараты — справа изменится состав и логика зоны. -

@@ -71,7 +68,7 @@ export function ConstructorSection({
-

Состав зоны

+

Состав оборудования

{state.hint}

@@ -115,7 +112,12 @@ export function ConstructorSection({ className="mb-[5px] h-[84px] w-full object-contain drop-shadow-[0_12px_20px_rgb(0_0_0/0.24)] phone:h-[76px]" /> {device.name} - {device.caption} + + {device.caption} + + {device.indications} + + ) })} @@ -190,15 +192,8 @@ export function ConstructorSection({
- - Получить эту конфигурацию + + Получить консультацию diff --git a/fitnes/src/components/MobileCta.tsx b/fitnes/src/components/MobileCta.tsx index 0a74b4e..0dd502b 100644 --- a/fitnes/src/components/MobileCta.tsx +++ b/fitnes/src/components/MobileCta.tsx @@ -12,7 +12,7 @@ export function MobileCta({ show, onCallbackClick }: { show: boolean; onCallback )} > - Получить конфигурацию + Получить консультацию