Convert medical-centre landing to React + Tailwind v4 with amoCRM lead capture

Ports the single-file MedCsFiz page — the medical centre that already runs
physiotherapy and wants the existing room to earn more — to the same
architecture as the fitness and hotel landings: Vite + React 19 + TypeScript +
Tailwind v4 on the client, Express 5 for the API, zod schema shared between the
two.

The original stays in legacy/index.html as the visual reference. Its 4 MB of
inlined CSS, JS and base64 images become 12 asset files (664 KB) plus a bundle
loaded on demand; the two 1.5 MB / 750 KB device PNGs are recompressed to webp.
The page is split into 18 components with all copy moved to src/data/content.ts.

Leads reuse the fitness amoCRM integration: contact lookup by phone in every
Russian spelling, deal in the first stage of pipeline 10980758, account fields
matched automatically with the rest written to a note. Rate limit, honeypot and
a localStorage fallback so a lead survives the CRM being down. Endpoint is
/api/leads/medical-centers-existing-physio; Vite runs on 5173 and the API on
3000.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

medcenter/src/components/LaunchSection.tsx

@@ -0,0 +1,76 @@
+import { formats, timeline } from '../data/content'
+import { useReveal } from '../hooks/useReveal'
+import { cx } from '../lib/cx'
+import { Container, Section, SectionHead, SmallNote } from './Layout'
+
+export function LaunchSection() {
+  const grid = useReveal<HTMLDivElement>()
+  const steps = useReveal<HTMLDivElement>()
+
+  return (
+    <Section id="launch" tone="white">
+      <Container>
+        <SectionHead
+          split
+          eyebrow="Три модели усиления"
+          title="Можно начать точечно — без длительного закрытия кабинета"
+          lead="Формат определяется после аудита оборудования, расписания и клинических пробелов. Расширение происходит только после того, как пилот подтверждает назначения, загрузку, результат и экономику."
+        />
+
+        <div
+          ref={grid.ref}
+          className={cx('scroll-cards auto-cols-[minmax(255px,82%)] gap-[12px] sm:grid-still sm:grid-cols-3', grid.revealClass)}
+        >
+          {formats.map((format) => (
+            <article
+              key={format.area}
+              className="relative overflow-hidden rounded-[22px] border border-navy/[0.12] bg-white p-[24px]"
+            >
+              <span
+                aria-hidden="true"
+                className="absolute -top-[30px] -right-[30px] size-[110px] rounded-full bg-teal/[0.08]"
+              />
+              <span className="mb-[9px] block text-[clamp(36px,5vw,52px)] leading-none font-[850] tracking-[-0.055em] text-navy">
+                {format.area}
+              </span>
+              <h3 className="text-[20px]">{format.title}</h3>
+              <p className="text-[14px] text-muted">{format.text}</p>
+            </article>
+          ))}
+        </div>
+
+        <SmallNote className="mt-[16px]">
+          Финальная конфигурация определяется по техническому состоянию аппаратов, документации, площади, лицензии,
+          штату, потоку пациентов и текущей загрузке.
+        </SmallNote>
+
+        <h3 className="mt-[30px] mb-[38px] text-[clamp(24px,3vw,34px)] font-[850] tracking-[-0.03em] text-navy">
+          Пошаговый план модернизации кабинета за 8 недель
+        </h3>
+
+        <div
+          ref={steps.ref}
+          className={cx('scroll-cards auto-cols-[minmax(320px,90%)] gap-[14px] md:grid-still md:grid-cols-2', steps.revealClass)}
+        >
+          {timeline.map((step) => (
+            <article key={step.week} className="rounded-[20px] border border-teal/[0.16] bg-ice px-[20px] py-[22px]">
+              <span className="mb-[8px] block text-[12px] font-black tracking-[0.11em] text-teal-ink uppercase">
+                {step.week}
+              </span>
+              <strong className="mb-[10px] block text-[18px] leading-[1.2] text-navy">{step.title}</strong>
+              <span className="mb-[14px] block text-[13px] leading-[1.55] text-muted italic">{step.lead}</span>
+              <ul className="grid list-disc gap-[8px] pl-[18px] text-[13px] leading-[1.55] text-muted">
+                {step.items.map((item) => (
+                  <li key={item.title}>
+                    <strong className="inline text-[13px] text-navy">{item.title}</strong>
+                    {'text' in item && item.text ? `: ${item.text}` : null}
+                  </li>
+                ))}
+              </ul>
+            </article>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  )
+}