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

14 KiB

Raw Blame History

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

福利資料結構:

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 頁面包含以下主要區塊：

Hero Section
- 標題: h1.hero_title_head-team → 「恩群大本營」
- 副標題: p.hero_sub_paragraph-team → 「Team members of Enchun」
- 背景: hero_bg-team 類別
工作環境圖片輪播 (section_video)
- 使用 Webflow Slider 元件
- 8 張環境照片
- 左右箭頭導航
- 圓點指示器
- 區塊標題: 「在恩群工作的環境」/「Working Environment」
公司故事 (section_story)
- 標題: 「恩群數位的故事」
- 副標題: 「Something About Enchun Digital」
- 內文段落關於公司理念
工作福利 (section_benefit)
- 6 個福利卡片，左右交錯排列
- 每個卡片包含圖示和文字
- 使用 benefit_card 和 benefit_card-opppsite 類別
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 提取的樣式參考：

/* 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）

福利圖示來源：

Architecture Compliance

遵循的架構原則

Frontend 慣例
- TypeScript/TSX 嚴格型別
- PascalCase 元件名稱
- kebab-case 檔案名稱
共用程式碼
- 使用 Layout 元件包含 Header/Footer
- 使用設計 tokens (Tailwind config)
- 重用現有 Button 元件（如果適用）
SEO 最佳化
- Astro <title> 和 <meta> 標籤
- Open Graph 標籤
- 結構化資料（如適用）
效能最佳化
- 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

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

// 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! 🚀

14 KiB Raw Blame History Unescape Escape

Story 1.11: Teams Page Implementation

Story (User Story)

Context

Acceptance Criteria

AC1: Teams 頁面路由存在

AC2: Hero Section 實作

AC3: 工作環境圖片輪播

AC4: 公司故事區塊

AC5: 工作福利區塊

AC6: CTA 區塊

AC7: 響應式設計

AC8: 效能與視覺測試

Tasks / Subtasks

Task 1.11.1: 設計 Teams 頁面架構 (0.5h)

Task 1.11.2: 建立 Teams 頁面路由和基本結構 (1h)

Task 1.11.3: 實作工作環境圖片輪播 (1.5h)

Task 1.11.4: 實作公司故事區塊 (0.5h)

Task 1.11.5: 實作工作福利區塊 (1h)

Task 1.11.6: 實作 CTA 區塊 (0.5h)

Task 1.11.7: 效能與視覺測試 (1h)

Dev Technical Guidance

Webflow 分析（teams.html）

頁面結構規劃

元件規劃

Design Tokens 參考

響應式斷點

圖片來源

Architecture Compliance

遵循的架構原則

File Structure

Testing Requirements

Unit Tests

E2E Tests

Manual Testing Checklist

Desktop (> 991px)

Tablet (768px - 991px)

Mobile (< 768px)

Accessibility

Risk Assessment

Definition of Done

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes

File List

Change Log

14 KiB

Raw Blame History