feat(landing): Use central button tailwind variant
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user