From 50347d049dc477771fb85e5460c80ca5173f7d54 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 5 Feb 2026 14:08:06 +0100
Subject: [PATCH] style: add danger button variant and fix contact form error
 state

---
 components/ContactForm.tsx      | 74 +++++++++++++++++++++++----------
 components/RequestQuoteForm.tsx | 68 ++++++++++++++++++++++--------
 components/ui/Button.tsx        | 51 ++++++++++++++++-------
 3 files changed, 140 insertions(+), 53 deletions(-)

diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
index eb9d3487..71ebfded 100644
--- a/components/ContactForm.tsx
+++ b/components/ContactForm.tsx
@@ -17,7 +17,7 @@ export default function ContactForm() {
 
     const formData = new FormData(e.currentTarget);
     const email = formData.get('email') as string;
-    
+
     try {
       const result = await sendContactFormAction(formData);
       if (result.success) {
@@ -41,7 +41,12 @@ export default function ContactForm() {
     return (
       <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl text-center">
         <div className="w-20 h-20 bg-accent rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-accent/20">
-          <svg className="w-10 h-10 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg
+            className="w-10 h-10 text-primary-dark"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
           </svg>
         </div>
@@ -49,7 +54,8 @@ export default function ContactForm() {
           {t('form.successTitle') || 'Message Sent!'}
         </Heading>
         <p className="text-text-secondary text-lg mb-8">
-          {t('form.successDesc') || 'Thank you for your message. We will get back to you as soon as possible.'}
+          {t('form.successDesc') ||
+            'Thank you for your message. We will get back to you as soon as possible.'}
         </p>
         <Button onClick={() => setStatus('idle')} variant="saturated">
           {t('form.sendAnother') || 'Send another message'}
@@ -62,7 +68,13 @@ export default function ContactForm() {
     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">
+          <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" />
@@ -74,7 +86,7 @@ export default function ContactForm() {
         <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">
+        <Button onClick={() => setStatus('idle')} variant="danger" size="lg" className="w-full">
           {t('form.tryAgain') || 'Try Again'}
         </Button>
       </Card>
@@ -89,9 +101,9 @@ export default function ContactForm() {
       <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
         <div className="space-y-1 md:space-y-2">
           <Label htmlFor="name">{t('form.name')}</Label>
-          <Input 
-            type="text" 
-            id="name" 
+          <Input
+            type="text"
+            id="name"
             name="name"
             autoComplete="name"
             enterKeyHint="next"
@@ -101,9 +113,9 @@ export default function ContactForm() {
         </div>
         <div className="space-y-1 md:space-y-2">
           <Label htmlFor="email">{t('form.email')}</Label>
-          <Input 
-            type="email" 
-            id="email" 
+          <Input
+            type="email"
+            id="email"
             name="email"
             autoComplete="email"
             inputMode="email"
@@ -114,32 +126,50 @@ export default function ContactForm() {
         </div>
         <div className="md:col-span-2 space-y-1 md:space-y-2">
           <Label htmlFor="message">{t('form.message')}</Label>
-          <Textarea 
-            id="message" 
+          <Textarea
+            id="message"
             name="message"
-            rows={4} 
+            rows={4}
             enterKeyHint="send"
             placeholder={t('form.messagePlaceholder')}
             required
           />
         </div>
         <div className="md:col-span-2 pt-2 md:pt-4">
-          <Button 
-            type="submit" 
-            variant="saturated" 
-            size="lg" 
+          <Button
+            type="submit"
+            variant="saturated"
+            size="lg"
             disabled={status === 'submitting'}
             className="w-full shadow-xl shadow-saturated/20 md:h-16 md:px-10 md:text-xl active:scale-[0.98] transition-transform"
           >
             {status === 'submitting' ? (
               <span className="flex items-center gap-2">
-                <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                <svg
+                  className="animate-spin h-5 w-5 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
                 </svg>
                 {t('form.submitting') || 'Sending...'}
               </span>
-            ) : t('form.submit')}
+            ) : (
+              t('form.submit')
+            )}
           </Button>
         </div>
       </form>
diff --git a/components/RequestQuoteForm.tsx b/components/RequestQuoteForm.tsx
index 838892ed..91b4aa0c 100644
--- a/components/RequestQuoteForm.tsx
+++ b/components/RequestQuoteForm.tsx
@@ -51,7 +51,12 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     return (
       <div className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center animate-fade-in !mt-0">
         <div className="w-10 h-10 bg-accent rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-accent/20">
-          <svg className="w-5 h-5 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg
+            className="w-5 h-5 text-primary-dark"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
           </svg>
         </div>
@@ -75,24 +80,27 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     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">
+          <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>
+        <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>
+        <Button onClick={() => setStatus('idle')} variant="danger" size="sm" className="w-full">
+          {t('tryAgain') || 'Try Again'}
+        </Button>
       </div>
     );
   }
@@ -133,22 +141,48 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         >
           {status === 'submitting' ? (
             <>
-              <svg className="animate-spin h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              <svg
+                className="animate-spin h-3 w-3 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
               </svg>
               <span className="text-xs">{t('submitting')}</span>
             </>
           ) : (
             <>
               <span className="text-xs">{t('submit')}</span>
-              <svg className="w-3 h-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+              <svg
+                className="w-3 h-3 transition-transform group-hover:translate-x-1"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 8l4 4m0 0l-4 4m4-4H3"
+                />
               </svg>
             </>
           )}
         </Button>
-        
+
         <p className="text-[7px] text-center text-text-secondary/40 uppercase tracking-[0.15em] font-medium px-2 !mt-1 !mb-0">
           {t('privacyNote')}
         </p>
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 7fc06fcf..5e54b513 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -3,24 +3,42 @@ import Link from 'next/link';
 import { cn } from './utils';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'accent' | 'saturated' | 'outline' | 'ghost' | 'white';
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'saturated'
+    | 'outline'
+    | 'ghost'
+    | 'white'
+    | 'danger';
   size?: 'sm' | 'md' | 'lg' | 'xl';
   href?: string;
   className?: string;
   children?: React.ReactNode;
 }
 
-export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
-  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
-  
+export function Button({
+  className,
+  variant = 'primary',
+  size = 'md',
+  href,
+  ...props
+}: ButtonProps) {
+  const baseStyles =
+    'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
+
   const variants = {
     primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
     secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
     accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
     saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
-    outline: 'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
+    outline:
+      'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
     ghost: 'text-primary hover:shadow-lg',
-    white: 'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
+    white:
+      'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
+    danger: 'bg-danger text-white shadow-md hover:shadow-danger/30 hover:shadow-2xl',
   };
 
   const sizes = {
@@ -40,20 +58,25 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
     outline: 'bg-primary',
     ghost: 'bg-primary-light/10',
     white: 'bg-primary-light',
+    danger: 'bg-danger-dark',
   };
 
   const content = (
     <>
-      <span className={cn(
-        "relative z-10 flex items-center justify-center gap-2 transition-colors duration-500",
-        variant === 'white' ? "group-hover/btn:text-primary-dark" : ""
-      )}>
+      <span
+        className={cn(
+          'relative z-10 flex items-center justify-center gap-2 transition-colors duration-500',
+          variant === 'white' ? 'group-hover/btn:text-primary-dark' : '',
+        )}
+      >
         {props.children}
       </span>
-      <span className={cn(
-        "absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out",
-        overlayColors[variant]
-      )} />
+      <span
+        className={cn(
+          'absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out',
+          overlayColors[variant],
+        )}
+      />
     </>
   );