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-11-teams-page.story.md
+++ b/_bmad-output/implementation-artifacts/1-11-teams-page.story.md
@@ -0,0 +1,542 @@
+# Story 1.11: Teams Page Implementation
+
+**Status:** ready-for-dev
+**Epic:** Epic 1 - Webflow to Payload CMS + Astro Migration
+**Priority:** P2
+**Estimated Time:** 6 hours
+**Sprint:** Sprint 2
+
+---
+
+## Story (User Story)
+
+**身為** 訪客 (Visitor)，
+**我想要** 瀏覽恩群數位的團隊成員頁面，
+**這樣** 我可以了解誰將負責我的專案，並感受到團隊的專業與溫度。
+
+---
+
+## Context
+
+這是 Epic 1 的第 11 個故事，負責實作「恩群大本營」頁面。此頁面在原 Webflow 網站中展示團隊成員資訊、工作環境照片、公司故事以及員工福利。
+
+**Story Source:**
+- PRD: `docs/prd/05-epic-stories.md` - Story 1.11
+- 執行計畫: `docs/prd/epic-1-execution-plan.md`
+- 詳細任務: `docs/prd/epic-1-stories-1.3-1.17-tasks.md`
+- Webflow 參考: `research/www.enchun.tw/teams.html`
+
+**Dependencies:**
+- 必須依賴 Story 1.4 (Global Layout Components) 完成 Header 和 Footer
+
+---
+
+## Acceptance Criteria
+
+### AC1: Teams 頁面路由存在
+- [ ] 路由 `/teams` 可正常訪問
+- [ ] 頁面標題為「恩群大本營」
+- [ ] SEO meta 標籤正確設定
+
+### AC2: Hero Section 實作
+- [ ] Hero 標題「恩群大本營」顯示
+- [ ] 副標題「Team members of Enchun」顯示
+- [ ] 背景圖片/樣式與 Webflow 設計一致
+- [ ] 視覺效果與 Webflow 原版相似度 95%+
+
+### AC3: 工作環境圖片輪播
+- [ ] 圖片輪播元件實作
+- [ ] 支援多張環境照片
+- [ ] 輪播控制（左右箭頭、圓點導航）
+- [ ] 響應式設計（手機/平板/桌面）
+
+### AC4: 公司故事區塊
+- [ ] 區塊標題「恩群數位的故事」
+- [ ] 副標題「Something About Enchun Digital」
+- [ ] 故事內文正確顯示
+- [ ] 裝飾線條樣式一致
+
+### AC5: 工作福利區塊
+- [ ] 標題「工作福利」/「Benefit Package」
+- [ ] 6 個福利卡片顯示：
+  - 高績效、高獎金，新人開張獎金
+  - 生日慶生、電影日、員工下午茶
+  - 教育訓練補助
+  - 寬敞的工作空間
+  - 員工國內外旅遊、部門聚餐、年終活動
+  - 入職培訓及團隊建設
+- [ ] 圖示正確顯示
+- [ ] 卡片交互效果（hover）
+
+### AC6: CTA 區塊
+- [ ] 標題「以人的成長為優先 創造人的最大價值」
+- [ ] 描述文字正確顯示
+- [ ] 「立刻申請面試」按鈕連結至 104 人力銀行
+- [ ] 按鈕樣式符合設計規範
+
+### AC7: 響應式設計
+- [ ] 桌面版（> 991px）布局正確
+- [ ] 平板版（768px - 991px）布局正確
+- [ ] 手機版（< 768px）布局正確
+- [ ] 圖片在不同尺寸下正確載入
+
+### AC8: 效能與視覺測試
+- [ ] Lighthouse Performance 分數 >= 95
+- [ ] 視覺相似度與 Webflow 相比 >= 95%
+- [ ] 無 Console 錯誤
+
+---
+
+## Tasks / Subtasks
+
+### Task 1.11.1: 設計 Teams 頁面架構 (0.5h)
+**負責人:** dev
+**狀態:** pending
+
+**Subtasks:**
+- [ ] 分析 Webflow teams.html 結構
+- [ ] 規劃 Astro 元件架構
+- [ ] 確認資料來源（靜態 vs. CMS）
+- [ ] 規劃響應式斷點
+
+**Leverage:**
+- `research/www.enchun.tw/teams.html`
+- `apps/frontend/src/layouts/Layout.astro`
+- `apps/frontend/src/components/Header.astro`
+
+**Requirements:** AC1, AC7
+
+---
+
+### Task 1.11.2: 建立 Teams 頁面路由和基本結構 (1h)
+**負責人:** dev
+**狀態:** pending
+
+**Subtasks:**
+- [ ] 建立 `apps/frontend/src/pages/teams.astro`
+- [ ] 設定頁面 meta 標籤（SEO）
+- [ ] 引入 Layout 和共用元件
+- [ ] 建立 Hero Section 元件
+
+**Leverage:**
+- `apps/frontend/src/pages/index.astro` (參考首頁結構)
+- `apps/frontend/src/layouts/Layout.astro`
+
+**Requirements:** AC1, AC2
+
+---
+
+### Task 1.11.3: 實作工作環境圖片輪播 (1.5h)
+**負責人:** dev
+**狀態:** pending
+
+**Subtasks:**
+- [ ] 建立圖片輪播元件 `ImageSlider.astro`
+- [ ] 實作左右導航箭頭
+- [ ] 實作圓點導航
+- [ ] 加入自動播放功能（可選）
+- [ ] 載入 Webflow 環境照片（8 張）
+- [ ] 響應式圖片尺寸設定
+
+**Leverage:**
+- Astro Image 元件
+- Tailwind CSS 樣式
+- Webflow 原始 CSS 參考
+
+**Requirements:** AC3, AC7
+
+**Prompt:** Role: Frontend Developer specializing in Astro and interactive components | Task: Create an image slider component for the Teams page environment photos with navigation arrows, dot indicators, and responsive design following the Webflow reference design | Restrictions: Must use Astro Image component for optimization, ensure touch-friendly navigation on mobile, maintain 95%+ visual fidelity | Success: Slider works smoothly on all devices, images load with proper sizes, navigation controls are accessible
+
+---
+
+### Task 1.11.4: 實作公司故事區塊 (0.5h)
+**負責人:** dev
+**狀態:** pending
+
+**Subtasks:**
+- [ ] 建立 `StorySection.astro` 元件
+- [ ] 實作標題和副標題樣式
+- [ ] 加入裝飾線條
+- [ ] 加入故事內文
+
+**Leverage:**
+- Tailwind CSS typography
+- Design tokens (color, spacing)
+
+**Requirements:** AC4
+
+---
+
+### Task 1.11.5: 實作工作福利區塊 (1h)
+**負責人:** dev
+**狀態:** pending
+
+**Subtasks:**
+- [ ] 建立 `BenefitsSection.astro` 元件
+- [ ] 實作福利卡片網格布局
+- [ ] 加入 6 個福利項目
+- [ ] 載入或建立福利圖示 (SVG)
+- [ ] 加入 hover 交互效果
+
+**Leverage:**
+- Tailwind CSS grid
+- SVG 圖示來源：可使用 Webflow 原始 SVG 或重新建立
+
+**Requirements:** AC5
+
+**福利資料結構:**
+```typescript
+const benefits = [
+  {
+    title: "高績效、高獎金\n新人開張獎金",
+    icon: "make-it-rain.svg", // 或使用 Material Icons
+    align: "right"
+  },
+  {
+    title: "生日慶生、電影日\n員工下午茶",
+    icon: "birthday-candles.svg",
+    align: "left"
+  },
+  // ... 其他 4 項
+]
+```
+
+---
+
+### Task 1.11.6: 實作 CTA 區塊 (0.5h)
+**負責人:** dev
+**狀態:** pending
+
+**Subtasks:**
+- [ ] 建立 `CallToAction.astro` 元件
+- [ ] 實作標題和描述文字
+- [ ] 建立「立刻申請面試」按鈕
+- [ ] 連結至 104 人力銀行: `https://www.104.com.tw/company/1a2x6bkoaj?jobsource=joblist_r_cust`
+
+**Leverage:**
+- `apps/frontend/src/components/Button.astro` (如果存在)
+- Tailwind CSS button 樣式
+
+**Requirements:** AC6
+
+---
+
+### Task 1.11.7: 效能與視覺測試 (1h)
+**負責人:** dev
+**狀態:** pending
+
+**Subtasks:**
+- [ ] Lighthouse 效能測試
+- [ ] 視覺相似度比對（與 Webflow）
+- [ ] 跨瀏覽器測試（Chrome, Safari, Firefox）
+- [ ] 響應式測試（Desktop, Tablet, Mobile）
+- [ ] 修復發現的問題
+
+**Leverage:**
+- Chrome DevTools Lighthouse
+- Responsive Design Mode
+- Webflow teams.html 原始參考
+
+**Requirements:** AC8
+
+---
+
+## Dev Technical Guidance
+
+### Webflow 分析（teams.html）
+
+根據 Webflow 原始 HTML，Teams 頁面包含以下主要區塊：
+
+1. **Hero Section**
+   - 標題: `h1.hero_title_head-team` → 「恩群大本營」
+   - 副標題: `p.hero_sub_paragraph-team` → 「Team members of Enchun」
+   - 背景: `hero_bg-team` 類別
+
+2. **工作環境圖片輪播** (`section_video`)
+   - 使用 Webflow Slider 元件
+   - 8 張環境照片
+   - 左右箭頭導航
+   - 圓點指示器
+   - 區塊標題: 「在恩群工作的環境」/「Working Environment」
+
+3. **公司故事** (`section_story`)
+   - 標題: 「恩群數位的故事」
+   - 副標題: 「Something About Enchun Digital」
+   - 內文段落關於公司理念
+
+4. **工作福利** (`section_benefit`)
+   - 6 個福利卡片，左右交錯排列
+   - 每個卡片包含圖示和文字
+   - 使用 `benefit_card` 和 `benefit_card-opppsite` 類別
+
+5. **CTA 區塊** (`section_call4action`)
+   - 標題: 「以人的成長為優先 創造人的最大價值」
+   - 描述: 關於團隊理念和招募需求
+   - 按鈕: 「立刻申請面試」連結至 104
+
+### 頁面結構規劃
+
+```
+apps/frontend/src/pages/teams.astro
+├── Layout (Header + Footer)
+├── Hero Section
+│   ├── Title: 恩群大本營
+│   └── Subtitle: Team members of Enchun
+├── Image Slider Section
+│   ├── Section Header
+│   └── Slider (8 photos)
+├── Story Section
+│   └── Company story text
+├── Benefits Section
+│   └── 6 benefit cards
+└── CTA Section
+    └── Apply button
+```
+
+### 元件規劃
+
+| 元件名稱 | 路徑 | 用途 |
+|---------|------|------|
+| `TeamsHero.astro` | `src/components/teams/` | Hero 區塊 |
+| `ImageSlider.astro` | `src/components/teams/` | 環境照片輪播 |
+| `StorySection.astro` | `src/components/teams/` | 公司故事 |
+| `BenefitsSection.astro` | `src/components/teams/` | 工作福利卡片 |
+| `CallToAction.astro` | `src/components/teams/` | CTA 區塊 |
+
+### Design Tokens 參考
+
+從 Webflow CSS 提取的樣式參考：
+
+```css
+/* Hero Section */
+.hero-overlay-team {
+  /* 背景樣式，需要從設計稿確認 */
+}
+
+.hero_title_head-team {
+  /* H1 標題樣式 */
+}
+
+.hero_sub_paragraph-team {
+  /* 副標題樣式 */
+}
+
+/* Section Headers */
+.section_header_w_line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.divider_line {
+  width: 40px;
+  height: 2px;
+  background: var(--primary-color);
+}
+
+/* Benefits Grid */
+.benefit_grid_wrapper {
+  display: grid;
+  /* 響應式網格配置 */
+}
+```
+
+### 響應式斷點
+
+根據實現就緒報告建議：
+
+| Breakpoint | Width | Target |
+|------------|-------|--------|
+| Mobile Portrait | < 479px | 單欄布局 |
+| Mobile Landscape | 480px - 767px | 單欄布局 |
+| Tablet | 768px - 991px | 2 欄布局 |
+| Desktop | > 991px | 3-4 欄布局 |
+
+### 圖片來源
+
+環境照片來源（Webflow CDN）：
+- https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f76b4962117e2d84363174_恩群環境 照片1.jpg
+- （共 8 張，需遷移至 R2）
+
+福利圖示來源：
+- https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b79b2942d05_Make%20it%20rain-bro-%E6%96%B0%E4%BA%BA%E9%96%8B%E5%BC%B5%E7%8D%8E%E9%87%91.svg
+- （共 6 個 SVG 圖示）
+
+---
+
+## Architecture Compliance
+
+### 遵循的架構原則
+
+1. **Frontend 慣例**
+   - TypeScript/TSX 嚴格型別
+   - `PascalCase` 元件名稱
+   - `kebab-case` 檔案名稱
+
+2. **共用程式碼**
+   - 使用 Layout 元件包含 Header/Footer
+   - 使用設計 tokens (Tailwind config)
+   - 重用現有 Button 元件（如果適用）
+
+3. **SEO 最佳化**
+   - Astro `<title>` 和 `<meta>` 標籤
+   - Open Graph 標籤
+   - 結構化資料（如適用）
+
+4. **效能最佳化**
+   - Astro Image 元件用於圖片優化
+   - 懶載入非關鍵資源
+   - CSS-in-JS 或 Tailwind CSS
+
+---
+
+## File Structure
+
+```
+apps/frontend/src/
+├── pages/
+│   └── teams.astro                    # Teams 頁面路由 (NEW)
+├── components/
+│   └── teams/
+│       ├── TeamsHero.astro            # Hero 區塊 (NEW)
+│       ├── ImageSlider.astro          # 圖片輪播 (NEW)
+│       ├── StorySection.astro         # 公司故事 (NEW)
+│       ├── BenefitsSection.astro      # 工作福利 (NEW)
+│       └── CallToAction.astro         # CTA 區塊 (NEW)
+└── styles/
+    └── teams.css                      # Teams 頁面專用樣式 (OPTIONAL)
+```
+
+---
+
+## Testing Requirements
+
+### Unit Tests
+
+```typescript
+// apps/frontend/src/components/teams/__tests__/ImageSlider.test.ts
+describe('ImageSlider Component', () => {
+  it('should render all images', () => {
+    // Test image rendering
+  })
+
+  it('should navigate to next slide on arrow click', () => {
+    // Test navigation
+  })
+
+  it('should show correct active dot indicator', () => {
+    // Test dot indicators
+  })
+})
+```
+
+### E2E Tests
+
+```typescript
+// apps/frontend/tests/e2e/teams.spec.ts
+import { test, expect } from '@playwright/test'
+
+test.describe('Teams Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/teams')
+  })
+
+  test('should display hero section', async ({ page }) => {
+    await expect(page.locator('h1')).toContainText('恩群大本營')
+  })
+
+  test('should display environment slider', async ({ page }) => {
+    await expect(page.locator('[data-testid="image-slider"]')).toBeVisible()
+  })
+
+  test('should display all 6 benefit cards', async ({ page }) => {
+    const cards = page.locator('[data-testid="benefit-card"]')
+    await expect(cards).toHaveCount(6)
+  })
+
+  test('CTA button should link to 104 job site', async ({ page }) => {
+    const ctaButton = page.locator('a:has-text("立刻申請面試")')
+    await expect(ctaButton).toHaveAttribute('href', /104\.com\.tw/)
+  })
+})
+```
+
+### Manual Testing Checklist
+
+#### Desktop (> 991px)
+- [ ] Hero 標題和副標題正確顯示
+- [ ] 圖片輪播左右箭頭可用
+- [ ] 圓點導航顯示正確且可點擊
+- [ ] 福利卡片呈現左右交錯布局
+- [ ] CTA 按鈕 hover 效果正常
+
+#### Tablet (768px - 991px)
+- [ ] 圖片輪播尺寸正確
+- [ ] 福利卡片網格調整為 2 欄
+
+#### Mobile (< 768px)
+- [ ] Hero 區塊在小螢幕上可讀
+- [ ] 圖片輪播支援滑動手勢
+- [ ] 福利卡片單欄布局
+- [ ] CTA 按鍵尺寸適合觸控
+
+#### Accessibility
+- [ ] 所有互動元素可鍵盤操作
+- [ ] 圖片有適當 alt 文字
+- [ ] 對比度符合 WCAG AA 標準
+
+---
+
+## Risk Assessment
+
+| Risk | Probability | Impact | Mitigation |
+|------|------------|--------|------------|
+| 圖片輪播在舊裝置效能問題 | Medium | Low | 使用原生 CSS scroll-snap 或輕量套件 |
+| 福利圖示遺失或格式不符 | Low | Medium | 從 Webflow CDN 備份或重新建立 SVG |
+| 響應式布局差異 | Medium | Medium | 嚴格測試各斷點，參考 Webflow 原始 CSS |
+| 視覺相似度不足 95% | Low | High | 與設計稿逐一比對，調整間距和顏色 |
+
+---
+
+## Definition of Done
+
+- [ ] `/teams` 路由可正常訪問
+- [ ] 所有 6 個區塊實作完成
+- [ ] 圖片輪播功能正常
+- [ ] 響應式設計通過 3 個斷點測試
+- [ ] Lighthouse Performance >= 95
+- [ ] 視覺相似度與 Webflow >= 95%
+- [ ] E2E 測試通過
+- [ ] 無 Console 錯誤
+- [ ] 無無障礙問題
+- [ ] Code review 通過
+- [ ] sprint-status.yaml 更新為 done
+
+---
+
+## Dev Agent Record
+
+### Agent Model Used
+_待填寫_
+
+### Debug Log References
+_待填寫_
+
+### Completion Notes
+_待實作完成後填寫_
+
+### File List
+_待實作完成後填寫_
+
+---
+
+## Change Log
+
+| Date | Action | Author |
+|------|--------|--------|
+| 2026-01-31 | Story created (ready-for-dev) | SM Agent (Bob) |
+
+---
+
+**Let's go! Team page is gonna be awesome!** 🚀