用途:在 Resend 代码库中创建、更新、编辑或删除营销/公开页面。营销页面位于 src/app/(website)/,产品页面位于 src/app/(dashboard)/,本技能仅覆盖 (website) 路由组。
核心规则:始终复用、绝不新建。写组件前先搜索已有组件。代码库有两套独立组件系统,绝不混用:产品 UI 在 src/ui/(仅仪表盘/已认证页面);公开基础组件在 src/website/(营销页排版、按钮);公开组合在 src/components/website/(营销功能区);页面结构在 src/components/public-page.tsx。
页面结构(必需模式):每个营销页需按 import * as PublicPage from '@/components/public-page'; 组合,返回 <> 内含 SEO JSON-LD script、PublicPage.Root 内含 Header、Hero、Container(功能区块与 CallToAction)、Footer。
公开基础组件:用 PublicHeading(尺寸 1–6,颜色 white|gradient)、PublicText(尺寸 1–5,颜色 white|gray|gradient,字重 normal|medium|semibold|bold)、PublicButton(外观 white|black|black-fade|fade|red,尺寸 2|3|4,支持 asChild、iconLeft、iconRight)、PublicPage.accordion、PublicPage.avatar,替代 src/ui/ 对应组件。
元数据与 SEO:新页面需导出 metadata(alternates.canonical、title、description、openGraph.images),并始终用 @/utils/json-ld 的 getCompanyJsonLd() 与 @/utils/base-url 的 getBaseUrl() 添加 JSON-LD 结构化数据。
新增页面:创建 src/app/(website)/your-page/page.tsx,使用 PublicPage.Root/Header/Container/Footer 结构,页面专属区块放 src/components/product-pages/your-page/ 或复用 src/components/website/,添加 metadata 与 JSON-LD,必要时更新 src/components/public-page.tsx 页脚链接。
删除页面:移除对应目录与专属组件,移除页脚/导航链接,若 URL 曾公开则在 next.config.ts 添加重定向。
样式:使用 src/styles/website.css(由 (website)/layout.tsx 加载),主题强制深色,勿用仅浅色类,使用 Tailwind v4 工具类,避免内联样式,优先 src/website/ 基础组件以避免与 src/ui/ 类冲突。
限制:仅适用于 Resend 代码库及相关路径;具体组件完整 API 见 references/components.md,资料未提供更多细节。