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

app/Projects/[slug]/page.tsx

@@ -3,9 +3,8 @@
 
 import {useParams, useRouter} from "next/navigation";
 import {useEffect, useState} from "react";
-import Link from "next/link";
 import Header from "../../components/Header";
-import Footer from "./Footer";
+import Footer_Back from "../../components/Footer_Back";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
@@ -25,6 +24,13 @@ export default function ProjectDetail() {
     const router = useRouter();
     const {slug} = params as { slug: string };
     const [project, setProject] = useState<Project | null>(null);
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setIsVisible(true);
+        }, 150); // Delay to start the animation
+    }, []);
 
     useEffect(() => {
         if (slug) {
@@ -65,7 +71,7 @@ export default function ProjectDetail() {
     }
 
     return (
-        <div className="min-h-screen flex flex-col bg-radiant">
+        <div className={`min-h-screen flex flex-col bg-radiant ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
             <Header/>
             <div className="flex-grow p-10 pt-24">
                 <div
@@ -75,15 +81,9 @@ export default function ProjectDetail() {
                             {project.text}
                         </ReactMarkdown>
                     </div>
-                    <div className={"mt-10"}>
-                        <button
-                            className={"md:w-1/6 p-3 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl hover:from-blue-600 hover:to-purple-600 transition"}>
-                            <Link href="/">Back to Projects</Link>
-                        </button>
-                    </div>
                 </div>
             </div>
-            <Footer/>
+            <Footer_Back/>
         </div>
     );
 }