> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibestrap.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 营销 block

> 首页如何由 block 组件拼出来，以及如何扩展。

Vibestrap 首页是一摞自包含的 "block" 组件，全部放在 `src/components/blocks/`。
每个 block 自带布局，从 `messages/{en,zh}.json` 取文案，彼此独立可以随意调序。
组合代码只有一处：`src/app/[locale]/(marketing)/page.tsx`。

## 前置条件

无。Block 已经接好。

## Block 阵容

当前 `page.tsx` 里的顺序：

```tsx theme={null}
<Hero />            // 标题 + 主 CTA + 闪光徽章
<LogoCloud />       // "As featured in" / 信任条
<Features />        // 功能卡片网格
<UseCases />        // 工具站示例用例
<WhyVibestrap />    // 与从零自建的差异化
<Quickstart />      // 3-4 步 "今天就上线" 流程
<Pricing />         // 单产品定价卡
<FAQ />             // 常见问题手风琴
<NewsletterCard />  // 邮件订阅
<CTA />             // 最后一推转化
```

每个组件都是 `src/components/blocks/` 下的一个文件。它们都不接受 props——
所有差异都通过 i18n key 表达。

## Block 怎么读文案

每个 block 都用 `Home.<block>` 命名空间调 `useTranslations`：

```tsx theme={null}
import { useTranslations } from 'next-intl';

export function Hero() {
  const t = useTranslations('Home.hero');
  return <h1>{t('title')}</h1>;
}
```

对应的 key 在 `messages/en.json` 的 `Home.hero` 下，`messages/zh.json` 同位置
有同名 key。改文案就是改 JSON——永远不要为了改字而碰组件源码。

## 调序或删除 block

打开 `src/app/[locale]/(marketing)/page.tsx`，调整 JSX 顺序。
要删一个就删那一行；要把定价放到功能上面就交换顺序。
没有什么 nav 数据结构——视觉顺序就是 JSX 顺序。

## 新增一个 block

1. 创建 `src/components/blocks/<my-block>.tsx`，默认导出一个调用
   `useTranslations('Home.myBlock')` 的 server component。
2. 在 `messages/en.json` 和 `messages/zh.json` 同时加 `Home.myBlock`。
3. 在 `page.tsx` 想要的位置 import 并 render。
4. 跑一下 `node scripts/check-i18n.mjs` 确认 key 对齐。

一个最小 block：

```tsx theme={null}
import { useTranslations } from 'next-intl';

export function MyBlock() {
  const t = useTranslations('Home.myBlock');
  return (
    <section className="border-b py-24">
      <h2 className="text-3xl font-bold">{t('title')}</h2>
    </section>
  );
}
```

## 主题 token

品牌色和圆角都是 `src/app/globals.css` 里 `@theme` 块的 CSS 变量
（Tailwind v4 指令）。改一次 `--primary`，所有 block 自动换肤。
三个可切换主题（`cream` / `white` / `ash`）以 `.theme-*` 选择器存在
——通过 `siteConfig.ui.theme` 切换。

## 验证一下

```bash theme={null}
pnpm dev                              # 实际看一下 /、/zh，并缩到 360px
node scripts/check-i18n.mjs           # 确认 key 对齐
pnpm typecheck && pnpm lint           # 类型 + 格式
pnpm build                            # 生产构建检查
```

打开 Chrome DevTools，切到 iPhone SE（360px）模式，从首屏往下滚一遍。
每个 block 都得看着正常。

## 常见坑（5 个）

1. **组件里写死英文**——一定要用 `useTranslations`。写字面字符串的话，
   中文站会显示英文。Reviewer 会抓住，但你已经浪费了 commit。
2. **Block 顺序影响视觉节奏**——密集与喘息段落交替（如 Features 之后接
   Quickstart，不要两个网格连排）。
3. **360px 下的移动端响应**——iPhone SE 宽度是底线。一定测。
   Hero 副标题特别容易在窄屏溢出。
4. **只往 `en.json` 加 key**——validator 会阻断构建。
   永远两份文件同步加。
5. **直接 import `next/link`**——必须用 `@/i18n/navigation` 的 `Link`，
   否则点击跳转会丢 locale 前缀。

## 官方文档

* [tailwindcss.com](https://tailwindcss.com/)——utility class 与 v4 `@theme` 指令
* [ui.shadcn.com](https://ui.shadcn.com/)——block 用到的组件原语
* [Lucide icons](https://lucide.dev/)——通用图标集
* [next-intl useTranslations](https://next-intl.dev/docs/usage/messages)——block 内部的 i18n