From dea3b576273eabf80f687e9456d6cc7038969239 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 26 Jan 2026 22:55:13 +0100
Subject: [PATCH] forms

---
 components/ContactForm.tsx      | 28 +++++++++++++++++++++++-----
 components/RequestQuoteForm.tsx | 28 +++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
index b0eac7eb..eb9d3487 100644
--- a/components/ContactForm.tsx
+++ b/components/ContactForm.tsx
@@ -58,6 +58,29 @@ export default function ContactForm() {
     );
   }
 
+  if (status === 'error') {
+    return (
+      <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up">
+        <div className="w-20 h-20 bg-destructive rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-destructive/20">
+          <svg className="w-10 h-10 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" strokeLinecap="round" strokeLinejoin="round" />
+            <line x1="9" y1="9" x2="15" y2="15" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </div>
+        <Heading level={3} className="mb-4 text-destructive font-black">
+          {t('form.errorTitle') || 'Submission Failed!'}
+        </Heading>
+        <p className="text-destructive/80 text-lg mb-8 leading-relaxed font-medium">
+          {t('form.error') || 'Something went wrong. Please check your input and try again.'}
+        </p>
+        <Button onClick={() => setStatus('idle')} variant="saturated" size="lg" className="w-full bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive shadow-lg shadow-destructive/20">
+          {t('form.tryAgain') || 'Try Again'}
+        </Button>
+      </Card>
+    );
+  }
+
   return (
     <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
       <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
@@ -100,11 +123,6 @@ export default function ContactForm() {
             required
           />
         </div>
-        {status === 'error' && (
-          <div className="md:col-span-2 text-red-500 text-sm font-bold">
-            {t('form.error') || 'An error occurred. Please try again later.'}
-          </div>
-        )}
         <div className="md:col-span-2 pt-2 md:pt-4">
           <Button 
             type="submit" 
diff --git a/components/RequestQuoteForm.tsx b/components/RequestQuoteForm.tsx
index 08b6b033..838892ed 100644
--- a/components/RequestQuoteForm.tsx
+++ b/components/RequestQuoteForm.tsx
@@ -59,7 +59,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         <p className="text-text-secondary text-xs leading-tight mb-4 !mt-0">
           {t('successDesc', { productName })}
         </p>
-        <button 
+        <button
           onClick={() => setStatus('idle')}
           className="inline-flex items-center text-[9px] font-bold uppercase tracking-[0.2em] text-primary hover:text-accent transition-colors group"
         >
@@ -71,6 +71,32 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     );
   }
 
+  if (status === 'error') {
+    return (
+      <div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0">
+        <div className="w-10 h-10 bg-destructive rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-destructive/20">
+          <svg className="w-5 h-5 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+          </svg>
+        </div>
+        <h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-destructive">{t('errorTitle') || 'Submission Failed'}</h3>
+        <p className="text-destructive/80 text-xs leading-tight mb-4 !mt-0">
+          {t('errorDesc') || 'Something went wrong. Please try again.'}
+        </p>
+        <button
+          onClick={() => setStatus('idle')}
+          className="inline-flex items-center text-[9px] font-bold uppercase tracking-[0.2em] text-destructive hover:text-destructive/80 transition-colors group"
+        >
+          <span className="border-b-2 border-destructive/10 group-hover:border-destructive/30 transition-colors pb-1">
+            {t('tryAgain') || 'Try Again'}
+          </span>
+        </button>
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
       <div className="space-y-2 !mt-0">