root/KSA-ORACLE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix colo

Browse Source
This commit is contained in:
Nyavokevin 2025-10-02 16:20:02 +03:00
parent 86df097fe9
commit d8b0825c55
4 changed files with 91 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/components/landing/HeroSection.vue
View File

@ -58,13 +58,13 @@ const goToShuffle = () => {
<div class="relative z-10 flex max-w-3xl flex-col items-center gap-6 px-4"> <div class="relative z-10 flex max-w-3xl flex-col items-center gap-6 px-4">
<!-- Animated title --> <!-- Animated title -->
<h1 <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 }" :class="{ 'animate-fade-in-up': isMounted }"
style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)" style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
> >
Révélez Votre Révélez Votre
<span class="citadel-script relative text-6xl text-[var(--subtle-gold)] md:text-8xl"> <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 --> <!-- Gold underline accent -->
<span <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" 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> <span class="relative z-10 truncate">Découvrir Votre Oracle</span>
<!-- Animated arrow icon --> <!-- 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> </button>
</div> </div>
</div> </div>

72
resources/js/components/landing/OfferSection.vue
View File

@ -2,8 +2,9 @@
<section class="py-20 sm:py-24"> <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> <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"> <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Carte Lecture Gratuite -->
<div <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"> <div class="text-center">
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3> <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"> <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 <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" 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 ></path>
>Lecture d'une carte </svg>
Lecture d'une carte
</li> </li>
<li class="flex items-center gap-3"> <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"> <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 <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" 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 ></path>
>Interprétation générale </svg>
Interprétation générale
</li> </li>
<li class="flex items-center gap-3"> <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"> <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 <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" 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 ></path>
>Conseils rapides </svg>
Conseils rapides
</li> </li>
</ul> </ul>
<button <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 Commencer
</button> </button>
</div> </div>
<!-- Carte Profilage (mise en avant) -->
<div <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"> <div class="text-center">
<h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3> <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"> <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 <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" 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 ></path>
>Lecture de trois cartes </svg>
Lecture de trois cartes
</li> </li>
<li class="flex items-center gap-3"> <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"> <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 <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" 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 ></path>
>Analyse personnalisée </svg>
Analyse personnalisée
</li> </li>
<li class="flex items-center gap-3"> <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"> <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 <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" 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 ></path>
>Recommandations ciblées </svg>
Recommandations ciblées
</li> </li>
</ul> </ul>
<button <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 Découvrir
</button> </button>
</div> </div>
<!-- Carte Quadrige Doré -->
<div <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"> <div class="text-center">
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3> <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"> <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 <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" 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 ></path>
>Lecture de quatre cartes </svg>
Lecture de quatre cartes
</li> </li>
<li class="flex items-center gap-3"> <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"> <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 <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" 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 ></path>
>Exploration approfondie </svg>
Exploration approfondie
</li> </li>
<li class="flex items-center gap-3"> <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"> <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 <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" 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 ></path>
>Stratégie complète </svg>
Stratégie complète
</li> </li>
</ul> </ul>
<button <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 Explorer
</button> </button>
@ -113,3 +130,10 @@
</div> </div>
</section> </section>
</template> </template>
<script lang="ts" setup>
import { router } from '@inertiajs/vue3';
const goToShuffle = () => {
router.visit('/tirage');
};
</script>

12
resources/js/layouts/app/LandingLayout.vue
View File

@ -104,17 +104,7 @@ onMounted(() => {
@click="goToShuffle" @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" 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"> <span class="relative z-10 flex items-center gap-2"> Commencer </span>
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>
<div <div
class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div> ></div>

97
resources/js/pages/cards/cardSelection.vue
View File

@ -101,10 +101,16 @@ const clearHover = () => {
@mouseenter="setHover(1)" @mouseenter="setHover(1)"
@mouseleave="clearHover" @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 --> <!-- 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="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="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm"> <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
<svg <svg
@ -125,54 +131,43 @@ const clearHover = () => {
</div> </div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3> <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-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. Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
</p> </p>
</div> </div>
<button <button
:disabled="isFreeDrawUsed" :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)" @click="handleSelection(1)"
> >
<span>Commencer</span> <!-- Button shine effect -->
<svg <span
v-if="!isFreeDrawUsed" 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"
xmlns="http://www.w3.org/2000/svg" ></span>
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1" <span class="relative">Commencer</span>
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> </button>
</div> </div>
<!-- Premium option --> <!-- Premium option -->
<div <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)" @mouseenter="setHover(2)"
@mouseleave="clearHover" @mouseleave="clearHover"
> >
<!-- Premium badge --> <!-- Premium badge -->
<div class="absolute -top-3 left-1/2 z-20 -translate-x-1/2 transform"> <div class="absolute -top-3 left-1/2 z-20 -translate-x-1/2 transform">
<span <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 >Populaire</span
> >
</div> </div>
<!-- Shine effect on hover --> <!-- Card shine effect -->
<div <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 }" :class="{ 'opacity-100': hoveredCard === 2 }"
></div> ></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="relative z-10 text-center">
<div class="mb-4 flex justify-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"> <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> </div>
<h3 class="text-xl font-bold text-white md:text-2xl">Profilage</h3> <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-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. Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
</p> </p>
</div> </div>
<button <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)" @click="handleSelection(3)"
> >
<!-- Button shine effect --> <!-- Button shine effect -->
<span <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>
<span class="relative z-10">Découvrir</span> <span class="relative">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>
</button> </button>
</div> </div>
@ -220,17 +206,19 @@ const clearHover = () => {
@mouseenter="setHover(3)" @mouseenter="setHover(3)"
@mouseleave="clearHover" @mouseleave="clearHover"
> >
<!-- Gold corner accents --> <!-- Card shine effect -->
<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
<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> 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"
<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> :class="{ 'opacity-100': hoveredCard === 3 }"
<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> ></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="mb-4 flex justify-center">
<div <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
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"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]" class="h-6 w-6 text-[var(--subtle-gold)]"
@ -249,24 +237,19 @@ const clearHover = () => {
</div> </div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3> <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-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. Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
</p> </p>
</div> </div>
<button <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)" @click="handleSelection(4)"
> >
<span>Explorer</span> <!-- Button shine effect -->
<svg <span
xmlns="http://www.w3.org/2000/svg" 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"
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1" ></span>
fill="none" <span class="relative">Explorer</span>
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> </button>
</div> </div>
</div> </div>