影响力企业

使用 React、Tailwind CSS 和 Lucide React 图标，为名为“Atelier”的设计机构创建一个全屏 hero 落地页区块。该区块必须完全适配移动端，并带有动画 hamburger 移动端菜单。具体规范如下：

**字体（Google Fonts）：**
- “Instrument Serif”（常规 + italic），用于 heading 和移动端菜单链接
- “Inter”（字重 300、400、500、600），用作 sans-serif 正文字体

在 index.html 中加载：
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
```

**Tailwind Config**——扩展 fontFamily：
```js
fontFamily: {
  'instrument-serif': ['"Instrument Serif"', 'serif'],
  sans: ['Inter', 'system-ui', 'sans-serif'],
}
```

**背景：**
一个全屏、循环、自动播放、静音的视频，使用 `object-cover` 覆盖整个视口。视频 URL：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204103_f607742e-09da-4cf5-bb06-4e67b0a531de.mp4
```

**布局：**整个区块为 `w-full h-screen overflow-hidden`，视频使用 absolute 定位，位于一个 `relative z-10` 内容层之后，该内容层为 `flex flex-col h-full`。

**Navbar：**
- 水平 flex 栏，内边距为 `px-6 md:px-12 lg:px-16 py-5 md:py-6`
- 左侧：Logo 文本“Atelier”（白色、font-semibold、text-lg、tracking-tight、font-sans），后接桌面端 nav 链接（移动端隐藏，md+ 显示）：“项目”“专业能力”“工作室”“洞察”——样式为 `text-white/80 hover:text-white text-sm font-light transition-colors duration-200`
- 右侧：“联系我们”文本链接（移动端隐藏）+“洽谈合作”按钮（白色背景、黑色文本、rounded-full、px-5 py-2，移动端隐藏）+ hamburger 按钮（仅在移动端显示，md:hidden）
- Hamburger：3 条线（高度 2px、白色、rounded-full），中间线较短（w-4，其他为 w-6）。打开时，顶部/底部线分别旋转 45/-45 度并发生位移，中间线淡出。使用 `cubic-bezier(0.76,0,0.24,1)` easing，时长为 500ms。

**移动端菜单 Overlay（fixed inset-0 z-50、md:hidden）：**
- Backdrop：`bg-black/90 backdrop-blur-xl`，通过 700ms transition 淡入
- 内容使用相同的 700ms cubic-bezier easing 淡入
- Header：与 navbar 布局一致，包含 logo + 关闭按钮（由旋转线条形成的 X）
- Nav 链接：垂直堆叠、居中，`text-4xl sm:text-5xl font-instrument-serif`，白色文本，每项带 `border-b border-white/10`、`py-4`。打开时，它们以交错延迟（150ms + index*80ms）播放进入动画，从 `translate-y-8` 位移至 `translate-y-0`。Hover 时通过 `hover:pl-4` 将文本向右移动
- 项目：“项目”“专业能力”“工作室”“洞察”“联系我们”
- Footer：全宽“洽谈合作”按钮（白色背景、黑色文本、rounded-full、py-4），延迟 550ms 淡入

**Hero 内容（在 navbar 下方居中）：**
- 容器：`flex-1 flex flex-col items-center justify-start pt-4 sm:pt-6 md:pt-8 lg:pt-10 px-6 text-center`
- Heading（h1）：`font-instrument-serif text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.1] max-w-5xl`
  - 文本内容（带换行）：
    ```
    UX <italic>与</italic> APP
    DESIGN <italic>为</italic> BOLD
    VENTURES
    ```
  - italic 单词“与”和“为”使用 `italic font-instrument-serif` span
- Subtext（p）：`mt-4 md:mt-5 text-white/70 text-sm md:text-base font-light max-w-md leading-relaxed`
  - “我们塑造定义品牌的数字产品”+ 换行（hidden sm:block）+“并释放指数级增长。”
- 按钮行：`mt-5 md:mt-6 flex flex-col sm:flex-row items-center gap-4`
  - 主要按钮：“查看案例”，带 ArrowRight 图标（lucide-react）、白色背景、黑色文本、rounded-full、px-7 py-3、text-sm font-medium。Hover 时箭头向右移动 0.5
  - 次要按钮：“观看 Showreel”，带 Play 图标（lucide-react）、透明背景，使用 `border border-white/40`、白色文本、rounded-full、px-7 py-3。Hover 时：`bg-white/10 border-white/60`

**全局 CSS（index.css）：**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
```

**依赖项：**React、lucide-react（用于 ArrowRight 和 Play 图标）、Tailwind CSS。不使用其他 UI 库。