Wellness Balance

使用 React + Tailwind CSS + Lucide React icons，为名为 "TerraElix" 的健康/营养补充剂品牌创建一个 single-page hero landing。页面是一个 full-viewport hero，包含背景图片、navbar、带逐词 reveal animations 的 headline、CTA section 和 3-panel footer strip。必须完全响应式（mobile、tablet、desktop）。

---

## 字体

从 Google Fonts 导入：
- **DM Sans**（weights 400、500）-- 用于品牌名称、nav links、headline、panel 1 文本
- **Inter**（weights 400、500）-- 用于 buttons、body text、panel 2/3 文本

---

## 背景

覆盖整个 viewport 的 full-screen background image：
```
url: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_110248_b62f758d-f68c-4045-a7b4-91771d6d0a0f.png&w=1280&q=85
background-size: cover; background-position: center; background-repeat: no-repeat;
```

---

## 布局结构

```
<div> (min-h-screen, flex flex-col, relative, overflow-hidden)
  <nav> -- navbar
  <section> -- hero content (flex-1, flex col, justify-center)
  <div> -- mobile/tablet product image (visible below lg)
  <div> -- 3-panel grid footer
  <img> -- desktop floating product image (absolute, hidden below lg)
</div>
```

---

## Navbar

- **左侧：** 品牌名称 "TerraElix" -- 白色，DM Sans 500，30px，letter-spacing -0.05em
- **中间（仅 desktop，在 mobile 隐藏）：** Nav links "About"、"Products"、"Promotions"、"Contact" -- DM Sans 500，18px，text-white/90，gap 10（lg）
- **右侧：** 一排 icon buttons + avatar + mobile menu toggle
  - Search icon（Lucide `Search`，size 20，strokeWidth 1.5）
  - Shopping bag icon（Lucide `ShoppingBag`，size 20，strokeWidth 1.5）
  - Return icon（Lucide `CornerUpLeft`，size 20，strokeWidth 1.5）
  - 圆形 avatar image（w-8 h-8，lg:w-10 lg:h-10，rounded-full，object-cover）：
    ```
    https://polo-pecan-73837341.figma.site/_assets/v11/ca8093996e970200cbcf8bde8744175e52da5a79.png
    ```
  - Hamburger menu button（md:hidden，Lucide `Menu` / `X` toggle）

- **Mobile overlay menu：** fixed inset-0 bg-black/90 z-30，nav links 居中显示（text-2xl，白色）

Padding：px-5 sm:px-8 lg:px-10，py-4 lg:py-5

---

## Hero Headline

字体：DM Sans，weight 400，letter-spacing -0.05em

响应式尺寸：
- Base：48px/50px line-height
- sm：80px/72px
- md：110px/95px
- lg：130px/110px
- xl：155px/125px

文本布局（3 行）：
```
Line 1: "The"（白色）"Power"（白色）"of"（white/45 -- dimmed）
Line 2: "Nature"（dimmed）"in"（dimmed）"Every"（白色）
Line 3: "Capsule"（白色）+ inline image
```

每个单词都包裹在一个设置了 overflow-hidden 的 container 中，内部 span 使用 `wordReveal`（translateY 100% + blur 到 visible）执行动画。Staggered delays：0.3s、0.4s、0.5s、0.6s、0.7s、0.8s、0.9s。

**"Capsule" 后的 Inline image**（在 mobile 隐藏，sm:inline-block，align-middle，ml-2 lg:ml-4）：
```
https://polo-pecan-73837341.figma.site/_assets/v11/6a7de4fbe9c9e2315040607320a9ff5e93117bf4.png
height: clamp(60px, 10vw, 160px); width: auto;
```

---

## CTA Section

位于 headline 下方，mt-8 sm:mt-12 lg:mt-[75px]。在 sm+ 使用 flex row，在 mobile 使用 column。Gap：5（mobile）、8（sm）、50px（lg）。

- **Button：** "立即探索" + ArrowUpRight icon。bg-black text-white rounded-md。尺寸：w-full sm:w-[240px] md:w-[280px] lg:w-[310px]，h-14 sm:h-16 lg:h-[72px]。字体：Inter 500，响应式 text（base 到 2xl），letter-spacing -0.03em。
- **Paragraph：** "探索我们全新的植物基营养补充剂，为日常生活带来平衡与纯净能量。" -- 白色，max-w-[310px]，Inter 400，text-sm sm:text-base lg:text-lg，line-height 1.45，letter-spacing -0.03em。

---

## Mobile/Tablet Product Image（lg:hidden）

在 lg breakpoint 以下可见。尺寸超大并溢出边缘：
```
https://polo-pecan-73837341.figma.site/_assets/v11/50ad042b3cd48a2e120ea3ba17c8cfeaf3cc334c.png
w-[180%] sm:w-[151%] max-w-[1296px], object-contain, mx-auto, drop-shadow-2xl
margin-bottom: -180px sm:-220px（与下方 panels 重叠）
```

---

## 底部 3-Panel Grid

`grid grid-cols-1 md:grid-cols-[2fr_1fr_2fr]`，relative z-10。

### Panel 1（bg-[#ECEDEC]）
- 文本："开启你的个性化天然平衡之路" -- DM Sans 400，text-2xl sm:text-[28px] lg:text-[35px]，leading-[1.1]，letter-spacing -0.05em，max-w-[350px]
- Link："个性化评估" -- underline，Inter 400，text-base lg:text-lg，letter-spacing -0.03em
- Decorative image（absolute right-0 bottom-0，h-full，mix-blend-multiply）：
  ```
  https://polo-pecan-73837341.figma.site/_assets/v11/6736cbe6e26afa2cd7c04a91892a79f7640785b5.png
  ```

### Panel 2（bg-[#FEFDF9]）-- Auto-rotating card carousel
4 张 cards 每隔 3500ms 循环切换，并带有 fade/slide transition：
1. FlaskConical icon，bg-black circle："体验全新升级的天然配方"
2. Leaf icon，bg-emerald-800 circle："以可持续方式采购的纯有机成分"
3. Droplets icon，bg-cyan-800 circle："先进的生物利用度，实现最大程度吸收"
4. Sun icon，bg-amber-700 circle："经过临床测试，助力每日能量与活力"

每张 card：icon 位于 40px（sm:48px）的圆形彩色 circle 中 + 文本（Inter 400，text-sm sm:text-base lg:text-lg，text-black/80，line-height 1.2，letter-spacing -0.03em）。

Active card：opacity-100 translate-y-0。Inactive：opacity-0 translate-y-4 absolute。

底部 dots：4 个细 bars（h-0.5，flex-1，rounded-full）。Active：bg-black。Inactive：bg-black/20。

### Panel 3（bg-black）
- 左侧：Product image（w-[120px] h-[82px] sm:w-[160px] h-[110px] lg:w-[208px] h-[142px]）：
  ```
  https://polo-pecan-73837341.figma.site/_assets/v11/30e8f38d1f993c357a3be2721557fc899d5640fc.png
  ```
- 右侧："+14K"（白色，Inter 400，text-2xl sm:text-3xl lg:text-[35px]，letter-spacing -0.05em）+ "已有用户优化了自己的健康状态"（text-white/60，Inter 400，text-sm sm:text-base lg:text-lg，line-height 1.2）

---

## Desktop Floating Product（仅 lg+）

使用与 mobile product 相同的图片，但在 desktop 上绝对定位：
```
https://polo-pecan-73837341.figma.site/_assets/v11/50ad042b3cd48a2e120ea3ba17c8cfeaf3cc334c.png
position: absolute; z-0; hidden lg:block;
width: clamp(600px, 80vw, 1412px); height: auto;
bottom: -10%; right: clamp(-400px, -20vw, -100px);
```

---

## Animations（CSS keyframes）

```css
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
```

全部使用 `cubic-bezier(0.16, 1, 0.3, 1)` easing 和 `both` fill mode。

**Classes 及其 animations：**
- `.animate-fade-up` -- fadeUp 0.8s
- `.animate-fade-in` -- fadeIn 0.7s
- `.animate-slide-left` -- slideInLeft 0.8s
- `.animate-slide-right` -- slideInRight 0.8s
- `.animate-scale-in` -- scaleIn 1s
- `.animate-word-reveal > span` -- wordReveal 0.7s

**Delay classes：** .delay-200 到 .delay-1100（以 0.1s 为 increments）

**Animation assignments：**
- Navbar container：animate-fade-in
- Brand name：animate-slide-left delay-200
- Nav links：animate-fade-in delay-400
- Right icons：animate-slide-right delay-300
- CTA row：animate-fade-up delay-600
- Desktop product image：animate-scale-in delay-700
- Mobile product image：animate-scale-in delay-800
- Panel 1：animate-fade-up delay-900
- Panel 2：animate-fade-up delay-1000
- Panel 3：animate-fade-up delay-1100
- Inline capsule image：animate-scale-in delay-1000