feat: add cookie consent banner and privacy policy page; update dependencies and improve animations

app/components/Hero.tsx

@@ -1,13 +1,21 @@
+// app/components/Hero.tsx
+import React, {useEffect, useState} from "react";
 import Image from "next/image";
 
 export default function Hero() {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setIsVisible(true);
+        }, 150); // Delay to start the animation
+    }, []);
+
     return (
         <div id="about"
-             className="flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700">
-
-            {/* Left Section: Text */}
-            <div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30
-                                backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
+             className={`flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
+            <div
+                className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
                 <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
                     Hi, I’m Dennis
                 </h1>
@@ -17,19 +25,15 @@ export default function Hero() {
                 <h3 className="mt-1 text-lg md:text-xl text-gray-600">
                     Based in Osnabrück, Germany
                 </h3>
-
                 <p className="mt-6 text-gray-800 text-lg leading-relaxed">
                     Passionate about technology, coding, and solving real-world problems.
                     I enjoy building innovative solutions and continuously expanding my knowledge.
                 </p>
-
                 <p className="mt-4 text-gray-700 text-base">
                     Currently working on exciting projects that merge creativity with functionality.
                     Always eager to learn and collaborate!
                 </p>
             </div>
-
-            {/* Right Section: Image */}
             <div className="flex mt-8 md:mt-0 md:ml-12">
                 <Image
                     src="/images/me.jpg"
@@ -41,4 +45,4 @@ export default function Hero() {
             </div>
         </div>
     );
-}
+}