提示词
使用 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。原文提示词（English）
Create a fullscreen hero landing page for a creative studio called "Foldcraft" using React, Tailwind CSS, and Lucide React icons. The page is a single viewport-height section with a looping background video, a responsive navbar, a mobile menu, and staggered-animated hero text.
**Video Background:**
- URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204221_5339e40b-e73d-4ab0-9c65-79c18c66fd50.mp4`
- Attributes: autoPlay, muted, loop, playsInline
- Styling: absolute positioned, full width/height, object-cover, object-position at 70% horizontal center
- The video sits behind all content (no z-index or z-0)
**Font:**
- Google Fonts: Geist (weights 300-700), loaded via `<link>` in index.html
- Tailwind config extends fontFamily with `geist: ['Geist', 'sans-serif']`
- Applied as `font-geist` on the root container
- Body CSS: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`
**Root Container:**
- `relative h-screen w-full overflow-hidden bg-black font-geist`
**Navbar (z-30):**
- Flex, space-between, padding: `px-6 py-5 md:px-12 lg:px-16`
- Left side: Logo text "Foldcraft" (`text-lg font-semibold tracking-tight text-white sm:text-xl`) followed by desktop nav links (hidden on mobile, flex on md+)
- Nav links: Home, Projects, Studio, Reach Us (`text-sm text-white/80 hover:text-white transition-colors`)
- Right side (desktop): "Let's Talk" button (`rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105 transition-transform`)
- Right side (mobile): hamburger toggle button (40x40, z-50) with animated Menu/X icons from lucide-react. Menu rotates 90deg out and X rotates in with opacity and scale transitions (duration-300). Button has `active:scale-90`.
**Mobile Menu (z-20):**
- Absolute, `inset-x-0 top-0`, full-screen overlay with `bg-black/98 backdrop-blur-xl`
- Transition: `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]` toggling between `h-screen opacity-100` and `h-0 opacity-0 pointer-events-none`
- Inner content: centered vertically (`flex h-full flex-col justify-center px-8`), with a delayed fade + translate animation (delay-100, translate-y-8)
- Links: Home, Projects, Studio, Reach Us (`text-3xl font-medium text-white/90 hover:text-white`)
- Button: "Let's Talk" (`mt-6 rounded-full bg-white px-8 py-3.5 text-base font-medium text-black hover:scale-105`)
- All links/button call `setMobileMenuOpen(false)` on click
**Hero Content (z-10):**
- Flex column, justify-between, fills remaining height: `h-[calc(100vh-80px)]`
- Padding: `px-6 pb-10 pt-12 sm:pb-12 sm:pt-16 md:px-12 md:pb-16 md:pt-20 lg:px-16`
**Top Section (max-w-3xl):**
- Badge: "Brand & Visual Storytelling" (`text-xs sm:text-sm text-white/90`), with `animate-[fadeSlideUp_0.8s_ease_0.2s_both]`, margin-bottom 4 (sm:6)
- Heading h1: "Shaping visual / narratives, / one pixel at a time." with `<br/>` line breaks
- Sizing: `text-3xl sm:text-5xl md:text-6xl lg:text-7xl`
- Style: `font-medium leading-[1.1] tracking-tight text-white`
- Animation: `animate-[fadeSlideUp_0.8s_ease_0.4s_both]`
**Bottom Section:**
- Paragraph: "Turning vision into reality through craft, motion, and an endless pursuit of beauty."
- Style: `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`
- Animation: `animate-[fadeSlideUp_0.8s_ease_0.7s_both]`
- CTA Button: "Explore Work" with ArrowRight icon (size 16)
- Style: `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`
- Animation: `animate-[fadeSlideUp_0.8s_ease_0.9s_both]`
**CSS Animation (in index.css):**
```css
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
```
**CSS Reset (in index.css):**
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
```
**Dependencies:** React, lucide-react (ArrowRight, Menu, X), Tailwind CSS, Google Fonts Geist.
