匹克球網站

一個使用 Next.js 和 Tailwind CSS 構建的匹克球介紹網站。

已完成功能

🏠 主頁面

• 路由: /
• 功能:
  • 響應式設計的首頁
  • 英雄區塊介紹匹克球
  • 運動特色展示
  • 全球統計數據
  • 快速入門連結

📖 認識匹克球 (完整功能)

• 路由: /about
• 功能:
  • 運動介紹總覽頁面
  • 四個子頁面導航

子頁面：

1. 歷史起源 (/about/history)

   • 匹克球發展時間軸
   • 三位創始人介紹
   • 名稱由來解釋
   • 全球發展現況

2. 健康益處 (/about/benefits)

   • 身體健康益處詳解
   • 心理健康益處
   • 各年齡層專屬益處
   • 科學研究證據

3. 常見問題 (/about/faq)

   • 交互式FAQ系統
   • 6大分類問題
   • 熱門問題展示
   • 快速行動連結

🎯 佔位頁面 (待開發)

• 學習指南 (/guide) - 佔位頁面
• 開始參與 (/get-started) - 佔位頁面

設計特色

🎨 視覺設計

• 色彩方案: 活力綠 (#2ECC71)、天空藍 (#3498DB)、陽光橙 (#F39C12)
• 字體: Noto Sans TC (中文) + Montserrat (英文)
• 響應式設計: 支援桌面、平板、手機
• 圖片來源: Unsplash 免費圖庫

🚀 技術實現

• 框架: Next.js 15 + TypeScript
• 樣式: Tailwind CSS
• 圖標: Heroicons
• 字體: Google Fonts
• 響應式: Mobile-first 設計

📱 用戶體驗

• 導航: 黏性導航欄，手機版漢堡選單
• 互動: 懸停效果、平滑滾動、動畫過渡
• 無障礙: 符合基本無障礙標準
• SEO: 優化的元標籤和結構化內容

開發環境

# 安裝依賴
npm install

# 啟動開發服務器
npm run dev

# 建構生產版本
npm run build

訪問網站

開發服務器: http://localhost:3000

專案結構

src/
├── app/
│   ├── about/
│   │   ├── benefits/
│   │   ├── faq/
│   │   ├── history/
│   │   └── page.tsx
│   ├── guide/
│   ├── get-started/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── Navigation.tsx
│   └── Footer.tsx

下一步計劃

1. 學習指南模組

   • 基本規則詳解
   • 場地設備介紹
   • 基礎技巧教學
   • 2025年新規則

2. 開始參與模組

   • 球場搜尋功能
   • 設備購買指南
   • 新手課程資訊
   • 社群連結

3. 進階功能

   • 新聞動態系統
   • 資源中心
   • 聯絡表單
   • 多語言支援

內容亮點

• 全面的匹克球介紹: 從歷史到現代的完整覆蓋
• 基於2025年最新數據: 包含最新的參與統計和規則更新
• 多元化健康益處: 身體、心理、社交各方面的科學分析
• 實用的FAQ系統: 按類別組織的常見問題解答
• 視覺吸引力: 現代化設計和高品質圖片

專案特色

✅ 完整的「認識匹克球」模組
✅ 響應式設計
✅ 現代化UI/UX
✅ SEO優化
✅ 快速載入
✅ 無障礙支援

---

注意: 此專案目前專注於「認識匹克球」部分的開發，其他模組將在後續迭代中完成。