Yuriy PanovandClaude Opus 5
0732aa2096
Rename the two medcenter landings to their audience names: medcenter -> medcenterphysio, medcenterpersonal -> medcenterstart. Alongside the rename: - add a RevenueCalculator section to both landings; - rework the copy and figures in src/data/content.ts; - simplify the lead form: drop the "cabinet_state" and "profile" selects (along with SelectField and the matching fields in shared/lead.ts, lead-mapper.ts and amo-check.ts) and make company and email optional; - add the legacy/new static prototypes for both landings; - add pnpm-lock.yaml to medcenterstart (package-lock.json is still there too). deploy/apps.conf and deploy/README.md still refer to the old directory names and need a follow-up. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
import { devices, equipmentNote } from '../data/content'
|
|
import { useReveal } from '../hooks/useReveal'
|
|
import { cx } from '../lib/cx'
|
|
import { CheckIcon } from './Icons'
|
|
import { Container, Section, SectionHead } from './Layout'
|
|
import { Rail } from './Rail'
|
|
|
|
/**
|
|
* Product shots differ in framing, so the last stylesheet pass in the original
|
|
* sized two of them separately. Keyed by the device title.
|
|
*/
|
|
const mediaFit: Record<string, string> = {
|
|
ЭкзоИмпульс: 'max-w-[88%] max-h-[88%] translate-y-[10px]',
|
|
'ЭкзоЛазер В': 'max-w-[82%] max-h-[82%] max-[720px]:max-w-[86%] max-[720px]:max-h-[86%]',
|
|
}
|
|
|
|
const defaultFit = 'max-w-[86%] max-h-[86%] translate-y-[8px]'
|
|
|
|
/** The laser shot is padded evenly instead of being nudged up off the base. */
|
|
const mediaBox: Record<string, string> = {
|
|
'ЭкзоЛазер В': 'p-[20px]',
|
|
}
|
|
|
|
const defaultBox = 'px-[18px] pt-[18px] pb-[14px]'
|
|
|
|
export function EquipmentSection() {
|
|
const track = useReveal<HTMLDivElement>()
|
|
const note = useReveal<HTMLDivElement>()
|
|
|
|
return (
|
|
<Section id="technology" tone="dark" className="overflow-hidden">
|
|
<Container>
|
|
<SectionHead
|
|
split
|
|
tone="dark"
|
|
eyebrow="Технологическое ядро"
|
|
title="Состав под профиль центра и клинические маршруты"
|
|
lead="Конфигурация подбирается под профиль центра, поток пациентов и задачи врачей. Используем технологическое ядро ЭКЗО без универсального набора и лишнего дублирования."
|
|
/>
|
|
|
|
<Rail
|
|
outerRef={track.ref}
|
|
wrapperClassName={track.revealClass}
|
|
tone="dark"
|
|
label="Оборудование Экзо Групп"
|
|
className="scroll-cards auto-cols-[minmax(275px,84%)] gap-[14px] md:grid-still md:grid-cols-3"
|
|
>
|
|
{devices.map((device) => (
|
|
<article
|
|
key={device.title}
|
|
className="equipment-card-surface flex min-h-[430px] flex-col overflow-hidden rounded-[26px] border border-white/[0.13] md:min-h-[425px]"
|
|
>
|
|
<div
|
|
className={cx(
|
|
'equipment-media-surface flex h-[300px] items-center justify-center overflow-hidden',
|
|
mediaBox[device.title] ?? defaultBox,
|
|
)}
|
|
>
|
|
<img
|
|
alt={device.alt}
|
|
className={cx(
|
|
'block h-auto w-auto object-contain object-center drop-shadow-[0_18px_24px_rgb(0_0_0/0.28)]',
|
|
mediaFit[device.title] ?? defaultFit,
|
|
)}
|
|
loading="lazy"
|
|
src={device.image}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col p-[22px]">
|
|
<span className="mb-[8px] text-[11px] font-[850] tracking-[0.12em] text-teal-bright uppercase">
|
|
{device.kicker}
|
|
</span>
|
|
<h3 className="text-[27px] text-white">{device.title}</h3>
|
|
<p className="mb-[18px] text-[14px] text-white/[0.66]">{device.indications}</p>
|
|
<div className="mt-auto border-t border-white/[0.12] pt-[15px] text-[13px] font-[720] text-[#C7FFF9]">
|
|
{device.role}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</Rail>
|
|
|
|
<div
|
|
ref={note.ref}
|
|
className={cx(
|
|
'mt-[22px] flex items-start gap-[12px] rounded-md border border-teal/[0.26] bg-teal/[0.09] px-[20px] py-[18px] text-[13px] text-white/[0.76]',
|
|
'[&>svg]:size-[20px] [&>svg]:shrink-0 [&>svg]:text-teal-bright',
|
|
note.revealClass,
|
|
)}
|
|
>
|
|
<CheckIcon />
|
|
<span>{equipmentNote}</span>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
)
|
|
}
|