Digitwist AI 构建器

为 AI 网站构建器创建一个深色模式 Hero 区块，严格遵循以下规格：

## 技术设置

### 必需的软件包
安装以下软件包：
- `motion`（版本 12.23.24 或更高）——用于动画
- `hls.js`（版本 1.6.15 或更高）——用于视频流播放
- `lucide-react`（版本 0.487.0 或更高）——用于图标

### 字体
导入以下 Google Fonts：
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');
```

## 布局结构

### Navbar 组件
创建一个固定、透明的导航栏，包含：

**位置与样式：**
- 固定在顶部，宽度占满，z-index 50
- 背景：完全透明（bg-transparent）
- 内边距：px-6 py-4
- Flexbox 布局：items-center justify-between

**左侧区域：**
- 白色 Sunburst 图标（24x24px SVG）

**中间区域**（移动端隐藏，md:flex 时可见）：
- 导航链接：“产品”（带 ChevronDown 图标）、“客户案例”、“资源”、“定价”
- 字体：Instrument Sans、text-sm、font-medium
- 颜色：text-white/80、hover:text-white
- 间距：gap-8

**右侧区域：**
- “预约演示”链接（在小屏幕上隐藏，sm:block）
- “开始使用”按钮：白色背景、黑色文字、rounded-full、px-5 py-2.5、font-semibold

### Hero Section 组件

**容器：**
- 相对定位、宽度占满、min-h-screen
- 背景颜色：#000000（纯黑）
- 文字颜色：白色
- 隐藏溢出内容

**背景视频层：**
- 视频 URL：https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8
- 使用 HLS.js 实现视频，并为 Safari 提供回退方案
- 视频属性：muted、loop、playsInline
- Object-fit：cover，opacity：60%
- 后备 Poster 图片：https://images.unsplash.com/photo-1647356191320-d7a1f80ca777?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdCUyMGRhcmslMjB0ZWNobm9sb2d5JTIwbmV1cmFsJTIwbmV0d29ya3xlbnwxfHx8fDE3Njg5NzIyNTV8MA&ixlib=rb-4.1.0&q=80&w=1080

**视频叠加层：**
- 黑色叠加层：bg-black/60，搭配 backdrop-blur-[2px]

**装饰性渐变：**
- 左上渐变：位置 top-[-20%] left-[20%]，尺寸 600x600px，bg-blue-900/20、blur-[120px]、mix-blend-screen
- 右下渐变：位置 bottom-[-10%] right-[20%]，尺寸 500x500px，bg-indigo-900/20、blur-[120px]、mix-blend-screen

**内容容器：**
- 最大宽度：5xl（max-w-5xl）
- 居中对齐（mx-auto、items-center、text-center）
- Z-index：10，上边距：mt-20
- 垂直间距：space-y-12

**前置标题：**
- 文字：“以思考的速度设计”
- 字体：Instrument Serif
- 大小：text-3xl（移动端）、sm:text-5xl、lg:text-[48px]
- 行高：leading-[1.1]
- 颜色：白色
- 动画：Motion 向上淡入（opacity 0→1、y 20→0、duration 0.6s）

**主标题：**
- 文字：“更快构建”
- 字体：Instrument Sans、font-semibold
- 大小：text-6xl（移动端）、sm:text-8xl、lg:text-[136px]
- 行高：leading-[0.9]，字距：tracking-tighter
- 渐变：bg-gradient-to-b from-white via-white to-[#b4c0ff]
- 文字效果：bg-clip-text text-transparent
- 动画：Motion 缩放（opacity 0→1、scale 0.9→1、delay 0.2s、duration 0.6s）

**副标题：**
- 文字：“借助我们先进的 AI 引擎，在几秒钟内创建功能完备且经过 SEO 优化的网站。”
- 字体：Instrument Sans
- 大小：text-lg（移动端）、sm:text-[20px]
- 行高：leading-[1.65]
- 颜色：白色，opacity-70
- 最大宽度：max-w-xl
- 动画：Motion 淡入（opacity 0→0.7、delay 0.4s、duration 0.6s）

**CTA 按钮：**

主要按钮：
- 样式：带蓝色箭头的白色胶囊形按钮
- 布局：pl-6 pr-2 py-2、rounded-full
- 背景：白色
- 文字：“免费开始构建”（font-medium、text-lg、Instrument Sans、颜色 #0a0400）
- 箭头容器：40x40px 圆形，bg-[#3054ff]、hover:bg-[#2040e0]
- 图标：ArrowRight（lucide-react），白色，20x20px
- 悬停效果：shadow-[0_0_20px_rgba(255,255,255,0.3)]、scale-105

次要按钮：
- 文字：“查看示例”
- 样式：带箭头的文本链接
- 颜色：text-white/70、hover:text-white
- 背景：backdrop-blur-sm、hover:bg-white/5
- 内边距：px-4 py-2、rounded-lg
- 图标：ArrowRight，带 group-hover:translate-x-1 transition

按钮容器：
- 布局：flex-col（移动端）、sm:flex-row
- 间距：gap-6，项目居中
- 动画：Motion 向上淡入（opacity 0→1、y 20→0、delay 0.6s、duration 0.5s）

## HLS.js 视频实现
```tsx
import { useEffect, useRef } from "react";
import Hls from "hls.js";

const videoRef = useRef<HTMLVideoElement>(null);
const videoSrc = "https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8";

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play().catch((e) => console.log("Auto-play prevented:", e));
    });
    return () => {
      hls.destroy();
    };
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = videoSrc;
    video.addEventListener("loadedmetadata", () => {
      video.play().catch((e) => console.log("Auto-play prevented:", e));
    });
  }
}, []);
```

## Motion 动画
导入：`import { motion } from "motion/react"`

- 前置标题：initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}
- 主标题：initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, duration: 0.6 }}
- 副标题：initial={{ opacity: 0 }} animate={{ opacity: 0.7 }} transition={{ delay: 0.4, duration: 0.6 }}
- 按钮：initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6, duration: 0.5 }}

## 调色板
- 背景：#000000
- 主要文字：白色
- 次要文字：white/80、white/70
- 主要按钮背景：白色
- 主要按钮文字：#0a0400
- 主要按钮强调色：#3054ff，悬停时为 #2040e0
- 渐变结束颜色：#b4c0ff
- 装饰性渐变：blue-900/20、indigo-900/20