著陸頁
一個著陸頁只有一個任務：引導特定訪客執行一個動作。每個 區塊要不是在為那個動作建立理由，就是移除一個不採取行動的理由。 先決定動作，再設計。
1. 先決定再動手
在碰觸 JSX 之前，先把這些寫下來（如果應用程式有 DESIGN.md，就寫在裡面）：
- 目標受眾： 誰會來到這裡，他們已經知道什麼。
- 主要行動： 一個動詞（「開始免費試用」、「預訂桌位」、「取得報價」）。 每個頁面只有一個主要 CTA 標籤；重複它，不要改變它。
- 次要行動： 可選且承諾較低（「查看定價」、「觀看示範」）。
- 你實際擁有的證明： 真實的數字、客戶名稱、推薦語、評分。 絕不虛構見證、標誌、用戶數或價格。如果擁有者沒有提供， 就省略該區塊，或使用內容資料中標記清楚的 TODO（不要放在可見的文案中）。
2. 區塊順序（預設）
| # | 區塊 | 目的 | 區塊元件 |
|---|---|---|---|
| 1 | 頁頭 | 品牌、3-5 個導覽連結、主要 CTA | SiteHeader |
| 2 | 英雄區 | 承諾 + 主要 CTA 在首屏上方 | Hero |
| 3 | 證明條 | 標誌、評分或一個硬數字 | LogoMarquee 或內聯統計 |
| 4 | 問題/成果 | 為什麼現狀有害、什麼會改變 | Section + SectionHeader |
| 5 | 功能 | 3-6 個益處，每個都與一個成果相關聯 | FeatureGrid 或 BentoGrid |
| 6 | 運作方式 | 當流程不熟悉時的 3-4 個步驟 | StepList |
| 7 | 見證 | 包含姓名和職稱的真實推薦語 | Testimonials |
| 8 | 定價 | 方案，或「起價」及包含項目 | PricingTable |
| 9 | 常見問答 | 直接回答異議 | Faq |
| 10 | 最終 CTA | 重申承諾 + 相同的 CTA | CtaBand |
| 11 | 頁尾 | 聯絡資訊、法律事項、次要連結 | SiteFooter |
刪除沒有實際內容的區塊。簡短誠實的頁面勝過冗長浮誇的頁面。 至少保留區塊 1、2、5 和 10。
3. 英雄區規則
- 頁面上只有一個
<h1>，在英雄區內。Hero已將其title渲染為 h1； 不要在其他地方添加 h1。區塊標題使用 h2。 - 標題用約 10 個字以內陳述對受眾的成果。副標題（一兩句話，約 25 個字以內） 說明方法、對象或與眾不同之處。
- 主要 CTA 在 375x667 和 1280x800 解析度下無需滾動即可看見。將其放在
Hero的actions屬性中；連結到真實目的地（路由、mailto:、tel:、表單錨點）， 絕不使用href="#"。 - 媒體：一個真實的產品截圖、照片或插圖，展示成果。在圖片上設定明確的
width/height，並且不要對英雄區圖片使用懶加載（它通常是 LCP 元素）。 - 可選的信任文字放在 CTA 下方：「無需信用卡」、「1,200 則評論中獲得 4.8/5 分」。
4. 文案層級
- 標題 (h1)：成果。2. 副標題：機制或受眾。3. CTA：動詞 + 受詞。
- 區塊標題 (h2)：效益陳述，而非標籤（「一天內結帳」，而非「功能」）。
- 內文：簡短段落，每行約 80 個字元以內（
max-w-prose或max-w-xl）。
使用應用程式的語言撰寫具體、樸實的文案。不要使用 Lorem Ipsum，不要使用
「革新您的工作流程」，不要使用「功能一」。請參閱 references/copy-formulas.md。
5. 佈局與視覺節奏
- 使用語意化令牌（
bg-background、bg-secondary、text-muted-foreground）， 絕不使用原始調色板類別。交替使用Section tone="muted"來分隔區塊， 而不是到處添加邊框和陰影。 - 變化區塊形狀：一個網格，然後是一個分割的圖片/文字，接著是一個全寬的引言。 避免整個頁面只是堆疊相同卡片網格的樣式。
- 每個頁面一個大膽的元素（英雄區視覺或字體處理）。其餘保持平靜。
- 將內容組包裝在
<Reveal>中，使用交錯的delay={index * 80}；BentoGrid、Testimonials和PricingTable已自動顯示。 - 行動優先：在
md以下使用單欄，手機上 CTA 按鈕全寬 （w-full sm:w-auto），點擊目標至少 44px。
6. 轉換細節
- 在功能或定價之後以及最終的
CtaBand中重複主要 CTA。 - 錨點導航：為區塊添加
id（<Section id="pricing">）並連結到#pricing；添加scroll-mt-20以免固定頁頭遮住標題。 - 頁面上的表單：要求最少資訊（電子郵件，或姓名 + 電話）。顯示即時 驗證和明確的成功狀態（請參閱表單驗證技能）。
- 定價：顯示貨幣和計費週期，突出一個方案，並說明點擊後會發生什麼 （試用期長度、取消方式）。
- 無障礙：可見的焦點、有意義圖片的替代文字、對比度 4.5:1、 按鈕清楚說明其功能。
7. 完成檢查清單
- 一個 h1，在英雄區中；區塊標題按順序為 h2。
- 主要 CTA 在行動版和桌機版的首屏上方，指向真實目標。
- 所有的宣稱、數字、標誌和推薦語都是真實的，否則該區塊已被移除。
- 英雄區圖片設有寬度/高度且未使用懶加載；其他圖片使用懶加載。
- 已設定頁面標題與中繼描述（請參閱 seo-metadata 技能）。
- 已在 375px、768px 和 1280px 寬度下以截圖檢查。
- 已執行
audit_landing_sections並修正失敗項目。
腳本
audit_landing_sections 讀取頁面檔案及其匯入的本地元件。
引數（皆為可選）：{ "file": "src/pages/Index.tsx" }。未提供
file 時，它會嘗試 src/pages/Index.tsx、app/page.tsx、src/app/page.tsx、
pages/index.tsx 和 src/pages/index.tsx。它會回傳 checks（通過、警告或
失敗）、偵測到的 sections 和 placeholders。這是啟發式的：在修改任何東西之前，
請閱讀程式碼以確認失敗項目。