提示词
## 重现 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原文提示词（English）
## Prompt to Recreate CozyPaws Hero Section
**Build a single-page "CozyPaws" pet store hero section using React, Tailwind CSS, and Lucide React icons. The layout is viewport-height (h-screen), no scroll, with three responsive breakpoints (mobile, tablet md, desktop lg+). Use Vite + TypeScript.**
---
### Fonts (Google Fonts)
- **Inter** (weights: 400, 500, 600) — body/UI text
- **DM Serif Display** (weight: 400) — hero heading only
Load via `<link>` in `index.html`:
```
https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap
```
Apply with CSS utility class `.font-serif-display { font-family: 'DM Serif Display', serif; }` and `body { font-family: 'Inter', sans-serif; }`
---
### Color Palette
- Background: `#EFFDF0` (light mint green)
- Primary dark green: `#1a3d1a`
- Hover green: `#2a5a2a`
- Orange accent: `#E86A10`
- Orange hover: `#d45e0d`
---
### Asset URLs (all external, do not download)
| Asset | URL |
|-------|-----|
| Logo SVG | `https://polo-pecan-73837341.figma.site/_assets/v11/0ae29d6d9628bede667f90d57bebe81b8f1ec2bf.svg` |
| Avatar | `https://polo-pecan-73837341.figma.site/_assets/v11/e62173d41f91350a59628e8a9a55ae078a886fb9.png?w=128` |
| Product card (Cat House) | `https://polo-pecan-73837341.figma.site/_assets/v11/3e5158dad63d392ade022e81890edc9f54d750bc.png` |
| Video card (TikTok/YouTube) | `https://polo-pecan-73837341.figma.site/_assets/v11/76be6ec3a93a703b15e9cc01e764a4e3f9d7d2c0.png` |
| Bottom left image | `https://polo-pecan-73837341.figma.site/_assets/v11/8d44b25186ef45a5789c74668fb781cea4e1ff49.png` |
| Bottom center image (tallest) | `https://polo-pecan-73837341.figma.site/_assets/v11/96745c4e72ad5c5208e53a885df797fd82cd854a.png?h=1024` |
| Bottom right image | `https://polo-pecan-73837341.figma.site/_assets/v11/81bd2e7a66b58f3d8f3ad78fd1ebf01af8dfdee1.png` |
---
### Header
- Full-width, `px-12` on desktop, `py-4`, relative z-30
- **Left:** Logo image (205x52px desktop, 130x33px mobile)
- **Center nav (hidden below md):** Links "Home" (text-gray-900), "Shop", "Delivery and payment", "Brands", "Blog" (text-gray-600), text-sm font-medium, gap-8
- **Right:** Search button (circle, border, hidden below sm), Favorites button (orange circle, white star icon, badge "4"), Cart button (circle, border, cart icon, badge "1"), Avatar (circle, 40x40)
- Badges: absolute -top-1 -right-1, 20x20, bg-orange, border-2 border-background, white text 10px bold
---
### Desktop Hero Layout (lg+)
**Text layer (z-5):** Centered, `px-12 pt-[5.4rem]`
- Heading: `font-serif-display`, color `#1a3d1a`, `text-[clamp(60px,7.5vw,110px)]`, `leading-[0.95]`, tracking-tight
- Text reads: "Everything" (line 1), "Your Pets Love" (line 2)
- Each word is an `inline-block` with staggered `animate-word-pop` animation
**Left product card:** Absolutely positioned `top-[50px] left-12`
- Width: `clamp(160px,14vw,260px)`
- Image: aspect-ratio 260/257, rounded-2xl, overflow-hidden
- Arrow button bottom-right corner (dark green circle, ArrowUpRight icon)
- Text below: "Cozy Cat House" in gray-700, "$49.99" in dark green bold
- Responsive font sizes via clamp
**Right video card:** Absolutely positioned `top-[50px] right-12`
- Width: `clamp(120px,10vw,177px)`
- Image: aspect-ratio 177/287, rounded-2xl
- Play button (dark green circle) centered near bottom
- Text below play button: "Watch Product Reviews on TikTok and YouTube"
**Bottom 3 images:** Absolutely positioned `bottom-0 left-0 right-0`, z-10, flex items-end, no gaps
- Left image: `flex-1`, max-height `min(70vh, 55vw)`
- Center image: `flex-[1.265]` (wider), max-height `min(85vh, 70vw)`
- Right image: `flex-1`, max-height `min(70vh, 55vw)`
- All images: `w-full h-auto block`
**Overlays on bottom images:**
- Left: "98K+" stat with avatar stack (avatar + green circle with Plus icon)
- Center: "Best Products for Your Pet" white heading + "Explore Products" orange pill button with ArrowRight icon
- Right: "4.6" rating with orange filled Star icon
- All positioned with `bottom: clamp(20px, 4vh, 50px)`
---
### Tablet Layout (md to lg) — Similar to desktop but smaller
- Heading: text-7xl
- Side cards at `top-[80px]`, left-4/right-4, smaller fixed widths (160px/120px)
- Bottom images: same 3-panel flex, maxHeight 60vh/75vh/60vh
---
### Mobile Layout (below md)
- Top section: centered title (36px), subtitle, "Explore Products" button
- Two cards side-by-side (flex, gap-3): product card (aspect-square) + video card (aspect-3/4)
- Stats row: "98K+" with avatars left, divider, "4.6" star right
- Bottom images: same 3-panel flex, no max-height constraint
---
### Animations (CSS keyframes, custom classes)
| Class | Keyframe | Duration | 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) → bounce overshoot → settle | 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) → normal | 1.1s | cubic-bezier(0.16, 1, 0.3, 1) |
All use `animation-fill-mode: both`. `.animate-word-pop` starts with `opacity: 0`.
**Delay classes:** `.delay-100` through `.delay-1200` in 100ms increments.
---
### Stagger Order
1. Header fades in (100-300ms)
2. Hero heading words pop in (200-600ms stagger)
3. Side cards slide in (600-700ms)
4. Bottom photos reveal upward (600-900ms stagger, center first)
5. Overlay stats/buttons pop in (1000-1200ms)
---
### Key Technical Details
- Container: `h-screen flex flex-col overflow-hidden` (no scrolling)
- Header: `shrink-0`
- Hero section: `flex-1 flex flex-col overflow-hidden`
- All responsive layouts use show/hide (`hidden lg:flex`, etc.), not CSS-only media queries
- Extensive use of `clamp()` for fluid typography and spacing
- Lucide icons used: Search, ShoppingCart, Star, ArrowUpRight, Play, ArrowRight, Plus视频地址
