אתר מותג אישי לאצנית משוכות

Build a "Noa Shiloh Athlete Website" React component.

CONCEPT: The personal site of an Israeli 400 m hurdler on the road to the 2028 Games. It sells her Saturday kids' clinics and a small merch store, and it should feel like a race-day poster covered in stickers: bold, graphic, a little cheeky, the energy of a Formula 1 driver's personal site.

LAYOUT & CONTENT:
- Nav (72px): black circle monogram 'NS' in lime, links Races / Clinics / Sponsors, a lime 'STORE' button with a bag icon.
- Hero (760px, cool grey ground): the name 'NOA SHILOH' in a 15rem condensed black display face across the full width; in front of it an Otl Aicher-style pictogram of a hurdler clearing a hurdle, drawn in SVG from thick round-capped strokes and a circle head. Three stickers sit on top: a black round 'PERSONAL BEST 54.31 ROME, JUNE', a lime tape strip 'ROAD TO LA28', a white star 'ISR'. Bottom-left one line of bio; bottom-right a 'TAP TO LOCK' control with a lime hand-icon tile.
- Results ticker: black band, city + time pairs scrolling, the PB highlighted on a lime chip.
- 'One lap, ten hurdles': a track line with ten hurdle glyphs; the selected hurdle's split shows in an 8rem number with stride count and approach distance.
- Saturday clinics (black section): headline with 'clinics' in lime, a short paragraph (Hadar Yosef stadium, ₪180 a session), then a list of dated sessions with age group, time, spots left and a 'Book a spot' / 'Join waitlist' button.
- Store: one large and two smaller product tiles (race cap, lane 7 tee, sticker sheet) drawn in SVG, name and price below.
- Footer: full lime block, press email, 'RUN YOUR RACE' in 13rem display type, small links row.

INTERACTIONS & MOTION:
- Hero lens: a 190px circle follows the cursor (springs stiffness 260, damping 28) and clips a second layer: lime ground, the name as outlined type, the pictogram as a line drawing with lime joint markers and mono technique data (lead knee 172°, trunk lean 31°). Clicking anywhere in the hero, or the 'TAP TO LOCK' button, freezes the lens in place (aria-pressed). The circle grows from 0 on enter and shrinks on leave unless locked. Convert pointer coordinates by the element's rendered scale.
- Stickers lift and twist on hover (spring stiffness 300, damping 12-14) with a soft tinted drop shadow.
- Ticker loops linearly over 26s.
- Hurdles: hover, focus or click selects one; it fills lime and rises 8px on a spring; a runner dot travels the track once (1.6s ease-in-out cubic-bezier(0.77, 0, 0.175, 1)) when the section enters view.
- Clinic rows nudge their button 6px right on hover; store tiles rise 10px and tilt 2°.

DESIGN SYSTEM — Sticker Pop:
- Ground #E7E7E2 (cool, not cream), ink #141414, one accent lime #D4FF3F, white for stickers only.
- Big Shoulders Display 800-900 uppercase for display, Geist for UI and body, Geist Mono only for data (times, angles, spot counts).
- Stickers are the only decoration: die-cut circles, tape strips and stars with a soft shadow tinted from the ink. Corners: 12px controls, 28px product tiles.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity and clip-path only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Hover-only effects are gated to fine pointers; the lens starts open (static) when reduced motion is requested.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow label above every heading.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, text contrast at least 4.5:1, tabular numerals for times and prices.

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 any Google Font it needs with next/font/google.