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

app/components/Projects.tsx

@@ -1,8 +1,5 @@
-// app/components/Projects.tsx
-"use client";
-
+import React, {useEffect, useState} from "react";
 import Link from "next/link";
-import {useEffect, useState} from "react";
 
 interface Project {
     id: string;
@@ -13,37 +10,42 @@ interface Project {
 
 export default function Projects() {
     const [projects, setProjects] = useState<Project[]>([]);
+    const [isVisible, setIsVisible] = useState(false);
 
     useEffect(() => {
         const fetchProjects = async () => {
             try {
                 const response = await fetch('/api/projects');
+                try {
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch projects");
+                    }
+                } catch (error) {
+                    console.error("Failed to fetch projects:", error);
+                }
                 const projectsData = await response.json();
                 setProjects(projectsData);
+                setTimeout(() => {
+                    setIsVisible(true);
+                }, 250); // Delay to start the animation after Hero
             } catch (error) {
                 console.error("Failed to fetch projects:", error);
             }
         };
-
-        fetchProjects();
+        fetchProjects().then(r => r);
     }, []);
+    const numberOfProjects = projects.length;
 
     return (
-        <section id="projects" className="p-10">
+        <section id="projects" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
             <h2 className="text-3xl font-bold text-center text-gray-800">
                 Projects
             </h2>
             <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-                {projects.map((project) => (
-                    <Link
-                        key={project.id}
-                        href={`/Projects/${project.slug}`}
-                        className="cursor-pointer"
-                    >
-                        <div
-                            key={project.id}
-                            className="p-4 border shadow-lg bg-white/45 rounded-2xl"
-                        >
+                {projects.map((project, index) => (
+                    <Link key={project.id} href={`/Projects/${project.slug}`} className="cursor-pointer">
+                        <div className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+                             style={{animationDelay: `${index * 0.1}s`}}>
                             <h3 className="text-2xl font-bold text-gray-800">
                                 {project.title}
                             </h3>
@@ -53,6 +55,15 @@ export default function Projects() {
                         </div>
                     </Link>
                 ))}
+                <div className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+                     style={{animationDelay: `${(numberOfProjects + 1) * 0.1}s`}}>
+                    <h3 className="text-2xl font-bold text-gray-800">
+                        More to come
+                    </h3>
+                    <p className="mt-2 text-gray-500">
+                        ...
+                    </p>
+                </div>
             </div>
         </section>
     );