天际焕新

**使用 React + Vite + Tailwind CSS 为名为 "Serene" 的奢华美容与健康品牌构建一个包含两个全屏分区的 landing page。使用 TypeScript。**

---

### 字体（通过 index.html 中的 Google Fonts 加载）

从 Google Fonts 加载以下三个字体系列：
- **Dancing Script**（字重：400、500、600、700）-- 用于品牌 logo
- **Instrument Serif**（italic：0、1）-- 用于 hero heading 和 quote text
- **Inter**（字重：300、400、500、600、700、800、900）-- 用于正文、navbar links 和 buttons

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
```

---

### 全局 CSS（index.css）

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: #0a0a0c;
  overflow-x: hidden;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

.font-instrument {
  font-family: 'Instrument Serif', serif;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.text-glow {
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 255, 255, 0.2), 0 0 120px rgba(255, 255, 255, 0.1);
}

.button-glow {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.1);
}
```

---

### App 布局（App.tsx）

wrapper div 使用 `bg-[#0a0608]`。它依次渲染 `<Hero />` 和 `<QuoteSection />`。

---

### SECTION 1：Hero

一个全视口（`h-screen`）section，包含：

1. **背景视频** -- 自动播放、静音、循环、playsInline，以 `object-cover` 覆盖整个 section：
   ```
   https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.mp4
   ```

2. **深色 overlay** -- `absolute inset-0 bg-black/20`

3. **固定 Navbar** -- `fixed top-0 left-0 right-0 z-50`，flex row，两端对齐，`px-6 md:px-12 py-5`：
   - **左侧**：品牌名 "Serene"，使用 Dancing Script 草写体，白色，`text-2xl md:text-3xl`
   - **中间（仅 desktop，mobile 隐藏）**：Navigation links -- "About"、"Services"、"Journal"、"Contact" -- `text-white/80 hover:text-white text-sm tracking-wide`，间距 `gap-12`
   - **右侧（desktop）**：白色 pill button "Book a consultation"
   - **右侧（mobile）**：Hamburger icon（3 条线，打开时动画变为 X）。使用 cubic-bezier(0.22,1,0.36,1) easing。打开时：顶线旋转 45deg + 向下平移 9px；中线淡出并缩放至 0；底线旋转 -45deg + 向上平移 9px。
   - **Mobile menu**：从右侧滑入的 panel，`w-[85%] max-w-[340px]`，`bg-[#0a0608]/95 backdrop-blur-xl border-l border-white/10`。Links 以交错动画进入（opacity + translateX，每项之间延迟 75ms，从 150ms 开始）。底部 Button 延迟 450ms。

4. **中心内容** -- absolute 定位，flex column，居中，并使用 `-mt-[120px]` 向上偏移：
   - **Heading**：`font-instrument text-white text-[36px] md:text-7xl lg:text-[110px] leading-[0.9] tracking-tight text-center text-glow` -- 文本："温柔触碰。焕发光彩。"
   - **Subtext**：`text-white/70 text-sm md:text-base text-center mt-5 md:mt-7 max-w-xl` -- 文本："以温暖与用心，为你提供专业美容与整体健康服务。"
   - **CTA Button**：白色 pill button "开启你的焕新之旅"，`mt-6 md:mt-9`

5. **Sound indicator（仅 desktop）** -- 左下角（`bottom-8 left-8`），一个带有 `border border-white/20` 的 40px 圆形，内部有一条短水平线，旁边是两行文字："体验" / "声音相伴"，使用 `text-white/60 text-xs`

**Button component**：`bg-white text-black px-8 py-3.5 rounded-full font-medium text-sm tracking-wide hover:bg-white/90 transition-all duration-300 button-glow`

---

### SECTION 2：Quote Section（带 parallax scroll animations）

一个全视口（`h-screen`）section，包含：

**背景**：从上到下的 CSS linear-gradient：
```
#010A17 0% -> #0A4267 30% -> #20658E 60% -> #6BADC4 100%
```

**Animated layers（基于 requestAnimationFrame 的 parallax，带 lerp smoothing）：**

动画使用一个 `progress` 值（0 到 1），该值取决于 section 在 viewport 中滚动经过的程度：
```
progress = clamp(0, 1, (windowHeight - rect.top) / (windowHeight + rect.height))
```

1. **Rainbow image** -- 全宽，定位为 `absolute inset-x-0 top-0 z-30`。Parallax：根据 scroll progress 在垂直方向从 +120px 移动到 -160px。Lerp factor：0.06。
   ```
   https://soft-zoom-63098134.figma.site/_assets/v11/8d520a7515d06cbfc403d0125e3d05b1a7ccd29c.png
   ```

2. **Left cloud** -- `absolute left-0 bottom-[10%] z-10`，mobile 隐藏（`hidden sm:block`）。宽度：`w-[500px] md:w-[650px]`。使用 `marginLeft: '-50%'` 使其向左溢出。进入视野时（progress 0.12-0.92）从 X 轴 -200px 滑入，离开时再次滑出。同时向上漂移（cloudY = progress * -50）。Opacity 与 X 距离关联。Lerp factor：0.04。
   ```
   https://soft-zoom-63098134.figma.site/_assets/v11/0d6dfd3f90b930f21726f2ed56a3320d79b7a797.png
   ```

3. **Right cloud** -- 使用与 left 相同的 image，但设置 `scale-x-[-1]`（翻转），`absolute right-0 bottom-[15%] z-10`。使用 `marginRight: '-75%'`。从 +200px 滑入。Lerp/timing 与 left cloud 相同。

4. **Quote content** -- 居中，`z-20`，`max-w-4xl`：
   - **Quote text**：`font-instrument text-white text-xl sm:text-2xl md:text-4xl lg:text-[42px] leading-[1.45] md:leading-[1.5]` -- 文本：“Serene 创立于这样一种信念：美应当尊重你的本真。我们追求精致的效果、周全的方法与持久的活力。在决定什么最适合你之前，我们会花时间了解你真正重视的事。不仓促，不过度——只提供让你焕发光彩的支持。”（使用 curly quotes 包裹）
   - **Attribution**：`mt-6 md:mt-8 text-white/80 text-sm md:text-base tracking-wide` -- 文本："Dr. Mia Callahan -- 创始人"

**关键动画实现细节**：所有 transforms 均使用 `translate3d` 进行 GPU acceleration，并配合 `will-change-transform`。Cloud 的初始状态为 `opacity: 0`，且被平移至屏幕外。Lerp function 在每一帧中使用以下方式将当前值平滑插值至目标值：`current + (target - current) * factor`。

---

### Tailwind Config

使用默认 Tailwind config，不进行扩展 -- 所有自定义 styling 均通过 index.css 中的 CSS utility classes 处理。