智能运营

# 精确复刻提示词 — NovaAI 落地页

以**像素级忠实度**复刻此页面。技术栈：React + TypeScript + Vite + Tailwind CSS + lucide-react。不要自行创作其他文案、布局、字体、颜色或效果。

---

## 页面标识

- **标题：** `NOVA_AI — 今日 AI 与大胆梦想同行`
- **品牌：** 小写 `novaai`，左侧放置 Lucide `Hexagon` 图标（size 24，strokeWidth 1.5）
- **整体感觉：** 深色电影感 AI 营销网站；全视口滚动擦洗视频背景；带投影的白色文字；磨砂玻璃 UI 标签；疏朗的编辑式布局；不要紫色渐变，不要奶油色纸张质感，不要图标卡片网格

---

## 素材（使用以下精确 URL）

**Hero 滚动视频（CloudFront — 必需）：**
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260729_102822_0e6c87e8-c141-4744-bf32-ad30db296371.mp4
```
视频内容：抽象 3D 形态（垂落的白色线缆，末端泛着金色光芒 → 带暖橙色核心的有机白色球体／脑状褶皱），柔和的蓝灰色薄雾／颗粒背景，漂浮的散景粒子。1920×1080。

**可选的本地镜像，用于提高可靠性：** `/hero.mp4`（同一文件）和 `/hero-poster.jpg`（首帧静态图）。生产代码优先使用 CloudFront URL；离线／开发环境可使用本地副本。

**肖像（“与 Mitha 交谈”）— 精确 URL：**
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260728_050334_5b076e26-0ce7-4898-b432-d764190e448f.png&w=1280&q=85
```
显示为 `h-24 w-20`（`96×80px`）、`rounded-lg`、`object-cover`。Alt：`Mitha，NovaAI 联合创始人`。

---

## 字体

- 加载 Google Fonts Inter 字重 **400, 500, 600, 700**
- 正文：`font-family: 'Inter', system-ui, sans-serif`
- Tailwind：`font-sans` 和 `font-mono` 均映射到 Inter（等宽标签仍使用 `font-mono` 类，但以 Inter 渲染）
- 文字启用抗锯齿；选中文本颜色为 `rgba(255,255,255,0.2)`
- 页面背景：`#0a0a0a`；默认文字为白色

---

## 全局结构

```
relative 根节点
  ScrollVideo (fixed inset-0 z-0, pointer-events-none)
  relative z-10 容器
    Navbar (fixed top)
    main
      SectionOne (min-h-screen / 100svh)
      spacer div h-[80vh] (aria-hidden)  ← 对滚动视频时长至关重要
      SectionTwo (min-h-screen / 100svh)
```

所有位置的水平内边距节奏：`px-5 sm:px-8 md:px-12`。  
固定导航栏下方的区块顶部内边距：`pt-24 sm:pt-28`。  
底部内边距：`pb-12 md:pb-16`。

---

## 滚动擦洗视频背景（精确行为）

固定的全出血图层 `z-0`，背景 `#0a0a0a`，`overflow-hidden`，`pointer-events-none`。

**图层（从底到顶）：**
1. 海报 `<img>` — 完整覆盖；视频拥有已解码帧或帧缓存就绪后淡出（`opacity-0`，500ms）
2. `<video>` — muted、playsInline、preload=auto、object-cover；仅在视频拥有画面帧且 canvas 帧缓存尚未就绪时可见，随后淡出
3. `<canvas>` — 完整覆盖；绘制擦洗帧；就绪后淡入

**滚动映射：**
- `progress = scrollY / (scrollHeight - innerHeight)`，限制在 0–1
- 使用 lerp 平滑：每次 `requestAnimationFrame` 执行 `smoothed += (target - smoothed) * 0.12`
- 使用 **object-cover** 数学方式绘制（取最大缩放比例，居中裁切）

**帧缓存（首选的流畅路径）：**
- 屏幕外视频加载同一 URL
- 提取最多 **90** 帧（或 `duration * 12`，最少 24），最大宽度 **960px**
- 等待可见视频触发 `loadeddata`，再让出 300ms 后开始提取
- 就绪后，canvas 根据平滑后的进度索引绘制缓存的 `ImageBitmap`

**回退方案：**帧未就绪时，将可见 `<video>` seek 到 `smoothed * (duration - 0.05)`（差值 > 0.04s 时执行 seek）

**Canvas DPR：** `min(devicePixelRatio, 2)`

不要以普通循环背景的方式 autoplay — 动画**仅由滚动驱动**。

---

## 显现动画（每个文字／UI 区块）

IntersectionObserver，threshold `0.15`。  
隐藏：`translate-y-8 opacity-0`  
可见：`translate-y-0 opacity-100`  
过渡：`all 700ms ease-out`，`will-change-transform`  
按下文指定，为每个元素设置以 ms 为单位的 `transition-delay`。

---

## 玻璃／材质系统（精确 token）

始终一致地复用以下设置：

| Token | Classes |
|--------|---------|
| 玻璃面板 | `bg-white/15 backdrop-blur-md`（较大面板使用 `bg-white/10`） |
| 玻璃边框 | `border border-white/15` 或 `border-white/20` 或 `border-white/25` |
| 左侧强调徽章 | `border-l-2 border-white bg-white/15 px-3 py-1.5 backdrop-blur-md` + 等宽大写标签 |
| 主 CTA | 纯白色胶囊／圆角，黑色文字，hover `bg-white/85` |
| 次 CTA | 玻璃边框 + `bg-white/10` 或 `bg-white/15`，白色文字 |
| 视频上的文字 | 白色 + `drop-shadow-md` / `drop-shadow-lg` |
| 等宽标签 | `font-mono text-[10px]` 或 `text-[11px]` 或 `text-xs`、`uppercase`、`tracking-[0.15em]` |

---

## Navbar（fixed，z-50）

- 全宽，`border-b border-white/15`
- 行布局：左侧 logo | 中间导航（md+）| 右侧 CTA
- Logo：Hexagon + `novaai`（`text-lg sm:text-xl font-medium tracking-tight`）
- 链接（低于 md 时隐藏）：`项目`，带上标 `6`（`font-mono text-[10px] text-white/60`）、`关于`、`博客`、`联系` — `text-sm text-white/85`，hover `text-white`，间距 `gap-8 lg:gap-10`
- CTA：`获取免费咨询` — `rounded-md border border-white/20 bg-white/15 backdrop-blur-md px-4 py-2 text-xs sm:px-5 sm:text-sm`，hover `bg-white/25`
- 显现延迟：logo 0；链接 `100 + i*100` ms；CTA `500` ms

---

## Section One — Hero

全视口 flex column `justify-between`。

**顶部行**（`flex-col gap-8` → `sm:flex-row justify-between`）：

**左侧 — 服务列表**（gap-2），每项显现延迟 `150 + i*120`：
```
/ AI 自动化
/ AI 集成
/ AI 智能体开发
```
样式：`font-mono text-xs uppercase tracking-[0.15em] text-white/90 drop-shadow-md`

**右侧 — 简介**（`max-w-xs sm:text-right`，延迟 300）：
> 我们设计自动化方案，让贵公司的运营方式更加清晰、精准、高效。  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**底部行**（`flex-col gap-8` → `md:flex-row items-end justify-between`）：

**左侧：**
1. 徽章延迟 150：`我们已为 100+ 家企业实现自动化` — 左侧强调玻璃徽章，`font-mono text-[11px] uppercase tracking-[0.15em]`，`mb-5`
2. H1 延迟 280：
```
清晰。精准。
自动化。
```
`text-5xl sm:text-6xl lg:text-7xl font-normal leading-[1.05] tracking-tight text-white drop-shadow-lg`

**右侧 — 玻璃联系卡片**（延迟 420）：
- 容器：`flex items-center gap-4 rounded-xl bg-white/15 p-3 backdrop-blur-md`
- 图片：使用上方肖像 URL，`h-24 w-20 rounded-lg object-cover`
- 文字列（`gap-1.5 pr-2`）：
  - `与 Mitha 交谈` — `text-sm font-medium text-white`
  - `NovaAI 联合创始人` — 等宽 `text-[10px] uppercase tracking-[0.15em] text-white/60`
  - 按钮：`预约 15 分钟通话` + Lucide `ChevronRight` size 14 — `rounded-full bg-white px-4 py-2 text-xs font-medium text-black`，hover `bg-white/85`，`mt-1.5`

---

## 中部间隔区

在两个区块之间放置带 `h-[80vh]` 的 `div`，让滚动进度有足够空间在 Hero 与 Section Two 之间擦洗视频。

---

## Section Two — 能力

使用相同的全视口 flex `justify-between` 外壳。

**顶部行：**

**左侧徽章**延迟 120：`按需洞察` — 与 Hero 相同的左侧强调玻璃徽章。

**右侧文案**延迟 220（`max-w-sm sm:text-right`）：
> 我们的 AI 不只是回应 — 它会解读、提炼，并交付你所需的关键信号。  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**底部区域**（`flex-1 justify-end`，`flex-col gap-12` → `md:flex-row items-end justify-between gap-16`）：

**左栏**（`max-w-xl`）：
1. H2 延迟 180：
```
学会看得
透彻。
```
使用与 H1 相同的标题字号（`text-5xl sm:text-6xl lg:text-7xl … drop-shadow-lg`）
2. 正文延迟 320（`mt-6 max-w-md text-sm sm:text-base text-white/80 drop-shadow-md`）：
> 从第一张草图到最终渲染，Nova 将原始意图转化为团队可执行的决策 — 安静、精准且迅速。
3. CTA 延迟 420（`mt-8 flex flex-wrap gap-3`）：
   - 主胶囊按钮：`运行演示` + ChevronRight 14 — `rounded-full bg-white px-5 py-2.5 text-xs sm:text-sm font-medium text-black`，hover `bg-white/85`
   - 次按钮：`免费咨询` — `rounded-full border border-white/25 bg-white/10 backdrop-blur-md px-5 py-2.5 text-xs sm:text-sm`，hover `bg-white/20`

**右侧 — 磨砂能力面板**  
`w-full max-w-md rounded-2xl border border-white/15 bg-white/10 backdrop-blur-md px-5 sm:px-6`

三行（除最后一行外，分隔线均为 `border-b border-white/15`），每行 `flex gap-5 py-5`，显现延迟 `300 + i*110`：

| # | 标题 | 正文 |
|---|--------|------|
| 01 | 实时视觉 | 在情境发生时读取上下文，并在你开口前呈现真正重要的信息。 |
| 02 | 分层洞察 | 从粗略轮廓推进到清晰成果，同时不丢失主线。 |
| 03 | 自适应速度 | 学习你的节奏，并在工作过程中让每轮成果更加精炼。 |

- 索引：`font-mono text-[11px] tracking-[0.15em] text-white/55`
- 标题：`text-base sm:text-lg font-medium text-white` + ChevronRight 16（`text-white/40`，hover：translate-x-0.5 + `text-white`）
- 正文：`mt-1.5 text-sm leading-relaxed text-white/70`

---

## 交互／动效检查清单

1. 滚动擦洗将页面滚动映射到视频时间线（经平滑处理）
2. 元素进入视口时交错向上淡入（700ms，按各自延迟）
3. 按钮／链接颜色过渡 `duration-300`
4. 能力项的 chevron 在 hover 时向右轻移
5. 海报 → 视频 → canvas 的透明度交叉淡化 `duration-500`
6. Hero 视频不得循环 autoplay

---

## 响应式规则

- 低于 `md` 时隐藏导航链接
- Hero／区块在移动端垂直堆叠；按指定设置从 `sm`／`md` 起并排显示
- 优先使用 `supports-[height:100svh]:min-h-[100svh]` 加 `min-h-screen`
- 触控端：视频设置 `playsInline` + muted

---

## 禁止事项

- 不要将 Inter 替换为其他展示字体
- 不要使用不同于上方 CloudFront URL 的视频 URL
- 不要使用旧的 Pexels 肖像
- 不要将 Section Two 重构为图标卡片堆栈
- 不要在视频上覆盖不透明的纯色背景（仅使用玻璃／透明容器）
- 不要移除 `80vh` 间隔区

---

## 验收标准

页面顶部：固定玻璃导航栏 + 服务列表 + 简介 + “清晰。精准。自动化。” + 位于滚动视频上的 Mitha 玻璃卡片。  
滚动擦洗可流畅推进 CloudFront 视频。  
间隔区之后：“按需洞察” + “学会看得透彻。” + 双 CTA + 包含三项的磨砂能力面板。  
在 `localhost:5199` 上与当前 NovaAI 页面实现视觉匹配。