> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 營銷頁面

落地分割槽、法律頁面、FAQ、更新日誌與站點配置。

## 初學者演練

先決條件：閱讀下面的兩個初學者指南，完成 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/` 映象；檢查此處指定的確切原始檔；列出檔案並在編輯前進行檢查；保留工作區所有權和僅限伺服器的機密；並向您展示差異。告訴它您想要的行為、輸入和輸出欄位、允許的角色、預期的成功和錯誤以及測試帳戶、提供程式或裝置。使用樣本值；永遠不要貼上真正的秘密。

[開始之前](https://supastack.dev/zh-tw/docs/web/before-you-start.md)

[終端基礎知識](https://supastack.dev/zh-tw/docs/web/terminal-basics.md)

[網路本地設定](https://supastack.dev/zh-tw/docs/web/ship-in-5-minutes.md)

[座席提示和專案記憶體](https://supastack.dev/zh-tw/docs/web/agents.md)


## 更新站點配置

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


## 一起替換資產族

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

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


## 檢查每個公共表面

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

[產品款式](https://supastack.dev/zh-tw/docs/web/theming.md)

[法律頁面腳手架](https://supastack.dev/zh-tw/docs/web/project-structure.md)

[後設資料和社交卡](https://supastack.dev/zh-tw/docs/web/project-structure.md)


## 安裝與配置

營銷介面由型別化資料驅動而非硬編碼 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。若營銷文案聲稱某個能力，確保連結的檔案頁存在。


## 下一篇

[SEO 與分享](https://supastack.dev/zh-tw/docs/web/seo.md)