# 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) |