Feature/faq

src/App.jsx

@@ -4,6 +4,7 @@ import SocialProof from './components/SocialProof';
 import Features from './components/Features';
 import UseCases from './components/UseCases';
 import Pricing from './components/Pricing';
+import FAQ from './components/FAQ';
 import CallToAction from './components/CallToAction';
 import Footer from './components/Footer';
 
@@ -17,6 +18,7 @@ function App() {
                 <Features />
                 <UseCases />
                 <Pricing />
+                <FAQ />
                 <CallToAction />
             </main>
             <Footer />

src/components/FAQ.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { FAQ_ITEMS } from '../data/faq';
+
+function FAQ() {
+    const [openId, setOpenId] = useState(null);
+
+    const toggle = (id) => setOpenId((prev) => (prev === id ? null : id));
+
+    return (
+        <section className="faq" id="faq" aria-labelledby="faq-title">
+            <div className="container">
+                <div className="section-header">
+                    <span className="section-header__badge">常見問題</span>
+                    <h2 id="faq-title" className="section-header__title">
+                        您可能想知道的問題
+                    </h2>
+                    <p className="section-header__desc">
+                        以下是關於 SalesPilot 方案、試用與整合的常見問答，若還有其他疑問歡迎聯繫我們。
+                    </p>
+                </div>
+
+                <div className="faq__list" role="list">
+                    {FAQ_ITEMS.map((item) => {
+                        const isOpen = openId === item.id;
+                        return (
+                            <div
+                                key={item.id}
+                                className={`faq__item ${isOpen ? 'faq__item--open' : ''}`}
+                                role="listitem"
+                            >
+                                <button
+                                    type="button"
+                                    className="faq__question"
+                                    onClick={() => toggle(item.id)}
+                                    aria-expanded={isOpen}
+                                    aria-controls={`faq-answer-${item.id}`}
+                                    id={`faq-question-${item.id}`}
+                                >
+                                    <span>{item.question}</span>
+                                    <span className="faq__icon" aria-hidden="true">
+                                        {isOpen ? '−' : '+'}
+                                    </span>
+                                </button>
+                                <div
+                                    id={`faq-answer-${item.id}`}
+                                    className="faq__answer"
+                                    role="region"
+                                    aria-labelledby={`faq-question-${item.id}`}
+                                    hidden={!isOpen}
+                                >
+                                    <p>{item.answer}</p>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default FAQ;

src/data/faq.js

@@ -0,0 +1,32 @@
+export const FAQ_ITEMS = [
+    {
+        id: 'q1',
+        question: 'SalesPilot 適合什麼規模的團隊使用？',
+        answer: 'SalesPilot 從 5 人小團隊到 200+ 人的業務組織都適用。我們提供入門、專業與企業方案，可依人數與功能需求選擇，並支援後續擴充。',
+    },
+    {
+        id: 'q2',
+        question: '可以免費試用嗎？試用期多久？',
+        answer: '可以。我們提供 14 天完整功能免費試用，不需綁定信用卡。試用期間可邀請團隊成員、串接 CRM 與信箱，試用結束後可選擇訂閱或暫停，我們不會自動扣款。',
+    },
+    {
+        id: 'q3',
+        question: '資料會存在哪裡？是否支援匯出？',
+        answer: '所有資料皆存放於通過 ISO 27001 認證的雲端環境，並提供每日備份。您可隨時從後台匯出聯絡人、商機與報表為 CSV／Excel，不會被鎖在平台內。',
+    },
+    {
+        id: 'q4',
+        question: '能否與現有的 CRM 或信箱整合？',
+        answer: '可以。SalesPilot 支援與 Google Workspace、Outlook、HubSpot、Salesforce 等常見工具串接，也提供 API 供自建系統整合。設定步驟在後台有圖文指引。',
+    },
+    {
+        id: 'q5',
+        question: '方案價格是否含稅？如何付款？',
+        answer: '顯示價格皆為未稅價，開立發票時會加上適用稅率。支援信用卡、轉帳與年繳優惠；企業方案可另談合約與請款週期。',
+    },
+    {
+        id: 'q6',
+        question: '若中途想升級或降級方案，該如何處理？',
+        answer: '可隨時在帳戶設定中變更方案。升級立即生效，差額按日比例計費；降級則於下一計費週期生效，不會重複扣款。若有特殊需求也可聯繫客服處理。',
+    },
+];

src/data/navigation.js

@@ -2,6 +2,7 @@ export const NAV_LINKS = [
     { label: '功能特色', href: '#features' },
     { label: '應用場景', href: '#use-cases' },
     { label: '方案價格', href: '#pricing' },
+    { label: '常見問題', href: '#faq' },
     { label: '客戶見證', href: '#social-proof' },
 ];
 

src/index.css

@@ -1069,6 +1069,86 @@ button {
   }
 }
 
+/* ========================================
+   FAQ
+   ======================================== */
+.faq {
+  padding: var(--space-24) 0;
+}
+
+.faq__list {
+  max-width: 720px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.faq__item {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.faq__item:hover,
+.faq__item--open {
+  border-color: var(--color-border-hover);
+  box-shadow: var(--shadow-sm);
+}
+
+.faq__question {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  text-align: left;
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--color-text);
+  background: none;
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.faq__question:hover {
+  color: var(--color-primary-light);
+}
+
+.faq__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: var(--color-primary-light);
+  transition: transform var(--transition-base);
+}
+
+.faq__item--open .faq__icon {
+  transform: rotate(45deg);
+}
+
+.faq__answer {
+  overflow: hidden;
+  transition: height var(--transition-base);
+}
+
+.faq__answer p {
+  padding: var(--space-4) var(--space-6) var(--space-5);
+  margin: 0;
+  font-size: var(--text-sm);
+  line-height: 1.7;
+  color: var(--color-text-secondary);
+  border-top: 1px solid var(--color-border);
+}
+
 /* ========================================
    CTA BANNER
    ======================================== */