denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(landing): Use central button tailwind variant

Browse Source
This commit is contained in:
Denis Lugowski
2026-01-16 16:00:42 +01:00
parent 835bc9ecd1
commit 9cfa5ec434
9 changed files with 68 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
landing/app/app.config.ts
View File

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

9
landing/app/app.vue
View File

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

3
landing/app/components/landing/AdditionalFeatures.vue
View File

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

9
landing/app/components/landing/FrameworkAgreement.vue
View File

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

16
landing/app/components/landing/HeroSection.vue
View File

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

11
landing/app/components/landing/NewsletterSignup.vue
View File

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

27
landing/app/components/landing/TeamSection.vue
View File

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

22
landing/app/pages/kontakt.vue
View File

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

14
landing/app/pages/newsletter-bestaetigt.vue
View File

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