Build a modern, interactive hero section using React, Tailwind CSS, and Framer Motion (motion/react). Ensure you follow these precise architecture and styling instructions: 1. Fonts & Global Animations Import the Inter font from Google Fonts. In your CSS setup, configure Tailwind to use it by default (--font-sans: 'Inter', ...). Create a keyframe animation in CSS named blink for the typewriter cursor: code CSS @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .animate-blink { animation: blink 1s step-end infinite; } 2. General Page Structure Wrap the entire application in a container div with the following classes: relative bg-white text-neutral-900 font-sans selection:bg-[#EAECE9] selection:text-[#1C2E1E] antialiased overflow-x-hidden flex flex-col lg:block lg:min-h-screen. 3. Background Video Component (with Native Scrubbing) Container element: Add a div containing the background video with classes: order-last lg:order-none relative lg:absolute lg:inset-0 lg:z-0 overflow-hidden pointer-events-none w-full aspect-square md:aspect-video lg:aspect-auto lg:h-full bg-neutral-50 lg:bg-transparent. Video element: Use with muted, playsInline, preload="auto". Video Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260601_110537_3a579fa0-7bbc-4d94-9d25-0e816c7840f5.mp4 Classes: w-full h-full object-cover object-right lg:object-right-bottom. Scrubbing/Playback Logic via useEffect hooks: Desktop Mouse Scrubbing Hook: Listen to the win
……（完整源码请在站内查看）
.webp)