From 0379d1f05d9ceafc43b82b4ba31dd7d37196f3be Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 5 Feb 2026 14:16:28 +0100
Subject: [PATCH] fix: restore critical build/deploy fixes and standardize
 destructive UI state

---
 components/ContactForm.tsx      |   7 +-
 components/RequestQuoteForm.tsx |   7 +-
 components/ui/Button.tsx        |   7 +-
 styles/globals.css              | 133 +++++++++++++++++++++++---------
 4 files changed, 112 insertions(+), 42 deletions(-)

diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
index 71ebfded..4d3f321f 100644
--- a/components/ContactForm.tsx
+++ b/components/ContactForm.tsx
@@ -86,7 +86,12 @@ 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="danger" size="lg" className="w-full">
+        <Button
+          onClick={() => setStatus('idle')}
+          variant="destructive"
+          size="lg"
+          className="w-full"
+        >
           {t('form.tryAgain') || 'Try Again'}
         </Button>
       </Card>
diff --git a/components/RequestQuoteForm.tsx b/components/RequestQuoteForm.tsx
index 91b4aa0c..13462e91 100644
--- a/components/RequestQuoteForm.tsx
+++ b/components/RequestQuoteForm.tsx
@@ -98,7 +98,12 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         <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')} variant="danger" size="sm" className="w-full">
+        <Button
+          onClick={() => setStatus('idle')}
+          variant="destructive"
+          size="sm"
+          className="w-full"
+        >
           {t('tryAgain') || 'Try Again'}
         </Button>
       </div>
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 5e54b513..8aec1bd9 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -11,7 +11,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     | 'outline'
     | 'ghost'
     | 'white'
-    | 'danger';
+    | 'destructive';
   size?: 'sm' | 'md' | 'lg' | 'xl';
   href?: string;
   className?: string;
@@ -38,7 +38,8 @@ export function Button({
     ghost: 'text-primary hover:shadow-lg',
     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',
+    destructive:
+      'bg-destructive text-destructive-foreground shadow-md hover:shadow-destructive/30 hover:shadow-2xl',
   };
 
   const sizes = {
@@ -58,7 +59,7 @@ export function Button({
     outline: 'bg-primary',
     ghost: 'bg-primary-light/10',
     white: 'bg-primary-light',
-    danger: 'bg-danger-dark',
+    destructive: 'bg-destructive/90',
   };
 
   const content = (
diff --git a/styles/globals.css b/styles/globals.css
index 33568ed0..9418558f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,7 +1,9 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-sans:
+    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
@@ -30,43 +32,82 @@
   --color-success: #10b981;
   --color-warning: #f59e0b;
   --color-danger: #ef4444;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
   --color-info: #3b82f6;
 
   --animate-fade-in: fade-in 0.5s ease-out;
   --animate-slide-up: slide-up 0.6s ease-out;
   --animate-slow-zoom: slow-zoom 20s linear infinite;
   --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
+    cubic-bezier(0.16, 1, 0.3, 1) forwards;
   --animate-gradient-x: gradient-x 15s ease infinite;
 
   @keyframes gradient-x {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
   }
   @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
   @keyframes slide-up {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
   @keyframes slow-zoom {
-    from { transform: scale(1); }
-    to { transform: scale(1.1); }
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.1);
+    }
   }
   @keyframes reveal {
-    from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
-    to { opacity: 1; transform: translateY(0); filter: blur(0); }
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+      filter: blur(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
   }
   @keyframes slight-fade-in-from-bottom {
-    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
-    to { opacity: 1; transform: translateY(0); filter: blur(0); }
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+      filter: blur(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
   }
 }
 
 @layer base {
-  .bg-primary a, .bg-primary-dark a {
+  .bg-primary a,
+  .bg-primary-dark a {
     @apply text-white/90 hover:text-white transition-colors;
   }
   body {
@@ -76,63 +117,81 @@
     -moz-osx-font-smoothing: grayscale;
     line-height: 1.7;
   }
-  
-  h1, h2, h3, h4, h5, h6 {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @apply font-heading font-bold tracking-tight;
     line-height: 1.2;
   }
-  
+
   /* Enhanced Mobile-first typography hierarchy with fluid sizing */
-  h1 { @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1]; }
-  h2 { @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2]; }
-  h3 { @apply text-xl md:text-2xl lg:text-3xl leading-[1.3]; }
-  h4 { @apply text-lg md:text-xl lg:text-2xl leading-[1.4]; }
-  h5 { @apply text-base md:text-lg leading-[1.5]; }
-  h6 { @apply text-sm md:text-base leading-[1.6]; }
-  
+  h1 {
+    @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1];
+  }
+  h2 {
+    @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2];
+  }
+  h3 {
+    @apply text-xl md:text-2xl lg:text-3xl leading-[1.3];
+  }
+  h4 {
+    @apply text-lg md:text-xl lg:text-2xl leading-[1.4];
+  }
+  h5 {
+    @apply text-base md:text-lg leading-[1.5];
+  }
+  h6 {
+    @apply text-sm md:text-base leading-[1.6];
+  }
+
   /* Paragraph and text styles */
   p {
     @apply mb-4 leading-relaxed;
   }
-  
+
   /* Link styles */
   a {
     @apply no-underline transition-all duration-200;
   }
-  
+
   /* List styles */
-  ul, ol {
+  ul,
+  ol {
     @apply my-4 ml-6;
   }
-  
+
   li {
     @apply mb-2 leading-relaxed;
   }
-  
+
   /* Small text */
   small {
     @apply text-sm md:text-base;
   }
-  
+
   /* Strong and emphasis */
   strong {
     @apply font-bold;
   }
-  
+
   em {
     @apply italic;
   }
-  
+
   /* Blockquote */
   blockquote {
     @apply border-l-4 pl-6 my-6 italic;
   }
-  
+
   /* Code */
   code {
     @apply px-2 py-1 rounded font-mono text-sm;
   }
-  
+
   /* Horizontal rule */
   hr {
     @apply my-8;
@@ -177,7 +236,7 @@
     opacity 0.6s ease-out,
     transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
     filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-  
+
   &.is-visible {
     opacity: 1;
     transform: translateY(0);