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() { + ); } 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 ( + + ); +} + +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; + } +}