模組二｜課程變現系統

L1 免費 → L2 低價 → L3 高價，三層變現漏斗

---

模組二能做到什麼

三級課程架構（L1 / L2 / L3）
→ L1：免費內容（Blog + GEO Wiki，模組一已建好）
→ L2：低價產品，1,000–3,000 元
   電子書 / Mini 課程 / 工具包
→ L3：高價課程，10,000 元以上
   完整線上課程 / 影片 + 作業 + 社群

Landing Page 銷售漏斗
→ 每個 L2 / L3 課程有獨立 Landing Page
→ 完整轉換結構：標題 / 痛點 / 主張 / 課程內容 / 社會證明 / CTA
→ 從 IDOL Wiki 自動生成初稿（publish lp 指令）

課程內容閱覽器
→ 付費後解鎖課程內容
→ 支援文字 / 圖片 / 影片嵌入（YouTube / Vimeo）
→ 學員可以追蹤進度

---

最佳實務

三層定價是最強的 OPC 變現漏斗。

L1（免費）  → 讓對的人找到你，建立信任
L2（低價）  → 第一次成交，證明你的價值
L3（高價）  → 真正的收入來源，服務願意深入的學員

L2 的目的不是賺大錢，是讓訪客變成付費客戶—— 一旦有過一次成交，L3 的轉換率會大幅提升。

Landing Page 不要手工寫，從 IDOL Wiki 生成。

用 publish lp [課程名稱] 指令，Claude Code 讀取 audience.md + products.md + voice.md， 生成符合你語氣的完整 Landing Page 初稿。你只需要調整細節，不需要從頭寫。

課程內容存在 Payload，不要放在程式碼裡。

Lesson 是 Payload collection，內容可以隨時更新，不需要重新 deploy。 這樣你可以持續改進課程內容，學員重新整理頁面就看到最新版本。

影片不要自己 host。

影片放 YouTube（非公開連結）或 Vimeo（付費方案），嵌入 Lesson 頁面。 自己 host 影片 = 巨大的儲存成本 + 串流成本，不適合 OPC。

---

前置條件

□ 模組一已完成（Blog + Email 訂閱）
□ 模組三（會員系統）先建立再做模組二的 access control
  （但可以先建立 UI，access control 之後補）
□ 課程大綱已準備好（至少知道 L2 和 L3 各賣什麼）
□ 課程影片已上傳到 YouTube 非公開或 Vimeo（如果有影片課程）

---

Claude Code 指令

我的專案是 Next.js App Router + Payload CMS 3.x + Tailwind CSS + TypeScript。
模組一（Blog / GEO Wiki / Lead Magnet / Email 訂閱）已完成。

請幫我建立模組二：課程變現系統。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【A】Payload CMS Collections
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

建立 Course collection：
- title（text，必填）
- slug（text，必填，自動生成，唯一）
- level（select：l1-free / l2-starter / l3-full）
- tagline（text，一句話說明課程核心價值）
- description（richText，課程詳細說明）
- price（number，L1 填 0）
- originalPrice（number，劃掉的原價，選填）
- thumbnail（upload）
- previewVideo（text，YouTube 或 Vimeo URL，選填）
- targetAudience（richText，適合誰）
- notFor（richText，不適合誰）
- whatYouGet（array of text，你會學到什麼，用於 Landing Page）
- status（select：draft / published）
- publishedAt（date）

建立 Lesson collection：
- title（text，必填）
- slug（text，必填）
- course（relationship → Course，必填）
- order（number，課程內排序）
- type（select：text / video / mixed）
- content（richText，文字內容）
- videoUrl（text，YouTube / Vimeo embed URL，選填）
- duration（text，例如 "12分鐘"，選填）
- isFree（boolean，是否開放免費預覽）
- access（select：public / l2 / l3）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【B】Landing Page 系統
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

建立 /courses 頁面（課程列表）：
→ 顯示所有 published 課程
→ 用顏色或 badge 區分 L1（免費）/ L2 / L3
→ 每張課程卡片：封面圖 / 等級 / 標題 / tagline / 價格 / CTA 按鈕

建立 /courses/[slug] 頁面（Landing Page）：
→ 這是每個課程的完整銷售頁，結構如下：

  Hero Section：
  → 大標題（課程 title）
  → tagline（一句話價值主張）
  → 封面圖或 previewVideo
  → 主要 CTA 按鈕（立即購買 / 免費開始）+ 價格

  痛點 Section：
  → 「如果你有這些困擾…」
  → 3–5 個痛點描述（從 Payload 的 targetAudience 提取）

  解決方案 Section：
  → 課程如何解決上述痛點
  → 3–5 個核心主張

  課程內容 Section：
  → 課程章節列表（從 Lesson collection 查詢，顯示 title + duration）
  → 免費預覽課（isFree=true 的 Lesson）可以直接看

  你會得到什麼 Section：
  → whatYouGet 的 checklist 樣式

  適合誰 Section：
  → targetAudience + notFor 並列

  社會證明 Section（佔位符）：
  → 預留 Testimonial 區塊，先放佔位文字「真實學員分享（陸續更新中）」

  價格 CTA Section：
  → 再次顯示價格和 CTA
  → L1 課程：CTA = 免費開始學習
  → L2 / L3 課程：CTA = 立即購買（連結到 Checkout，模組四完成後接線）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【C】課程閱覽器
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

建立 /learn/[courseSlug] 頁面（課程大綱頁）：
→ 左側：所有 Lesson 列表（依 order 排序）
  → 已解鎖的顯示正常，未解鎖的顯示鎖頭圖示
  → isFree=true 的 Lesson 任何人都能點開
→ 右側：選中的 Lesson 內容或歡迎提示

建立 /learn/[courseSlug]/[lessonSlug] 頁面（Lesson 頁）：
→ Access control 邏輯（先做 UI，access control 邏輯在模組三完成後接入）：
  - access=public → 任何人可看
  - access=l2 → 需要購買 L2 或 L3 課程
  - access=l3 → 需要購買 L3 課程
  - isFree=true → 任何人可看（預覽課）
→ 如果無權限：顯示「這堂課需要購買 [課程名稱] 才能觀看」+ CTA 按鈕

Lesson 內容顯示：
→ type=text：顯示 richText 內容
→ type=video：顯示 video embed（用 iframe，支援 YouTube 和 Vimeo URL）
→ type=mixed：先顯示影片，再顯示文字內容
→ 底部：上一堂課 / 下一堂課 導航

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

技術規格：
- Landing Page 要有完整的 generateMetadata（title / description / og:image）
- 所有頁面 Tailwind CSS，不引入其他 UI library
- /learn 路由在沒有登入時不做 redirect，先顯示 access denied 訊息即可
  （模組三完成後再加完整的 auth 保護）
- 完成後提供每個頁面的測試方式

---