Convert hotel landing to React + Tailwind v4 with amoCRM lead capture
Ports the single-file ЭкзоОтель page to the same architecture as the fitness
landing: Vite + React 19 + TypeScript + Tailwind v4 on the client, Express 5 for
the /api/leads/hotels endpoint, zod schema shared between the two.
The original page is kept in legacy/index.html as the visual reference. Its 15
inlined base64 images are extracted to files (the 1 MB HTML becomes ~318 KB of
JS plus assets loaded on demand), and its text is reproduced line for line —
verified with an innerText diff. Section heights stay within 0.6% at 375 and
1440 px; the drift comes from Inter actually loading, which the original asked
for but never served.
Three deliberate departures, documented in the README:
* eyebrow and lead in the CTA block were dark teal on navy (3.4:1); they now
match the other dark sections
* hero fact values overflowed their 80px column into the label below 430px
* "2025–2026г.." typo in the market source note
Leads reuse the fitness amoCRM integration: contact lookup by phone in every
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. Vite runs on 5174
and the API on 3001 so both landings can run at once.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
60de4ef27c
commit
35f713a267
@@ -0,0 +1,56 @@
|
||||
import type { RefObject } from 'react'
|
||||
import logo from '../assets/images/exo-logo.png'
|
||||
import { contacts, navLinks } from '../data/content'
|
||||
import { cx } from '../lib/cx'
|
||||
import { ButtonLink, buttonClass, headerSize } from './Button'
|
||||
import { PhoneIcon } from './Icons'
|
||||
import { Container } from './Layout'
|
||||
|
||||
export function SiteHeader({ scrolled, headerRef }: { scrolled: boolean; headerRef: RefObject<HTMLElement | null> }) {
|
||||
return (
|
||||
<header
|
||||
ref={headerRef}
|
||||
className={cx(
|
||||
'fixed inset-x-0 top-0 z-50 py-[14px] transition-[background-color,box-shadow,backdrop-filter] duration-250 md:py-[18px]',
|
||||
scrolled && 'bg-navy-deep/[0.86] shadow-[0_12px_40px_rgb(3_20_34/0.18)] backdrop-blur-[18px]',
|
||||
)}
|
||||
>
|
||||
<Container className="flex items-center justify-between gap-[18px]">
|
||||
<a className="inline-flex min-w-0 items-center" href="#top" aria-label="Экзо Групп — на первый экран">
|
||||
<img
|
||||
alt="Экзо Групп — российские технологии реабилитации"
|
||||
className="block h-auto w-[clamp(172px,20vw,232px)] max-w-full object-contain object-left compact:w-[150px]"
|
||||
src={logo}
|
||||
width={900}
|
||||
height={204}
|
||||
/>
|
||||
</a>
|
||||
|
||||
<nav
|
||||
aria-label="Основная навигация"
|
||||
className="hidden items-center gap-[30px] text-[14px] font-[650] text-white/[0.76] md:flex"
|
||||
>
|
||||
{navLinks.map((link) => (
|
||||
<a key={link.href} href={link.href} className="transition-colors duration-200 hover:text-white">
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-[10px] compact:gap-[6px]">
|
||||
<a
|
||||
href={contacts.phoneHref}
|
||||
aria-label="Позвонить в Экзо Групп"
|
||||
className={buttonClass('call', 'compact:px-[12px]', headerSize)}
|
||||
>
|
||||
<PhoneIcon />
|
||||
<span className="compact:hidden">Звонок</span>
|
||||
</a>
|
||||
<ButtonLink href="#proposal" size={headerSize}>
|
||||
Получить предложение
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</Container>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user