אתר יום משחק למועדון כדורגל

Build a "Harbour Lights FC Matchday Website" React component.

CONCEPT: The matchday site of Harbour Lights FC, a fictional club from Jaffa, live during a night game against Northgate Rovers. It should feel like standing on the terrace at 21:40: black sky, floodlights, an orange kit, a crowd that never sits down.

LAYOUT & CONTENT:
- Nav (68px, near-black): orange shield crest with a lighthouse, 'HARBOUR LIGHTS' in condensed display type, links Fixtures / Squad / Tickets / Shop, an outlined 'Members' button.
- Hero (700px): night gradient, four floodlight towers at the top edge, a perspective pitch (rotateX 62deg, mown stripes, centre circle) along the bottom. Left: small orange line 'Harbour Lights FC. Matchday 14', headline 'Under the lights' at 10.5rem, one line about 14,200 fans at Harbour Stadium. Right: a scoreboard card with a blinking LIVE dot, a running match clock (starts 67:12, ticks every second), 'Harbour Lights 3 : 1 Northgate Rovers' with a 7rem score, scorers line and an orange 'Buy tickets' bar.
- Event ticker: full-width orange band of minute + player + event pairs; goals sit on black chips.
- The XI: a 760x440 pitch tilted in CSS 3D (perspective 1300px, rotateX 50deg) with eleven numbered player discs in a 4-3-3, a cream ball that travels a 9-pass chain while a dashed orange line draws the passing route. Right column: four match stats (possession 58%, shots 14, xG 2.41, passes 412) counting up.
- 'Know the numbers' (cream section): six tall outlined cards, each with a 9rem shirt number, player name, position and one stat.
- 'Next up': four fixtures as rows (day, big date, opponent, competition, Home/Away, 'From ₪65' button or a muted 'Sold out').
- Footer: orange block with a 12rem chant marquee 'We are the lights /' and a crest, address and email row.

INTERACTIONS & MOTION:
- Floodlights (signature): each beam is a clipped trapezoid (clip-path polygon, cream-to-transparent gradient, mix-blend-mode screen) rotating from its tower to point at a target. The target follows the cursor; after 1.6s without movement it wanders on a Lissajous path so the beams always sweep. Each beam has its own spring (stiffness 40-64, damping 14) so they arrive out of sync.
- Pitch: pointer position tilts the pitch (rotateX 50 +/- 5deg, rotateZ +/- 6deg) on springs (stiffness 80, damping 16); player discs bob on staggered 1.8-2.85s loops; the ball and the passing line loop every 7.2s.
- Squad numbers: digits are vertical strips of 0-9 twice; each roll moves a strip 10 digits on cubic-bezier(0.77, 0, 0.175, 1) over 0.9s. A random card rolls and turns orange every 1.4s; hover or focus rolls it and lifts it 10px on a spring.
- Stats count up from 0 over 1.6s when seen; fixture rows slide 10px right on hover; both marquees are linear loops (18s and 14s).

DESIGN SYSTEM, Floodlight Matchday:
- Night #07120C, pitch greens #0E3A24 / #11492C, floodlight cream #F3EFE2, kit tangerine #FF5B14 as the only accent.
- Anton for display (uppercase), Barlow Condensed 500-700 for UI and body. Corners 4-6px everywhere.
- Light is the decoration: beams, haze and chalk lines only, no glows on text.

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, ease-in-out cubic-bezier(0.77, 0, 0.175, 1) for on-screen travel, linear only for constant loops. Animate transform, opacity, clip-path and pathLength only. Drive per-frame values with MotionValues (useAnimationFrame, useTransform) so nothing re-renders React every frame. Respect prefers-reduced-motion via useReducedMotion(): loops, cursor effects and tickers become static.
- Ambient life: the page must visibly move within the first second without any interaction.
- Cursor maths inside a scaled container: convert with (clientX - rect.left) / (rect.width / el.offsetWidth).
- 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 or CSS, no external images, no real brands or trademarks.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria-pressed / aria-label where state changes, text contrast at least 4.5:1, tabular numerals for times, scores 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.