Yuriy PanovandClaude Fable 5
8b954ea5db
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>
33 lines
970 B
TypeScript
33 lines
970 B
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
/**
|
|
* Scroll-in animation, matching the original page: fires once at 12% visibility
|
|
* and then stops observing. The `.reveal` / `.is-visible` pair lives in CSS so
|
|
* that `prefers-reduced-motion` can neutralise it in one place.
|
|
*/
|
|
export function useReveal<T extends HTMLElement = HTMLDivElement>() {
|
|
const ref = useRef<T>(null)
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const element = ref.current
|
|
if (!element || visible) return
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
if (!entry.isIntersecting) continue
|
|
setVisible(true)
|
|
observer.unobserve(entry.target)
|
|
}
|
|
},
|
|
{ threshold: 0.12 },
|
|
)
|
|
|
|
observer.observe(element)
|
|
return () => observer.disconnect()
|
|
}, [visible])
|
|
|
|
return { ref, visible, revealClass: visible ? 'reveal is-visible' : 'reveal' }
|
|
}
|