אתר קליניקת הפיזיותרפיה הינג׳

Build a "Hinge Physiotherapy Clinic Website" React component.

CONCEPT: The website of Hinge, a four-physio clinic on Abarbanel Street in Florentin, Tel Aviv. It must feel calm and human, never like a stock medical template: Matisse-like paper cut-outs in plaster, teal and apricot. The signature moment is a figure made of thick rounded strokes that slowly performs an exercise while its joint angle is measured live in degrees.

LAYOUT & CONTENT:
- Nav: a small 'H' hinge mark with an apricot dot and 'Hinge'; Treatments / Team / Prices / Find us; an outlined pill 'Book'.
- Hero: left, 'Back to moving without thinking.' (second half in light weight of the same family), one sentence (Florentin, hour-long sessions, the same physio every time, three exercises you will actually do), an apricot 'Book an assessment' pill and a 'See prices' link. Right, a 600×620 sage panel with 36px radius, a large blush circle behind the figure, a 'For: ...' note top-left and a segmented control at the bottom: Shoulder reach / Hip hinge / Deep squat.
- Where does it hurt? (teal band): a list of six areas, a simple cut-out body with hotspots, and a detail column (typical sessions, conditions, our approach in one sentence).
- Your first hour: a 60-minute progress bar with a large minute counter and four segments sized by duration (Talk 15, Assess 20, Treat 15, Plan 10).
- Team: 'Four physios, no handoffs.' and four people, each with a different cut-out shape (blob, quad, leaf, diamond) carrying their initials, focus and languages.
- Prices, plainly: a definition list (First assessment 60 min ₪390, Follow-up 45 min ₪320, Home visit ₪480, Six follow-ups ₪1,740) and a note on supplementary insurance refunds. Beside it a booking card: five day buttons, six time slots (some taken, struck through), and a submit button whose label spells out the chosen day and time.
- Footer: name, address with 'Step-free entrance', phone.

INTERACTIONS & MOTION:
- The figure: a pose(kind, phase) function computes hip, knee, ankle, shoulder, elbow, wrist and head from joint angles; the ankle is pinned to the floor so hips really travel back in the hinge and down in the squat. useAnimationFrame advances a 6.4s cycle eased by (1 - cos 2πp)/2; every limb path, the head position, a dotted apricot arc at the measured joint and the degree label are useTransform outputs (no React re-render per frame). Near limbs teal, far limbs a lighter sage-teal offset a few pixels. Switching exercise restarts the cycle. Reduced motion: a still pose.
- The blush circle breathes (scale 1 → 1.06) on the same 6.4s period, so the page breathes with the figure.
- Body map: the selected hotspot grows on a spring and sends out a slow ring (scale 2.6, 2.2s); the body breathes 1.2% on a 5s loop; the detail column slides in.
- First hour: useScroll on the section, smoothed by a spring (stiffness 70, damping 22), drives the bar's scaleX and the minute counter (a MotionValue); each step brightens as the bar reaches it.
- Team shapes rock ±8° over 7-10s.

DESIGN SYSTEM, Paper Cut-Out:
- Plaster #F3EDE4, deep teal #1F3B3A, one accent apricot #E98B5F, sage #C9D6C3, blush #EBCFC0, muted text #4A5E5B.
- Bricolage Grotesque only: 600 at optical size 96 for display with -0.035em tracking, 300 for the soft half of headlines, 400-500 for text.
- Rounded everything (pills, 16-36px radii), flat fills, no outlines and no shadows except a soft floor shadow under the figure.

CRAFT RULES:
- Motion: Framer Motion. Springs (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances; UI feedback under 300ms, exits faster than entrances. Ambient loops are slow (6s and up) and never pulse in sync. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion(): loops and parallax become static, fades stay.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow labels over every heading.
- Icons: lucide-react where icons are needed; every illustration is inline SVG, no external images.
- Accessibility: real <button>/<a>/<label>/<form> elements, visible focus rings, keyboard operable, aria-pressed / aria-selected / aria-live where state changes, tabular numerals for prices, times and measurements.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load the Google Fonts it needs with next/font/google.