Cognitra 功能展示

---

**提示词：**

创建一个位于固定背景视频之上的全 viewport section（100vh）。该 section 本身没有背景色——完全透明，因此可以透出其后的固定视频。

**背景视频（固定在所有内容之后）：**
一个固定在 viewport 上的 `<video>` 元素（`position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 0`），使用以下 source：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_135830_bb6491d1-9b66-4aec-9722-13b4dfe3fb46.mp4
```
它应设置 `autoPlay`、`muted`、`loop` 和 `playsInline`。

**Section 布局：**
- `position: relative; z-index: 1`
- `display: flex; flex-direction: column; justify-content: center`（垂直居中内容）
- `height: 100vh`
- Padding：`70px 32px 32px 32px`

**内容块**（位于 section 内）：
- 一个 wrapper `div`，设置 `display: flex; flex-direction: column; align-items: flex-start; max-width: 720px`
- **标题（`<h2>`）：**
  - 文本：`"WE BUILD END-TO-END AI AUTOMATION SYSTEMS."`
  - 每个单词分别包裹在独立的 `<span>` 元素中，并使用 `display: flex; flex-wrap: wrap; gap: 0.25em` 显示
  - 每个单词通过依次错开的 fade-up animation 进入：初始为 `opacity: 0, y: 32px`，使用 Framer Motion `whileInView` 动画至 `opacity: 1, y: 0`，并设置 `viewport: { once: true, amount: 0.2 }`
  - Stagger：第一个单词的 `delay: 0.15`，之后每个单词增加 `0.08s`（因此第 2 个单词 = 0.23，第 3 个单词 = 0.31，依此类推）
  - Animation easing：`[0.22, 1, 0.36, 1]`，duration：`0.7s`
  - Typography：`font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0`

- **辅助文本（`<p>`）：**
  - 文本：`"We provide all-in-one AI automation services in one place."`
  - `margin-top: 24px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.85); max-width: 260px`
  - 使用与单词相同的 fade-up animation，但设置 `delay: 0.9`，默认 `y: 24px`

**字体：**
```css
@import url('https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var');
* { font-family: 'Helvetica Now Var', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
```

**FadeUp 组件（可复用，Framer Motion）：**
```tsx
import { motion } from 'framer-motion';
import { CSSProperties, ReactNode } from 'react';

type FadeUpProps = {
  children: ReactNode;
  delay?: number;
  duration?: number;
  y?: number;
  className?: string;
  style?: CSSProperties;
  as?: 'div' | 'section' | 'span' | 'h1' | 'h2' | 'h3' | 'p' | 'nav';
  once?: boolean;
};

export function FadeUp({
  children, delay = 0, duration = 0.7, y = 24,
  className, style, as = 'div', once = true,
}: FadeUpProps) {
  const Tag = motion[as];
  return (
    <Tag
      className={className}
      style={style}
      initial={{ opacity: 0, y }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once, amount: 0.2 }}
      transition={{ duration, delay, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </Tag>
  );
}
```

**Mobile 响应式（max-width: 900px）：**
- Section padding 调整为 `90px 18px 32px 18px`

**Tech stack：** React 18、TypeScript、Vite、Tailwind CSS 3、Framer Motion 12。

---