本卡為 FR-152 母案。把已備好的文案與 Lovable 骨架做成 Next.js 靜態官網，掛上 SEO／AI SEO 配備，部署到 Cloudflare Pages 測試網址。五階段 15 棒。子卡清單在末段。

這系列在做什麼（白話）

Guidant AI 要有一個對外的產品官網。文案（首頁、產品、功能細頁、解決方案、信任中心、六篇指南，中英）已經寫好，第一版畫面骨架也用 Lovable 做出來拉回本機了。這系列把這些變成一個真的網站：先換成公司熟悉的 Next.js 框架，再把每一頁做出來、換上真截圖、讓 Google 跟 ChatGPT／Perplexity 這類 AI 搜尋都抓得到內容，最後部署到測試網址給內部看。

為什麼要做

產品已有付費客戶與 CRA 自評，但沒有官網；CRA 還規定公司網站要有「產品安全資訊頁」（漏洞通報、安全公告、SBOM），是法定義務。另外 AI 搜尋引擎不執行 JS，純前端 SPA 在那裡是空殼，所以框架與 SEO 配備要一開始就做對。

首腦讀完後的重點

• D1 框架轉 Next.js 15 App Router、output: 'export' 純靜態，照 design-home-fe/apps/web 搬。Lovable 給的 TanStack Start 不留（太新、設定被包住、團隊只懂 Next）。
• D2 部署 Cloudflare Pages 純靜態、輸出 out，不用 Workers。第一版用 Pages 預設 *.pages.dev 當測試網址，正式網域之後再綁。
• D3 SEO／AI SEO 十項配備全部抄 design-home 現成檔案（robots.ts、sitemap.ts、jsonld.ts、llms.txt、generateMetadata）。
• D4 文案一律從 BE repo 的 FR-152 文案檔搬；英文先暫停（en.json 複製中文）。
• D5 表單第一版寄到 [email protected]；分析工具第一版用 Cloudflare Web Analytics（免 cookie 同意）；截圖加圓角淡陰影、og 圖深 teal 底白字＋Logo。
• D6 截圖一律本機 DEV 系統截，亮暗各一套；Demo 資料建在 DEV 的 Billows Tech 租戶，虛構公司與人名。

怎麼拆

• A1 轉 Next.js（整個 repo）— 地基，其他全部等它。驗 out/ 有 34 支 index.html 才派後面。
• B1～B4 內容頁（各 5～7 頁）— 功能細頁、解決方案、信任中心／預約／聯絡、指南；各自獨立檔案，可平行。
• C1～C5 SEO（各 1～3 檔）— Metadata、robots＋sitemap、JSON-LD、llms.txt、og 圖；可平行，但 C1 與 B 都動 page.tsx，C1 排在 B 之後或只動共用 helper。
• D1～D2 截圖（DEV 資料＋圖檔）— D1 建 Demo 專案、D2 截圖換圖；與 A/B/C 平行，D2 等 B 有頁可換。
• E1～E3 部署驗收 — Pages、表單＋分析、爬蟲驗收；B/C/D 全過後串行。

建議順序：A1 → （B1 B2 B3 B4 ‖ C2 C3 C4 C5 ‖ D1→D2）→ C1 → E1 → E2 → E3。

共同設定