fix error for deployment on vercel

app/components/Contact.tsx

@@ -1,77 +1,81 @@
 "use client";
 
-import { useState } from "react";
+import {useState} from "react";
 
 export default function Contact() {
-  const [form, setForm] = useState({ name: "", email: "", message: "" });
-  const [success, setSuccess] = useState(false);
-  const [error, setError] = useState("");
+    const [form, setForm] = useState({name: "", email: "", message: ""});
+    const [success, setSuccess] = useState(false);
+    const [error, setError] = useState("");
 
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setForm({ ...form, [e.target.name]: e.target.value });
-  };
+    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) {
-      setError("Failed to send message. Please try again.");
-    }
-  };
+    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) {
+            //use err to avoid unused variable warning
+            if (err instanceof Error) {
+                setError("Failed to send message. Please try again.");
+            }
 
-  return (
-    <section id="contact" className="p-10 ">
-      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
-        Contact Me
-      </h2>
-      <form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
-        {success && (
-          <p className="text-green-500">
-            Your message has been sent successfully!
-          </p>
-        )}
-        {error && <p className="text-red-500">{error}</p>}
-        <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"
-          name="email"
-          placeholder="Email"
-          className="w-full p-2 border rounded  dark:text-white"
-          required
-          value={form.email}
-          onChange={handleChange}
-        />
-        <textarea
-          name="message"
-          placeholder="Message"
-          className="w-full p-2 border rounded dark:text-white"
-          rows={5}
-          required
-          value={form.message}
-          onChange={handleChange}
-        ></textarea>
-        <button
-          type="submit"
-          className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
-        >
-          Send
-        </button>
-      </form>
-    </section>
-  );
+        }
+    };
+
+    return (
+        <section id="contact" className="p-10 ">
+            <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
+                Contact Me
+            </h2>
+            <form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
+                {success && (
+                    <p className="text-green-500">
+                        Your message has been sent successfully!
+                    </p>
+                )}
+                {error && <p className="text-red-500">{error}</p>}
+                <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"
+                    name="email"
+                    placeholder="Email"
+                    className="w-full p-2 border rounded  dark:text-white"
+                    required
+                    value={form.email}
+                    onChange={handleChange}
+                />
+                <textarea
+                    name="message"
+                    placeholder="Message"
+                    className="w-full p-2 border rounded dark:text-white"
+                    rows={5}
+                    required
+                    value={form.message}
+                    onChange={handleChange}
+                ></textarea>
+                <button
+                    type="submit"
+                    className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
+                >
+                    Send
+                </button>
+            </form>
+        </section>
+    );
 }

app/not-found.tsx

@@ -1,22 +1,22 @@
 import Link from "next/link";
 
 export default function NotFound() {
-  return (
-    <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
-      <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
-        <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
-          404
-        </h1>
-        <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
-          Oops! The page you're looking for doesn't exist.
-        </p>
-        <Link
-          href="/"
-          className="mt-6 inline-block text-blue-500 hover:underline"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
+    return (
+        <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
+            <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
+                <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
+                    404
+                </h1>
+                <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
+                    Oops! The page you&#39;re looking for doesn&#39;t exist.
+                </p>
+                <Link
+                    href="/"
+                    className="mt-6 inline-block text-blue-500 hover:underline"
+                >
+                    Go Back Home
+                </Link>
+            </div>
+        </div>
+    );
 }