אתר לבית ספר לטיסה

Build a "Glidepath Flight Academy Website" React component.

CONCEPT: Glidepath is a fictional flight school at Herzliya Airfield with two simulators. The site is a cockpit: the hero is a full-screen primary flight display you fly with the cursor, using real avionics colours (magenta for guidance, cyan for selected values).

LAYOUT & CONTENT:
- Nav (68px, panel black): a magenta chevron and 'GLIDEPATH', links Courses / Simulators / Instructors / Pricing, a cyan outlined 'TRIAL FLIGHT ₪390'.
- Hero (740px): a 2600px square horizon layer (sky gradient #1F5F99 to #4E8FC7 over earth #7A4A26 to #4A2C15, 3px white horizon line) with a pitch ladder at 10, 20 and 30 degrees (dashed below the horizon). Fixed HUD on top: a heading tape (200-365, 520px wide, magenta lubber line), a speed tape on the left and an altitude tape on the right (96px wide, translucent panel, white ticks), each with a cyan boxed readout, and a magenta flight-path marker in the centre. Bottom-left: 'Take the / left seat' at 5.6rem (second line magenta). Bottom-right: a dark box with one line of copy and a magenta 'BOOK A TRIAL FLIGHT' bar.
- 'Zero to flight level 350' (light #E9ECEA): left a dark panel with drifting cloud bars, a magenta climb path that draws, a cyan aircraft ring and a big altitude readout; right a list of five stages (0 ft ground school, 1,500 ft first solo, 5,500 ft cross-country, 10,000 ft instrument rating, 35,000 ft airline prep) with descriptions and the hour they happen.
- 'Two cockpits, zero weather days' (panel black): four 200px round gauges (airspeed with green arc, altimeter with two hands, vertical speed, heading) in a dark instrument panel.
- Pricing: three full-height columns PPL ₪52,000, CPL ₪138,000 (magenta column), SIM ₪690/hr with 8rem codes and checklists.
- Footer: an ATC radio marquee ('TWR GLD 401, wind 270 at 9, runway 27, cleared for takeoff'...) and 'Cleared / for takeoff' at 8.5rem.

INTERACTIONS & MOTION:
- Attitude display (signature): pointer x maps to roll (+/- 25deg) and y to pitch (+/- 110px) on springs (stiffness 60, damping 14), applied as one transform string on the horizon layer. After 1.5s without input, gentle turbulence takes over (two summed sines per axis) so the horizon is always alive.
- Tapes: altitude climbs at 38 ft/s (looping 3,200-5,000), airspeed wobbles around 112 kt, heading drifts +/- 9deg; all are MotionValues from useAnimationFrame, readouts are MotionValues rendered as text (no React re-renders per frame).
- Climb: progress is the larger of the section's scroll progress (useScroll with target) and an ambient 7s loop, so it climbs on its own in a card and follows the visitor's scroll on the page. Altitude = 35,000 x p^2.2; the path draws with pathLength; stages fade from 35% to full opacity and the current one shifts 14px on a spring.
- Gauges: needles loop (altimeter hands linear 6s, others ease-in-out 3-6s). Pricing columns tint on hover. ATC marquee loops linearly over 34s.

DESIGN SYSTEM, Cockpit HUD:
- Panel #101418, bezel #2A3138, paper #E9ECEA, sky #4E8FC7, earth #7A4A26, guidance magenta #FF3DCB, selected cyan #3FE0F0, gauge green #2BD46B.
- Chakra Petch 500-700 for display and UI, B612 Mono (the open cockpit typeface) for every number and label. Square corners, 2px borders.

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.