build

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" 

components/Header.tsx

@@ -118,7 +118,6 @@ export default function Header() {
                 <motion.div
                   key={item.href}
                   variants={navLinkVariants}
-                  custom={idx}
                 >
                   <Link
                     href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
@@ -375,16 +374,15 @@ const navVariants = {
 
 const navLinkVariants = {
   hidden: { opacity: 0, y: 20, scale: 0.9 },
-  visible: (idx: number) => ({
+  visible: {
     opacity: 1,
     y: 0,
     scale: 1,
     transition: {
       duration: 0.5,
-      ease: [0.25, 0.46, 0.45, 0.94],
-      delay: idx * 0.06
+      ease: "easeOut"
     }
-  })
+  }
 } as const;
 
 const headerRightVariants = {

components/Lightbox.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
 `use client`;
 
 import React, { useEffect } from 'react';

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">