diff --git a/src/App.jsx b/src/App.jsx index 3a7c65b..768fdb4 100644 --- a/src/App.jsx +++ b/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() { + diff --git a/src/components/FAQ.jsx b/src/components/FAQ.jsx new file mode 100644 index 0000000..574476f --- /dev/null +++ b/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 ( + + + + 常見問題 + + 您可能想知道的問題 + + + 以下是關於 SalesPilot 方案、試用與整合的常見問答,若還有其他疑問歡迎聯繫我們。 + + + + + {FAQ_ITEMS.map((item) => { + const isOpen = openId === item.id; + return ( + + toggle(item.id)} + aria-expanded={isOpen} + aria-controls={`faq-answer-${item.id}`} + id={`faq-question-${item.id}`} + > + {item.question} + + {isOpen ? '−' : '+'} + + + + {item.answer} + + + ); + })} + + + + ); +} + +export default FAQ; diff --git a/src/data/faq.js b/src/data/faq.js new file mode 100644 index 0000000..09bae44 --- /dev/null +++ b/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: '可隨時在帳戶設定中變更方案。升級立即生效,差額按日比例計費;降級則於下一計費週期生效,不會重複扣款。若有特殊需求也可聯繫客服處理。', + }, +]; diff --git a/src/data/navigation.js b/src/data/navigation.js index c257c0e..fe07010 100644 --- a/src/data/navigation.js +++ b/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' }, ]; diff --git a/src/index.css b/src/index.css index 507bc0c..4cf3298 100644 --- a/src/index.css +++ b/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 ======================================== */
+ 以下是關於 SalesPilot 方案、試用與整合的常見問答,若還有其他疑問歡迎聯繫我們。 +
{item.answer}