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/specs/001-users-pukpuk-dev/ux-story-1-5-homepage-spec.md
+++ b/specs/001-users-pukpuk-dev/ux-story-1-5-homepage-spec.md
@@ -0,0 +1,581 @@
+# Story 1-5 Homepage - UX Pixel-Perfect Specifications
+
+> **UX Expert Review Document**
+> 參考來源: `research/www.enchun.tw/index.html` (Webflow Export)
+> 設計系統: `apps/frontend/src/styles/theme.css`
+> 目標視覺保真度: 100%
+
+---
+
+## 🎨 Design Token 驗證
+
+### 色彩系統 (與 Webflow 原始設計一致)
+
+| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
+|------|----------|-----------|--------------|----------|
+| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
+| 深品牌色 | Enchun Blue Dark | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
+| 淺藍色 | Tropical Blue | `#c7e4fa` | `--color-tropical-blue` | ✅ 已定義 |
+| 頁腳文字 | St. Tropaz | `#5d7285` | `--color-st-tropaz` | ✅ 已定義 |
+| CTA 強調 | Amber | `#f6c456` | `--color-amber` | ✅ 已定義 |
+| 深色文字 | Tarawera | `#2d3748` | `--color-tarawera` | ✅ 已定義 |
+| 通知紅 | Notification Red | `#d84038` | --color-notification-red | ⚠️ 需新增 |
+| 深藍色 | Dark Blue | `#062841` | --color-dark-blue | ⚠️ 需新增 |
+| 中藍色 | Medium Blue | `#67aee1` | --color-medium-blue | ⚠️ 需新增 |
+| 超淺灰 | Grey 6 | `#f2f2f2` | `--color-gray-100` | ✅ 已定義 |
+| 淺灰 | Grey 5 | `#e0e0e0` | --color-grey5 | ⚠️ 需新增 |
+| 中灰 | Grey 3 | `#828282` | `--color-gray-700` | ✅ 已定義 |
+| 深灰 | Grey 2 | `#4f4f4f` | `--color-gray-950` | ✅ 已定義 |
+
+### 新增設計 Token 需求
+
+請在 `theme.css` 中新增以下變數：
+
+```css
+/* Webflow 額外色彩 */
+--color-notification-red: #d84038;
+--color-dark-blue: #062841;
+--color-medium-blue: #67aee1;
+--color-grey5: #e0e0e0;
+```
+
+---
+
+## 📐 Section 詳細規格
+
+### 1. Hero Section
+
+#### 組件檔案: `VideoHero.astro` (已存在，需調整)
+
+#### 容器規格
+```css
+.centered-container-home {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    max-height: 88.5vh;  /* Webflow 原始值 */
+    padding-top: 110px;   /* Desktop */
+    padding-bottom: 100px;
+}
+```
+
+#### 背景影片
+```css
+.background-video {
+    position: absolute;
+    z-index: -1;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+```
+- **Autoplay**: `true`
+- **Loop**: `true`
+- **Muted**: `true`
+- **Playsinline**: `true`
+
+#### 漸層遮罩
+```css
+.hero-overlay-home {
+    background: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.8) 0%,
+        rgba(0, 0, 0, 0) 100%
+    );
+}
+```
+
+#### Logo
+```css
+.hero_logo {
+    width: 135px;       /* Desktop */
+    padding-top: 33px;
+}
+```
+
+#### 標題文字
+```css
+.hero_title_head {
+    font-size: 3.39em;           /* Desktop, ~64px base 19px */
+    line-height: 1.2;
+    text-align: left;
+    color: #ffffff;
+    font-family: "Noto Sans TC", sans-serif;
+}
+
+.hero_sub_paragraph-home {
+    font-size: 1.56em;           /* Desktop, ~30px */
+    font-weight: 300;
+    line-height: 1.2;
+    text-align: left;
+    color: #f2f2f2;              /* var(--grey6) */
+    font-family: "Quicksand", sans-serif;
+}
+```
+
+#### 響應式調整
+
+| Breakpoint | 標題字體大小 | 副標題字體大小 | Padding |
+|------------|--------------|----------------|---------|
+| Desktop (≥992px) | 3.39em (64px) | 1.56em (30px) | 110px/100px |
+| Tablet (≤991px) | 2.45em (47px) | 1.15em (22px) | 0/0 |
+| Mobile (≤767px) | 7vw | 3.4vw | 0/0 |
+
+#### ❌ 當前實現問題
+1. 當前字體大小使用 `text-6xl`，與 Webflow 的 `3.39em` 不符
+2. 漸層遮罩方向需要確認
+3. Logo 尺寸需要調整為 135px
+
+---
+
+### 2. 煩惱點區塊 (Painpoint Section)
+
+#### 新組件: `PainpointSection.astro`
+
+#### 容器規格
+```css
+.section_painpoint {
+    height: 80vh;
+    max-height: 80vh;
+}
+```
+
+#### 標題區塊
+```css
+.section_header_w_line {
+    text-align: center;
+}
+
+.header_subtitle_head {
+    font-size: 1.8rem;           /* ~34px */
+    text-align: center;
+    color: var(--color-dark-blue);  /* #062841 */
+}
+
+.divider_line {
+    background-color: var(--color-enchunblue);
+    height: 1px;
+    width: 60px;
+    margin: 16px auto;
+}
+```
+
+#### Tabs 系統
+```css
+.painpoint_tabs {
+    padding-top: 32px;
+    padding-bottom: 70px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;    /* Desktop: 2 columns */
+    gap: 32px;
+}
+
+.painpoint_text {
+    font-size: 2.08em;                /* ~40px */
+    font-weight: 500;
+    line-height: 1;
+    color: var(--color-dark-blue);
+    font-family: "Noto Sans TC", sans-serif;
+    cursor: pointer;
+    transition: text-shadow 0.3s ease;
+}
+
+.painpoint_text:hover {
+    text-shadow: 7px 4px 13px rgba(0, 0, 0, 0.5);
+}
+
+.tab_panel_frame {
+    border: 1px solid var(--color-enchunblue);
+    border-radius: 10px;
+    position: relative;
+    top: -47px;
+    padding: 32px;
+}
+
+.painpoint_icon {
+    height: 110px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon_holder {
+    width: 130px;
+    height: 115px;
+    background-color: var(--color-gray-100);  /* #f2f2f2 */
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+```
+
+#### 響應式調整
+
+| Breakpoint | Grid | 字體調整 |
+|------------|------|----------|
+| Desktop (≥992px) | 2 columns | 100% |
+| Tablet (≤991px) | 1 column | 85% |
+| Mobile (≤767px) | 1 column | 70% |
+
+---
+
+### 3. 數據統計區塊 (Statistics Section)
+
+#### 新組件: `StatisticsSection.astro`
+
+#### 容器規格
+```css
+.section_digi_running {
+    padding: var(--spacing-3xl) 0;  /* 64px vertical */
+}
+
+.digi_holder_grid {
+    display: grid;
+    grid-column-gap: 85px;
+    grid-row-gap: 16px;
+    grid-template-columns: repeat(4, max-content);
+    justify-content: center;
+    max-width: 1150px;
+    margin: 0 auto;
+}
+```
+
+#### 數字顯示
+```css
+.text_no {
+    font-size: 72px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--color-amber);  /* #f6c456 */
+    /* Animation: countup, duration 3s */
+}
+
+.text_percentage {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--color-gray-700);  /* #828282 */
+}
+
+.text_description {
+    font-size: 30px;
+    font-weight: 100;
+    line-height: 1.2;
+    color: var(--color-dark-blue);  /* #062841 */
+}
+```
+
+#### 動畫規格
+- **Countup 動畫**: 持續時間 3 秒
+- **Easing**: `ease-out`
+
+#### 響應式調整
+
+| Breakpoint | Grid Columns | Gap |
+|------------|--------------|-----|
+| Desktop (≥992px) | 4 columns | 85px |
+| Tablet (≤991px) | 2 columns | 40px |
+| Mobile (≤767px) | 1 column | 24px |
+
+---
+
+### 4. 客戶案例區塊 (Client Cases)
+
+#### 新組件: `ClientCasesSection.astro`
+
+#### 容器規格
+```css
+.section_client-case {
+    padding: var(--spacing-3xl) 0;
+}
+
+.client_case_sub {
+    font-size: 24px;
+    font-weight: 300;
+    line-height: 1.1;
+    color: var(--color-enchunblue);  /* #23608c */
+    margin-top: 55px;
+    text-align: center;
+}
+```
+
+#### 輪播設定
+```css
+.case_slider_wrapper {
+    height: 77vh;
+    /* Autoplay: 2500ms */
+    /* Animation: slide */
+    /* Infinite: true */
+}
+
+.case_content_grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 55px;
+    grid-row-gap: 55px;
+}
+```
+
+#### 案例卡片
+```css
+.case_slide_image {
+    object-fit: cover;
+    width: 100%;
+    aspect-ratio: 16/9;
+}
+
+.case_heading {
+    font-size: 1.7em;
+    color: var(--color-dark-blue);
+    font-family: "Noto Sans TC", sans-serif;
+    margin-bottom: 8px;
+}
+
+.case_job_title {
+    font-size: 18px;
+    color: var(--color-enchunblue-dark);  /* #3083bf */
+    font-weight: 100;
+    margin-bottom: 16px;
+}
+
+.case_review {
+    font-size: 18px;
+    color: var(--color-gray-700);
+    font-weight: 100;
+    line-height: 1.6;
+}
+```
+
+#### 響應式調整
+
+| Breakpoint | Grid | Height |
+|------------|------|--------|
+| Desktop (≥992px) | 2 columns | 77vh |
+| Tablet (≤991px) | 1 column | auto |
+| Mobile (≤767px) | 1 column | 59vh |
+
+---
+
+### 5. 行動呼籲區塊 (CTA Section)
+
+#### 新組件: `CTASection.astro`
+
+#### 容器規格
+```css
+.section_call4action {
+    padding: 105px 0 126px 0;
+}
+
+.c4a_grid {
+    display: grid;
+    grid-column-gap: 60px;
+    grid-template-columns: max-content max-content;
+    place-items: center;
+    justify-content: center;
+}
+```
+
+#### 標題
+```css
+.c4a_heading {
+    color: var(--color-dark-blue);
+    font-size: 1.88em;
+    font-weight: 500;
+    line-height: 1.1;
+}
+```
+
+#### 按鈕
+```css
+.c4a_button {
+    background-color: var(--color-notification-red);  /* #d84038 */
+    border-radius: 15px;
+    padding: 18px 24px;
+    text-decoration: none;
+    display: inline-block;
+    transition: all var(--transition-base);
+}
+
+.c4a_button:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.c4a_button-text {
+    color: #f2f2f2;
+    font-size: 1.56em;
+    line-height: 1.1;
+    text-align: center;
+    font-weight: 500;
+}
+```
+
+#### 響應式調整
+
+| Breakpoint | Grid | Button Width |
+|------------|------|--------------|
+| Desktop (≥992px) | 2 columns | auto |
+| Tablet (≤991px) | 1 column | auto |
+| Mobile (≤767px) | 1 column | 160px (min-width) |
+
+---
+
+## 📱 響應式斷點總結
+
+### 主要斷點
+```css
+/* Webflow 原始斷點 */
+@media (min-width: 1440px) { /* Desktop Large */ }
+@media (max-width: 991px)  { /* Tablet */ }
+@media (max-width: 767px)  { /* Mobile Landscape */ }
+@media (max-width: 479px)  { /* Mobile Portrait */ }
+```
+
+### HTML 字體大小調整
+```css
+/* Desktop default */
+html { font-size: 19px; }
+
+/* Tablet */
+@media (max-width: 991px) {
+    html { font-size: 19px; }
+}
+
+/* Mobile Landscape */
+@media (max-width: 767px) {
+    html { font-size: 16px; }
+}
+
+/* Mobile Portrait */
+@media (max-width: 479px) {
+    html { font-size: 13px; }
+}
+```
+
+---
+
+## 🎯 互動效果規格
+
+### Hover 效果
+```css
+/* Tab 文字 Hover */
+.painpoint_text:hover {
+    text-shadow: 7px 4px 13px rgba(0, 0, 0, 0.5);
+}
+
+/* 導航連結 Hover */
+.nav-link:hover {
+    background-color: var(--color-dark-blue);
+}
+
+/* 連結 Hover */
+a:hover {
+    opacity: 0.6;
+}
+a:active {
+    opacity: 1;
+}
+
+/* 按鈕 Hover */
+.c4a_button:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+```
+
+### 過渡動畫
+```css
+/* Tabs */
+--transition-tabs: ease-in-out-cubic;
+
+/* 輪播 */
+--transition-slider: ease-in-out-quint;
+
+/* 數字 Countup */
+--animation-countup: 3s ease-out;
+```
+
+---
+
+## 🏗️ 組件實現清單
+
+### ✅ 已實現
+- [x] `VideoHero.astro` - 需調整字體大小和間距
+- [x] `Header.astro` - 已完成
+- [x] `Footer.astro` - 已完成
+
+### ⏳ 需新增/修改
+- [ ] `VideoHero.astro` - 調整字體大小、漸層遮罩
+- [ ] `PainpointSection.astro` - 新增組件
+- [ ] `StatisticsSection.astro` - 新增組件，含 countup 動畫
+- [ ] `ClientCasesSection.astro` - 新增組件，含輪播功能
+- [ ] `CTASection.astro` - 新增組件
+
+---
+
+## 📋 驗收標準 (Acceptance Criteria)
+
+### 視覺保真度檢查
+- [ ] 所有顏色與 Webflow 原始設計 100% 一致
+- [ ] 所有字體大小（含響應式）與規格一致
+- [ ] 所有間距（padding, margin, gap）與規格一致
+- [ ] 所有圓角（border-radius）與規格一致
+- [ ] 所有陰影（box-shadow）與規格一致
+
+### 響應式檢查
+- [ ] Desktop (≥1440px) 佈局正確
+- [ ] Tablet (≤991px) 佈局正確
+- [ ] Mobile (≤767px) 佈局正確
+- [ ] Mobile Portrait (≤479px) 佈局正確
+
+### 互動效果檢查
+- [ ] Hover 效果流暢
+- [ ] 動畫過渡自然
+- [ ] 輪播功能正常
+- [ ] Countup 動畫正常
+
+### 效能檢查
+- [ ] Lighthouse Performance ≥ 90
+- [ ] 影片載入優化（WebM + MP4 fallback）
+- [ ] 圖片 lazy loading
+- [ ] CSS/JS minification
+
+---
+
+## 🔄 實現順序建議
+
+1. **階段 1: 設計系統更新**
+   - 新增缺失的 CSS 變數到 `theme.css`
+   - 更新響應式字體大小斷點
+
+2. **階段 2: Hero Section 調整**
+   - 修改 `VideoHero.astro` 字體大小
+   - 調整漸層遮罩方向
+   - 調整 Logo 尺寸
+
+3. **階段 3: 新增 Sections**
+   - `PainpointSection.astro`
+   - `StatisticsSection.astro`
+   - `ClientCasesSection.astro`
+   - `CTASection.astro`
+
+4. **階段 4: 響應式測試**
+   - 測試所有斷點
+   - 調整移動端佈局
+
+5. **階段 5: 動畫與互動**
+   - Countup 動畫
+   - 輪播功能
+   - Hover 效果
+
+6. **階段 6: 效能優化**
+   - 影片壓縮
+   - 圖片優化
+   - Code splitting
+
+---
+
+*此文件由 UX Expert 創建，最後更新：2026-02-10*
+*參考來源：Webflow Export HTML (7.4MB)*