營銷頁面

初學者演練

先決條件：閱讀下面的兩個初學者指南，完成 Web 本地設定，並在編輯器的根目錄中開啟此 monorepo。網頁設定屬於apps/web/.env.local； Next.js不讀取根.env。預設fake模式下的/dashboard是無資料庫演示； /auth 需要遷移資料庫。

簡而言之：工作區是一個團隊的單獨使用者、資料和設定。伺服器是可信後端；讓提供商金鑰遠離瀏覽器和電話程式碼。遷移是建立或更新表的版本化資料庫更改。人工智慧模型是回答的引擎；型號目錄是伺服器上可用型號 ID 和價格的列表。提供商是一種外部服務，例如人工智慧、電子郵件或計費服務。權利是允許工作區使用某項功能的授權。 Webhook 是一個服務傳送到另一個服務的 URL 的訊息。

1. 開啟 apps/web/src/marketing/site-config.ts 並將產品名稱、標語、導航標籤/URL 和支援地址更改為您擁有的值。

2. 替換 apps/web/public/og.png 並更新 apps/web/src/marketing/seo.tsx 中的替代文本和尺寸作為一項更改。

3.重新整理首頁、FAQ、頁尾、社交預覽。如果仍然存在舊文本，請在釋出之前在此儲存庫中搜索舊名稱。

對於自定義程式碼，請從提供的 prompts/README.md 開始，然後複製最接近的提示：對於應用程式螢幕為 prompts/new-app-screen.md，對於公共頁面為 prompts/new-landing-page.md。對於伺服器、資料庫或提供商工作，請為您的編碼代理提供本指南的任務，並要求其讀取 AGENTS.md、.ai/PROJECT_CONTEXT.md 和匹配的 .ai/ 映象；檢查此處指定的確切原始檔；列出檔案並在編輯前進行檢查；保留工作區所有權和僅限伺服器的機密；並向您展示差異。告訴它您想要的行為、輸入和輸出欄位、允許的角色、預期的成功和錯誤以及測試帳戶、提供程式或裝置。使用樣本值；永遠不要貼上真正的秘密。

• 開始之前
• 終端基礎知識
• 網路本地設定
• 座席提示和專案記憶體

更新站點配置

apps/web/src/marketing/site-config.ts 擁有品牌文案、導航/頁尾連結、FAQ 和可選的儲存庫/檔案目的地。在將產品名稱分散到各個元件之前更新此內容。該套件自己的 chrome 使用此配置；可複製的鍍鉻塊接受產品道具。

一起替換資產族

共享的四塊標記具有白色的左上/右下和灰色的右上/左下塊，具有細輪廓。保持標題標記透明；應用程式圖示/圖示使用圓形黑色背景。衍生產品可以一起替換該標記及其關聯的應用程式/桌面資產。

共享公共社交卡為/og.png；使用尺寸和替代文本更新 marketing/seo.tsx 中的描述符。部落格文章卡使用單獨的下一個影像路線。

檢查每個公共表面

驗證頁首/頁尾、聯絡人、FAQ、法律頁面、本地化的家庭副本、標題和社交卡。選擇您產品的營銷主題模式，並僅傳送有效的支援/聯絡連結。

• 產品款式
• 法律頁面腳手架
• 後設資料和社交卡

安裝與配置

營銷介面由型別化資料驅動而非硬編碼 JSX —— hero、功能分割槽、定價、FAQ、更新日誌、案例展示、聯絡與法律頁面都從站點配置與內容檔案讀取文案和結構。

MARKETING_THEME_MODE（src/theme/marketing-theme.ts）決定營銷站是保持套件鎖定的深色品牌、繼承訪客的主題包，還是釘住某個特定包。衍生產品應選擇自己的模式。

src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"

實現流程

優先用 block 庫組合頁面；缺模式時以同樣的純令牌風格寫新 block 並註冊到 src/kit/blocks.ts。營銷元件不要進入產品介面 —— 兩套外殼系統保持分離。

本地化文案走詞典與 site-content 疊加層；在那裡加鍵，而不是按語言分叉元件。

驗證與排障

在 320px 與桌面寬度下檢查營銷頁，鍵盤焦點可見，至少各用一個淺色與一個深色包，並開啟 reduced motion。若營銷文案聲稱某個能力，確保連結的檔案頁存在。