Filmische landingspagina over ruimtereizen bouwen

Build Prompt: Cinematic Space-Travel Landing Page. Build a single-page landing site with two full-height sections (Hero + Capabilities), both using looping background videos with custom JS crossfade, a shared liquid-glass design system, and Framer Motion entrance animations. Stack (CDN, pinned): React app mounted on #root, components as <script type="text/babel"> exporting via window.X = X, Framer Motion as window.Motion = window.FramerMotion, body bg #000. Fonts (Google Fonts): Instrument Serif (italic) + Barlow (300/400/500/600); Tailwind font-heading → 'Instrument Serif' (always italic), font-body → 'Barlow', border radius DEFAULT: "9999px". Liquid-glass utilities (exact CSS): .liquid-glass (rgba(255,255,255,0.01), background-blend-mode luminosity, backdrop-filter blur(4px), inset 0 1px 1px rgba(255,255,255,0.1), a 1.4px ::before gradient border masked via mask-composite exclude, stops 0.45/0.15/0/0/0.15/0.45) and .liquid-glass-strong (same but blur(50px); box-shadow 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15); stops 0.5/0.2/0/0/0.2/0.5). FadingVideo component (custom JS crossfade, no CSS transitions): <video autoPlay muted playsInline preload="auto"> starting at opacity 0; FADE_MS = 500, FADE_OUT_LEAD = 0.55s; fadeTo(target, duration) uses requestAnimationFrame, reads current opacity, cancels the previous rAF; on loadeddata: opacity 0, play(), fadeTo(1); on timeupdate: if not already fading out and duration - currentTime <= 0.55 and > 0, flip the ref and fadeTo(0); on ended: opacity 0, after 100ms reset currentTime = 0, play(), clear fadingOutRef, fadeTo(1); loop attribute OFF (manual looping via ended); cleanup on unmount. Section 1 — Hero (full viewport, black bg): background video at 120% width/height, top-aligned, horizontally centered (absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0), no overlay; z-10 layer holds Navbar → Hero content (flex-1, centered) → Partners. Navbar (fixed top-4, px-8 / lg:px-16, z-50): left 48×48 liquid-glass circle with italic serif lowercase "a"; center (desktop) liquid-glass pill with links Home, Voyages, Worlds, Innovation, Plan Launch + white pill button "Claim a Spot" + ArrowUpRight; right 48×48 invisible spacer. Hero content (pt-24 px-4), animated with Framer Motion initial {filter: blur(10px), opacity: 0, y: 20}, easeOut. Badge (delay 0.4s): liquid-glass pill with white chip "New" + text "Maiden Crewed Voyage to Mars Arrives 2026". Headline — BlurText word-by-word: "Venture Past Our Sky Across the Universe". Subheading (delay 0.8s): "Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach—secure and extraordinary." CTAs (delay 1.1s): primary liquid-glass-strong "Start Your Voyage" + ArrowUpRight; secondary text link "View Liftoff" + Play. Stats row (delay 1.3s): two liquid-glass cards p-5 w-[220px], white outline SVG 28×28 (clock / globe), Instrument Serif italic number "34.5 Min" / "2.8B+", label "Average Videos Watch Time" / "Users Across the Globe". Partners (delay 1.4s): liquid-glass chip "Collaborating with top aerospace pioneers globally"; 5 Instrument Serif italic names Aeon · Vela · Apex · Orbit · Zeno. BlurText component: IntersectionObserver at 10% visibility, each word a motion.span from blur(10px)/opacity 0/y 50 to blur(0)/opacity 1/y 0, duration 0.7, stagger (i*100)/1000s, marginRight 0.28em, parent flex wrap centered. Section 2 — Capabilities (min-h-screen, black bg): full-bleed video (absolute inset-0 w-full h-full object-cover z-0), same FadingVideo, no overlay; content (z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10). Header: kicker "// Capabilities"; heading font-heading italic "Production" / "evolved". Three cards (grid md:grid-cols-3): each liquid-glass rounded-[1.25rem] p-6 min-h-[360px]; top 44×44 liquid-glass square with white Material icon (image / movie / lightbulb) + 4 pill tags; bottom italic title "AI Scenery" / "Batch Production" / "Smart Lighting" with the matching description copy. Lucide icons ArrowUpRight and Play. Notes: all text white, no green, no gradient backgrounds; no CSS transitions on videos (rAF-driven fades only); videos full-bleed with no dark overlay. Recreate every element, style, animation, video URL, and font exactly.