feat: implement email sending functionality with nodemailer; add contact form handling and success/error notifications

app/components/Contact.tsx

@@ -1,8 +1,19 @@
-// app/components/Contact.tsx
 import React, {useEffect, useState} from "react";
+import {sendEmail} from "@/app/utils/send-email";
+
+export type FormData = {
+    name: string;
+    email: string;
+    message: string;
+}
 
 export default function Contact() {
     const [isVisible, setIsVisible] = useState(false);
+    const [banner, setBanner] = useState<{ show: boolean, message: string, type: 'success' | 'error' }>({
+        show: false,
+        message: '',
+        type: 'success'
+    });
 
     useEffect(() => {
         setTimeout(() => {
@@ -10,14 +21,38 @@ export default function Contact() {
         }, 350); // Delay to start the animation after Projects
     }, []);
 
+    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        const form = e.currentTarget;
+        const data: FormData = {
+            name: (form.elements.namedItem('name') as HTMLInputElement).value,
+            email: (form.elements.namedItem('email') as HTMLInputElement).value,
+            message: (form.elements.namedItem('message') as HTMLTextAreaElement).value,
+        };
+        const response = await sendEmail(data);
+        if (response.success) {
+            form.reset();
+        }
+        setBanner({show: true, message: response.message, type: response.success ? 'success' : 'error'});
+        setTimeout(() => {
+            setBanner({...banner, show: false});
+        }, 3000); // Hide banner after 3 seconds
+    }
+
     return (
         <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 className="w-full space-y-4">
+                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 relative">
+                {banner.show && (
+                    <div
+                        className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
+                        {banner.message}
+                    </div>
+                )}
+                <form className="w-full space-y-4" onSubmit={onSubmit}>
                     <input
                         type="text"
                         name="name"