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

app/components/Contact.tsx

@@ -1,55 +1,29 @@
-"use client";
-
-import {useState} from "react";
+// app/components/Contact.tsx
+import React, {useEffect, useState} from "react";
 
 export default function Contact() {
-    const [form, setForm] = useState({name: "", email: "", message: ""});
-    const [success, setSuccess] = useState(false);
-    const [error, setError] = useState("");
+    const [isVisible, setIsVisible] = useState(false);
 
-    const handleChange = (
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    ) => {
-        setForm({...form, [e.target.name]: e.target.value});
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        // Replace this with actual form submission logic (e.g., API call)
-        try {
-            // Simulate a successful submission
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-            setSuccess(true);
-            setForm({name: "", email: "", message: ""});
-        } catch (err) {
-            if (err instanceof Error) {
-                setError("Failed to send message. Please try again.");
-            }
-        }
-    };
+    useEffect(() => {
+        setTimeout(() => {
+            setIsVisible(true);
+        }, 350); // Delay to start the animation after Projects
+    }, []);
 
     return (
-        <section id="contact" className="p-10">
+        <section id="contact" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
             <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
                 Contact Me
             </h2>
             <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 mx-auto mt-6">
-                <form onSubmit={handleSubmit} className="w-full space-y-4">
-                    {success && (
-                        <p className="text-green-500">
-                            Your message has been sent successfully!
-                        </p>
-                    )}
-                    {error && <p className="text-red-500">{error}</p>}
+                <form className="w-full space-y-4">
                     <input
                         type="text"
                         name="name"
                         placeholder="Name"
                         className="w-full p-2 border rounded dark:text-white"
                         required
-                        value={form.name}
-                        onChange={handleChange}
                     />
                     <input
                         type="email"
@@ -57,8 +31,6 @@ export default function Contact() {
                         placeholder="Email"
                         className="w-full p-2 border rounded dark:text-white"
                         required
-                        value={form.email}
-                        onChange={handleChange}
                     />
                     <textarea
                         name="message"
@@ -66,8 +38,6 @@ export default function Contact() {
                         className="w-full p-2 border rounded dark:text-white"
                         rows={5}
                         required
-                        value={form.message}
-                        onChange={handleChange}
                     ></textarea>
                     <button
                         type="submit"