docs: separate documentation and specs into initial commit

Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
2026-02-11 11:49:49 +08:00
parent 8c87d71aa2
commit e9897388dc
34 changed files with 11920 additions and 8777 deletions
--- a/_bmad-output/implementation-artifacts/1-6-about-page.story.md
+++ b/_bmad-output/implementation-artifacts/1-6-about-page.story.md
@@ -0,0 +1,475 @@
+# Story 1.6: About Page Implementation
+
+**Status:** ready-for-dev
+**Epic:** Epic 1 - Webflow to Payload CMS + Astro Migration
+**Priority:** P1 (High - User-facing content page)
+**Estimated Time:** 8 hours
+
+---
+
+## Story
+
+**As a** Visitor,
+**I want** to learn about Enchun Digital's values and differences,
+**So that** I can trust them as my digital marketing partner.
+
+---
+
+## Context
+
+這是 Epic 1 的第 6 個 Story，屬於「頁面實作」類別。About 頁面是建立品牌信任度的重要頁面，向潛在客戶展示恩群數位的核心理念和競爭優勢。
+
+**Story Source:**
+- PRD: `/docs/prd/epic-1-stories-1.3-1.17-tasks.md` - Story 1.6
+- Execution Plan: `/docs/prd/epic-1-execution-plan.md`
+- Implementation Readiness: `/Users/pukpuk/Dev/website-enchun-mgr/_bmad-output/planning-artifacts/implementation-readiness-report-2026-01-31.md`
+
+**原始 HTML 參考：**
+- [Source: research/www.enchun.tw/about-enchun.html](../../research/www.enchun.tw/about-enchun.html) - Webflow 原始頁面
+
+**依賴關係:**
+- 依賴 Story 1.4 (Global Layout Components) - 需要共用 Header/Footer
+- 與 Story 1.5-1.11 可並行開發
+
+---
+
+## Acceptance Criteria
+
+### AC1: Hero Section
+- [ ] 標題顯示「關於恩群數位」
+- [ ] 背景圖片符合 Webflow 設計
+- [ ] 深色覆蓋層確保文字可讀性
+- [ ] 響應式佈局（桌面/手機）
+
+### AC2: Service Features Section
+- [ ] 4 個特色卡片顯示：
+  - 在地化優先
+  - 高投資轉換率
+  - 數據優先
+  - 關係優於銷售
+- [ ] 每個卡片包含 Icon + 標題 + 描述
+- [ ] Grid 佈局（桌面 2x2，手機 1x4）
+- [ ] Hover 效果（陰影、上移）
+
+### AC3: Comparison Table
+- [ ] 表格結構：
+  - 左欄：恩群數位
+  - 右欄：其他行銷公司
+- [ ] 多行對比項目（至少 3-5 項）
+- [ ] 表格樣式（邊框、間距、顏色）
+- [ ] 響應式設計（手機可水平滾動）
+
+### AC4: CTA Section
+- [ ] 標題：「跟行銷顧問聊聊」
+- [ ] 主要 CTA 按鈕連結到聯絡頁面
+- [ ] 區塊背景色或設計突出
+
+### AC5: Visual Fidelity
+- [ ] 視覺保真度 ≥ 95%（對比 Webflow 原始設計）
+- [ ] 字型使用 Noto Sans TC
+- [ ] 顏色符合設計規範
+
+### AC6: Performance
+- [ ] Lighthouse Performance score ≥ 90
+- [ ] FCP < 1.5s
+- [ ] LCP < 2.5s
+- [ ] CLS < 0.1
+
+---
+
+## Tasks / Subtasks
+
+### Task 1.6.1: Create About Page in Payload CMS (1h)
+**AC Coverage:** AC1, AC2, AC3, AC4
+
+- [ ] 在 Pages collection 建立 about-enchun 頁面
+- [ ] 設定 slug: `about-enchun`
+- [ ] Hero section blocks:
+  - [ ] Title: "關於恩群數位"
+  - [ ] 背景圖片
+- [ ] Service features section:
+  - [ ] 4 個特色卡片配置
+  - [ ] 在地化優先 - icon + title + description
+  - [ ] 高投資轉換率 - icon + title + description
+  - [ ] 數據優先 - icon + title + description
+  - [ ] 關係優於銷售 - icon + title + description
+- [ ] Comparison table:
+  - [ ] 恩群數位 vs 其他行銷公司
+  - [ ] 對比項目配置
+- [ ] CTA section:
+  - [ ] Title: "跟行銷顧問聊聊"
+  - [ ] 按鈕連結
+- [ ] SEO meta data (title, description, og:image)
+
+### Task 1.6.2: Create about-enchun.astro Route (1.5h)
+**AC Coverage:** AC1-AC4
+
+- [ ] 建立路由檔案 `apps/frontend/src/pages/about-enchun.astro`
+- [ ] 使用 MainLayout (來自 Story 1.4)
+- [ ] 從 Payload API 載入頁面內容
+  - [ ] API endpoint: `/api/pages?where[slug][equals]=about-enchun`
+  - [ ] 錯誤處理 (404, API 失敗)
+- [ ] 實作各 section 組件的容器
+- [ ] 設定頁面 meta tags
+
+### Task 1.6.3: Implement Hero Section (1h)
+**AC Coverage:** AC1
+
+- [ ] 建立 `Hero.astro` 組件（或複用首頁 Hero 組件）
+- [ ] 全背景圖片
+- [ ] 標題：「關於恩群數位」
+- [ ] 副標題（如有）
+- [ ] 深色覆蓋層（rgba(0,0,0,0.4)）
+- [ ] 響應式對齊（桌面置中，手機置中）
+- [ ] 淡入動畫效果
+
+### Task 1.6.4: Implement Service Features Section (1.5h)
+**AC Coverage:** AC2
+
+- [ ] 建立 `ServiceFeatures.astro` 組件
+- [ ] 4 個特色卡片配置：
+  | 標題 | 描述 | Icon |
+  |------|------|------|
+  | 在地化優先 | 深耕台灣市場，了解本地消費者行為與文化 | `material-symbols:location-on` |
+  | 高投資轉換率 | 專注 ROI，讓每分行銷預算發揮最大效益 | `material-symbols:trending-up` |
+  | 數據優先 | 基於數據分析制定策略，精準掌握市場脈動 | `material-symbols:analytics` |
+  | 關係優於銷售 | 建立長期合作關係，與客戶共同成長 | `material-symbols:handshake` |
+- [ ] Grid 佈局：
+  - [ ] 桌面（≥768px）：2 欄 x 2 行
+  - [ ] 手機（<768px）：1 欄 x 4 行
+- [ ] Hover 效果：
+  - [ ] 陰影增加
+  - [ ] 卡片上移 4px
+  - [ ] 過渡動畫 0.3s ease
+
+### Task 1.6.5: Implement Comparison Table (1.5h)
+**AC Coverage:** AC3
+
+- [ ] 建立 `ComparisonTable.astro` 組件
+- [ ] 表格結構：
+  ```
+  | 比較項目 | 恩群數位 | 其他行銷公司 |
+  |----------|----------|--------------|
+  | 數據分析 | 數據優先，精準投放 | 憑經驗判斷 |
+  | 投資回報 | 專注 ROI | 不保證效果 |
+  | 服務範圍 | 端到端解決方案 | 單一服務 |
+  | 客戶關係 | 長期合作夥伴 | 專案制 |
+  | 本地經驗 | 深耕台灣市場 | 通用方案 |
+  ```
+- [ ] 表格樣式：
+  - [ ] 邊框：1px solid #e5e7eb
+  - [ ] 標題行背景色：#f9fafb
+  - [ ] 單元格內距：12px 16px
+  - [ ] 文字對齊：left
+- [ ] 響應式設計：
+  - [ ] 桌面：正常表格
+  - [ ] 手機：overflow-x-auto（可水平滾動）
+
+### Task 1.6.6: Implement CTA Section (0.5h)
+**AC Coverage:** AC4
+
+- [ ] 建立 `CTASection.astro` 組件（或複用首頁 CTA）
+- [ ] 標題：「跟行銷顧問聊聊」
+- [ ] 副標題：「讓我們一起討論如何提升您的品牌」
+- [ ] 主要 CTA 按鈕：
+  - [ ] 文字：「立即聯絡」
+  - [ ] 連結：`/contact-us`
+  - [ ] 樣式：主色背景，白色文字
+- [ ] 區塊背景色或設計
+
+### Task 1.6.7: Performance and Visual Testing (1h)
+**AC Coverage:** AC5, AC6
+
+- [ ] 圖片優化：
+  - [ ] 轉換為 WebP 格式
+  - [ ] 響應式尺寸（桌面/手機）
+  - [ ] 懶加載
+- [ ] Lighthouse Performance audit：
+  - [ ] Performance ≥ 90
+  - [ ] Accessibility ≥ 90
+  - [ ] Best Practices ≥ 90
+  - [ ] SEO ≥ 90
+- [ ] 視覺保真度測試：
+  - [ ] 與 Webflow 原始設計對比
+  - [ ] 字型、顏色、間距檢查
+  - [ ] 響應式斷點驗證
+- [ ] 跨瀏覽器測試：
+  - [ ] Chrome
+  - [ ] Safari
+  - [ ] Firefox
+  - [ ] Edge
+
+---
+
+## Dev Technical Guidance
+
+### Project Structure Notes
+
+**檔案位置：**
+```
+apps/frontend/src/
+├── pages/
+│   └── about-enchun.astro  ← 建立此路由檔案
+├── components/
+│   ├── about/
+│   │   ├── Hero.astro      ← 關於頁 Hero
+│   │   ├── ServiceFeatures.astro  ← 服務特色
+│   │   ├── ComparisonTable.astro  ← 對照表
+│   │   └── CTASection.astro       ← CTA 區塊
+│   └── sections/
+│       └── hero/           ← 可複用首頁 Hero
+└── layouts/
+    └── Layout.astro        ← 來自 Story 1.4
+```
+
+### Payload CMS Content Structure
+
+**Pages Collection - About Page:**
+```typescript
+// 在 Payload Admin 中建立
+{
+  title: "關於恩群數位",
+  slug: "about-enchun",
+  hero: {
+    title: "關於恩群數位",
+    subtitle: "專注數據導向的數位行銷服務",
+    backgroundImage: "[上傳圖片到 R2]"
+  },
+  serviceFeatures: [
+    {
+      icon: "material-symbols:location-on",
+      title: "在地化優先",
+      description: "深耕台灣市場，了解本地消費者行為與文化"
+    },
+    // ... 其他 3 個特色
+  ],
+  comparisonTable: {
+    rows: [
+      {
+        item: "數據分析",
+        enchun: "數據優先，精準投放",
+        others: "憑經驗判斷"
+      },
+      // ... 其他 4 項
+    ]
+  },
+  cta: {
+    title: "跟行銷顧問聊聊",
+    subtitle: "讓我們一起討論如何提升您的品牌",
+    buttonText: "立即聯絡",
+    buttonLink: "/contact-us"
+  },
+  seo: {
+    title: "關於恩群數位 - 數據導向的數位行銷夥伴",
+    description: "恩群數位提供專業的數位行銷服務，包含 Google Ads、社群代操、論壇行銷等，專注高投資轉換率。",
+    ogImage: "[上傳 OG 圖片]"
+  }
+}
+```
+
+### API Integration Pattern
+
+**Payload API 呼叫範例：**
+```typescript
+// apps/frontend/src/pages/about-enchun.astro
+---
+import Layout from '../layouts/Layout.astro'
+import Hero from '../components/about/Hero.astro'
+import ServiceFeatures from '../components/about/ServiceFeatures.astro'
+import ComparisonTable from '../components/about/ComparisonTable.astro'
+import CTASection from '../components/about/CTASection.astro'
+
+const response = await fetch(`${import.meta.env.PAYLOAD_CMS_URL}/api/pages?where[slug][equals]=about-enchun&depth=1`)
+const data = await response.json()
+const page = data.docs[0]
+
+if (!page) {
+  return Astro.redirect('/404')
+}
+---
+
+<Layout title={page.seo?.title || '關於恩群數位'}>
+  <Hero {...page.hero} />
+  <ServiceFeatures features={page.serviceFeatures} />
+  <ComparisonTable rows={page.comparisonTable.rows} />
+  <CTASection {...page.cta} />
+</Layout>
+```
+
+### Design Tokens (來自 Webflow)
+
+**顏色系統：**
+```css
+/* 主色調 */
+--color-primary: #FF6B35;      /* 恩群橙 */
+--color-primary-dark: #E55A2B;
+--color-primary-light: #FF8C5A;
+
+/* 中性色 */
+--color-gray-50: #F9FAFB;
+--color-gray-100: #F3F4F6;
+--color-gray-200: #E5E7EB;
+--color-gray-300: #D1D5DB;
+--color-gray-600: #4B5563;
+--color-gray-800: #1F2937;
+--color-gray-900: #111827;
+
+/* 文字顏色 */
+--color-text: #1F2937;
+--color-text-secondary: #6B7280;
+--color-text-light: #9CA3AF;
+```
+
+**字型系統：**
+```css
+/* 中文 */
+--font-chinese: 'Noto Sans TC', sans-serif;
+
+/* 英文/數字 */
+--font-english: 'Quicksand', sans-serif;
+
+/* 字級 */
+--text-h1: clamp(2rem, 5vw, 3rem);     /* 32px - 48px */
+--text-h2: clamp(1.5rem, 4vw, 2.25rem); /* 24px - 36px */
+--text-h3: clamp(1.25rem, 3vw, 1.875rem); /* 20px - 30px */
+--text-body: 1rem;                      /* 16px */
+--text-sm: 0.875rem;                    /* 14px */
+```
+
+**間距系統：**
+```css
+--spacing-xs: 0.5rem;   /* 8px */
+--spacing-sm: 1rem;     /* 16px */
+--spacing-md: 1.5rem;   /* 24px */
+--spacing-lg: 2rem;     /* 32px */
+--spacing-xl: 3rem;     /* 48px */
+--spacing-2xl: 4rem;    /* 64px */
+```
+
+### Architecture Compliance
+
+遵循專案架構模式：
+
+1. **組件化設計：**
+   - 使用 Astro 組件（`.astro`）
+   - Props interface 使用 TypeScript
+   - 可複用首頁組件（Hero, CTASection）
+
+2. **響應式設計：**
+   - 使用 Tailwind CSS 斷點
+   - Mobile-first 開發
+   - 斷點：sm(640px), md(768px), lg(1024px)
+
+3. **性能優化：**
+   - Astro 圖片優化 (`<Image />`)
+   - 懶加載非關鍵資源
+   - CSS 內聯關鍵路徑
+
+4. **SEO 最佳化：**
+   - 動態 meta tags
+   - Open Graph tags
+   - 結構化資料（JSON-LD）
+
+---
+
+## Testing Requirements
+
+### Unit Tests
+```typescript
+// apps/frontend/src/components/about/__tests__/ComparisonTable.spec.ts
+import { describe, it, expect } from 'vitest'
+
+describe('ComparisonTable Component', () => {
+  it('should render all comparison rows', () => {
+    const rows = [
+      { item: '數據分析', enchun: '數據優先', others: '憑經驗' },
+      { item: '投資回報', enchun: '專注 ROI', others: '不保證' }
+    ]
+    // 測試邏輯...
+  })
+
+  it('should handle empty rows gracefully', () => {
+    // 測試空資料...
+  })
+})
+```
+
+### Manual Testing Checklist
+
+**Hero Section:**
+- [ ] 標題「關於恩群數位」正確顯示
+- [ ] 背景圖片載入成功
+- [ ] 文字在深色覆蓋層上可讀
+- [ ] 手機版標題大小適中
+
+**Service Features:**
+- [ ] 4 個卡片全部顯示
+- [ ] Icons 正確渲染
+- [ ] Hover 效果流暢
+- [ ] 手機版為單欄佈局
+
+**Comparison Table:**
+- [ ] 表格所有行正確顯示
+- [ ] 標題行有背景色
+- [ ] 手機版可水平滾動
+- [ ] 邊框和間距正確
+
+**CTA Section:**
+- [ ] 標題「跟行銷顧問聊聊」顯示
+- [ ] 按鈕可點擊並連結到正確頁面
+- [ ] 區塊設計突出
+
+**Performance:**
+- [ ] Lighthouse Performance ≥ 90
+- [ ] 圖片使用 WebP 格式
+- [ ] 無 layout shift
+
+---
+
+## Risk Assessment
+
+| Risk | Probability | Impact | Mitigation |
+|------|------------|--------|------------|
+| 設計標記未提取完全 | Medium | Medium | 在 Story 1.4 完成前提取完整設計標記 |
+| Payload API 延遲 | Low | Low | 使用靜態生成或快取 |
+| 圖片優化問題 | Low | Low | 使用 Astro Image 組件自動優化 |
+| 響應式斷點不一致 | Medium | Low | 使用 Tailwind 預設斷點 |
+
+---
+
+## Definition of Done
+
+- [ ] About 頁面路由建立完成
+- [ ] Payload CMS 內容配置完成
+- [ ] 所有 4 個 section 組件實作完成
+- [ ] 視覺保真度 ≥ 95%
+- [ ] Lighthouse Performance ≥ 90
+- [ ] 響應式設計通過所有斷點測試
+- [ ] 跨瀏覽器測試通過
+- [ ] 單元測試覆蓋核心組件
+- [ ] sprint-status.yaml 更新狀態
+- [ ] Story 狀態設為 ready-for-review
+
+---
+
+## Dev Agent Record
+
+### Agent Model Used
+*To be filled by Dev Agent*
+
+### Debug Log References
+*To be filled by Dev Agent*
+
+### Completion Notes
+*To be filled by Dev Agent*
+
+### File List
+*To be filled by Dev Agent*
+
+---
+
+## Change Log
+
+| Date | Action | Author |
+|------|--------|--------|
+| 2026-01-31 | Story created (Draft) | SM Agent (Bob) |