From 524d6bd187dc97d08737b6fcd58759de70a6755a Mon Sep 17 00:00:00 2001 From: M Date: Mon, 2 Mar 2026 10:35:10 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(data):=20=3F=E5=95=A3=3F=20FAQ=20?= =?UTF-8?q?=E9=9E=88=EF=8B=AA=3F=3F=EF=8B=A9=3F=E9=96=AC=E8=B3=A1=C2=80=3F?= =?UTF-8?q?=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Made-with: Cursor --- src/data/faq.js | 32 ++++++++++++++++++++++++++++++++ src/data/navigation.js | 1 + 2 files changed, 33 insertions(+) create mode 100644 src/data/faq.js 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' }, ]; From 6913cb7190dcfcfff745215d379c99c848595d59 Mon Sep 17 00:00:00 2001 From: M Date: Mon, 2 Mar 2026 10:36:08 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(faq):=20=E6=96=B0=E5=A2=9E=E5=B8=B8?= =?UTF-8?q?=E8=A6=8B=E5=95=8F=E9=A1=8C=E5=85=83=E4=BB=B6=E8=88=87=E5=8D=80?= =?UTF-8?q?=E5=A1=8A=E6=A8=A3=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Made-with: Cursor --- src/components/FAQ.jsx | 62 ++++++++++++++++++++++++++++++++ src/index.css | 80 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 142 insertions(+) create mode 100644 src/components/FAQ.jsx 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 ( +
+ + +
+ ); + })} +
+
+
+ ); +} + +export default FAQ; 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 ======================================== */ From 2acd06ba53dfcdba8a72cb07a9be50441fcc3214 Mon Sep 17 00:00:00 2001 From: M Date: Mon, 2 Mar 2026 10:36:31 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(app):=20=E6=96=BC=E9=A6=96=E9=A0=81?= =?UTF-8?q?=E5=8A=A0=E5=85=A5=20FAQ=20=E5=8D=80=E5=A1=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Made-with: Cursor --- src/App.jsx | 2 ++ 1 file changed, 2 insertions(+) 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() { +