订阅制创意机构

**使用 React + Vite + Tailwind CSS，为名为 "Alwayzz" 的创意机构创建一个单页落地页 hero section。所有样式均使用自定义 CSS（不要使用 Tailwind utilities）。设计应简约、干净、采用黑白配色，并始终使用紧凑的负字间距。**

---

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

```
Inter: weights 400, 500, 600, 700
Source Serif 4: weights 400, 600 (both normal and italic)
```

预连接到 `fonts.googleapis.com` 和 `fonts.gstatic.com`。

---

### CSS 变量

```css
--bg: #ffffff;
--text: #0a0a0a;
--muted: #6b6b6b;
--button-bg: #0a0a0a;
--button-text: #ffffff;
--border-soft: rgba(0, 0, 0, 0.08);
--green: #17c964;
```

---

### 组件

**1. Navbar（固定在顶部，z-index 100）**
- Padding：`19px 36px`，max-width `1200px`，居中。
- 左侧：Logo 文本 "Alwayzz" 使用 `Source Serif 4`，30px，weight 600，**italic**，letter-spacing `-0.08em`；注册商标符号使用 Inter，14px，weight 600。
- 右侧："Menu" 胶囊按钮（黑色背景、白色文字、rounded-full、14px、weight 500、Inter），带有来自 lucide-react 的 `ChevronUp` icon（16px）。
- 点击后显示全屏 drawer overlay：白色背景，0.4s fade transition。Nav links 垂直居中，48px、weight 500、letter-spacing `-0.04em`。链接：Projects、Plans、Team、FAQs、Get in Touch。底部包含版权信息。

**2. Hero Section**
- Min-height：`850px`，padding：`160px 36px`，flex column 居中。
- **背景图片**（通过 `::before` pseudo-element，覆盖整个 section）：
  ```
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260626_041422_4a459e05-abce-4150-9fb7-4ededc423cd1.png&w=1280&q=85
  ```
  Background-size：cover，background-position：center。

- **曲线动画**（装饰性）：
  - 左侧 20 条线，右侧 20 条线，使用绝对定位。
  - 每条线都是一个高矩形，带有单侧 border-radius（80%）和 `2.5px solid #FCFAF8` border。
  - 左侧线条：无左边框，右侧圆角。右侧线条：无右边框，左侧圆角。
  - 交错设置 `animationDelay: i * 0.25s`，宽度从 60px 开始，每条线增加 10px。
  - 动画：`line-pulse` 5s ease-in-out infinite（淡入至 0.9 opacity，然后伴随轻微缩放回到 0）。
  - 移动端（<810px）：隐藏侧边线条，改为显示顶部水平线条（相同动画，水平方向并带底部 border-radius）。

- **Ticker row**（max-width 500px，height 36px）：
  - 水平 marquee 在 30s 内向左滚动，linear，infinite。
  - 项目："Brand Identity"、"App Development"、"Visual Design"、"Creative Video"、"Iconography"
  - 每项：13px、weight 500、颜色 `var(--muted)`、padding `6px 14px`、rounded-full、背景 `rgb(251, 251, 251)`。
  - Marquee 带有边缘淡出 mask：`linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%)`。
  - 将行复制 4 次，以实现无缝循环。

- **标题**：
  ```
  高端创意 <span class="serif italic">alwayzz</span><sup style registered mark>，随需而至。
  ```
  - Max-width：550px，font-size：82px，line-height：1.03，letter-spacing：`-0.07em`，weight 600，居中。
  - 单词 "alwayzz" 使用 `Source Serif 4`、italic、weight 600、letter-spacing `-0.08em`。
  - 注册标记：Inter、24px、weight 600、vertical-align super。

- **副标题**：
  ```
  为创始人、品牌和代理机构提供灵活的设计合作，让他们按自己的时间安排获得顶尖品质的作品。
  ```
  - Max-width：476px，17px，line-height 1.45，weight 400，颜色 `var(--muted)`，居中。

- **CTA row**（flex、gap 16px、居中）：
  - **主按钮** "View Plans"：height 56px，padding `18px 30px`，rounded-full，黑色背景，白色文字，15px、weight 600、Inter。Hover：translateY(-1px) + box-shadow `0 4px 20px rgba(0,0,0,0.12)`。
  - **预约按钮** "Chat for 15 minutes"：白色背景、`4px solid rgb(248,248,248)` border、rounded-full、padding `8px 24px 8px 8px`。包含：
    - 头像图片（40px 圆形）：`https://framerusercontent.com/images/hfneFL6CHBi5BnNvCeOaqU9HqE4.png`
    - 文本堆叠：主文本 "Chat for 15 minutes"（14px、weight 600、黑色）和次文本 "Pick a slot"（12px、weight 500、`rgb(152,152,152)`），并带一个绿色圆点（`rgb(29, 204, 93)`，8px 圆形）。

- 底部的 **Progressive blur**：absolute、全宽、height 178px，渐变从透明开始，在 40% 处过渡到 `rgba(255,255,255,0.4)`，最后变为纯白色。

**3. TrustedBy Section**
- Padding：36px，max-width 1200px，居中。
- 左侧：标签 "Partnered with top-tier companies globally"（max-width 163px、14px、weight 500、muted color）。
- 右侧：由公司名称组成的水平 marquee（30s），样式为文字 Logo（16px、weight 600、黑色，每个使用不同的 font-family）：
  - Airbnb（Cedarville Cursive，700）、Shopify（system-ui，800）、Notion（Georgia，500）、Linear（Inter，600）、Webflow（Inter，700）、Figma（system-ui，600）、Slack（Georgia，700）、Stripe（system-ui，800）、Vercel（Inter，600）、Framer（Source Serif 4，600）。
- 使用与 ticker 相同的边缘淡出 marquee mask。

---

### 响应式断点

- **< 1200px**：Hero padding `140px 32px`，标题 clamp(60px, 8vw, 72px)，navbar padding 32px，drawer links 40px。
- **< 810px**：Hero min-height 760px，padding `120px 24px 96px`。背景图片旋转 90deg，以填满竖屏 viewport。隐藏侧边曲线，显示顶部水平线条。标题 clamp(44px, 13vw, 52px)。CTA 按钮垂直堆叠并占满宽度（max 320px）。Trusted section 垂直堆叠。Drawer links 32px。Navbar padding 20px。

---

### 关键动画 Keyframes

```css
@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes line-pulse {
  0% { opacity: 0; transform: scale(1); }
  15% { opacity: 0.9; }
  70% { opacity: 0.4; }
  100% { opacity: 0; transform: scale(0.85); }
}
```

---

### CloudFront 视频/图片 URL

Hero 背景图片 URL（精确如下）：
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260626_041422_4a459e05-abce-4150-9fb7-4ededc423cd1.png&w=1280&q=85
```

预约按钮头像 URL（精确如下）：
```
https://framerusercontent.com/images/hfneFL6CHBi5BnNvCeOaqU9HqE4.png
```
]