✨ refactor: simplify contact form and improve UI elements

app/__tests__/components/Contact.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Contact from '@/app/components/Contact';
 import '@testing-library/jest-dom';
 
@@ -10,20 +10,34 @@ global.fetch = jest.fn(() =>
 ) as jest.Mock;
 
 describe('Contact', () => {
+  beforeAll(() => {
+    jest.useFakeTimers('modern');
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   it('renders the contact form', () => {
     render(<Contact />);
-    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Your Name')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('you@example.com')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Message')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Your Message...')).toBeInTheDocument();
+    expect(screen.getByLabelText('I accept the privacy policy.')).toBeInTheDocument();
   });
 
   it('submits the form', async () => {
     render(<Contact />);
-    fireEvent.change(screen.getByPlaceholderText('Name'), { target: { value: 'John Doe' } });
-    fireEvent.change(screen.getByPlaceholderText('Email'), { target: { value: 'john@example.com' } });
-    fireEvent.change(screen.getByPlaceholderText('Message'), { target: { value: 'Hello!' } });
-    fireEvent.click(screen.getByText('Send'));
 
-    expect(await screen.findByText('Email sent')).toBeInTheDocument();
+    // Fast forward time to ensure the timestamp check passes
+    jest.advanceTimersByTime(3000);
+
+    fireEvent.change(screen.getByPlaceholderText('Your Name'), { target: { value: 'John Doe' } });
+    fireEvent.change(screen.getByPlaceholderText('you@example.com'), { target: { value: 'john@example.com' } });
+    fireEvent.change(screen.getByPlaceholderText('Your Message...'), { target: { value: 'Hello!' } });
+    fireEvent.click(screen.getByLabelText('I accept the privacy policy.'));
+    fireEvent.click(screen.getByText('Send Message'));
+
+    await waitFor(() => expect(screen.getByText('Email sent')).toBeInTheDocument());
   });
 });

app/components/Contact.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { sendEmail } from "@/app/utils/send-email";
+import Link from "next/link";
 
 export type ContactFormData = {
   name: string;
@@ -34,7 +35,7 @@ export default function Contact() {
     const form = e.currentTarget as HTMLFormElement;
     const formData = new FormData(form);
 
-    // Honeypot check: if the hidden field has a value, it's likely a bot.
+    // Honeypot check
     const honeypot = formData.get("hp-field");
     if (honeypot) {
       setBanner({
@@ -42,14 +43,11 @@ export default function Contact() {
         message: "Bot detected",
         type: "error",
       });
-      setTimeout(() => {
+      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
-        setBanner((prev) => ({ ...prev, show: false }));
-      }, 3000);
       return;
     }
 
-    // Time based anti-bot check:
+    // Time-based anti-bot check
-    // Read the timestamp from the hidden field and ensure at least 3 seconds have passed.
     const timestampStr = formData.get("timestamp") as string;
     const timestamp = parseInt(timestampStr, 10);
     if (Date.now() - timestamp < 3000) {
@@ -58,9 +56,7 @@ export default function Contact() {
         message: "Please take your time filling out the form.",
         type: "error",
       });
-      setTimeout(() => {
+      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
-        setBanner((prev) => ({ ...prev, show: false }));
-      }, 3000);
       return;
     }
 
@@ -83,7 +79,7 @@ export default function Contact() {
         submitButton.textContent = "Sent!";
         setTimeout(() => {
           submitButton.removeAttribute("disabled");
-          submitButton.textContent = "Send";
+          submitButton.textContent = "Send Message";
         }, 2000);
       }
       setBanner({
@@ -91,70 +87,118 @@ export default function Contact() {
         message: response.message,
         type: response.success ? "success" : "error",
       });
-      setTimeout(() => {
+      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
-        setBanner((prev) => ({ ...prev, show: false }));
-      }, 3000);
     }
   }
 
   return (
     <section
       id="contact"
-      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+      className={`p-10 ${isVisible ? "animate-fade-in" : "opacity-0"}`}
     >
-      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
+      <h2 className="text-4xl font-extrabold text-center text-gray-900 dark:text-white mb-8">
-        Contact Me
+        Get in Touch
       </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 relative">
+      <div className="bg-white/30 dark:bg-gray-800 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
         {banner.show && (
           <div
-            className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${
+            className={`mb-4 text-center rounded-full py-2 px-4 text-white ${
               banner.type === "success" ? "bg-green-500" : "bg-red-500"
             }`}
           >
             {banner.message}
           </div>
         )}
-        <form className="w-full space-y-4" onSubmit={onSubmit}>
+        <form className="space-y-6" onSubmit={onSubmit}>
-          {/* Honeypot field: should remain empty */}
+          {/* Honeypot field */}
           <input
             type="text"
             name="hp-field"
             style={{ display: "none" }}
             autoComplete="off"
           />
-          {/* Hidden timestamp field to check how fast the form was filled */}
+          {/* Hidden timestamp field */}
           <input
             type="hidden"
             name="timestamp"
             value={formLoadedTimestamp.toString()}
           />
-          <input
+
-            type="text"
+          <div>
-            name="name"
+            <label
-            placeholder="Name"
+              htmlFor="name"
-            className="w-full p-2 border rounded dark:text-white"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-            required
+            >
-          />
+              Name
-          <input
+            </label>
-            type="email"
+            <input
-            name="email"
+              type="text"
-            placeholder="Email"
+              name="name"
-            className="w-full p-2 border rounded dark:text-white"
+              id="name"
-            required
+              placeholder="Your Name"
-          />
+              required
-          <textarea
+              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm"
-            name="message"
+            />
-            placeholder="Message"
+          </div>
-            className="w-full p-2 border rounded dark:text-white"
+
-            rows={5}
+          <div>
-            required
+            <label
-          ></textarea>
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              name="email"
+              id="email"
+              placeholder="you@example.com"
+              required
+              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="message"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              Message
+            </label>
+            <textarea
+              name="message"
+              id="message"
+              placeholder="Your Message..."
+              rows={5}
+              required
+              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 rounded-lg shadow-sm "
+            ></textarea>
+          </div>
+
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              name="privacy"
+              id="privacy"
+              required
+              className="h-5 w-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+            />
+            <label htmlFor="privacy" className="ml-2 text-sm text-gray-700 dark:text-gray-300">
+              I accept the{" "}
+              <Link
+              href="/privacy-policy"
+              className="text-blue-800 transition-underline"
+            >
+              privacy policy
+            </Link>.
+                        </label>
+          </div>
+
           <button
             type="submit"
-            className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
+            className="w-full py-3 px-6 text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600"
           >
-            Send
+            Send Message
           </button>
         </form>
       </div>