Files

pkupuk e9897388dc 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

13 KiB

Raw Blame History

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 - 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:

// 在 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 呼叫範例：

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

顏色系統：

/* 主色調 */
--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;

字型系統：

/* 中文 */
--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 */

間距系統：

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

遵循專案架構模式：

組件化設計：
- 使用 Astro 組件（.astro）
- Props interface 使用 TypeScript
- 可複用首頁組件（Hero, CTASection）
響應式設計：
- 使用 Tailwind CSS 斷點
- Mobile-first 開發
- 斷點：sm(640px), md(768px), lg(1024px)
性能優化：
- Astro 圖片優化 (<Image />)
- 懶加載非關鍵資源
- CSS 內聯關鍵路徑
SEO 最佳化：
- 動態 meta tags
- Open Graph tags
- 結構化資料（JSON-LD）

Testing Requirements

Unit Tests

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

13 KiB Raw Blame History Unescape Escape

Story 1.6: About Page Implementation

Story

Context

Acceptance Criteria

AC1: Hero Section

AC2: Service Features Section

AC3: Comparison Table

AC4: CTA Section

AC5: Visual Fidelity

AC6: Performance

Tasks / Subtasks

Task 1.6.1: Create About Page in Payload CMS (1h)

Task 1.6.2: Create about-enchun.astro Route (1.5h)

Task 1.6.3: Implement Hero Section (1h)

Task 1.6.4: Implement Service Features Section (1.5h)

Task 1.6.5: Implement Comparison Table (1.5h)

Task 1.6.6: Implement CTA Section (0.5h)

Task 1.6.7: Performance and Visual Testing (1h)

Dev Technical Guidance

Project Structure Notes

Payload CMS Content Structure

API Integration Pattern

Design Tokens (來自 Webflow)

Architecture Compliance

Testing Requirements

Unit Tests

Manual Testing Checklist

Risk Assessment

Definition of Done

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes

File List

Change Log

13 KiB

Raw Blame History