From 882091540d2ad20f075c53ce4b9dc29f2b174f21 Mon Sep 17 00:00:00 2001
From: kurise <3067168909@qq.com>
Date: Thu, 30 Apr 2026 17:50:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(cookie-consent):=20=E6=96=B0=E5=A2=9E=20Co?=
 =?UTF-8?q?okie=20=E5=90=8C=E6=84=8F=E6=A9=AB=E5=B9=85=E5=85=83=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/App.jsx                      |  2 +
 src/components/CookieConsent.jsx | 63 ++++++++++++++++++++++
 src/index.css                    | 90 ++++++++++++++++++++++++++++++++
 3 files changed, 155 insertions(+)
 create mode 100644 src/components/CookieConsent.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 3a7c65b..765794f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import UseCases from './components/UseCases';
 import Pricing from './components/Pricing';
 import CallToAction from './components/CallToAction';
 import Footer from './components/Footer';
+import CookieConsent from './components/CookieConsent';
 
 function App() {
     return (
@@ -20,6 +21,7 @@ function App() {
                 <CallToAction />
             </main>
             <Footer />
+            <CookieConsent />
         </div>
     );
 }
diff --git a/src/components/CookieConsent.jsx b/src/components/CookieConsent.jsx
new file mode 100644
index 0000000..1bea8d2
--- /dev/null
+++ b/src/components/CookieConsent.jsx
@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+
+const STORAGE_KEY = 'salespilot-cookie-consent';
+
+function CookieConsent() {
+    const [visible, setVisible] = useState(false);
+    const [exiting, setExiting] = useState(false);
+
+    useEffect(() => {
+        const value = localStorage.getItem(STORAGE_KEY);
+        if (!value) {
+            setVisible(true);
+        }
+    }, []);
+
+    const handleConsent = (decision) => {
+        localStorage.setItem(STORAGE_KEY, decision);
+        setExiting(true);
+        setTimeout(() => {
+            setVisible(false);
+            setExiting(false);
+        }, 300);
+    };
+
+    if (!visible) return null;
+
+    return (
+        <aside
+            className={`cookie-consent ${exiting ? 'cookie-consent--exit' : ''}`}
+            role="dialog"
+            aria-labelledby="cookie-consent-heading"
+            aria-modal="false"
+        >
+            <div className="cookie-consent__inner container">
+                <div className="cookie-consent__text">
+                    <h2 className="cookie-consent__heading" id="cookie-consent-heading">
+                        Cookie 使用聲明
+                    </h2>
+                    <p className="cookie-consent__desc">
+                        本網站使用必要的 Cookie 來確保基本功能運作，並使用分析型 Cookie 來持續改善使用體驗。
+                        點擊「接受」即表示你同意我們使用 Cookie。詳情請參閱我們的隱私權政策。
+                    </p>
+                </div>
+                <div className="cookie-consent__actions">
+                    <button
+                        className="btn btn--outline btn--sm cookie-consent__btn"
+                        onClick={() => handleConsent('declined')}
+                    >
+                        拒絕
+                    </button>
+                    <button
+                        className="btn btn--primary btn--sm cookie-consent__btn"
+                        onClick={() => handleConsent('accepted')}
+                    >
+                        接受
+                    </button>
+                </div>
+            </div>
+        </aside>
+    );
+}
+
+export default CookieConsent;
diff --git a/src/index.css b/src/index.css
index 507bc0c..18b57f3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1243,3 +1243,93 @@ button {
     grid-template-columns: 1fr;
   }
 }
+
+/* ========================================
+   COOKIE CONSENT
+   ======================================== */
+.cookie-consent {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  padding: var(--space-4) 0;
+  background: var(--color-bg-card);
+  border-top: 1px solid var(--color-border);
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
+  animation: cookieSlideUp var(--transition-slow) ease-out;
+}
+
+.cookie-consent--exit {
+  animation: cookieSlideDown var(--transition-base) ease-in forwards;
+}
+
+@keyframes cookieSlideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes cookieSlideDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.cookie-consent__inner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  flex-wrap: wrap;
+}
+
+.cookie-consent__text {
+  flex: 1;
+  min-width: 260px;
+}
+
+.cookie-consent__heading {
+  font-size: var(--text-sm);
+  font-weight: 700;
+  margin-bottom: var(--space-1);
+  color: var(--color-text);
+}
+
+.cookie-consent__desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.cookie-consent__actions {
+  display: flex;
+  gap: var(--space-3);
+  flex-shrink: 0;
+}
+
+.cookie-consent__btn {
+  white-space: nowrap;
+}
+
+@media (max-width: 580px) {
+  .cookie-consent__inner {
+    flex-direction: column;
+    gap: var(--space-4);
+    text-align: center;
+  }
+
+  .cookie-consent__actions {
+    width: 100%;
+    justify-content: center;
+  }
+}