fix colo
This commit is contained in:
Nyavokevin
parent
86df097fe9
commit
d8b0825c55
@ -58,13 +58,13 @@ const goToShuffle = () => {
|
||||
<div class="relative z-10 flex max-w-3xl flex-col items-center gap-6 px-4">
|
||||
<!-- Animated title -->
|
||||
<h1
|
||||
class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl"
|
||||
class="font text-5xl text-[var(--pure-white)] md:text-7xl"
|
||||
:class="{ 'animate-fade-in-up': isMounted }"
|
||||
style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
|
||||
>
|
||||
Révélez Votre
|
||||
<span class="citadel-script relative text-6xl text-[var(--subtle-gold)] md:text-8xl">
|
||||
<span class="gold-glow">Voyage</span>
|
||||
<span class="gold-glow">Empire</span>
|
||||
<!-- Gold underline accent -->
|
||||
<span
|
||||
class="absolute right-0 -bottom-2 left-0 h-1 scale-x-0 transform bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent transition-transform duration-1000"
|
||||
@ -99,15 +99,6 @@ const goToShuffle = () => {
|
||||
<span class="relative z-10 truncate">Découvrir Votre Oracle</span>
|
||||
|
||||
<!-- Animated arrow icon -->
|
||||
<svg
|
||||
class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300"
|
||||
:class="{ 'translate-x-1': buttonHover }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
<section class="py-20 sm:py-24">
|
||||
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Explorez Nos Lectures</h2>
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Carte Lecture Gratuite -->
|
||||
<div
|
||||
class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
|
||||
class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
|
||||
@ -14,32 +15,38 @@
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Lecture d'une carte
|
||||
></path>
|
||||
</svg>
|
||||
Lecture d'une carte
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Interprétation générale
|
||||
></path>
|
||||
</svg>
|
||||
Interprétation générale
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Conseils rapides
|
||||
></path>
|
||||
</svg>
|
||||
Conseils rapides
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
|
||||
@click="goToShuffle"
|
||||
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--subtle-gold)] hover:text-[var(--midnight-blue)]"
|
||||
>
|
||||
Commencer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Carte Profilage (mise en avant) -->
|
||||
<div
|
||||
class="flex scale-105 flex-col gap-6 rounded-2xl bg-[var(--midnight-blue)] p-8 shadow-lg ring-2 ring-[var(--subtle-gold)] transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
|
||||
class="flex scale-105 flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--midnight-blue)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
|
||||
@ -50,32 +57,38 @@
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Lecture de trois cartes
|
||||
></path>
|
||||
</svg>
|
||||
Lecture de trois cartes
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Analyse personnalisée
|
||||
></path>
|
||||
</svg>
|
||||
Analyse personnalisée
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Recommandations ciblées
|
||||
></path>
|
||||
</svg>
|
||||
Recommandations ciblées
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)]"
|
||||
@click="goToShuffle"
|
||||
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:text-[var(--midnight-blue)]"
|
||||
>
|
||||
Découvrir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Carte Quadrige Doré -->
|
||||
<div
|
||||
class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
|
||||
class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
|
||||
@ -86,26 +99,30 @@
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Lecture de quatre cartes
|
||||
></path>
|
||||
</svg>
|
||||
Lecture de quatre cartes
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Exploration approfondie
|
||||
></path>
|
||||
</svg>
|
||||
Exploration approfondie
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path></svg
|
||||
>Stratégie complète
|
||||
></path>
|
||||
</svg>
|
||||
Stratégie complète
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
|
||||
@click="goToShuffle"
|
||||
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--subtle-gold)] hover:text-[var(--midnight-blue)]"
|
||||
>
|
||||
Explorer
|
||||
</button>
|
||||
@ -113,3 +130,10 @@
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { router } from '@inertiajs/vue3';
|
||||
|
||||
const goToShuffle = () => {
|
||||
router.visit('/tirage');
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -104,17 +104,7 @@ onMounted(() => {
|
||||
@click="goToShuffle"
|
||||
class="group relative flex h-12 min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-6 text-sm font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl"
|
||||
>
|
||||
<span class="relative z-10 flex items-center gap-2">
|
||||
Commencer
|
||||
<svg
|
||||
class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="relative z-10 flex items-center gap-2"> Commencer </span>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
></div>
|
||||
|
||||
@ -101,10 +101,16 @@ const clearHover = () => {
|
||||
@mouseenter="setHover(1)"
|
||||
@mouseleave="clearHover"
|
||||
>
|
||||
<!-- Card shine effect -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
|
||||
:class="{ 'opacity-100': hoveredCard === 1 }"
|
||||
></div>
|
||||
|
||||
<!-- Decorative elements -->
|
||||
<div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="relative z-10 text-center">
|
||||
<div class="mb-4 flex justify-center">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
|
||||
<svg
|
||||
@ -125,54 +131,43 @@ const clearHover = () => {
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
|
||||
<p class="mt-4 text-sm text-gray-600 md:text-base">
|
||||
<p class="mt-4 text-sm text-[var(--midnight-blue)]/80 md:text-base">
|
||||
Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
:disabled="isFreeDrawUsed"
|
||||
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
|
||||
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
@click="handleSelection(1)"
|
||||
>
|
||||
<span>Commencer</span>
|
||||
<svg
|
||||
v-if="!isFreeDrawUsed"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
<!-- Button shine effect -->
|
||||
<span
|
||||
class="absolute inset-0 -translate-x-full transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
|
||||
></span>
|
||||
<span class="relative">Commencer</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Premium option -->
|
||||
<div
|
||||
class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-br from-[var(--midnight-blue)] via-[#2d3748] to-[#1a202c] p-6 shadow-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl md:scale-[1.02] md:p-8"
|
||||
class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-br from-[var(--midnight-blue)] via-[#2a3446] to-[var(--midnight-blue)] p-6 shadow-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl md:scale-[1.02] md:p-8"
|
||||
@mouseenter="setHover(2)"
|
||||
@mouseleave="clearHover"
|
||||
>
|
||||
<!-- Premium badge -->
|
||||
<div class="absolute -top-3 left-1/2 z-20 -translate-x-1/2 transform">
|
||||
<span
|
||||
class="rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-4 py-1.5 text-xs font-bold tracking-wide text-[var(--midnight-blue)] uppercase shadow-sm"
|
||||
class="rounded-full bg-[var(--subtle-gold)] px-4 py-1.5 text-xs font-bold tracking-wide text-[var(--midnight-blue)] uppercase shadow-sm"
|
||||
>Populaire</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Shine effect on hover -->
|
||||
<!-- Card shine effect -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/15 to-transparent opacity-0 transition-opacity duration-500"
|
||||
:class="{ 'opacity-100': hoveredCard === 2 }"
|
||||
></div>
|
||||
|
||||
<!-- Subtle pattern overlay -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px] opacity-5"
|
||||
></div>
|
||||
|
||||
<div class="relative z-10 text-center">
|
||||
<div class="mb-4 flex justify-center">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 shadow-sm backdrop-blur-sm">
|
||||
@ -189,28 +184,19 @@ const clearHover = () => {
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white md:text-2xl">Profilage</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
|
||||
<p class="mt-4 text-sm text-gray-200 md:text-base">
|
||||
<p class="mt-4 text-sm text-[var(--linen)] md:text-base">
|
||||
Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:from-white hover:to-amber-50 hover:shadow-lg"
|
||||
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:shadow-lg"
|
||||
@click="handleSelection(3)"
|
||||
>
|
||||
<!-- Button shine effect -->
|
||||
<span
|
||||
class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/60 to-transparent transition-transform duration-700 group-hover:translate-x-full"
|
||||
class="absolute inset-0 -translate-x-full transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
|
||||
></span>
|
||||
<span class="relative z-10">Découvrir</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
<span class="relative">Découvrir</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -220,17 +206,19 @@ const clearHover = () => {
|
||||
@mouseenter="setHover(3)"
|
||||
@mouseleave="clearHover"
|
||||
>
|
||||
<!-- Gold corner accents -->
|
||||
<div class="absolute top-0 left-0 h-6 w-6 rounded-tl-lg border-t-2 border-l-2 border-[var(--subtle-gold)]"></div>
|
||||
<div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--subtle-gold)]"></div>
|
||||
<div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--subtle-gold)]"></div>
|
||||
<div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--subtle-gold)]"></div>
|
||||
<!-- Card shine effect -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
|
||||
:class="{ 'opacity-100': hoveredCard === 3 }"
|
||||
></div>
|
||||
<!-- Decorative elements -->
|
||||
<div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
|
||||
|
||||
<div class="text-center">
|
||||
<!-- Gold corner accents -->
|
||||
|
||||
<div class="relative z-10 text-center">
|
||||
<div class="mb-4 flex justify-center">
|
||||
<div
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[var(--light-ivory)] to-amber-50 shadow-sm"
|
||||
>
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-[var(--subtle-gold)]"
|
||||
@ -249,24 +237,19 @@ const clearHover = () => {
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
|
||||
<p class="mt-4 text-sm text-gray-600 md:text-base">
|
||||
<p class="mt-4 text-sm text-[var(--midnight-blue)]/80 md:text-base">
|
||||
Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-amber-50 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-amber-200 hover:text-[var(--midnight-blue)]"
|
||||
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300"
|
||||
@click="handleSelection(4)"
|
||||
>
|
||||
<span>Explorer</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
<!-- Button shine effect -->
|
||||
<span
|
||||
class="absolute inset-0 -translate-x-full transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
|
||||
></span>
|
||||
<span class="relative">Explorer</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user