Create a fullscreen hero landing page section for a design agency called "Atelier" using React, Tailwind CSS, and Lucide React icons. The section must be fully mobile responsive with an animated hamburger mobile menu. Here are the exact specifications: **Fonts (Google Fonts):** - "Instrument Serif" (regular + italic) for headings and mobile menu links - "Inter" (weights 300, 400, 500, 600) as the sans-serif body font Load them in index.html: ```html ``` **Tailwind Config** - extend fontFamily: ```js fontFamily: { 'instrument-serif': ['"Instrument Serif"', 'serif'], sans: ['Inter', 'system-ui', 'sans-serif'], } ``` **Background:** A fullscreen looping autoplay muted video covering the entire viewport with `object-cover`. Video URL: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204103_f607742e-09da-4cf5-bb06-4e67b0a531de.mp4 ``` **Layout:** The entire section is `w-full h-screen overflow-hidden` with the video absolutely positioned behind a `relative z-10` content layer that is `flex flex-col h-full`. **Navbar:** - Horizontal flex bar with padding `px-6 md:px-12 lg:px-16 py-5 md:py-6` - Left side: Logo text "Atelier" (white, font-semibold, text-lg, tracking-tight, font-sans) followed by desktop nav links (hidden on mobile, shown md+): "Projects", "Expertise", "Studio", "Insights" - styled as `text-white/80 hover:text-white text-sm font-light transition-colors duration-200` - Right side: "Reach Out" text link (hidden mobile) + "Let's Talk"
……（完整源码请在站内查看）
.webp)