Yuriy PanovandClaude Opus 5
432284eefb
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>
56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
import { ctaChecklist } from '../data/content'
|
|
import { useReveal } from '../hooks/useReveal'
|
|
import { cx } from '../lib/cx'
|
|
import { CheckIcon } from './Icons'
|
|
import { Container, Label, Section, headingScale } from './Layout'
|
|
import { LeadForm } from './LeadForm'
|
|
|
|
export function RequestSection({ configuration, commentPrefill }: { configuration: string; commentPrefill: string }) {
|
|
const { ref, revealClass } = useReveal<HTMLDivElement>()
|
|
|
|
return (
|
|
<Section id="request" tone="white">
|
|
<Container>
|
|
<div
|
|
ref={ref}
|
|
className={cx(
|
|
'relative isolate overflow-hidden rounded-[38px] bg-[linear-gradient(135deg,#0A2540,#061B2F)] text-white shadow-deep',
|
|
revealClass,
|
|
)}
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute -top-[190px] -right-[180px] -z-1 size-[470px] rounded-full bg-teal/[0.28] blur-[95px]"
|
|
/>
|
|
|
|
<div className="grid md:grid-cols-[1.03fr_0.97fr]">
|
|
<div className="p-[clamp(28px,5vw,58px)]">
|
|
<Label>Персональная конфигурация</Label>
|
|
<h2 className={cx('mb-[20px] max-w-[680px]', headingScale)}>
|
|
Подберем индивидуальный комплект оборудования точно под формат вашего клуба.
|
|
</h2>
|
|
<p className="max-w-[610px] text-[16px] text-[#B6C9D4]">
|
|
Оставьте контакты — проведём первичный аудит потока и площади, предложим состав оборудования, формат
|
|
размещения и визуальную концепцию.
|
|
</p>
|
|
|
|
<div className="mt-[27px] grid gap-[10px]">
|
|
{ctaChecklist.map((item) => (
|
|
<div key={item} className="grid grid-cols-[24px_1fr] items-center gap-[9px] text-[13px] text-[#D7E4EB]">
|
|
<i className="grid size-[23px] place-items-center rounded-full bg-teal/[0.15] text-teal [&>svg]:size-[13px]">
|
|
<CheckIcon />
|
|
</i>
|
|
<span>{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<LeadForm configuration={configuration} commentPrefill={commentPrefill} />
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
)
|
|
}
|