✨ feat: honeypot and timestamp checks to form submission

app/components/Contact.tsx

@@ -18,11 +18,14 @@ export default function Contact() {
     message: "",
     type: "success",
   });
+  // Record the time when the form is rendered
+  const [formLoadedTimestamp, setFormLoadedTimestamp] = useState<number>(Date.now());
 
   useEffect(() => {
+    setFormLoadedTimestamp(Date.now());
     setTimeout(() => {
       setIsVisible(true);
-    }, 350); // Delay to start the animation after Projects
+    }, 350);
   }, []);
 
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -31,16 +34,44 @@ 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.
+    const honeypot = formData.get("hp-field");
+    if (honeypot) {
+      setBanner({
+        show: true,
+        message: "Bot detected",
+        type: "error",
+      });
+      setTimeout(() => {
+        setBanner((prev) => ({ ...prev, show: false }));
+      }, 3000);
+      return;
+    }
+
+    // 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) {
+      setBanner({
+        show: true,
+        message: "Please take your time filling out the form.",
+        type: "error",
+      });
+      setTimeout(() => {
+        setBanner((prev) => ({ ...prev, show: false }));
+      }, 3000);
+      return;
+    }
+
     const data: ContactFormData = {
       name: formData.get("name") as string,
       email: formData.get("email") as string,
       message: formData.get("message") as string,
     };
 
-    // Convert FormData to a plain object
     const jsonData = JSON.stringify(data);
 
-    //prevent multiple submissions 
     const submitButton = form.querySelector("button[type='submit']");
     if (submitButton) {
       submitButton.setAttribute("disabled", "true");
@@ -65,6 +96,7 @@ export default function Contact() {
       }, 3000);
     }
   }
+
   return (
     <section
       id="contact"
@@ -76,12 +108,27 @@ export default function Contact() {
       <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">
         {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"}`}
+            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}>
+          {/* Honeypot field: should remain empty */}
+          <input
+            type="text"
+            name="hp-field"
+            style={{ display: "none" }}
+            autoComplete="off"
+          />
+          {/* Hidden timestamp field to check how fast the form was filled */}
+          <input
+            type="hidden"
+            name="timestamp"
+            value={formLoadedTimestamp.toString()}
+          />
           <input
             type="text"
             name="name"