Tanplate Docs

Landing Page

默认 Landing Page 的薄路由、私有 section 组合顺序和扩展规则。

默认 / 是实际 Landing Page,不是营销页占位。路由文件只负责 public SEO 和挂载 HomePage,全部页面表现放在 apps/web/src/pages/_app/homepage/-components

组合结构

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <LogoCloudSection />
      <StatsSection />
      <Features3Section />
      <FeaturesSection />
      <CallToActionSection />
      <Features2Section />
      <IntegrationSection />
      <Integration2Section />
      <PricingSection />
      <FaqSection />
      <TestimonialsSection />
      <NewsletterCard />
    </div>
  )
}

组合器只表达叙事顺序,不持有 section 的文案数据和交互实现。newsletter-card-profile.tsx 根据构建 profile 稳定导出启用态或关闭态组件,关闭模块时不会触达 Newsletter API。

文件职责

文件职责
hero.tsx产品主视觉、价值主张与主次行动
logo-cloud.tsx使用 LogoLoop 与 Simple Icons 展示技术栈和生态品牌标志
stats.tsx平台覆盖与默认约束指标
features.tsx / features2.tsx / features3.tsx三种能力和架构表达
calltoaction.tsxProjects 与账户入口
integration.tsx / integration2.tsx请求链路与生态集成
pricing.tsx开源、自托管和扩展路径
faqs.tsx原生 details/summary FAQ
testimonials.tsx角色反馈
newsletter-card*.tsxManifest-gated 订阅转化
section-heading.tsxsection 标题排版原语

公共布局

首页和其他 _app 页面共享 pages/_app/-components/layout/header.tsxfooter.tsx。Header 私有的移动菜单、语言切换和主题按钮位于 layout/-components,例如 header-actions-menu.tsx,不与首页 section 混放。

样式约束

  • 优先复用 Web 全局 Nova 语义 token,不在 section 内建立第二套颜色系统。
  • Web 产品 UI 图标只使用 i-solar-* / i-carbon-*;真实品牌标志可使用本地构建的 i-simple-icons-*
  • 文案来自严格 i18n 或 APP_BRAND,不把品牌写死在组件里。
  • section 保持全宽 band 或无框布局;卡片只表示真实重复项。
  • 新增 section 时同步 home-page.tsx Header、homepage/-components/.folder.md 和本页。

路由和服务端边界见 代码结构

On this page