From 9cfa5ec43464c32f99dcaaf2751c06a22bd80f17 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Fri, 16 Jan 2026 16:00:42 +0100
Subject: [PATCH] feat(landing): Use central button tailwind variant

---
 landing/app/app.config.ts                     | 27 ++++++++++++++++---
 landing/app/app.vue                           |  9 +++----
 .../components/landing/AdditionalFeatures.vue |  3 +--
 .../components/landing/FrameworkAgreement.vue |  9 ++-----
 .../app/components/landing/HeroSection.vue    | 16 +++--------
 .../components/landing/NewsletterSignup.vue   | 11 ++++----
 .../app/components/landing/TeamSection.vue    | 27 +++++++++++--------
 landing/app/pages/kontakt.vue                 | 22 +++++----------
 landing/app/pages/newsletter-bestaetigt.vue   | 14 +++++-----
 9 files changed, 68 insertions(+), 70 deletions(-)

diff --git a/landing/app/app.config.ts b/landing/app/app.config.ts
index e846b6e..67720eb 100644
--- a/landing/app/app.config.ts
+++ b/landing/app/app.config.ts
@@ -9,18 +9,39 @@ export default defineAppConfig({
       error: 'red'
     },
 
-    // Button customizations
+    // Button customizations with custom gradient variants
     button: {
       defaultVariants: {
         size: 'lg'
+      },
+      variants: {
+        variant: {
+          gradient:
+            'bg-gradient-to-br from-primary-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-primary-500/25 hover:from-cyan-500 hover:to-accent-500 hover:shadow-xl hover:shadow-primary-500/30 transition-all',
+          gradientOutline:
+            'bg-white dark:bg-gray-900 border-2 border-transparent bg-clip-padding font-semibold rounded-xl text-primary-600 dark:text-primary-400 ring-2 ring-primary-500 hover:bg-primary-50 dark:hover:bg-primary-950 transition-all'
+        }
       }
     },
 
-    // Card customizations with enhanced hover states
+    // Card customizations with enhanced hover states and glass variant
     card: {
       slots: {
         root: 'rounded-2xl overflow-hidden transition-all duration-300'
-      }
+      },
+      variants: {
+        variant: {
+          glass: ''
+        }
+      },
+      compoundVariants: [
+        {
+          variant: 'glass',
+          class: {
+            root: 'bg-white/70 dark:bg-black/40 backdrop-blur-xl border border-white/30 dark:border-white/10'
+          }
+        }
+      ]
     },
 
     // Page Hero customizations for landing page
diff --git a/landing/app/app.vue b/landing/app/app.vue
index e394a85..f5e0f7b 100644
--- a/landing/app/app.vue
+++ b/landing/app/app.vue
@@ -61,11 +61,8 @@
             base: 'text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400'
           }"
         />
-        <UButton
-          to="/#newsletter"
-          class="hidden sm:flex btn-gradient px-5 py-2.5 rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
-        >
-          <span>{{ $t('common.stayInformed') }}</span>
+        <UButton to="/#newsletter" variant="gradient" class="hidden sm:flex px-5 py-2.5">
+          {{ $t('common.stayInformed') }}
         </UButton>
       </template>
 
@@ -79,7 +76,7 @@
           }"
         />
         <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-800">
-          <UButton to="#newsletter" size="lg" block class="btn-gradient rounded-xl font-semibold">
+          <UButton to="#newsletter" size="lg" block variant="gradient">
             {{ $t('common.stayInformed') }}
           </UButton>
         </div>
diff --git a/landing/app/components/landing/AdditionalFeatures.vue b/landing/app/components/landing/AdditionalFeatures.vue
index 7e7047c..1ce5cf7 100644
--- a/landing/app/components/landing/AdditionalFeatures.vue
+++ b/landing/app/components/landing/AdditionalFeatures.vue
@@ -76,8 +76,7 @@
     <!-- Bottom CTA -->
     <div class="mt-12 text-center">
       <p class="text-gray-500 dark:text-gray-400 mb-4">{{ $t('additionalFeatures.ctaQuestion') }}</p>
-      <UButton to="/kontakt" variant="outline" class="btn-outline-gradient">
-        <UIcon name="i-lucide-message-circle" class="w-4 h-4 mr-2" />
+      <UButton to="/kontakt" variant="gradientOutline" leading-icon="i-lucide-message-circle">
         {{ $t('additionalFeatures.ctaButton') }}
       </UButton>
     </div>
diff --git a/landing/app/components/landing/FrameworkAgreement.vue b/landing/app/components/landing/FrameworkAgreement.vue
index 2231b7f..7c25106 100644
--- a/landing/app/components/landing/FrameworkAgreement.vue
+++ b/landing/app/components/landing/FrameworkAgreement.vue
@@ -61,13 +61,8 @@
 
         <!-- CTA -->
         <div class="mt-8">
-          <UButton
-            to="/kontakt"
-            size="xl"
-            class="btn-gradient px-8 py-4 text-lg font-semibold rounded-xl shadow-lg shadow-primary-500/25"
-          >
-            <span>{{ $t('common.learnMore') }}</span>
-            <UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
+          <UButton to="/kontakt" size="xl" variant="gradient" trailing-icon="i-lucide-arrow-right" class="px-8 py-4 text-lg">
+            {{ $t('common.learnMore') }}
           </UButton>
         </div>
       </div>
diff --git a/landing/app/components/landing/HeroSection.vue b/landing/app/components/landing/HeroSection.vue
index 8a0ad9d..f62a315 100644
--- a/landing/app/components/landing/HeroSection.vue
+++ b/landing/app/components/landing/HeroSection.vue
@@ -63,20 +63,10 @@
 
         <!-- CTA Buttons -->
         <div class="flex flex-wrap justify-center gap-4 animate-fade-in-up" style="animation-delay: 400ms">
-          <UButton
-            size="xl"
-            to="/kontakt"
-            trailing-icon="i-lucide-arrow-right"
-            class="btn-gradient px-8 py-4 text-lg font-semibold rounded-xl shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 transition-all"
-          >
-            <span>{{ $t('hero.cta.requestDemo') }}</span>
+          <UButton size="xl" to="/kontakt" variant="gradient" trailing-icon="i-lucide-arrow-right" class="px-8 py-4 text-lg">
+            {{ $t('hero.cta.requestDemo') }}
           </UButton>
-          <UButton
-            size="xl"
-            to="#features"
-            variant="outline"
-            class="btn-outline-gradient px-8 py-4 text-lg font-semibold rounded-xl"
-          >
+          <UButton size="xl" to="#features" variant="gradientOutline" class="px-8 py-4 text-lg">
             {{ $t('hero.cta.discoverFeatures') }}
           </UButton>
         </div>
diff --git a/landing/app/components/landing/NewsletterSignup.vue b/landing/app/components/landing/NewsletterSignup.vue
index 59d1be0..67baa41 100644
--- a/landing/app/components/landing/NewsletterSignup.vue
+++ b/landing/app/components/landing/NewsletterSignup.vue
@@ -27,7 +27,7 @@
     <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <!-- Glass card -->
       <div class="max-w-2xl mx-auto">
-        <div class="glass rounded-3xl p-8 sm:p-12 shadow-2xl">
+        <UCard variant="glass" :ui="{ root: 'rounded-3xl shadow-2xl', body: 'p-8 sm:p-12' }">
           <!-- Icon -->
           <div class="flex justify-center mb-6">
             <div
@@ -83,16 +83,17 @@
               <UButton
                 type="submit"
                 size="xl"
+                variant="gradient"
                 :loading="isLoading"
                 :disabled="isSuccess"
-                class="flex flex-center btn-gradient px-8 rounded-xl font-semibold shadow-lg shadow-primary-500/25 whitespace-nowrap"
+                class="px-8 whitespace-nowrap"
               >
                 <template v-if="isSuccess">
                   <UIcon name="i-lucide-check" class="w-5 h-5 mr-2" />
-                  <span>{{ $t('newsletter.submitted') }}</span>
+                  {{ $t('newsletter.submitted') }}
                 </template>
                 <template v-else>
-                  <span>{{ $t('newsletter.submit') }}</span>
+                  {{ $t('newsletter.submit') }}
                 </template>
               </UButton>
             </div>
@@ -158,7 +159,7 @@
               <span>{{ $t('newsletter.trust.noSpam') }}</span>
             </div>
           </div>
-        </div>
+        </UCard>
       </div>
     </div>
   </section>
diff --git a/landing/app/components/landing/TeamSection.vue b/landing/app/components/landing/TeamSection.vue
index b605b69..d8c57e0 100644
--- a/landing/app/components/landing/TeamSection.vue
+++ b/landing/app/components/landing/TeamSection.vue
@@ -52,7 +52,12 @@
       <!-- Team members grid -->
       <div class="grid md:grid-cols-2 gap-8 lg:gap-12 max-w-5xl mx-auto">
         <!-- Raphael Lugowski -->
-        <article class="group glass rounded-3xl p-8 lg:p-10 card-hover-lift animate-fade-in-up delay-300">
+        <UCard
+          as="article"
+          variant="glass"
+          class="group card-hover-lift animate-fade-in-up delay-300"
+          :ui="{ root: 'rounded-3xl', body: 'p-8 lg:p-10' }"
+        >
           <div class="flex flex-col items-center text-center">
             <!-- Profile image with gradient border -->
             <div class="relative mb-6">
@@ -97,10 +102,15 @@
               {{ $t('team.members.raphael.description') }}
             </p>
           </div>
-        </article>
+        </UCard>
 
         <!-- Denis Lugowski -->
-        <article class="group glass rounded-3xl p-8 lg:p-10 card-hover-lift animate-fade-in-up delay-400">
+        <UCard
+          as="article"
+          variant="glass"
+          class="group card-hover-lift animate-fade-in-up delay-400"
+          :ui="{ root: 'rounded-3xl', body: 'p-8 lg:p-10' }"
+        >
           <div class="flex flex-col items-center text-center">
             <!-- Profile image with gradient border -->
             <div class="relative mb-6">
@@ -145,7 +155,7 @@
               {{ $t('team.members.denis.description') }}
             </p>
           </div>
-        </article>
+        </UCard>
       </div>
 
       <!-- CTA section -->
@@ -153,13 +163,8 @@
         <p class="text-gray-600 dark:text-gray-300 mb-6">
           {{ $t('team.cta.text') }}
         </p>
-        <UButton
-          to="/kontakt"
-          size="xl"
-          class="btn-gradient px-8 py-4 rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
-        >
-          <span>{{ $t('team.cta.button') }}</span>
-          <UIcon name="i-lucide-mail" class="w-5 h-5 ml-2" />
+        <UButton to="/kontakt" size="xl" variant="gradient" trailing-icon="i-lucide-mail" class="px-8 py-4">
+          {{ $t('team.cta.button') }}
         </UButton>
       </div>
     </div>
diff --git a/landing/app/pages/kontakt.vue b/landing/app/pages/kontakt.vue
index b78de9c..a311556 100644
--- a/landing/app/pages/kontakt.vue
+++ b/landing/app/pages/kontakt.vue
@@ -43,7 +43,7 @@
 
       <!-- Form section -->
       <div class="animate-fade-in-up" style="animation-delay: 150ms">
-        <div class="glass rounded-3xl p-8 sm:p-10 shadow-2xl">
+        <UCard variant="glass" :ui="{ root: 'rounded-3xl shadow-2xl', body: 'p-8 sm:p-10' }">
           <!-- Success state -->
           <Transition
             enter-active-class="transition-all duration-500 ease-out"
@@ -66,12 +66,10 @@
                 {{ $t('contact.success.message') }}
               </p>
               <div class="flex flex-col sm:flex-row gap-3 justify-center">
-                <UButton to="/" variant="outline" class="btn-outline-gradient">
-                  <UIcon name="i-lucide-home" class="w-4 h-4 mr-2" />
+                <UButton to="/" variant="gradientOutline" leading-icon="i-lucide-home">
                   {{ $t('contact.success.backToHome') }}
                 </UButton>
-                <UButton class="btn-gradient" @click="resetForm">
-                  <UIcon name="i-lucide-mail-plus" class="w-4 h-4 mr-2" />
+                <UButton variant="gradient" leading-icon="i-lucide-mail-plus" @click="resetForm">
                   {{ $t('contact.success.sendAnother') }}
                 </UButton>
               </div>
@@ -153,23 +151,17 @@
             </Transition>
 
             <!-- Submit button -->
-            <UButton
-              type="submit"
-              size="xl"
-              block
-              :loading="isLoading"
-              class="btn-gradient rounded-xl font-semibold shadow-lg shadow-primary-500/25"
-            >
+            <UButton type="submit" size="xl" block variant="gradient" :loading="isLoading" class="rounded-xl">
               <template v-if="isLoading">
-                <span>{{ $t('contact.form.sending') }}</span>
+                {{ $t('contact.form.sending') }}
               </template>
               <template v-else>
                 <UIcon name="i-lucide-send" class="w-5 h-5 mr-2" />
-                <span>{{ $t('contact.form.submit') }}</span>
+                {{ $t('contact.form.submit') }}
               </template>
             </UButton>
           </UForm>
-        </div>
+        </UCard>
 
         <!-- Trust indicators -->
         <div class="mt-8 flex flex-wrap justify-center gap-6 animate-fade-in-up" style="animation-delay: 300ms">
diff --git a/landing/app/pages/newsletter-bestaetigt.vue b/landing/app/pages/newsletter-bestaetigt.vue
index e3905d6..ed9989a 100644
--- a/landing/app/pages/newsletter-bestaetigt.vue
+++ b/landing/app/pages/newsletter-bestaetigt.vue
@@ -15,7 +15,10 @@
 
     <div class="relative max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
       <!-- Success card -->
-      <div class="glass rounded-3xl p-10 sm:p-14 shadow-2xl animate-fade-in-up">
+      <UCard
+        variant="glass"
+        :ui="{ root: 'rounded-3xl shadow-2xl animate-fade-in-up', body: 'p-10 sm:p-14' }"
+      >
         <!-- Checkmark icon with animation -->
         <div class="relative mb-8">
           <div
@@ -47,16 +50,11 @@
 
         <!-- CTA Button -->
         <div class="animate-fade-in-up" style="animation-delay: 400ms">
-          <UButton
-            to="/"
-            size="xl"
-            class="btn-gradient rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
-          >
-            <UIcon name="i-lucide-home" class="w-5 h-5 mr-2" />
+          <UButton to="/" size="xl" variant="gradient" leading-icon="i-lucide-home" class="px-8 py-4">
             {{ $t('newsletterConfirmed.backToHome') }}
           </UButton>
         </div>
-      </div>
+      </UCard>
 
       <!-- Trust indicators -->
       <div class="mt-8 flex flex-wrap justify-center gap-6 animate-fade-in-up" style="animation-delay: 500ms">