אתר לקבוצת מרוצים

Build an "Ostro Racing Team Website" React component.

CONCEPT: Ostro Racing is a fictional Turin-based team in race week at Austin, round 18. White paper, black ink and speed: the site is a pit wall you can read, and the tyre compound you pick becomes the site's accent colour.

LAYOUT & CONTENT:
- Nav (70px, white, 2px ink rule): three slanted bars (the last in the accent) and 'OSTRO' in a wide 900 face, links Team / Car / Calendar / Partners / Store, 'WATCH ONBOARD' with a play icon.
- Hero (740px, #F4F4F0): horizontal speed streaks shooting right to left, a ghosted outline '27' at 44rem behind everything. Left: accent bar + mono 'ROUND 18. AUSTIN. RACE SUNDAY 21:00 IDT', 'Ostro / racing' at 7.4rem skewed -9deg, one paragraph, buttons 'Live timing' (accent pill) and 'Race week store' (outlined). Right: a black 500px timing card with an SVG circuit (22px dark track under a 3px white racing line), a car dot in the accent, 'LAP 34/56', a 3rem running lap time and S1/S2/S3 chips that light purple / green / yellow as sectors complete. Along the bottom a four-cell strip: Position P3, Gap to leader +4.218, Tyre age 12 laps, Pit window lap 38-42.
- Telemetry band (black): left column speed km/h (5rem), gear and throttle/brake bars; right a 2560px speed trace scrolling under a fixed cursor line.
- 'Pick the rubber': five tyre buttons drawn in SVG (black tyre, coloured band, rim spokes) for Soft, Medium, Hard, Inter, Wet, and an accent-coloured prediction card with lap time (5.4rem), stint length and peak grip bars and degradation.
- Drivers: two black halves, 'Elio Marchetti' (27) and 'Saga Lindqvist' (08) with three stats each and a 24rem skewed number bleeding off the bottom.
- Run-in: six round tiles (Monza, Baku, Marina Bay, Austin, Mexico City, Interlagos) with results; the next race filled with the accent.
- Footer: black, 'Flat out' at 10.5rem with 'out' in the accent, address and socials.

INTERACTIONS & MOTION:
- One lap clock (signature): useAnimationFrame produces a lap phase 0-1 every 6.4s (displayed as 91.412s). The car dot follows the circuit with path.getPointAtLength, the lap time is a MotionValue rendered as text, sectors light at 1/3 and 2/3, the lap counter increments on wrap. The telemetry trace, speed readout, gear and throttle/brake bars all derive from the same phase, so the band and the map agree.
- Compound colour system: a CSS variable --acc (and --on for text on it) on the root drives every accent; picking a tyre sets it with a 500ms colour transition. Until the visitor picks, the compounds auto-cycle every 3.2s. The chosen tyre lifts 16px and scales 1.08 on a spring; hovering a tyre spins it 90deg. The prediction card swaps its content with a 0.28s slide.
- Streaks are linear loops (0.55-1.3s) with one in three in the accent. Driver numbers slide 30px on hover; calendar tiles rise 8px.

DESIGN SYSTEM, Telemetry Speed:
- Paper #F4F4F0, ink #0B0B0C, track grey #2A2A2D. Compounds: soft #E8202A, medium #F5C400, hard #A3A39C, inter #1FA34A, wet #1E6BE0. Sector purple #8B2CF5.
- Unbounded 700-900 for display and big numbers (skewX for speed, no italics needed), Geist for body, Geist Mono for all data. 14-20px radii on cards, pills for buttons.

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.