沉浸式海洋

使用 React、Tailwind CSS 和 Lucide React 图标，为名为“Foldcraft”的创意工作室创建一个全屏 hero 落地页。页面是一个占满单个视口高度的区块，包含循环播放的背景视频、响应式 navbar、移动端菜单以及交错动画的 hero 文本。

**视频背景：**
- URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204221_5339e40b-e73d-4ab0-9c65-79c18c66fd50.mp4`
- 属性：autoPlay、muted、loop、playsInline
- 样式：absolute 定位、占满宽高、object-cover、object-position 位于水平方向 70% 和垂直居中
- 视频位于所有内容之后（不设置 z-index 或 z-0）

**字体：**
- Google Fonts：Geist（字重 300-700），通过 index.html 中的 `<link>` 加载
- Tailwind config 扩展 fontFamily，添加 `geist: ['Geist', 'sans-serif']`
- 在根容器上应用 `font-geist`
- Body CSS：`-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`

**根容器：**
- `relative h-screen w-full overflow-hidden bg-black font-geist`

**Navbar（z-30）：**
- Flex、space-between，内边距：`px-6 py-5 md:px-12 lg:px-16`
- 左侧：Logo 文本“Foldcraft”（`text-lg font-semibold tracking-tight text-white sm:text-xl`），后接桌面端 nav 链接（移动端隐藏，md+ 显示为 flex）
- Nav 链接：首页、项目、工作室、联系我们（`text-sm text-white/80 hover:text-white transition-colors`）
- 右侧（桌面端）：“联系我们”按钮（`rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105 transition-transform`）
- 右侧（移动端）：hamburger 切换按钮（40x40，z-50），使用 lucide-react 中带动画的 Menu/X 图标。Menu 旋转 90deg 淡出，X 通过 opacity 和 scale transition 旋入（duration-300）。按钮设有 `active:scale-90`。

**移动端菜单（z-20）：**
- Absolute，`inset-x-0 top-0`，全屏 overlay，使用 `bg-black/98 backdrop-blur-xl`
- Transition：`duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`，在 `h-screen opacity-100` 和 `h-0 opacity-0 pointer-events-none` 之间切换
- 内部内容：垂直居中（`flex h-full flex-col justify-center px-8`），带延迟的 fade + translate 动画（delay-100、translate-y-8）
- 链接：首页、项目、工作室、联系我们（`text-3xl font-medium text-white/90 hover:text-white`）
- 按钮：“联系我们”（`mt-6 rounded-full bg-white px-8 py-3.5 text-base font-medium text-black hover:scale-105`）
- 点击所有链接/按钮时均调用 `setMobileMenuOpen(false)`

**Hero 内容（z-10）：**
- Flex column、justify-between，占满剩余高度：`h-[calc(100vh-80px)]`
- 内边距：`px-6 pb-10 pt-12 sm:pb-12 sm:pt-16 md:px-12 md:pb-16 md:pt-20 lg:px-16`

**顶部区块（max-w-3xl）：**
- Badge：“品牌与视觉叙事”（`text-xs sm:text-sm text-white/90`），使用 `animate-[fadeSlideUp_0.8s_ease_0.2s_both]`，下边距为 4（sm:6）
- Heading h1：“塑造视觉 / 叙事，/ 一次一个像素。”，使用 `<br/>` 换行
  - 尺寸：`text-3xl sm:text-5xl md:text-6xl lg:text-7xl`
  - 样式：`font-medium leading-[1.1] tracking-tight text-white`
  - 动画：`animate-[fadeSlideUp_0.8s_ease_0.4s_both]`

**底部区块：**
- 段落：“通过匠心、动态和对美的不懈追求，将愿景变为现实。”
  - 样式：`text-sm sm:text-base md:text-lg leading-relaxed text-white/60 max-w-sm sm:max-w-lg mb-5 sm:mb-6`
  - 动画：`animate-[fadeSlideUp_0.8s_ease_0.7s_both]`
- CTA 按钮：“探索作品”，带 ArrowRight 图标（size 16）
  - 样式：`rounded-lg bg-white px-5 py-2.5 sm:px-6 sm:py-3 text-sm font-medium text-black hover:scale-105 transition-transform inline-flex items-center gap-2`
  - 动画：`animate-[fadeSlideUp_0.8s_ease_0.9s_both]`

**CSS 动画（位于 index.css）：**
```css
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

**CSS 重置（位于 index.css）：**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
```

**依赖项：**React、lucide-react（ArrowRight、Menu、X）、Tailwind CSS、Google Fonts Geist。