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 - UX Pixel-Perfect Specifications

UX Expert Review Document 參考來源: Webflow 原始設計設計系統: apps/frontend/src/styles/theme.css 目標視覺保真度: 100%

🎨 Design Token 驗證

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

用途	變數名稱	Hex Color	CSS Variable	驗證狀態
主品牌色	Enchun Blue	`#3898ec`	`--color-primary`	✅ 已定義
深品牌色	Deep Blue	`#23608c`	`--color-enchunblue`	✅ 已定義
Hover Blue	Hover Blue	`#2895f7`	`--color-primary-hover`	✅ 已定義
主文字	Text Primary	`#333333`	`--color-text-primary`	✅ 已定義
次要文字	Text Secondary	`#666666`	`--color-gray-600`	⚠️ 需確認
白色背景	White	`#ffffff`	`--color-white`	✅ 已定義
卡片背景	Surface	`#f3f3f3`	`--color-surface2`	✅ 已定義
邊框色	Border	`#e2e8f0`	`--color-border`	✅ 已定義
正確圖標	Success	`#3898ec`	`--color-primary`	✅ 已定義
錯誤圖標	Error	`#ea384c`	`--color-badge-hot`	✅ 已定義

📐 Section 詳細規格

1. Hero Section

新組件: `AboutHero.astro`

佈局結構

<header class="hero-overlay-about">
    <div class="hero_bg-about"></div>
    <div class="centered-container w-container">
        <div class="div-block">
            <h1 class="hero_title_head-about">關於恩群數位</h1>
            <p class="hero_sub_paragraph-about">About Enchun digital</p>
        </div>
    </div>
</header>

CSS 規格

.hero-overlay-about {
    background-color: #ffffff;
    padding: 120px 20px;
    text-align: center;
}

.hero_title_head-about {
    color: var(--color-enchunblue);  /* #23608c */
    font-family: "Noto Sans TC", "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 16px;
}

.hero_sub_paragraph-about {
    color: var(--color-enchunblue-dark);  /* #3083bf */
    font-family: "Quicksand", sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.4;
}

響應式調整

Breakpoint	標題字體大小	副標題字體大小	Padding
Desktop (≥992px)	3rem (48px)	1.25rem (20px)	120px/120px
Tablet (≤991px)	2.5rem (40px)	1.125rem (18px)	80px/80px
Mobile (≤767px)	2rem (32px)	1rem (16px)	60px/60px

2. 服務特色區 (Section Feature)

新組件: `FeatureSection.astro`

標題區塊

.section_feature {
    background-color: #ffffff;
    padding: 80px 20px;
}

.section_header_w_line {
    text-align: center;
    margin-bottom: 60px;
}

.header_subtitle_head {
    color: var(--color-enchunblue);  /* #23608c */
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 16px 0;
}

.header_subtitle_paragraph {
    color: #666666;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 8px;
}

.divider_line {
    background-color: var(--color-enchunblue);
    height: 2px;
    width: 100px;
    margin: 0 auto;
}

特色卡片網格

.feature_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature_card {
    background: #ffffff;
    border-radius: var(--radius-lg);  /* 12px */
    padding: 32px;
    transition: all var(--transition-base);
}

.feature_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

特色卡片內容

.feature_image {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.feature_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature_head {
    color: #333333;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.feature_description {
    color: #666666;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
}

四個特色內容

圖標文件	標題	描述
`address-bro-在地化優先.svg`	在地化優先	線上線下結合曝光渠道，整合多方資訊，帶給消費者最佳的使用體驗，展現商家的獨特之處，順利的將潛在使用者帶到你的實際門市
`Banknote-bro-高投資報公率.svg`	高投資轉換率	你覺得網路行銷很貴嗎？恩群數位善用每一分廣告預算，讓你在網路上發揮最大效益，幫助店家鎖定精準客群，達成目標
`Social Dashboard-bro-數據優先.svg`	數據優先	想要精準行銷? 恩群數位從數據中萃取洞察，根據數據分析廣告成效，更聰明、有策略的幫您省下行銷預算
`Partnership-bro-關係優先.svg`	關係優於銷售	除了幫您拓展網路上的知名度，我們更是每家公司最專業的數位夥伴，你會知道有恩群的存在，事業路上你並不孤單

響應式調整

Breakpoint	Grid Columns	Gap
Desktop (≥992px)	4 columns	30px
Tablet (768-991px)	2 columns	24px
Mobile (≤767px)	1 column	16px

3. 差異化比較區 (Section Comparison)

新組件: `ComparisonSection.astro`

容器規格

.section_comparison {
    background-color: #ffffff;
    padding: 60px 20px;
}

.comparison_holder {
    max-width: 1200px;
    margin: 0 auto;
}

.comparison_gold_madel {
    text-align: center;
    margin-bottom: 40px;
}

.comparison_gold_madel img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

比較表格

.comparison_table_holder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.comparison_left_holder,
.comparison_right_holder {
    padding: 32px;
    border-radius: var(--radius-lg);
}

.comparison_left_holder {
    background-color: #f8f8f8;
}

.comparison_right_holder {
    background-color: #f0f7ff;
    border: 2px solid var(--color-primary);
}

.comparison_header {
    color: #333333;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.comparison_description {
    color: #666666;
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 24px;
}

.comparison_hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

比較列表項目

.comparison_list_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
}

.comparison_item_title {
    color: #333333;
    font-weight: 500;
    font-size: 1rem;
}

.comparison_icon {
    width: 24px;
    height: 24px;
}

.comparison_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

比較項目內容

其他行銷公司 ❌：

缺乏經驗
沒有成效保證
售後無服務
沒有策略
不了解客戶需求
沒有接受客戶反饋

恩群數位 ✅：

實際執行經驗豐富
實際成效
售後服務架構完善
行銷策略有方
熟悉客戶需求
最多客戶回饋

響應式調整

Breakpoint	Grid
Desktop (≥992px)	2 columns (左右並排)
Mobile (≤767px)	1 column (上下堆疊)

4. CTA 區塊 (Call to Action)

新組件: `CTASection.astro`

CSS 規格

.section_call4action {
    background-color: #ffffff;
    padding: 80px 20px;
}

.c4a_grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.c4a_heading {
    color: #333333;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.4;
}

.c4a_button {
    background-color: var(--color-primary);  /* #3898ec */
    color: #ffffff;
    padding: 16px 32px;
    border-radius: var(--radius);  /* 6px */
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-base);
}

.c4a_button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.c4a_button-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

按鈕圖標

Material Icon: phone_callback
尺寸: 24px

響應式調整

Breakpoint	按鈕寬度
Desktop (≥992px)	auto
Mobile (≤767px)	100% (max-width: 300px)

5. 頁尾資訊

已有組件: `Footer.astro` (需驗證一致性)

CSS 規格

.section_footer {
    background-color: #f3f3f3;
    padding: 60px 20px 32px;
}

.footer_horizontal_line {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin-bottom: 40px;
}

.footer_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

響應式調整

Breakpoint	Grid Columns
Desktop (≥992px)	4 columns
Tablet (768-991px)	2 columns
Mobile (≤767px)	1 column

📱 響應式斷點總結

主要斷點

/* Webflow 原始斷點 */
@media (min-width: 992px) { /* Desktop */ }
@media (max-width: 991px)  { /* Tablet */ }
@media (max-width: 767px)  { /* Mobile */ }
@media (max-width: 479px)  { /* Small Mobile */ }

HTML 字體大小調整

/* Desktop default */
html { font-size: 19px; }

/* Tablet */
@media (max-width: 991px) {
    html { font-size: 19px; }
}

/* Mobile */
@media (max-width: 767px) {
    html { font-size: 16px; }
}

/* Small Mobile */
@media (max-width: 479px) {
    html { font-size: 13px; }
}

🎯 互動效果規格

Hover 效果

/* 特色卡片 Hover */
.feature_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* 按鈕 Hover */
.c4a_button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 連結 Hover */
a:hover {
    opacity: 0.8;
}

頁面載入動畫

.fade-in {
    animation: fadeIn 0.25s ease-in-out;
}

.slide-up {
    animation: slideUp 0.25s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

🏗️ 組件實現清單

✅ 已實現

Header.astro - 已完成
Footer.astro - 已完成

⏳ 需新增

AboutHero.astro - 關於頁面 Hero 區塊
FeatureSection.astro - 服務特色區（4個特色卡片）
ComparisonSection.astro - 差異化比較區
CTASection.astro - 行動呼籲區塊

🖼️ 需要的圖標資源

圖標名稱	文件名稱	尺寸
在地化優先	`address-bro-在地化優先.svg`	80x80px
高投資報酬率	`Banknote-bro-高投資報公率.svg`	80x80px
數據優先	`Social Dashboard-bro-數據優先.svg`	80x80px
關係優先	`Partnership-bro-關係優先.svg`	80x80px
金牌獎章	`winning medal.svg`	60x60px
錯誤圖標	`wrong.svg`	24x24px
正確圖標	`correct.svg`	24x24px

📋 驗收標準 (Acceptance Criteria)

視覺保真度檢查

所有顏色與 Webflow 原始設計 100% 一致
所有字體大小（含響應式）與規格一致
所有間距（padding, margin, gap）與規格一致
所有圓角（border-radius）與規格一致
所有陰影（box-shadow）與規格一致

響應式檢查

Desktop (≥992px) 佈局正確
Tablet (≤991px) 佈局正確
Mobile (≤767px) 佈局正確
Small Mobile (≤479px) 佈局正確

互動效果檢查

Hover 效果流暢
動畫過渡自然
比較區卡片正確顯示
CTA 按鈕可點擊

內容檢查

4個特色卡片內容正確
比較列表內容正確
CTA 按鈕連結正確
圖標正確顯示

效能檢查

Lighthouse Performance ≥ 90
圖片優化（SVG）
CSS minification
Lazy loading（如需要）

🔄 實現順序建議

階段 1: 組件結構
- 創建 AboutHero.astro
- 創建 FeatureSection.astro
- 創建 ComparisonSection.astro
- 創建 CTASection.astro
階段 2: 圖標資源
- 準備所有需要的 SVG 圖標
- 放置於 public/icons/ 目錄
階段 3: 響應式實現
- 實現所有斷點佈局
- 測試移動端顯示
階段 4: 互動效果
- Hover 效果
- 載入動畫
階段 5: 整合測試
- 整合到 about-enchun.astro 頁面
- 視覺保真度驗證

此文件由 UX Expert 創建，最後更新：2026-02-10 參考來源：Webflow 原始設計

13 KiB Raw Blame History Unescape Escape

Story 1-6 About Page - UX Pixel-Perfect Specifications

🎨 Design Token 驗證

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

📐 Section 詳細規格

1. Hero Section

新組件: AboutHero.astro

佈局結構

CSS 規格

響應式調整

2. 服務特色區 (Section Feature)

新組件: FeatureSection.astro

標題區塊

特色卡片網格

特色卡片內容

四個特色內容

響應式調整

3. 差異化比較區 (Section Comparison)

新組件: ComparisonSection.astro

容器規格

比較表格

比較列表項目

比較項目內容

響應式調整

4. CTA 區塊 (Call to Action)

新組件: CTASection.astro

CSS 規格

按鈕圖標

響應式調整

5. 頁尾資訊

已有組件: Footer.astro (需驗證一致性)

CSS 規格

響應式調整

📱 響應式斷點總結

主要斷點

HTML 字體大小調整

🎯 互動效果規格

Hover 效果

頁面載入動畫

🏗️ 組件實現清單

✅ 已實現

⏳ 需新增

🖼️ 需要的圖標資源

📋 驗收標準 (Acceptance Criteria)

視覺保真度檢查

響應式檢查

互動效果檢查

內容檢查

效能檢查

🔄 實現順序建議

13 KiB

Raw Blame History

新組件: `AboutHero.astro`

新組件: `FeatureSection.astro`

新組件: `ComparisonSection.astro`

新組件: `CTASection.astro`

已有組件: `Footer.astro` (需驗證一致性)