身心疗愈

为一个名为 "Vibrant Wellness." 的整体健康品牌构建单页 hero landing page。使用 React、TypeScript、Tailwind CSS 和 Lucide React icons。通过 HTML head 中的 link tags 加载 Google Fonts "Inter"（字重 300、400、500、600、700）。整个页面是一个全屏（100vh）section，带有循环 background video，顶部覆盖 liquid glass UI elements。

**BACKGROUND VIDEO**

使用覆盖整个视口、autoplaying、looping、muted、playsInline 的 video，设置 `object-cover`，以 absolute inset-0 定位。使用以下确切 URL：
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260715_082433_69699cf8-444b-4484-93cc-053e57896dfd.mp4`

**LIQUID GLASS EFFECT**

创建一个 `.liquid-glass` CSS class，并应用于 nav pill、avatar circles、badge 和 CTA button：
- `background: rgba(255,255,255,0.01)`，搭配 `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)`（包含 -webkit prefix）
- 无 border
- `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`
- `position: relative; overflow: hidden`
- 使用 `::before` pseudo-element 创建 gradient border：absolute inset-0，border-radius inherit，padding 1.4px，background 为垂直 linear-gradient，从 0% 处的 rgba(255,255,255,0.45) 过渡到 20% 处的 0.15，40-60% 处为 transparent，再过渡到 80% 处的 0.15 和 100% 处的 0.45。使用 mask-composite exclude trick（`-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude`），使渐变仅显示为 border。设置 `pointer-events: none`。

**NAVIGATION (z-20, top)**

Flex row，justify-between，padding px-5 pt-6 / sm:px-8 sm:pt-8 / md:px-16 lg:px-20。
- 左侧：自定义 SVG logo（32x32，md:36x36），white fill，viewBox 0 0 256 256，path：`M 128 128 C 198.692 128 256 185.308 256 256 L 151.883 256 C 149.812 220.307 120.213 192 84 192 C 47.787 192 18.188 220.307 16.117 256 L 0 256 C 0 185.308 57.308 128 128 128 Z M 104.117 0 C 106.188 35.694 135.787 64 172 64 C 208.213 64 237.812 35.694 239.883 0 L 256 0 C 256 70.692 198.692 128 128 128 C 57.308 128 0 70.692 0 0 Z`
- 中间（仅 desktop，mobile 上隐藏）：liquid-glass rounded-full pill（px-8 py-3），包含三个链接——"首页"（text-white）、"我们的方法" 和 "疗愈方式"（text-white/70，hover:opacity-100）。所有文字均为 text-sm font-medium。
- 右侧（仅 desktop）：liquid-glass circle（h-10 w-10 rounded-full），其中包含 Lucide `CircleUserRound`（h-5 w-5、text-white/80、strokeWidth 1.5）。
- 右侧（仅 mobile，md:hidden）：liquid-glass circle button（h-10 w-10 rounded-full、z-50）。使用 absolute positioning，在 Lucide `Menu` 和 `X` 之间进行 Animated icon swap，并通过 `menuOpen` state 切换 rotate-90 scale-0 opacity-0 transitions（duration-300）。

**MOBILE MENU OVERLAY (z-10, fixed inset-0, md:hidden)**

通过 500ms ease-out opacity transition 切换可见性。Background：black/80，搭配 backdrop-blur-xl。居中的 flex column（gap-8），包含相同的三个 nav links，样式为 text-2xl font-medium。链接下方：liquid-glass avatar circle + "账户" 文字（text-sm font-light text-white/60）。点击链接时关闭菜单。内容从 -translate-y-8 滑动至 0。

**MAIN CONTENT (z-10)**

Flex column，justify-between，填满剩余 viewport height。在 mobile 上，当菜单打开时淡出至 opacity-0 并设置 pointer-events-none。

顶部区块（mt-14 sm:mt-20 md:mt-28，max-w-2xl）：
1. Badge——liquid-glass pill（rounded-full、inline-flex、gap-2.5 sm:gap-3、px-3 py-1.5 sm:px-4 sm:py-2、mb-5 sm:mb-6）。包含 4 个重叠头像（flex -space-x-2，每个均为 h-5 w-5 sm:h-6 sm:w-6、rounded-full、border-2 border-white/20、object-cover），使用以下 Pexels URLs：
   - `https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=100`
   - `https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=100`
   - `https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=100`
   - `https://images.pexels.com/photos/697509/pexels-photo-697509.jpeg?auto=compress&cs=tinysrgb&w=100`
   后接文字 "我们的自然健康之路"（text-xs sm:text-sm、font-light、text-white/80）。
2. Heading——`<h1>` "疗愈你的身体" + `<br/>` + "自然地"。样式：text-4xl sm:text-5xl md:text-6xl lg:text-7xl、font-normal、leading-[1.05]、text-white、inline letterSpacing -0.05em。
3. Subtitle——`<p>` "整体健康。蜕变成果。"，mt-4 sm:mt-5、text-sm sm:text-base md:text-lg、font-light、text-white/70。
4. CTA button——liquid-glass、rounded-full、px-6 py-3 sm:px-7 sm:py-3.5、mt-6 sm:mt-8、text-sm font-medium text-white、transition duration-300、hover:bg-white/10。文字："开启你的旅程"。

**BOTTOM STATS (flex, items-end, gap-6 sm:gap-10 md:gap-16)**

两个统计数据列：
1. 第一列：一个小型三角形点阵图标，由 9 个 absolutely-positioned 2.5px white/60 squares 构成，置于 20x20 box 内；数值 "48 小时"（text-xl sm:text-2xl md:text-3xl、font-normal、text-white）；标签 "初次咨询"（text-xs sm:text-sm、font-light、text-white/60）。
2. 第二列：一个 3x3 grid icon（grid-cols-3、gap-[2px]），由 4px rounded cells 组成，以棋盘格形式在 bg-white/60 和 bg-white/0 之间交替；数值 "初次咨询"（相同尺寸）；标签 "疗愈疗程"（text-xs sm:text-sm、font-light、text-white/60）。