feat(cookie-consent): 新增 Cookie 同意橫幅元件

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>
     );
 }

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;

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;
+  }
+}