Rocket CTA

构建与落地页 CTA 区域像素级一致的复刻版本。使用 React 18 + Vite + TypeScript、TailwindCSS、`framer-motion`、`clsx` + `tailwind-merge` 作为 `cn()`。采用深色主题背景（`#000000`）、Inter 字体，并使用 Material Symbols Outlined 图标。在 `tailwind.config.ts` 中使用白色透明度“landing”调色板：

```ts
landing: {
  surface: "rgba(255, 255, 255, 0.10)",
  "surface-hover": "rgba(255, 255, 255, 0.16)",
  border: "rgba(255, 255, 255, 0.10)",
  "border-strong": "rgba(255, 255, 255, 0.20)",
  text: "rgba(255, 255, 255, 0.80)",
  "text-muted": "rgba(255, 255, 255, 0.60)",
}
```

添加全局 `.liquid-glass` 工具类（磨砂半透明表面）：
```css
.liquid-glass {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.25);
}
```

在 `index.css` 中添加用于 Velorah 内部 Hero 动画的 keyframes：
```css
@keyframes fade-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-rise          { animation: fade-rise .8s ease-out both; }
.animate-fade-rise-delay    { animation: fade-rise .8s ease-out .25s both; }
.animate-fade-rise-delay-2  { animation: fade-rise .8s ease-out .5s both; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }
```

在 `index.html` 中加载字体：Inter（400/500/600）、Instrument Serif（400 + italic）、Material Symbols Outlined。

---

## 资源

- 覆盖在区域底部前景的“草地 / 地平线”PNG——直接从此 URL 加载（不使用本地资源）：
  `https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png`
- 在 Velorah 仪表盘预览内部使用的 CloudFront 视频 URL（必须完全一致）：
  `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4`

---

## 辅助组件（必须存在）

### `FadeUp`（`framer-motion`）
```tsx
<motion.div
  initial={{ opacity: 0, y: y ?? 24 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
/>
```

### `MIcon` — Material Symbols Outlined span，支持 `name`、`size`、`fill`、`weight`、`grade`、`opticalSize`，通过 `fontVariationSettings: "'FILL' x, 'wght' y, 'GRAD' z, 'opsz' s"` 应用。

### `PrimaryButton`（landing 基础组件）
- 白色胶囊按钮、黑色文字、`rounded-full`，尺寸为 `sm/md/lg`（默认 `lg`：`h-12 px-9 text-sm font-medium`）。
- Class：`inline-flex items-center justify-center rounded-full bg-white/80 hover:bg-white text-black leading-none transition-colors`。
- 使用 `AnimatedText` 组件包裹子元素，在 hover 时将当前文本向上滑动，并从下方显示重复文本（200–300ms ease）。
- 通过 `as="a" | "button"` 实现多态，默认为 `a`。

### `ChatPanel`（仪表盘模拟界面的左侧）
- 在 `rounded-2xl border border-white/10` 内部使用纵向 flex column，背景为 `rgba(8,8,10,0.6)` + `backdrop-filter: blur(24px)`。
- 标题行：28px 圆形 `bg-white/5`，内含 `MIcon name="auto_awesome" size={14}`；旁边是两行标签：**“Vibe Design 课程”**（text-sm font-medium white）+ **“学习如何使用 AI 构建网站”**（text-[11px] white/40）。
- 消息滚动区域（`scrollbar-hide`、`space-y-4`、px-4 py-5）。预置消息：
  1. assistant — “欢迎参加 Vibe Design 课程！我将指导你使用 AI 构建出色的网站。你想先学什么？”
  2. user — “我想学习如何使用 AI 构建带有电影感视频背景的 Hero 区域。”
  3. assistant — “选得好！在本课程中，你将学习如何创建全屏循环视频、liquid glass 导航栏、邮箱注册功能和宣言按钮——全部借助 AI 完成。让我们开始吧！”
- 消息气泡：`max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed`。User = `bg-white/15 text-white/90`（右对齐）。Assistant = `bg-white/5 text-white/70 border border-white/5`（左对齐）。
- Props：`initialScroll?: "top" | "bottom"`（CTA 使用 `"top"`），`animateMessagesIn?: boolean`（CTA 传入 `true`，每条消息包裹在 `FadeUp delay={i * 0.12} y={16}` 中）。
- 输入行：`.liquid-glass rounded-2xl`，包含单行自动调整高度的 `<textarea>`（透明，placeholder 为“询问有关课程的问题...”）+ 白色方形发送按钮（`bg-white text-black rounded-xl p-2`），内含 `MIcon name="arrow_upward" size={16}`。按 Enter（不按 shift）发送。推入一条 user 消息时，也会推入一条预设的 assistant 回复。

### `VelorahHeroPreview`（仪表盘模拟界面的右侧）
```tsx
const VIDEO_SRC = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4";
```
- 包装器：`relative w-full h-full overflow-hidden rounded-2xl`，内联 `backgroundColor: "hsl(201 100% 13%)"`（视频加载期间使用的深青色）。
- `<video autoPlay loop muted playsInline preload="auto">` 采用绝对定位、`object-cover`、`z-0`。
- 导航行（`relative z-10 flex items-center justify-between px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4`）：
  - 左侧品牌：`Velorah®`，使用 `font-family: 'Instrument Serif', serif`、`text-sm sm:text-base md:text-lg`、`tracking-tight`，将 `®` 放入 `<sup className="text-[0.5em]">`。
  - 中间区域（< md 时隐藏）：`首页`（white）· `工作室` · `关于` · `日志` · `联系我们`——使用 `text-[9px] lg:text-[10px] text-white/60`，非活动项使用 `hover:text-white`。
  - 右侧：`.liquid-glass rounded-full px-2.5 sm:px-3 py-1 text-[9px] sm:text-[10px] text-white`，显示 **开启旅程**。
- Hero 内容块（`flex flex-col items-center text-center px-3 sm:px-4 pt-3 sm:pt-5 md:pt-7 pb-6`）：
  - `<h1>` 使用 Instrument Serif、`font-normal leading-[0.95] tracking-[-0.03em]`、`text-lg sm:text-2xl md:text-3xl lg:text-4xl max-w-[90%]`，class 为 `animate-fade-rise`。内容：`让 <em class="not-italic text-white/55">梦想</em> 在 <em class="not-italic text-white/55">寂静中升起。</em>`
  - 段落使用 `animate-fade-rise-delay text-white/60 text-[9px] sm:text-[11px] md:text-xs leading-relaxed max-w-[80%] sm:max-w-sm md:max-w-md mt-2 sm:mt-3 md:mt-4`：“我们为深度思考者、大胆创作者和沉静的反叛者设计工具。在混乱之中，我们打造数字空间，让人保持敏锐专注并开展富有灵感的工作。”
  - 胶囊按钮使用 `animate-fade-rise-delay-2 liquid-glass rounded-full px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 md:py-2.5 text-[9px] sm:text-[10px] text-white mt-3 sm:mt-4 md:mt-5`，显示 **开启旅程**。

### `CtaDashboardMock`
包裹 ChatPanel + VelorahHeroPreview 的外框：
```tsx
<div className="liquid-glass w-full max-w-[1100px] aspect-[3/4] sm:aspect-[16/10] lg:aspect-[16/9] rounded-2xl mx-auto overflow-hidden p-2 sm:p-3">
  <div className="grid h-full grid-cols-1 sm:grid-cols-[minmax(220px,320px)_1fr] gap-2 sm:gap-3">
    <div className="min-h-0 hidden sm:block"><ChatPanel initialScroll="top" animateMessagesIn /></div>
    <div className="min-h-0"><VelorahHeroPreview /></div>
  </div>
</div>
```

---

## `CtaSection` — 精确布局与行为

```tsx
const sectionRef = useRef<HTMLElement>(null);
const isMobile = useIsMobile(); // tailwind md breakpoint hook
const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start end", "end start"] });
const dashboardY = useTransform(scrollYProgress, [0, 1], ["120px", "-120px"]);
const grassY     = useTransform(scrollYProgress, [0, 1], isMobile ? ["80px", "-40px"] : ["200px", "-200px"]);
```

标记：
```tsx
<section
  ref={sectionRef}
  id="cta"
  className="relative w-full"
  style={{ background: "linear-gradient(to bottom, transparent 0%, #14191E 100%)" }}
>
  <div className="relative mx-auto max-w-[1080px] px-4 sm:px-6 pt-24 sm:pt-32 md:pt-40 pb-[440px] sm:pb-[520px] md:pb-[440px]">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-start">
      {/* 左栏 */}
      <div className="relative z-20 max-w-[400px]">
        <FadeUp delay={1}>
          <h2 className="text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground">
            了解如何在 60 天内借助 AI 从 0 做到 $11.5k。
          </h2>
        </FadeUp>
        <FadeUp delay={0.1}>
          <p className="mt-6 text-landing-text text-base sm:text-lg leading-[1.5] max-w-[380px]">
            学习如何借助 AI 将你的想法变成惊艳的网站——这正是代理机构收费 $5,000 才会提供的技能。立即加入 UI Rocket 培训，开始像专业人士一样进行构建。
          </p>
        </FadeUp>
        <FadeUp delay={0.2} className="mt-10">
          <PrimaryButton as="button">免费开始</PrimaryButton>
        </FadeUp>
      </div>
    </div>
  </div>

  {/* 固定在右侧边缘的仪表盘，位于草地后方，Y 轴视差 */}
  <motion.div
    style={{ y: dashboardY }}
    className="absolute top-[440px] sm:top-[460px] md:top-[500px] lg:top-20 left-4 right-4 sm:left-auto sm:-right-[8%] md:-right-[10%] lg:-right-[12%] z-10 sm:w-[85%] md:w-[80%] lg:w-[68%]"
  >
    <CtaDashboardMock />
  </motion.div>

  {/* 前景草地——位于仪表盘前方，Y 轴视差 */}
  <motion.img
    src="https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png"
    alt=""
    aria-hidden
    style={{ y: grassY }}
    className="pointer-events-none select-none absolute left-0 right-0 bottom-[-40px] sm:bottom-[-80px] lg:bottom-[-140px] w-full z-30 object-cover"
  />
</section>
```

### 行为概述
- 区域背景沿垂直方向从 transparent → `#14191E` 渐变。
- 滚动时，仪表盘从 `+120px` → `-120px` 平移（向上视差）。草地图像在 desktop 上从 `+200px` → `-200px` 平移，在 mobile 上从 `+80px` → `-40px` 平移，并位于仪表盘上方（`z-30` 高于 `z-10`）。
- 左栏保持静止并位于草地上方（`z-20` 的左侧文本容器原本可能被覆盖——保持草地为 `z-30`，使其覆盖仪表盘，同时标题在视觉上位于仪表盘左侧）。
- 标题“了解如何在 60 天内借助 AI 从 0 做到 $11.5k。”通过延迟的 FadeUp 进入；段落和按钮随后依次进入。
- Mobile（< sm）：仪表盘堆叠在标题下方（`top-[440px]`），隐藏聊天面板（`hidden sm:block`），仅显示 Velorah 预览。
- 按钮为 `PrimaryButton as="button"`，显示 **免费开始**；hover 会触发 AnimatedText 滑动。

---

## 验收清单
- [ ] 区域背景：底部使用 `transparent → #14191E` 线性渐变。
- [ ] 全局使用 Inter 字体；Velorah 品牌和标题使用 Instrument Serif；图标使用 Material Symbols Outlined。
- [ ] 标题文案必须完全是：`了解如何在 60 天内借助 AI 从 0 做到 $11.5k。`
- [ ] 副文本必须完全是上方段落；按钮标签必须完全是 `免费开始`。
- [ ] `CtaDashboardMock` 使用 `.liquid-glass` 外框，宽高比为 `3/4 → 16/10 → 16/9`，左侧为 ChatPanel（在 mobile 上隐藏），右侧为 Velorah。
- [ ] Velorah `<video>` 使用完全一致的 CloudFront URL、`autoPlay loop muted playsInline preload="auto"`，并以 `hsl(201 100% 13%)` 作为后备背景色。
- [ ] Velorah 内部文案/动画 classes 保持一致（`animate-fade-rise`、`-delay`、`-delay-2`）。
- [ ] `useScroll` + `useTransform` 视差：仪表盘 `120 → -120`，草地 desktop 为 `200 → -200` / mobile 为 `80 → -40`。
- [ ] 从 Cloudinary URL（`https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png`）加载的草地图像位于 `z-30`，覆盖 `z-10` 的仪表盘，设置 pointer-events-none 并占满全宽。
- [ ] FadeUp 进入顺序：标题（delay 1）→ 段落（0.1）→ 按钮（0.2）。
- [ ] PrimaryButton：白色胶囊按钮、黑色文字、AnimatedText hover 滑动。