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

12 KiB

Raw Blame History

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 中新增以下變數：

/* Webflow 額外色彩 */
--color-notification-red: #d84038;
--color-dark-blue: #062841;
--color-medium-blue: #67aee1;
--color-grey5: #e0e0e0;

📐 Section 詳細規格

1. Hero Section

組件檔案: `VideoHero.astro` (已存在，需調整)

容器規格

.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;
}

背景影片

.background-video {
    position: absolute;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Autoplay: true
Loop: true
Muted: true
Playsinline: true

漸層遮罩

.hero-overlay-home {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

Logo

.hero_logo {
    width: 135px;       /* Desktop */
    padding-top: 33px;
}

標題文字

.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

❌ 當前實現問題

當前字體大小使用 text-6xl，與 Webflow 的 3.39em 不符
漸層遮罩方向需要確認
Logo 尺寸需要調整為 135px

2. 煩惱點區塊 (Painpoint Section)

新組件: `PainpointSection.astro`

容器規格

.section_painpoint {
    height: 80vh;
    max-height: 80vh;
}

標題區塊

.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 系統

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

容器規格

.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;
}

數字顯示

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

容器規格

.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;
}

輪播設定

.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;
}

案例卡片

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

容器規格

.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;
}

標題

.c4a_heading {
    color: var(--color-dark-blue);
    font-size: 1.88em;
    font-weight: 500;
    line-height: 1.1;
}

按鈕

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

📱 響應式斷點總結

主要斷點

/* 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 字體大小調整

/* 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 效果

/* 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);
}

過渡動畫

/* Tabs */
--transition-tabs: ease-in-out-cubic;

/* 輪播 */
--transition-slider: ease-in-out-quint;

/* 數字 Countup */
--animation-countup: 3s ease-out;

🏗️ 組件實現清單

✅ 已實現

VideoHero.astro - 需調整字體大小和間距
Header.astro - 已完成
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: 設計系統更新
- 新增缺失的 CSS 變數到 theme.css
- 更新響應式字體大小斷點
階段 2: Hero Section 調整
- 修改 VideoHero.astro 字體大小
- 調整漸層遮罩方向
- 調整 Logo 尺寸
階段 3: 新增 Sections
- PainpointSection.astro
- StatisticsSection.astro
- ClientCasesSection.astro
- CTASection.astro
階段 4: 響應式測試
- 測試所有斷點
- 調整移動端佈局
階段 5: 動畫與互動
- Countup 動畫
- 輪播功能
- Hover 效果
階段 6: 效能優化
- 影片壓縮
- 圖片優化
- Code splitting

此文件由 UX Expert 創建，最後更新：2026-02-10 參考來源：Webflow Export HTML (7.4MB)

12 KiB Raw Blame History Unescape Escape

Story 1-5 Homepage - UX Pixel-Perfect Specifications

🎨 Design Token 驗證

色彩系統 (與 Webflow 原始設計一致)

新增設計 Token 需求

📐 Section 詳細規格

1. Hero Section

組件檔案: VideoHero.astro (已存在，需調整)

容器規格

背景影片

漸層遮罩

Logo

標題文字

響應式調整

❌ 當前實現問題

2. 煩惱點區塊 (Painpoint Section)

新組件: PainpointSection.astro

容器規格

標題區塊

Tabs 系統

響應式調整

3. 數據統計區塊 (Statistics Section)

新組件: StatisticsSection.astro

容器規格

數字顯示

動畫規格

響應式調整

4. 客戶案例區塊 (Client Cases)

新組件: ClientCasesSection.astro

容器規格

輪播設定

案例卡片

響應式調整

5. 行動呼籲區塊 (CTA Section)

新組件: CTASection.astro

容器規格

標題

按鈕

響應式調整

📱 響應式斷點總結

主要斷點

HTML 字體大小調整

🎯 互動效果規格

Hover 效果

過渡動畫

🏗️ 組件實現清單

✅ 已實現

⏳ 需新增/修改

📋 驗收標準 (Acceptance Criteria)

視覺保真度檢查

響應式檢查

互動效果檢查

效能檢查

🔄 實現順序建議

12 KiB

Raw Blame History

組件檔案: `VideoHero.astro` (已存在，需調整)

新組件: `PainpointSection.astro`

新組件: `StatisticsSection.astro`

新組件: `ClientCasesSection.astro`

新組件: `CTASection.astro`