CozyPaws

## 重现 CozyPaws Hero Section 的提示词

**使用 React、Tailwind CSS 和 Lucide React icons 构建一个单页“CozyPaws”宠物商店 Hero Section。布局高度为视口高度（h-screen），不可滚动，包含三个响应式断点（移动端、平板端 md、桌面端 lg+）。使用 Vite + TypeScript。**

---

### 字体（Google Fonts）
- **Inter**（字重：400、500、600）— 正文/UI 文本
- **DM Serif Display**（字重：400）— 仅用于 Hero 标题

通过 `index.html` 中的 `<link>` 加载：
```
https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap
```

使用 CSS 工具类 `.font-serif-display { font-family: 'DM Serif Display', serif; }` 和 `body { font-family: 'Inter', sans-serif; }` 应用字体

---

### 配色方案
- 背景：`#EFFDF0`（浅薄荷绿）
- 主深绿色：`#1a3d1a`
- Hover 绿色：`#2a5a2a`
- 橙色强调色：`#E86A10`
- 橙色 Hover：`#d45e0d`

---

### 资源 URL（全部为外部资源，请勿下载）

| 资源 | URL |
|-------|-----|
| Logo SVG | `https://polo-pecan-73837341.figma.site/_assets/v11/0ae29d6d9628bede667f90d57bebe81b8f1ec2bf.svg` |
| 头像 | `https://polo-pecan-73837341.figma.site/_assets/v11/e62173d41f91350a59628e8a9a55ae078a886fb9.png?w=128` |
| 产品卡片（猫屋） | `https://polo-pecan-73837341.figma.site/_assets/v11/3e5158dad63d392ade022e81890edc9f54d750bc.png` |
| 视频卡片（TikTok/YouTube） | `https://polo-pecan-73837341.figma.site/_assets/v11/76be6ec3a93a703b15e9cc01e764a4e3f9d7d2c0.png` |
| 底部左侧图片 | `https://polo-pecan-73837341.figma.site/_assets/v11/8d44b25186ef45a5789c74668fb781cea4e1ff49.png` |
| 底部中央图片（最高） | `https://polo-pecan-73837341.figma.site/_assets/v11/96745c4e72ad5c5208e53a885df797fd82cd854a.png?h=1024` |
| 底部右侧图片 | `https://polo-pecan-73837341.figma.site/_assets/v11/81bd2e7a66b58f3d8f3ad78fd1ebf01af8dfdee1.png` |

---

### 页眉
- 全宽，桌面端使用 `px-12`，`py-4`，relative z-30
- **左侧：** Logo 图片（桌面端 205x52px，移动端 130x33px）
- **中央导航（低于 md 时隐藏）：** 链接“首页”（text-gray-900）、“商店”、“配送与付款”、“品牌”、“博客”（text-gray-600），text-sm font-medium，gap-8
- **右侧：** 搜索按钮（圆形、带边框，低于 sm 时隐藏）、收藏按钮（橙色圆形、白色星形图标、徽标“4”）、购物车按钮（圆形、带边框、购物车图标、徽标“1”）、头像（圆形，40x40）
- 徽标：absolute -top-1 -right-1，20x20，bg-orange，border-2 border-background，白色文本 10px bold

---

### 桌面端 Hero 布局（lg+）

**文本层（z-5）：** 居中，`px-12 pt-[5.4rem]`
- 标题：`font-serif-display`，颜色 `#1a3d1a`，`text-[clamp(60px,7.5vw,110px)]`，`leading-[0.95]`，tracking-tight
- 文本内容：“一切”（第 1 行）、“宠物所爱”（第 2 行）
- 每个单词都是一个 `inline-block`，并带有交错的 `animate-word-pop` 动画

**左侧产品卡片：** 绝对定位于 `top-[50px] left-12`
- 宽度：`clamp(160px,14vw,260px)`
- 图片：aspect-ratio 260/257，rounded-2xl，overflow-hidden
- 右下角箭头按钮（深绿色圆形，ArrowUpRight icon）
- 下方文本：“温馨猫屋”使用 gray-700，“$49.99”使用深绿色 bold
- 通过 clamp 设置响应式字号

**右侧视频卡片：** 绝对定位于 `top-[50px] right-12`
- 宽度：`clamp(120px,10vw,177px)`
- 图片：aspect-ratio 177/287，rounded-2xl
- Play 按钮（深绿色圆形）位于靠近底部的中央
- Play 按钮下方文本：“在 TikTok 和 YouTube 上观看产品评测”

**底部 3 张图片：** 绝对定位于 `bottom-0 left-0 right-0`，z-10，flex items-end，无间隙
- 左侧图片：`flex-1`，max-height `min(70vh, 55vw)`
- 中央图片：`flex-[1.265]`（更宽），max-height `min(85vh, 70vw)`
- 右侧图片：`flex-1`，max-height `min(70vh, 55vw)`
- 所有图片：`w-full h-auto block`

**底部图片上的叠加内容：**
- 左侧：“98K+”统计数据，带头像堆叠（头像 + 含 Plus icon 的绿色圆形）
- 中央：“最适合您宠物的产品”白色标题 + “探索产品”橙色胶囊按钮，带 ArrowRight icon
- 右侧：“4.6”评分，带橙色实心 Star icon
- 全部使用 `bottom: clamp(20px, 4vh, 50px)` 定位

---

### 平板端布局（md 到 lg）— 与桌面端类似但尺寸更小
- 标题：text-7xl
- 侧边卡片位于 `top-[80px]`，left-4/right-4，使用更小的固定宽度（160px/120px）
- 底部图片：相同的三面板 flex，maxHeight 60vh/75vh/60vh

---

### 移动端布局（低于 md）
- 顶部区域：居中的标题（36px）、副标题、“探索产品”按钮
- 两张卡片并排（flex，gap-3）：产品卡片（aspect-square）+ 视频卡片（aspect-3/4）
- 统计行：左侧为带头像的“98K+”，中间为分隔线，右侧为带星标的“4.6”
- 底部图片：相同的三面板 flex，不设置 max-height 限制

---

### 动画（CSS keyframes、自定义类）

| 类 | Keyframe | 持续时间 | Easing |
|-------|----------|----------|--------|
| `.animate-fade-up` | 0→30px translateY，0→1 opacity | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-fade-in` | 0→1 opacity | 0.6s | ease-out |
| `.animate-slide-up` | 0→60px translateY | 0.9s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-slide-in-left` | -40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-slide-in-right` | 40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-text-reveal` | translateY(40px) skewY(3deg) blur(4px) → none | 1s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-word-pop` | translateY(60px) scale(0.7) rotate(-4deg) blur(8px) → 弹性过冲 → 稳定 | 0.9s | cubic-bezier(0.34, 1.56, 0.64, 1) |
| `.animate-scale-in` | scale(0.85)→1 | 0.7s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-photo-reveal` | translateY(80px) scale(1.02) → 正常 | 1.1s | cubic-bezier(0.16, 1, 0.3, 1) |

全部使用 `animation-fill-mode: both`。`.animate-word-pop` 以 `opacity: 0` 开始。

**延迟类：** `.delay-100` 到 `.delay-1200`，以 100ms 为增量。

---

### 交错顺序
1. 页眉淡入（100-300ms）
2. Hero 标题单词弹入（200-600ms 交错）
3. 侧边卡片滑入（600-700ms）
4. 底部照片向上显现（600-900ms 交错，中央优先）
5. 叠加的统计数据/按钮弹入（1000-1200ms）

---

### 关键技术细节
- 容器：`h-screen flex flex-col overflow-hidden`（不可滚动）
- 页眉：`shrink-0`
- Hero 区域：`flex-1 flex flex-col overflow-hidden`
- 所有响应式布局均使用显示/隐藏（`hidden lg:flex` 等），而非纯 CSS media queries
- 大量使用 `clamp()` 实现流式排版和间距
- 使用的 Lucide icons：Search、ShoppingCart、Star、ArrowUpRight、Play、ArrowRight、Plus