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

​
前置条件

无。Block 已经接好。

​
Block 阵容

当前 page.tsx 里的顺序： 
<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： 
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： 
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 自动换肤。 暗色模式变量在文件下方的 .dark 里。

​
验证一下

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 前缀。

​
官方文档