TrustFlow

为金融机构的对话式 AI 平台 **Boomerang** 构建一个占满单个视口的营销落地页。技术：React + TypeScript + Vite + Tailwind CSS + Lucide React（仅使用 `ArrowRight`）。不使用其他 UI 库。

---

### 字体（须完全一致）

在 `index.html` 中加载：

1. **展示 / serif：** `P22 Mackinac W01 Book`  
   `https://db.onlinewebfonts.com/c/9d4d074c9335825a23cce178ee03b498?family=P22+Mackinac+W01+Book`

2. **UI / sans：** Inter 字重 300、400、500、600  
   `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap`

Tailwind `fontFamily`：
- `sans: ['Inter', 'sans-serif']`
- `serif: ['P22 Mackinac W01 Book', 'Georgia', 'serif']`

Body：`font-family: 'Inter', sans-serif`，使用抗锯齿平滑处理。页面标题：`建立长久关系`。背景：纯白色 `#FFFFFF`。主要文字和界面元素：`#191919`。

---

### CloudFront 视频（准确 URL——必需）

```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260715_090628_7052d8a6-a094-4341-a4a2-ad58493a67a9.mp4
```

---

### 首屏视频背景——boomerang 播放（关键行为）

实现一个铺满背景的 absolute `BoomerangVideoBg`（`absolute inset-0 z-0`），要求：

1. Wrapper：`scale-[1.15] origin-top overflow-hidden`（略微放大，从顶部锚定）。
2. 隐藏/捕获用 `<video>`：`src` = 上述 CloudFront URL，`muted`、`playsInline`、`preload="auto"`、`crossOrigin="anonymous"`、`className="w-full h-full object-cover object-top"`。
3. 加载时：播放一次（不使用原生 loop）。播放期间，将每一帧捕获到 offscreen canvases（优先使用 `requestVideoFrameCallback`，否则使用 `requestAnimationFrame`）。捕获宽度上限为 **960px**，高度按比例缩放。按 `currentTime` 去重。
4. On `ended`：停止捕获，存储帧，并从视频切换到显示用 `<canvas>`（`w-full h-full object-cover object-top`）。
5. Canvas 播放：以 **30fps**（`interval = 1000/30`）进行 ping-pong / boomerang 播放。帧索引正向推进到最后一帧，再反向退回第一帧，如此永久循环。
6. 帧尚未就绪时，显示实时视频；就绪后隐藏视频（`display: none`）并显示 canvas。

这是主要动态效果：在首屏背后柔和循环播放正向→反向的背景视频。

---

### Logo（准确 SVG）

自定义 SVG 标志（不使用 Lucide），`viewBox="0 0 256 256"`，`fill="currentColor"`：

```
M 144 256 L 27.598 256 L 144 139.598 Z
M 256 207.5 L 200 256 L 200 56 L 0 56 L 48 0 L 256 0 Z
M 0 204.402 L 0 112 L 92.402 112 Z
```

导航栏尺寸：`w-6 h-6 text-[#191919]`。旁边的文字标志：“Boomerang”，`font-semibold text-base tracking-tight text-[#191919]`，间距 `2.5`。

---

### 固定导航栏

- `fixed top-0 left-0 right-0 z-50`
- 内边距：`px-6 sm:px-10 md:px-14`、`py-4 sm:py-5`
- 三个区域：左侧 logo | 中间链接（低于 `md` 时隐藏）| 右侧 CTA
- 链接：产品、解决方案、定价、公司——`text-sm text-[#191919]/70`，hover 时变为完整 `#191919`，`transition-colors duration-200`，hrefs 为 `#product` `#solutions` `#pricing` `#company`
- CTA 按钮：“预约演示”——`px-5 py-2.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
- 无导航背景 / blur / border——透明覆盖在视频上

---

### 首屏区域（第一个视口 = 全屏）

- `relative flex flex-col items-center overflow-hidden h-screen`
- 视频背景位于 `z-0`；内容位于 `z-10`

**首屏文案区块**（居中）：
- 顶部内边距：`pt-24 sm:pt-26 md:pt-32`，水平 `px-4 sm:px-6`
- H1（serif Mackinac）：  
  `建立长久` + 换行 + `关系。`  
  Classes：`font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal`
- 副文案最大宽度 `max-w-sm sm:max-w-md`，`mt-5 sm:mt-6 md:mt-8`，`text-sm md:text-base text-[#191919]/70 leading-relaxed`：  
  “面向现代金融机构的对话式 AI 平台——其智能体可通过电子邮件、SMS 和语音处理借款人的完整生命周期。”
- 第二个“预约演示”按钮：`mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5`，采用与导航栏 CTA 相同的黑色胶囊样式

**底部信息面板**（`mt-auto`，位于视口底部）：
- 外层：`w-full max-w-5xl px-4 sm:px-6`
- 卡片：`bg-white/90 backdrop-blur-sm border border-gray-200 border-b-0 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm`——紧贴底部（无底部边框/圆角）
- **第 1 行——2 列**（`md:grid-cols-2`，间距 `6 / 8 / 16`）：
  - 左侧：微型标签 `我们做什么？`——`text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium`  
    接着是 H2 serif：“推动进展的 / 对话”——`mt-3 text-2xl sm:text-3xl md:text-4xl font-serif font-normal leading-tight tracking-tight`（从 `sm` 起换行）
  - 右侧：正文底部对齐——`text-sm md:text-[15px] text-[#191919]/70 leading-relaxed`：  
    “专为受监管金融机构构建的对话式 AI。智能体能够进行真正的对话，接入你正在运行的系统，并展示其工作过程。”
- **细分隔线：** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
- **第 2 行——3 个交互行**（`sm:grid-cols-3`，间距 `2` / `3`）：
  - 项目：
    - `01 / 对话式`
    - `02 / 互联`
    - `03 / 合规`
  - 每项：`bg-[#F4F3F3] hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`、`px-4 sm:px-6 py-3.5 sm:py-4`，使用 flex 两端对齐
  - 编号：`text-[#191919]/40`；斜杠：`mx-2 text-[#191919]/30`；标签：`font-medium`
  - Lucide `ArrowRight` `w-4 h-4 text-gray-400`；group hover 时：`text-gray-700` + `translate-x-0.5`，`transition-all duration-200`

---

### 布局 / 动效摘要

- 页面：`min-h-screen bg-white overflow-x-hidden`
- 仅包含以下有意设计的动态效果：
  1. Canvas 上的 Boomerang 视频 ping-pong 播放
  2. 导航链接和按钮的颜色过渡（200ms）
  3. 功能行的 hover 背景变化和箭头轻微移动（200ms）
- 不使用紫色，不将卡片作为首屏主体，不使用数据条，不使用悬浮徽章。单一构图：品牌 + 标题 + 一句话 + CTA + 满幅视频，“我们做什么？”面板锚定在第一个视口底部。
- 响应式：导航链接在低于 `md` 时隐藏；功能行在移动端堆叠；排版按指定规格缩放。

像素级忠实还原：使用相同文案、颜色（`#191919`、`#F4F3F3`、white/90 玻璃面板）、字体、CloudFront URL，以及捕获→boomerang canvas 视频技术。

---