Create a full-screen dark hero section with a looping background video, navbar, headline, subtitle, CTA button, and a logo marquee at the bottom. Here are the exact specifications: Theme & Colors (index.css CSS variables): Background: 260 87% 3% (deep dark blue-purple) Foreground: 40 6% 95% (off-white) Hero sub text: 40 6% 82% Body font: Geist Sans (via @fontsource/geist-sans) Headline font: General Sans (loaded from Fontshare: https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap) Background Video (Index page wrapper): Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_065045_c44942da-53c6-4804-b734-f9e07fc22e08.mp4 Positioned absolute inset-0 w-full h-full object-cover behind all content Starts with opacity: 0 Custom JS-controlled fade loop: 0.5s fade-in at start, 0.5s fade-out at end, using requestAnimationFrame. On ended, opacity resets to 0, waits 100ms, then replays from 0 No gradient overlays on the video The wrapper div has overflow-hidden, the hero content sits in a relative z-10 div above Blurred overlay shape (centered behind content): w-[984px] h-[527px] opacity-90 bg-gray-950 blur-[82px] Absolutely positioned at top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none The hero section has overflow-visible so the blur is not clipped Navbar: Full width, py-5 px-8, flex row with justify-between Left: logo image (src/assets/logo.png, height 32px) Center: nav items — "Features" (with Chev
……(完整源码请在站内查看)