Organic Odyssey

网站 · Hero · 免费
内容预览

Create a full-screen cinematic hero section using React, Tailwind CSS, and Framer Motion. Use Vite with TypeScript. The dependencies required are: `react`, `react-dom`, `framer-motion`, `lucide-react`, and `tailwindcss`. **VIDEO BACKGROUND:** - Full-screen looping background video, absolutely positioned to fill the viewport - Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4` - Properties: autoPlay, muted, loop, playsInline, object-cover, object-center - Page background: `#010101`, full viewport height, overflow hidden **FONTS (load via index.html link tags):** - Garamond from: `https://db.onlinewebfonts.com/c/2bf40ab72ea4897a3fd9b6e48b233a19?family=Garamond` - Geist from Google Fonts: weights 300, 400, 500 - Body font: `'Geist', -apple-system, BlinkMacSystemFont, sans-serif` - Heading font class `.font-garamond`: `'Garamond', 'Times New Roman', serif` **NAVIGATION:** - Relative positioned, z-20, flexbox centered on desktop, space-between on mobile - Brand name "Organic Visions" -- white, uppercase, letter-spacing 0.25em (mobile) / 0.3em (desktop), font-light - Desktop nav links: "Wander", "Archive", "Story", "Connect" -- white/80, uppercase, 0.2em tracking, hover to white, 300ms transition - Mobile: hamburger toggle using lucide-react `Menu` and `X` icons (size 22) **MOBILE MENU (hamburger dropdown):** - Fixed position, top-16, left-4, right-4, z-50, hidden on md+ - Uses `AnimatePrese

……（完整源码请在站内查看）