migration wip

components/CookieConsent.tsx

@@ -3,10 +3,13 @@
 import { useState, useEffect } from 'react';
 import { t, getLocaleFromPath } from '@/lib/i18n';
 import { usePathname } from 'next/navigation';
+import { Card, CardBody, CardFooter } from '@/components/ui';
+import { Button } from '@/components/ui';
 
 export function CookieConsent() {
   const [showBanner, setShowBanner] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
   const pathname = usePathname();
   const locale = getLocaleFromPath(pathname);
 
@@ -14,18 +17,24 @@ export function CookieConsent() {
     setIsMounted(true);
     const consent = localStorage.getItem('cookie-consent');
     if (!consent) {
-      setShowBanner(true);
+      // Small delay to ensure smooth entrance animation
+      setTimeout(() => {
+        setShowBanner(true);
+        setIsAnimating(true);
+      }, 500);
     }
   }, []);
 
   const handleAccept = () => {
     localStorage.setItem('cookie-consent', 'accepted');
-    setShowBanner(false);
+    setIsAnimating(false);
+    setTimeout(() => setShowBanner(false), 300);
   };
 
   const handleDecline = () => {
     localStorage.setItem('cookie-consent', 'declined');
-    setShowBanner(false);
+    setIsAnimating(false);
+    setTimeout(() => setShowBanner(false), 300);
   };
 
   if (!isMounted || !showBanner) {
@@ -33,35 +42,49 @@ export function CookieConsent() {
   }
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
-          <div className="flex-1">
-            <p className="text-sm text-gray-700">
-              {t('cookieConsent.message', locale)}
-              <a 
-                href="/privacy-policy" 
-                className="text-blue-600 hover:text-blue-700 underline ml-1"
-              >
-                {t('cookieConsent.privacyPolicy', locale)}
-              </a>
-            </p>
-          </div>
-          <div className="flex gap-3">
-            <button
-              onClick={handleDecline}
-              className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
-            >
-              {t('cookieConsent.decline', locale)}
-            </button>
-            <button
-              onClick={handleAccept}
-              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
-            >
-              {t('cookieConsent.accept', locale)}
-            </button>
-          </div>
-        </div>
+    <div className={`fixed bottom-0 left-0 right-0 z-50 px-4 pb-4 md:pb-6 transition-all duration-300 ${
+      isAnimating ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
+    }`}>
+      <div className="max-w-7xl mx-auto">
+        <Card 
+          variant="elevated" 
+          padding="md"
+          className="border-primary/20 shadow-xl"
+        >
+          <CardBody>
+            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+              <div className="flex-1">
+                <p className="text-sm text-gray-700 leading-relaxed">
+                  {t('cookieConsent.message', locale)}{' '}
+                  <a 
+                    href="/privacy-policy" 
+                    className="text-primary hover:text-primary-dark underline ml-1 font-medium transition-colors"
+                  >
+                    {t('cookieConsent.privacyPolicy', locale)}
+                  </a>
+                </p>
+              </div>
+              <div className="flex gap-3 w-full md:w-auto">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleDecline}
+                  className="flex-1 md:flex-none"
+                >
+                  {t('cookieConsent.decline', locale)}
+                </Button>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={handleAccept}
+                  className="flex-1 md:flex-none"
+                >
+                  {t('cookieConsent.accept', locale)}
+                </Button>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
       </div>
     </div>
   );