提示词
为金融机构的对话式 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——必需）
```
```
---
### 首屏视频背景——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 视频技术。
---原文提示词（English）
Build a single full-viewport marketing landing page for **Boomerang**, a conversational AI platform for financial institutions. Tech: React + TypeScript + Vite + Tailwind CSS + Lucide React (`ArrowRight` only). No other UI libraries.
---
### Fonts (exact)
Load in `index.html`:
1. **Display / serif:** `P22 Mackinac W01 Book`
`https://db.onlinewebfonts.com/c/9d4d074c9335825a23cce178ee03b498?family=P22+Mackinac+W01+Book`
2. **UI / sans:** Inter weights 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` with antialiased smoothing. Page title: `Build Lasting Relationships`. Background: pure white `#FFFFFF`. Primary text/chrome: `#191919`.
---
### CloudFront video (exact URL — required)
```
```
---
### Hero video background — boomerang playback (critical behavior)
Implement a `BoomerangVideoBg` absolute full-bleed background (`absolute inset-0 z-0`) with:
1. Wrapper: `scale-[1.15] origin-top overflow-hidden` (slightly oversized, anchored from top).
2. Hidden/capture `<video>`: `src` = CloudFront URL above, `muted`, `playsInline`, `preload="auto"`, `crossOrigin="anonymous"`, `className="w-full h-full object-cover object-top"`.
3. On load: play once (no native loop). While playing, capture every frame to offscreen canvases (prefer `requestVideoFrameCallback`, else `requestAnimationFrame`). Cap capture width at **960px**, scale height proportionally. Deduplicate by `currentTime`.
4. On `ended`: stop capture, store frames, switch from video to a display `<canvas>` (`w-full h-full object-cover object-top`).
5. Canvas playback: ping-pong / boomerang at **30fps** (`interval = 1000/30`). Advance frame index forward to last, then reverse to first, forever.
6. While frames aren’t ready, show the live video; once ready, hide video (`display: none`) and show canvas.
This is the main motion: a soft looping forward→reverse background video behind the hero.
---
### Logo (exact SVG)
Custom SVG mark (not 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
```
Navbar size: `w-6 h-6 text-[#191919]`. Wordmark beside it: “Boomerang”, `font-semibold text-base tracking-tight text-[#191919]`, gap `2.5`.
---
### Fixed navbar
- `fixed top-0 left-0 right-0 z-50`
- Padding: `px-6 sm:px-10 md:px-14`, `py-4 sm:py-5`
- Three zones: logo left | center links (hidden below `md`) | CTA right
- Links: Product, Solutions, Pricing, Company — `text-sm text-[#191919]/70`, hover to full `#191919`, `transition-colors duration-200`, hrefs `#product` `#solutions` `#pricing` `#company`
- CTA button: “Book A Demo” — `px-5 py-2.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
- No nav background / blur / border — transparent over the video
---
### Hero section (first viewport = full screen)
- `relative flex flex-col items-center overflow-hidden h-screen`
- Video bg at `z-0`; content at `z-10`
**Hero copy block** (centered):
- Top padding: `pt-24 sm:pt-26 md:pt-32`, horizontal `px-4 sm:px-6`
- H1 (serif Mackinac):
`Build lasting` + line break + `relationships.`
Classes: `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal`
- Subcopy max-width `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`:
“Conversational AI platform for modern financial institutions — agents that handle the full borrower lifecycle across email, SMS, and voice.”
- Second “Book A Demo” button: `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5` same black pill styling as nav CTA
**Bottom info panel** (`mt-auto`, sits on bottom of viewport):
- Outer: `w-full max-w-5xl px-4 sm:px-6`
- Card: `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` — flush to bottom (no bottom border/radius)
- **Row 1 — 2 cols** (`md:grid-cols-2`, gaps `6 / 8 / 16`):
- Left: micro-label `WHAT DO WE DO?` — `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium`
then H2 serif: “Conversations that / build momentum” — `mt-3 text-2xl sm:text-3xl md:text-4xl font-serif font-normal leading-tight tracking-tight` (line break from `sm` up)
- Right: body bottom-aligned — `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed`:
“Conversational AI built for regulated financial institutions. Agents that hold a real conversation, plug into the systems you run, and show their work.”
- **Hairline divider:** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
- **Row 2 — 3 interactive rows** (`sm:grid-cols-3`, gap `2` / `3`):
- Items:
- `01 / Conversational`
- `02 / Connected`
- `03 / Compliant`
- Each: `bg-[#F4F3F3] hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`, `px-4 sm:px-6 py-3.5 sm:py-4`, flex space-between
- Number: `text-[#191919]/40`; slash: `mx-2 text-[#191919]/30`; label: `font-medium`
- Lucide `ArrowRight` `w-4 h-4 text-gray-400`; on group hover: `text-gray-700` + `translate-x-0.5`, `transition-all duration-200`
---
### Layout / motion summary
- Page: `min-h-screen bg-white overflow-x-hidden`
- Only intentional motions:
1. Boomerang video ping-pong on canvas
2. Color transitions on nav links & buttons (200ms)
3. Feature-row hover bg + arrow nudge (200ms)
- No purple, no cards-as-hero, no stat strips, no floating badges. One composition: brand + headline + one sentence + CTA + full-bleed video, with the “What do we do?” panel anchored at the bottom of the first viewport.
- Responsive: nav links hide below `md`; feature rows stack on mobile; typography scales as specified.
Reproduce pixel-faithfully: same copy, colors (`#191919`, `#F4F3F3`, white/90 glass panel), fonts, CloudFront URL, and the capture→boomerang canvas video technique.
---视频地址
