美妆分类

---

**重现“分类”区块的提示词：**

> 使用 React + Tailwind CSS 构建一个“分类”区块，严格遵循以下规格：
>
> **区块容器：**
> - 全宽 `<section>`，使用 `bg-white`、`text-white`、`min-h-screen`。
> - Flexbox 纵向布局，使用 `justify-center` 让网格内容垂直居中。
> - 区块本身不设置水平或垂直内边距。
>
> **网格布局：**
> - CSS 网格：移动端使用 `grid-cols-1`，中等及以上屏幕使用 `md:grid-cols-3`。
> - 整个网格使用基于 IntersectionObserver 的显现动画（threshold `0.1`）：在 `duration-1000 ease-out` 内从 `opacity-0 translate-y-12` 过渡到 `opacity-100 translate-y-0`。
>
> **3 张分类卡片及其准确数据：**
> 1. 名称：`"face"` | 视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203023_87a26602-2898-4acc-a396-c7a2b5ad84fd.mp4`
> 2. 名称：`"beauty tools"` | 视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203415_b86e3f19-2aec-46cd-9a86-b64c40118e38.mp4`
> 3. 名称：`"body"` | 视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203051_85fee398-ea01-4aa0-972b-137a74213be5.mp4`
>
> **卡片布局（每张卡片）：**
> - `position: relative`，采用 Flexbox 纵向布局，并使用 `justify-between`、`items-start`。
> - 内边距：移动端为 `p-6`，`sm:p-8`，`md:p-12`。
> - 高度：移动端为 `min-h-[400px]`，`sm:min-h-[500px]`，`md:min-h-[750px]`。
> - 使用 `overflow-hidden`。
> - 每张卡片使用交错的 `transitionDelay`，值为 `index * 150ms`。
> - 使用 `group` 实现悬停交互。
>
> **背景视频：**
> - `<video>` 元素带有以下属性：`autoPlay`、`loop`、`muted`、`playsInline`。
> - 绝对定位：`absolute inset-0 w-full h-full object-cover`。
> - 悬停效果：通过 `transition-transform group-hover:scale-105`，在 `duration-700` 内缩放至 `scale-105`。
> - `src` 属性直接设置为视频 URL（不使用 `<source>` 标签）。
>
> **深色遮罩：**
> - 一个绝对定位在视频上方的 `<div>`：`absolute inset-0`。
> - 默认：`bg-black/10`。悬停时：`group-hover:bg-black/20`。
> - 使用 `transition-colors duration-500`。
>
> **分类名称（竖排文字）：**
> - `<h2>` 标签，位于遮罩上方：`relative z-10`。
> - 字号：移动端 `text-5xl`，`sm:text-6xl`，`md:text-7xl`，`lg:text-8xl`。字重：`font-medium`。
> - **竖排文字**：通过内联样式 `writingMode: 'vertical-lr'` 配合 `transform: 'rotate(180deg)'` 实现（使文字从下向上阅读）。
> - 悬停时：在 `duration-500` 内应用 `group-hover:-translate-y-2`。
> - 文本为小写（按数据原样渲染："face"、"beauty tools"、"body"）。
>
> **购买按钮：**
> - `<button>` 使用 `btn-primary` 类（见下方 CSS），并加上 `relative z-10 mt-auto px-8 py-3 bg-white text-black rounded-full text-sm`。
> - 文本：小写的 `"shop {category name}"`（例如 "shop face"、"shop beauty tools"、"shop body"）。
> - `mt-auto` 将按钮推至卡片底部。
>
> **`btn-primary` 所需的 CSS（位于全局样式表中）：**
> ```css
> .btn-primary {
>   position: relative;
>   overflow: hidden;
>   transition: transform 0.3s ease, box-shadow 0.3s ease;
> }
> .btn-primary::before {
>   content: '';
>   position: absolute;
>   inset: 0;
>   background: linear-gradient(120deg, transparent 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%);
>   transform: translateX(-100%);
>   transition: transform 0.5s ease;
> }
> .btn-primary:hover {
>   transform: translateY(-2px);
>   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
> }
> .btn-primary:hover::before {
>   transform: translateX(100%);
> }
> .btn-primary:active {
>   transform: translateY(0);
>   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
> }
> ```
>
> **IntersectionObserver hook（`useInView`）：**
> - 接受一个 `threshold` 参数（默认值为 `0.15`），并使用 ref。
> - 观察该元素；一旦 `isIntersecting` 为 true，就设置 `isVisible = true` 并停止观察（单次动画）。
> - 返回 `{ ref, isVisible }`。
> - 此区块调用时使用 threshold `0.1`。

---