// PainPoint, Features, WhyQlivo, FinalCTA, Footer // ===== 02 Pain Point — Before / After (with scatter motion) ===== const MESSY_INBOX = [ { f: "Newsletter Weekly", s: "週報合輯：本週 12 則新創", t: "06:00" }, { f: "凱盛電子 / 林佳穎", s: "MLCC 報價需求（5/22 前）", t: "09:24", urgent: true }, { f: "GitHub", s: "[qlivo] 5 new comments on PR #234", t: "09:31" }, { f: "Allen Hsu", s: "Q3 OKR Review 會議", t: "08:51" }, { f: "AWS Billing", s: "Your invoice is ready", t: "07:12" }, { f: "LinkedIn", s: "You have 7 new connection requests", t: "yesterday" }, { f: "Slack", s: "Daniel mentioned you in #design", t: "10:02" }, { f: "Notion", s: "weekly digest of changes", t: "yesterday" }, ]; // Deterministic random for scatter rotations const scatterFor = (i) => { const seed = (i * 9301 + 49297) % 233280; const r = seed / 233280; return { rot: (r - 0.5) * 60, // -30 ~ 30 deg dx: (r - 0.5) * 200, // -100 ~ 100 px dy: 120 + r * 80, // 120 ~ 200 px down }; }; const QuoteCard = ({ tone, quote, author, role }) => { const isAfter = tone === "after"; return (
“
{quote}
{author[0]}
{author} {role}
); }; const PainPoint = () => { const isPhone = useIsMobile(600); const sectionRef = useRef(null); const itemRefs = useRef([]); const targetRef = useRef(null); const inViewRef = useRef(false); const timers = useRef([]); const [deltas, setDeltas] = useState([]); const [phase, setPhase] = useState("rest"); // rest | flying | after const [cycle, setCycle] = useState(0); const measure = () => { if (!targetRef.current) return; const t = targetRef.current.getBoundingClientRect(); const tx = t.left + t.width / 2; const ty = t.top + t.height / 2; const next = itemRefs.current.map((el, i) => { if (!el) return { dx: 0, dy: 0, r: 0 }; const r = el.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; const baseR = ((i * 37) % 14) - 7; return { dx: tx - cx, dy: ty - cy, r: baseR }; }); setDeltas(next); }; useEffect(() => { const id = setTimeout(measure, 80); window.addEventListener("resize", measure); return () => { clearTimeout(id); window.removeEventListener("resize", measure); }; }, []); const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; }; const runLoop = () => { if (!inViewRef.current) return; clearTimers(); measure(); setPhase("rest"); setCycle((c) => c + 1); timers.current.push(setTimeout(() => { if (!inViewRef.current) return; setPhase("flying"); }, 900)); timers.current.push(setTimeout(() => { if (!inViewRef.current) return; setPhase("after"); }, 900 + 1500 + MESSY_INBOX.length * 80 - 250)); timers.current.push(setTimeout(() => { if (!inViewRef.current) return; runLoop(); }, 6800)); }; useEffect(() => { if (!sectionRef.current) return; const obs = new IntersectionObserver(([entry]) => { inViewRef.current = entry.isIntersecting; if (entry.isIntersecting) runLoop(); else clearTimers(); }, { threshold: 0.2 }); obs.observe(sectionRef.current); return () => { obs.disconnect(); clearTimers(); }; // eslint-disable-next-line }, []); const replay = () => { inViewRef.current = true; runLoop(); }; const flying = phase === "flying"; const showAfter = phase === "after"; const itemsHidden = phase === "after"; return (
差別不在 142 封信，
在你打開的那一瞬間。} sub={isPhone ? <>Qlivo 把判斷交給 AI — 你打開的是已排好序的待辦清單。 : <>同樣 142 封信，整理過跟沒整理過，是「不想開始工作」與「知道下一步」的差別。Qlivo 把判斷外包給 AI — 你打開的不是收件匣，是已經排好序的待辦清單。} maxWidth={780} />
{/* ============ BEFORE ============ */}
{/* Background fog (subtle red haze for anxiety) */}
BEFORE 沒整理過 · 傳統收件匣 142 未讀
{/* Messy list — items fly to After */}
INBOX · 主管／客戶／系統通知全部攪在一起
{MESSY_INBOX.map((m, i) => { const d = deltas[i] || { dx: 0, dy: 0, r: 0 }; return (
(itemRefs.current[i] = el)} className={flying ? "fly-item" : ""} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, padding: "9px 10px", borderRadius: 8, background: "var(--bg-3)", border: "1px solid var(--border-soft)", alignItems: "center", position: "relative", zIndex: flying ? 50 : 1, "--dx": `${d.dx}px`, "--dy": `${d.dy}px`, "--r": `${d.r}deg`, "--delay": `${i * 80}ms`, opacity: itemsHidden ? 0 : undefined, transition: itemsHidden ? "opacity .2s ease" : undefined, }} >
{m.f}
{m.s}
{m.t}
{flying && }
); })}
{/* ============ Arrow ============ */}
{/* ============ AFTER ============ */}
{/* Background subtle cyan */}
AFTER 已整理 · QLIVO 處理後 已標好優先級
{/* FOCUS area — flight target + blueprint + assembled card */}
FOCUS · 接下來這封
{/* Invisible anchor — flight target point */}
{/* Blueprint scaffold — visible during 'flying' */}
{/* Assembled real card — visible during 'after' */}
{/* Decorative stacked back card */}
{/* Priority badge — pops in last */}
急
{/* Replay button (subtle) */}
); }; // EmailCard that assembles piece-by-piece when `active` becomes true const AssembledEmailCard = ({ email, active }) => { const priorityColor = "var(--red)"; const pieces = [ { delay: "60ms", node: (
{email.initials}
{email.senderName}
{email.senderEmail}
{email.time}
) }, { delay: "180ms", node: (
{email.subject}
) }, { delay: "300ms", node: (
{email.category} 優先 · {email.priority} {email.deadline && ( {email.deadline} )}
) }, { delay: "440ms", node: (
AI 摘要
{email.summary}
) }, { delay: "580ms", node: (
NEXT
{email.nextStep}
) }, ]; return (
{pieces.map((p, i) => (
{p.node}
))}
); }; // ===== 03 Core Features ===== const FeatureRow = ({ idx, tag, title, body, bullets, visual, reverse }) => (
F.0{idx} / {tag}

{title}

{body}

{visual}
); const Features = () => { return (
四個動作，
處理完一整天的信。} maxWidth={620} />

QLIVO 把 Email triage 重新拆解成
四個獨立但連貫的工作流模組。

{/* F1 滑卡分類 */}
立即回覆
} /> {/* F2 AI 摘要 */}
SUBJECT
MLCC 電容 FC-104K-50V 報價需求（5/22 前）
{[ { l: "類型", v: "客戶詢價", c: "var(--accent-2)" }, { l: "優先級", v: "急", c: "var(--red)" }, { l: "截止", v: "5/22 12:00", c: "var(--orange)" }, ].map((m, i) => (
{m.l}
{m.v}
))}
AI 摘要 · 自動產生
  1. 凱盛採購想要 50,000 pcs MLCC，要求 5/22 前完成報價評估。
  2. 需提供：單價／級距、MOQ、交期、現貨狀況、付款條件。
  3. 下一步：請業務確認現貨後，回覆完整報價單與付款條件。
} /> {/* F3 浮動 AI 對話 */}
Qlivo Assistant
凱盛電子最近在問什麼？
5 月以來凱盛採購林佳穎來信兩封，主題都是 MLCC 報價，最新一封 5/17 要求 5/22 前回覆。
} /> {/* F4 智能回覆 */}
{["正式", "中性", "友善"].map((t, i) => ( {t} ))} 重新生成
林採購您好，
感謝您的詢價來信。針對 MLCC 電容 FC-104K-50V，依您 50,000 pcs 的需求，我們建議單價為 NT$0.42 / pcs，級距為 30K / 50K / 100K，標準交期 4 週，目前現貨足以支應首批 30K。
付款條件 T/T 30 days，運費由本公司負擔。完整報價單將於今日下午另附 PDF 寄出，請查收。
若有任何問題，歡迎隨時來信或來電。
謝謝
業務 / 王志明
AI 生成 · 0.7s
送出回覆
} />
); }; // ===== 05 Why Qlivo ===== const WhyQlivo = () => { const reasons = [ { icon: , title: "真實 AI，不是模板", body: "由先進的 AI 引擎驅動，理解上下文與業務脈絡。不是把信件塞進固定範本，而是真的讀懂每一封。", stat: "12 種", statLabel: "自動辨識的郵件類型", }, { icon: , title: "你的資料只屬於你", body: "直接連線到貴公司既有的郵件伺服器（IMAP / SMTP），資料不留存於 Qlivo 伺服器。", stat: "0 byte", statLabel: "永久儲存的郵件內容", }, { icon: , title: "為決策者設計", body: "30 秒看完一天信箱。Qlivo 不是讓你「處理更多」，而是讓你「處理更少」— 把判斷力留給真正重要的決定。", stat: "3 分鐘", statLabel: "處理 142 封信的中位時間", }, ]; return (
{reasons.map((r, i) => (
{r.icon}
0{i+1}

{r.title}

{r.body}

{r.stat}
{r.statLabel}
))}
); }; // ===== Final CTA + Footer ===== const FinalCTA = () => { const [form, setForm] = useState({ company: "", name: "", email: "", size: "10-50" }); const [submitted, setSubmitted] = useState(false); return (
05 / READY?

準備好把每天 2 小時，
還給自己了嗎？

30 分鐘的 Demo，我們會用你團隊真實的信件樣本，現場示範整個工作流。沒有銷售話術，只有實際對比。

{[ { k: "30 分鐘", v: "1 對 1 線上 Demo" }, { k: "免費", v: "POC 試用期 14 天" }, { k: "中文", v: "原生繁中業務支援" }, ].map((t, i) => (
{t.k}
{t.v}
))}
{!submitted ? (
{ e.preventDefault(); setSubmitted(true); }}>
預約 DEMO · 30 秒填完
{[ { k: "company", l: "公司名稱", p: "例如：凱盛電子" }, { k: "name", l: "您的稱呼", p: "例如：王志明 / 業務主管" }, { k: "email", l: "聯絡 Email", p: "name@company.com" }, ].map((f, i) => (
setForm({ ...form, [f.k]: e.target.value })} placeholder={f.p} style={{ width: "100%", padding: "12px 14px", background: "var(--bg-2)", border: "1px solid var(--border-soft)", borderRadius: 10, color: "var(--text)", fontSize: 14, fontFamily: "inherit", outline: "none", }} />
))}
{["1-10", "10-50", "50-200", "200+"].map((s) => ( ))}
我們會在 1 個工作日內聯繫您 · 不會發送行銷郵件
) : (
已收到您的預約！

業務團隊會在 1 個工作日內透過 Email 與您聯繫，敲定 Demo 時段。

)}
); }; const Footer = () => ( ); Object.assign(window, { PainPoint, Features, WhyQlivo, FinalCTA, Footer });