科技黑色电影风格的关于页面

---

## 提示词

使用 React 19、TypeScript、Vite、Tailwind CSS v4（`@tailwindcss/vite`）和 `motion`（来自 `motion/react`）创建一个纯 `#FF0000` 红色背景的单一全屏 section。

### 字体（index.css）

```css
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Manrope:wght@400;600&family=Marck+Script&display=swap');
@import "tailwindcss";

@theme {
  --font-manrope: "Manrope", sans-serif;
  --font-italiana: "Italiana", serif;
  --font-marck: "Marck Script", cursive;
}
```

### Section 容器

```
<section className="relative min-h-screen w-full bg-[#FF0000] flex flex-col z-10">
```

---

### 1. 居中内容

**外层 wrapper：**
```
<div className="flex-1 flex flex-col items-center w-full pt-[100px] md:pt-[400px]">
```

**内部容器：**
```
<div className="flex flex-col items-center w-full px-8 text-center z-20 relative max-w-[900px] h-auto md:h-[620px] mx-auto">
```

**a) Logo SVG**——白色填充，80x80，`mb-12`：
```tsx
<svg width="80" height="80" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fillRule="evenodd" clipRule="evenodd" d="M60 120C26.8629 120 0 93.1371 0 60V0C22.5654 0 42.2213 12.4569 52.4662 30.8691C38.4788 34.2089 28.0787 46.7902 28.0787 61.8006V63.1443C28.0787 79.9648 41.7146 93.6006 58.5353 93.6006H59.8789L59.8785 61.8006C59.8785 79.3633 74.1159 93.6006 91.6787 93.6006L91.6787 61.8006C91.6787 44.2783 77.5071 30.0661 60 30.0008L60 0H62.5352C94.2722 0 120 25.7279 120 57.4648V60C120 93.1371 93.1371 120 60 120Z" fill="white"/>
</svg>
```

**b) 使命宣言：**
```tsx
<p className="text-white text-[16px] h-[100px] w-full max-w-[400px] leading-[1.6] mb-[40px] uppercase tracking-wider mx-auto">
  我们打造这个平台只有一个目标：消除运营混乱，让你的日常业务重新恢复平衡
</p>
```

**c) 手写体签名：**
```tsx
<div className="font-marck text-white text-[120px] leading-none mb-[32px]">
  S.P.D
</div>
```

**d) 两个段落**（Title Case、font-light）：
```tsx
<div className="text-white leading-[1.6] mb-[100px] md:mb-24 w-full flex flex-col items-center font-light">
  <p className="mb-[24px] text-[16px] w-[400px] max-w-full text-center">
    我受够了那些实际节省不了多少精力，却要求投入更多精力的软件。因此，我们设计了一套在后台静默运行的自主架构。
  </p>
  <p className="text-[16px] w-[400px] max-w-full text-center">
    你的事业应该服务于你的生活，而不是吞噬它。让我们的算法承担繁重工作，你只需专注于愿景。
  </p>
</div>
```

---

### 2. 带红色渐变融合效果的底部视频

```tsx
<div className="relative w-full shrink-0">
  <div className="absolute top-0 left-0 w-full h-[100px] bg-gradient-to-b from-[#FF0000] to-transparent z-10 pointer-events-none" />
  <video autoPlay loop muted playsInline className="w-full h-auto block object-contain">
    <source
      src="https://res.cloudinary.com/daklr2whx/video/upload/v1778602552/track-video_2_s9lp53.mp4"
      type="video/mp4"
    />
  </video>
</div>
```

视频顶部有一层 100px 的渐变 overlay，从 `#FF0000` 渐变至透明，让红色背景与视频无缝融合。视频使用 `object-contain`——保持原生宽高比、占满宽度且不裁剪。`shrink-0` 可防止 flexbox 压缩视频。

---

### 素材 URL

| 素材 | URL |
|---|---|
| 底部视频 | `https://res.cloudinary.com/daklr2whx/video/upload/v1778602552/track-video_2_s9lp53.mp4` |

托管于 **Cloudinary**。