feat: 新增 i18n 多語系、淺色深色主題設計、常見 QA 問答區、月付/年付切換、載入時的 loading 頁面、Cookie 同意彈窗

[dean9703111]

🎯 為什麼要這樣做

為 SalesPilot CRM Landing Page 增加六大功能，提升使用者體驗與國際化能力。所有功能均使用 React Context + CSS Custom Properties 實作，未引入任何新 npm 依賴。

⚠️ 修改的內容

I18n 多語系系統（I18nContext.jsx、locales.js）

• 新增 I18nContext，透過 localStorage 持久化語系偏好（預設 zh，可切換 en）
• 建立 locales.js 完整翻譯檔（326 行），涵蓋 Nav、Hero、Features、SocialProof、UseCases、Pricing、CTA、FAQ、Footer、Cookie、Loading 所有文案
• 提供 t(key) 函式支援 dot-notation 取值，並支援巢狀物件與陣列

淺色 / 深色主題切換（ThemeContext.jsx、index.css）

• 新增 ThemeContext，透過 localStorage 持久化主題偏好，同步更新 document.documentElement 的 data-theme 屬性
• 在 CSS 新增 [data-theme='light'] 選擇器，覆寫背景、文字、卡片、邊框、陰影等所有色彩變數
• 針對 Navbar 的 glassmorphism 效果在 light mode 下做適配

Navbar（Navbar.jsx）

• 整合 useTheme 與 useI18n，新增主題切換按鈕（🌙/☀️）與語系切換按鈕（EN/中）
• 導航連結文字改由 i18n 驅動，透過 getLabel(href) 映射翻譯鍵值

FAQ 問答區（FAQ.jsx、index.css）

• 全新 accordion 元件，支援展開/收合動畫
• 問答內容由 i18n faq 鍵值驅動，開合狀態以 useState 管理

月付 / 年付切換（Pricing.jsx、pricing.js）

• 新增 billingCycle state 與 toggle UI pricing__toggle-*
• 年付自動計算 8 折價格（priceValue * 10 * 0.8）
• 各方案資料新增 priceValue 欄位，Enterprise 方案（priceValue: null）維持「聯繫我們」

Loading 頁面（Loading.jsx、index.css）

• 全新 Loading 元件，含 CSS spinner 動畫
• App.jsx 以 useEffect + setTimeout 模擬 1.5 秒載入延遲

Cookie 同意彈窗（CookieConsent.jsx、index.css）

• 全新 Cookie Consent 元件，含 slideUp 入場動畫
• 以 localStorage 記錄使用者同意狀態，同意後不再顯示

其他元件 i18n 改造

• Hero.jsx：標題、副標題、CTA、統計數據、mockup 欄位標題改由 t() 驅動
• Features.jsx：區塊標題、描述、功能列表改由 t() 驅動
• SocialProof.jsx：標題與 testimonial 改由 t() 驅動
• UseCases.jsx：區塊標題、角色描述、highlights 改由 t() 驅動，靜態 icon/id 透過 index 合併
• CallToAction.jsx：標題、描述、按鈕文字改由 t() 驅動
• Footer.jsx：品牌描述、版權、欄位標題與連結改由 t() 驅動

App 入口（App.jsx、main.jsx）

• main.jsx 包裹 ThemeProvider → I18nProvider → App
• App.jsx 新增 Loading 狀態判斷、引入 FAQ 與 CookieConsent 元件

🧪 測試步驟

測試案例 1：i18n 語系切換

1. 開啟首頁，預設應顯示繁體中文
2. 點擊 Navbar 右上角的語系切換按鈕（EN / 中）
3. 預期結果：所有區塊文字即時切換為英文 / 中文，重新整理頁面後語系設定維持不變

測試案例 2：淺色 / 深色主題切換

1. 開啟首頁，預設應為深色主題
2. 點擊 Navbar 右上角的主題切換按鈕（🌙 / ☀️）
3. 預期結果：背景、文字、卡片、Navbar 即時切換配色，Navbar glassmorphism 在 light mode 下為白色半透明。重新整理頁面後主題設定維持不變

測試案例 3：FAQ 問答區展開 / 收合

1. 捲動至 FAQ 區塊
2. 點擊任一問題
3. 預期結果：該問題展開顯示答案，再次點擊收合。同時只能有一則展開（或可多則展開，視實作邏輯）

測試案例 4：月付 / 年付切換

1. 捲動至 Pricing 區塊
2. 點擊月付 / 年付的 toggle 開關
3. 預期結果：
   • 月付模式下顯示原價（NT$ 490 / NT$ 990）與「/ 人 / 月」
   • 年付模式下顯示 8 折年繳價格（NT$ 3,920 / NT$ 7,920）與「/ 人 / 年」
   • Enterprise 方案始終顯示「聯繫我們」

測試案例 5：Loading 頁面

1. 重新整理頁面
2. 預期結果：出現全屏 loading spinner 動畫，約 1.5 秒後自動消失，顯示完整頁面內容

測試案例 6：Cookie 同意彈窗

1. 清除 localStorage 後重新整理頁面
2. 預期結果：頁面左下角出現 Cookie 同意彈窗，帶有 slideUp 入場動畫
3. 點擊「接受」按鈕
4. 預期結果：彈窗消失，重新整理後不再出現