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

english
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Nyavokevin 2025-10-13 19:28:06 +03:00
parent 90b8137b4d
commit 113573866d
14 changed files with 376 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/StripeController.php
View File

@ -29,8 +29,8 @@ class StripeController extends Controller
$clientSessionId = Str::uuid(); $clientSessionId = Str::uuid();
$priceIds = [ $priceIds = [
3 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j', 6 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
21 => 'price_1S5464GaZ3yeYkzWh8RuJfab', 18 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
]; ];
if (!isset($priceIds[$count])) { if (!isset($priceIds[$count])) {

4
resources/css/app.css
View File

@ -9,8 +9,8 @@
@theme inline { @theme inline {
--font-title: 'Montserrat ExtraBold', sans-serif; --font-title: 'Montserrat ExtraBold', sans-serif;
--font-sub-title: 'Poppins', cursive; --font-sub-title: 'Roboto', sans-serif;
--font-text: 'Roboto', sans-serif; --font-text: 'Poppins', cursive;
--font-body: var(--font-text); --font-body: var(--font-text);
--font-heading: var(--font-title); --font-heading: var(--font-title);

18
resources/js/components/landing/CallBookingSection.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<section class="relative overflow-hidden py-20 sm:py-24"> <section class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden py-20 sm:py-24">
<!-- Background image with overlay --> <!-- Background image with overlay -->
<div class="absolute inset-0"> <div class="absolute inset-0">
<img src="/image005.jpg" alt="Background" class="h-full w-full object-cover" /> <img src="/image005.jpg" alt="Background" class="h-full w-full object-cover" />
@ -11,11 +11,9 @@
<div class="relative z-10 mx-auto max-w-5xl px-4"> <div class="relative z-10 mx-auto max-w-5xl px-4">
<div <div
class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12" class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
> >
<!-- Soft radial glows --> <!-- Soft radial glows -->
<div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[#4c1d95]/25 blur-3xl"></div>
<div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[#f59e0b]/20 blur-3xl"></div>
<!-- Subtle pattern overlay --> <!-- Subtle pattern overlay -->
<div class="absolute inset-0 opacity-10 mix-blend-soft-light"> <div class="absolute inset-0 opacity-10 mix-blend-soft-light">
@ -26,13 +24,13 @@
<div class="relative z-10 flex flex-col items-center"> <div class="relative z-10 flex flex-col items-center">
<span <span
class="mb-4 inline-flex items-center rounded-full bg-[#4c1d95]/40 px-3 py-1 text-xs font-bold tracking-wider text-white/90 ring-1 ring-[#4c1d95]/40 backdrop-blur-sm" class="rounded-fullbg-gradient-to-br mb-4 inline-flex items-center from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
>Consultation</span >Consultation</span
> >
<h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2> <h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplify Your Oracle</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md"> <p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md">
Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange. For deeper guidance, book a personalized consultation with Kris.
</p> </p>
<div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"> <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
@ -40,7 +38,7 @@
@click="goToBooking" @click="goToBooking"
class="gold-trail-btn relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#f59e0b] to-[#eab308] px-8 font-bold tracking-wide text-[#1e1b4b] shadow-lg transition-all duration-300 hover:shadow-[#f59e0b]/40" class="gold-trail-btn relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#f59e0b] to-[#eab308] px-8 font-bold tracking-wide text-[#1e1b4b] shadow-lg transition-all duration-300 hover:shadow-[#f59e0b]/40"
> >
<span class="relative z-10">Réserver une Consultation</span> <span class="relative z-10">Book a Consultation Discover the Readings</span>
<span <span
class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[100%]" class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[100%]"
></span> ></span>
@ -49,11 +47,11 @@
@click="goToOffers" @click="goToOffers"
class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[#4c1d95] bg-transparent px-8 font-bold text-white backdrop-blur-sm transition-all hover:bg-[#4c1d95]" class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[#4c1d95] bg-transparent px-8 font-bold text-white backdrop-blur-sm transition-all hover:bg-[#4c1d95]"
> >
Découvrir les Lectures Book a Consultation
</button> </button>
</div> </div>
<p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Paiements sécurisés. Annulation possible 24h avant la session.</p> <p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Secure payment.</p>
</div> </div>
</div> </div>
</div> </div>

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

@ -48,20 +48,20 @@
: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)"
> >
Découvrez Votre Discover Your
<span class="relative text-6xl text-purple-300 md:text-8xl"> <span class="relative text-6xl text-purple-300 md:text-8xl">
<span class="purple-glow">Chemin</span> <span class="purple-glow">Mystical</span>
<!-- Purple underline accent --> <!-- Purple underline accent -->
</span> </span>
Mystique Path
</h1> </h1>
<p <p
class="mx-auto mb-8 max-w-2xl text-center text-lg text-white/80 transition-all delay-500 duration-1000 md:text-xl" class="mx-auto mb-8 max-w-2xl text-center text-lg text-white/80 transition-all delay-500 duration-1000 md:text-xl"
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }" :class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
> >
Débloquez la sagesse de l'univers grâce à des lectures de cartes oracle personnalisées. Choisissez votre tirage et commencez votre Unlock the wisdom of the universe with personalized oracle card readings. Choose your spread and begin your journey of
voyage de découverte de soi. self-discovery.
</p> </p>
<!-- Buttons --> <!-- Buttons -->
@ -81,7 +81,7 @@
class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]" class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]"
></span> ></span>
<span class="relative z-10 flex items-center gap-2 truncate"> Découvrir Mon Tirage Gratuit </span> <span class="relative z-10 flex items-center gap-2 truncate"> Reveal my free reading </span>
<!-- Animated arrow icon --> <!-- Animated arrow icon -->
</button> </button>
@ -91,8 +91,8 @@
class="text-center transition-all delay-700 duration-1000" class="text-center transition-all delay-700 duration-1000"
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }" :class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
> >
<p class="text-sm text-white/60 md:text-base"> <p class="text-sm text-white/80 md:text-base">
🎴 <span class="font-semibold text-purple-300">Votre première carte est offerte</span> - Aucune carte bancaire requise 🎴 <span class="font-semibold text-purple-300"> Get your first reading free</span> - No credit card required
</p> </p>
</div> </div>
</div> </div>

270
resources/js/components/landing/HowSection.vue
View File

@ -1,16 +1,21 @@
<template> <template>
<section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.10), rgba(76, 29, 149, 0.05));"> <section
<!-- Single elegant background image --> class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden bg-gradient-to-b from-black via-[#1a0b2e] to-black py-20 sm:py-24"
<div class="absolute inset-0"> style="background: linear-gradient(to bottom, #1a0b2e, #2d1b69, #1a0b2e)"
<div class="absolute inset-0 bg-[url('/image002.jpg')] bg-cover bg-center opacity-20 mix-blend-soft-light"></div> >
<!-- Full width background image with better visibility -->
<div class="absolute inset-0 w-screen">
<div class="absolute inset-0 w-screen bg-[url('/image002.jpg')] bg-cover bg-center opacity-40 mix-blend-soft-light"></div>
<!-- Dark overlay for better text contrast -->
<div class="absolute inset-0 w-screen bg-[#1a0b2e]/40"></div>
</div> </div>
<!-- Subtle floating elements --> <!-- Subtle floating elements -->
<div class="pointer-events-none absolute inset-0 overflow-hidden"> <div class="pointer-events-none absolute inset-0 w-screen overflow-hidden">
<div <div
v-for="i in 12" v-for="i in 12"
:key="'float-' + i" :key="'float-' + i"
class="absolute opacity-10" class="absolute opacity-15"
:class="{ :class="{
'text-[var(--c-gold)]': i % 3 === 0, 'text-[var(--c-gold)]': i % 3 === 0,
'text-[var(--c-purple)]': i % 3 === 1, 'text-[var(--c-purple)]': i % 3 === 1,
@ -28,130 +33,133 @@
</div> </div>
</div> </div>
<h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 md:text-5xl"> <!-- Container with full width content -->
<span class="relative inline-block"> <div class="relative w-full">
Comment cela fonctionne <h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 md:text-5xl">
<span class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></span> <span class="relative inline-block">
</span> How It Works ?
</h2> <span class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></span>
</span>
</h2>
<div class="relative mx-auto max-w-4xl"> <div class="relative mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
<!-- Elegant connecting line --> <!-- Elegant connecting line -->
<div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2"> <div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2">
<div class="relative h-full w-full"> <div class="relative h-full w-full">
<div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-40"></div> <div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60"></div>
<div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div> <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/20 to-transparent"></div>
</div>
</div> </div>
<!-- Minimal orbs along the line -->
<div
v-for="i in 3"
:key="'orb-' + i"
class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-90 shadow-lg"
:style="{
top: `${i * 33}%`,
}"
></div>
<div class="relative z-10 flex flex-col gap-16">
<!-- Step 1 -->
<div class="group flex items-center gap-8">
<div class="relative flex-shrink-0">
<div
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
>
<span class="z-10">1</span>
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
></div>
</div>
<!-- Subtle sparkles -->
<div
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
<span>Choose Your Reading </span>
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
</h3>
<p
class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
>
Select the type of reading that matches your current needs and aspirations.
</p>
</div>
</div>
<!-- Step 2 -->
<div class="group flex items-center justify-end gap-8 text-right">
<div class="transform pr-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
<span>Receive Your Interpretation</span>
</h3>
<p
class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
>
Get a personalized, detailed analysis of your spread delivered straight to your inbox.
</p>
</div>
<div class="relative flex-shrink-0">
<div
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
>
<span class="z-10">2</span>
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
></div>
</div>
<!-- Subtle sparkles -->
<div
class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
</div>
<!-- Step 3 -->
<div class="group flex items-center gap-8">
<div class="relative flex-shrink-0">
<div
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
>
<span class="z-10">3</span>
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
></div>
</div>
<!-- Subtle sparkles -->
<div
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
<span>Apply the Wisdom </span>
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
</h3>
<p
class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
>
Put the guidance and insights into practice to transform your daily life.
</p>
</div>
</div>
</div>
<!-- Subtle decorative elements -->
<div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/20 blur-xl"></div>
<div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/30 blur-xl"></div>
</div> </div>
<!-- Minimal orbs along the line -->
<div
v-for="i in 3"
:key="'orb-' + i"
class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-80"
:style="{
top: `${i * 33}%`,
}"
></div>
<div class="relative z-10 flex flex-col gap-16">
<!-- Step 1 -->
<div class="group flex items-center gap-8">
<div class="relative flex-shrink-0">
<div
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
>
<span class="z-10">1</span>
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
></div>
</div>
<!-- Subtle sparkles -->
<div
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
<span>Choisissez Votre Lecture</span>
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
</h3>
<p
class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
>
Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
</p>
</div>
</div>
<!-- Step 2 -->
<div class="group flex items-center justify-end gap-8 text-right">
<div class="transform pr-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
<span>Recevez Votre Interprétation</span>
</h3>
<p
class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
>
Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
</p>
</div>
<div class="relative flex-shrink-0">
<div
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
>
<span class="z-10">2</span>
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
></div>
</div>
<!-- Subtle sparkles -->
<div
class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
</div>
<!-- Step 3 -->
<div class="group flex items-center gap-8">
<div class="relative flex-shrink-0">
<div
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
>
<span class="z-10">3</span>
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
></div>
</div>
<!-- Subtle sparkles -->
<div
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
<span>Appliquez la Sagesse</span>
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
</h3>
<p
class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
>
Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
</p>
</div>
</div>
</div>
<!-- Subtle decorative elements -->
<div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
<div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/20 blur-xl"></div>
</div> </div>
</section> </section>
</template> </template>
@ -195,21 +203,21 @@ export default {
0%, 0%,
100% { 100% {
transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg);
opacity: 0.1; opacity: 0.15;
} }
50% { 50% {
transform: translateY(-10px) rotate(180deg); transform: translateY(-10px) rotate(180deg);
opacity: 0.3; opacity: 0.4;
} }
} }
@keyframes pulse-slow { @keyframes pulse-slow {
0%, 0%,
100% { 100% {
opacity: 0.4; opacity: 0.6;
} }
50% { 50% {
opacity: 0.8; opacity: 1;
} }
} }

12
resources/js/components/landing/ManuscritSection.vue
View File

@ -10,12 +10,12 @@
<div class="relative z-10"> <div class="relative z-10">
<h2 class="transform text-4xl font-bold text-[var(--midnight-blue)] transition-all duration-700 md:text-5xl"> <h2 class="transform text-4xl font-bold text-[var(--midnight-blue)] transition-all duration-700 md:text-5xl">
<span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-[var(--midnight-blue)]/90"> <span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-[var(--midnight-blue)]/90">
Plus Qu’un Guide, Beyond a Guide,
</span> </span>
<span class="citadel-script mt-2 block from-yellow-400 to-purple-500 text-5xl md:mt-0 md:ml-2 md:inline-block md:text-6xl"> <span class="citadel-script mt-2 block from-yellow-400 to-purple-500 text-5xl md:mt-0 md:ml-2 md:inline-block md:text-6xl">
<span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Un</span> <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">A</span>
<span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110">Manuscrit</span> <span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110">Strategic</span>
<span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Stratégique</span> <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Manuscript</span>
</span> </span>
</h2> </h2>
@ -49,10 +49,10 @@
<p class="mx-auto mt-6 max-w-3xl transform text-lg text-[var(--midnight-blue)]/80 transition-all delay-200 duration-1000"> <p class="mx-auto mt-6 max-w-3xl transform text-lg text-[var(--midnight-blue)]/80 transition-all delay-200 duration-1000">
<span class="inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]"> <span class="inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
L'Oracle de Kris Saint Ange est une boussole pour votre voyage personnel et professionnel. Kris Saint Ange’s Oracle is a compass for your personal and professional journey.
</span> </span>
<span class="mt-2 inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]"> <span class="mt-2 inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
Chaque carte est une clé pour débloquer votre potentiel et prendre des décisions éclairées. Each card is a key to unlocking your potential and making enlightened decisions.
</span> </span>
</p> </p>
</div> </div>

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

@ -34,7 +34,7 @@
<div class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3"> <div class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
<!-- Free Tier --> <!-- Free Tier -->
<div <div
class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl" class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
> >
<!-- Animated border effect --> <!-- Animated border effect -->
<div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100"> <div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100">
@ -51,11 +51,9 @@
</div> </div>
<div class="relative z-10 text-center"> <div class="relative z-10 text-center">
<h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-purple-300"> <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-purple-300">Free Reading</h3>
Lecture Gratuite
</h3>
<div class="relative mt-2 inline-block"> <div class="relative mt-2 inline-block">
<p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Gratuit</p> <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Free</p>
<div <div
class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-500 group-hover:opacity-100" class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-500 group-hover:opacity-100"
> >
@ -93,7 +91,7 @@
<button <button
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg" class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
> >
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Commencer</span> <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">BEGIN</span>
<svg <svg
class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
fill="none" fill="none"
@ -140,10 +138,10 @@
<div class="relative z-10 text-center"> <div class="relative z-10 text-center">
<h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-[var(--c-gold)]"> <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-[var(--c-gold)]">
Profilage Insight Profile
</h3> </h3>
<div class="relative mt-2 inline-block"> <div class="relative mt-2 inline-block">
<p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">29€</p> <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">9.99 €</p>
<div <div
class="absolute -inset-2 rounded-full bg-[var(--c-gold)]/20 opacity-0 blur-md transition-opacity duration-500 group-hover:opacity-100" class="absolute -inset-2 rounded-full bg-[var(--c-gold)]/20 opacity-0 blur-md transition-opacity duration-500 group-hover:opacity-100"
></div> ></div>
@ -178,7 +176,7 @@
<button <button
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-600 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-600 group-hover:to-yellow-400 group-hover:shadow-lg" class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-600 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-600 group-hover:to-yellow-400 group-hover:shadow-lg"
> >
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Découvrir</span> <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">DISCOVER</span>
<svg <svg
class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
fill="none" fill="none"
@ -195,7 +193,7 @@
<!-- Premium Tier --> <!-- Premium Tier -->
<div <div
class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl" class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
> >
<!-- Golden particles --> <!-- Golden particles -->
<div <div
@ -218,10 +216,10 @@
<div class="relative z-10 text-center"> <div class="relative z-10 text-center">
<h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-[var(--c-gold)]"> <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-[var(--c-gold)]">
Tirage complet de cartes Full card spread
</h3> </h3>
<div class="relative mt-2 inline-block"> <div class="relative mt-2 inline-block">
<p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">99€</p> <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">15.90 €</p>
<div class="absolute inset-0 flex items-center justify-center"> <div class="absolute inset-0 flex items-center justify-center">
<div <div
class="animate-spin-slow h-20 w-20 rounded-full border border-[var(--c-gold)]/30 opacity-0 transition-opacity duration-700 group-hover:opacity-100" class="animate-spin-slow h-20 w-20 rounded-full border border-[var(--c-gold)]/30 opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@ -258,7 +256,7 @@
<button <button
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg" class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
> >
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Explorer</span> <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">EXPLORE</span>
<svg <svg
class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
fill="none" fill="none"
@ -278,11 +276,11 @@
<script setup lang="ts"> <script setup lang="ts">
// Define features for each tier // Define features for each tier
const freeFeatures = ["Lecture d'une carte", 'Interprétation générale', 'Conseils rapides']; const freeFeatures = ['Single‑card Reading', 'General Interpretation', 'Quick Tips'];
const featuredFeatures = ['Lecture de trois cartes', 'Analyse personnalisée', 'Recommandations ciblées']; const featuredFeatures = ['six‑card Reading', 'Personalized Analysis', 'Tailored Recommendations'];
const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie', 'Stratégie complète']; const premiumFeatures = ['Eigtheen‑card reading', 'In‑depth exploration', 'Complete strategy'];
</script> </script>
<style scoped> <style scoped>

10
resources/js/components/landing/TestimonialsSection.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<section class="py-20 sm:py-24" id="testimonials" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.1), rgba(76, 29, 149, 0.05))"> <section class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden py-20 sm:py-24" id="testimonials">
<h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl"> <h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
Ce Que Nos Initiés Disent Testimonials from Our Initiates
</h2> </h2>
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3"> <div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial 1 --> <!-- Testimonial 1 -->
<div <div
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl" class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
> >
<div <div
class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100" class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@ -60,7 +60,7 @@
<!-- Testimonial 2 --> <!-- Testimonial 2 -->
<div <div
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl" class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
> >
<div <div
class="absolute inset-0 bg-gradient-to-br from-transparent via-[#f59e0b]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100" class="absolute inset-0 bg-gradient-to-br from-transparent via-[#f59e0b]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@ -116,7 +116,7 @@
<!-- Testimonial 3 --> <!-- Testimonial 3 -->
<div <div
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl" class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
> >
<div <div
class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100" class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"

9
resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
View File

@ -233,7 +233,7 @@ defineExpose({ setDrawnCards });
<div class="progress-bar"> <div class="progress-bar">
<div class="progress-fill" :style="{ width: `${autoDrawProgress}%` }"></div> <div class="progress-fill" :style="{ width: `${autoDrawProgress}%` }"></div>
</div> </div>
<div class="progress-text">Distribution automatique en cours... {{ Math.round(autoDrawProgress) }}%</div> <div class="progress-text">Automatic distribution in progress... {{ Math.round(autoDrawProgress) }}%</div>
</div> </div>
<!-- Always show the card stack --> <!-- Always show the card stack -->
@ -254,8 +254,7 @@ defineExpose({ setDrawnCards });
<!-- Auto-draw prompt --> <!-- Auto-draw prompt -->
<div v-if="shouldAutoDraw && !isAutoDrawing && revealedCards.length === 0" class="auto-draw-prompt"> <div v-if="shouldAutoDraw && !isAutoDrawing && revealedCards.length === 0" class="auto-draw-prompt">
<div class="prompt-icon">✨</div> <div class="prompt-text">Click for automatic distribution</div>
<div class="prompt-text">Cliquez pour une distribution automatique</div>
</div> </div>
<div v-for="i in remainingDeckSize" :key="i" class="card group/card" :style="getCardStyle(i)" @click="onCardClick(i, $event)"> <div v-for="i in remainingDeckSize" :key="i" class="card group/card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
@ -290,13 +289,13 @@ defineExpose({ setDrawnCards });
@click="goToSelection" @click="goToSelection"
class="group mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 text-base font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 hover:from-[var(--c-purple)]/40 hover:to-[var(--c-purple)]/50 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60" class="group mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 text-base font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 hover:from-[var(--c-purple)]/40 hover:to-[var(--c-purple)]/50 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60"
> >
<span class="transition-transform duration-300 group-hover:translate-x-1">Retourner à la sélection des cartes</span> <span class="transition-transform duration-300 group-hover:translate-x-1">Return to card selection</span>
</button> </button>
<button <button
@click="goToResult" @click="goToResult"
class="group mt-4 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-base font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:cursor-not-allowed disabled:opacity-60" class="group mt-4 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-base font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:cursor-not-allowed disabled:opacity-60"
> >
<span class="relative z-10">Résultat du tirage</span> <span class="relative z-10">Draw result</span>
<svg <svg
class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
fill="none" fill="none"

6
resources/js/components/template/CardShuffleTemplate.vue
View File

@ -3,10 +3,10 @@
<!-- Header / intro kept centered and constrained --> <!-- Header / intro kept centered and constrained -->
<div class="relative z-10 mx-auto max-w-4xl text-center"> <div class="relative z-10 mx-auto max-w-4xl text-center">
<h1 class="text-5xl font-bold text-[var(--midnight-blue)] md:text-6xl"> <h1 class="text-5xl font-bold text-[var(--midnight-blue)] md:text-6xl">
L'Oracle de votre<span class="citadel-script ml-4 text-6xl text-[var(--spiritual-earth)] md:text-7xl">Destinée</span> The Oracle of your<span class="citadel-script ml-4 text-6xl text-[var(--spiritual-earth)] md:text-7xl">Destiny</span>
</h1> </h1>
<p class="mt-4 mx-auto max-w-2xl text-lg text-[var(--midnight-blue)]/80"> <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--midnight-blue)]/80">
Puisez dans la sagesse ancestrale pour éclairer votre chemin. Tirez une carte et recevez le message qui vous est destiné aujourd'hui. Draw on ancient wisdom to light your path. Draw a card and receive the message intended for you today.
</p> </p>
</div> </div>

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

@ -24,7 +24,7 @@ onMounted(() => {
<template> <template>
<div <div
class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black" class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black"
style="background: linear-gradient(135deg, #1e1b4b, #4c1d95, #000000);" style="background: linear-gradient(135deg, #1e1b4b, #4c1d95, #000000)"
> >
<div class="layout-container flex h-full grow flex-col"> <div class="layout-container flex h-full grow flex-col">
<!-- Enhanced Header with Bigger Font --> <!-- Enhanced Header with Bigger Font -->
@ -46,7 +46,7 @@ onMounted(() => {
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]" class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/" href="/"
> >
Accueil Home
<span <span
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full" class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span> ></span>
@ -55,7 +55,7 @@ onMounted(() => {
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]" class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/tirage" href="/tirage"
> >
Tirages Readings
<span <span
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full" class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span> ></span>
@ -64,7 +64,7 @@ onMounted(() => {
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]" class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/#testimonials" href="/#testimonials"
> >
Témoignages Testimonials
<span <span
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full" class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span> ></span>
@ -75,7 +75,7 @@ onMounted(() => {
class="mystic-btn mystic-btn-primary group relative hidden h-12 min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex" class="mystic-btn mystic-btn-primary group relative hidden h-12 min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex"
@click="goToBooking" @click="goToBooking"
> >
<span class="relative z-10 truncate">Réserver</span> <span class="relative z-10 truncate">Book</span>
<span <span
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]" class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
></span> ></span>
@ -151,7 +151,7 @@ onMounted(() => {
<img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" /> <img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" />
</div> </div>
<p class="mt-4 max-w-sm text-base leading-relaxed text-white/70 sm:text-lg"> <p class="mt-4 max-w-sm text-base leading-relaxed text-white/70 sm:text-lg">
Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé. Guidance and clarity through inspired readings and personalized support.
</p> </p>
<div class="mt-6 flex gap-3"> <div class="mt-6 flex gap-3">
<a class="social-icon group" href="#" aria-label="Instagram"> <a class="social-icon group" href="#" aria-label="Instagram">
@ -181,27 +181,27 @@ onMounted(() => {
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4> <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4>
<ul class="space-y-3 text-base sm:space-y-4"> <ul class="space-y-3 text-base sm:space-y-4">
<li> <li>
<Link class="footer-link group" href="/">Accueil</Link> <Link class="footer-link group" href="/">Home</Link>
</li> </li>
<li> <li>
<a class="footer-link group" href="#testimonials">Témoignages</a> <a class="footer-link group" href="#testimonials">Testimonials</a>
</li> </li>
<li> <li>
<Link class="footer-link group" href="/tirage">Lectures</Link> <Link class="footer-link group" href="/tirage">Readings</Link>
</li> </li>
<li> <li>
<Link class="footer-link group" href="/rendez-vous">Rendez-vous</Link> <Link class="footer-link group" href="/rendez-vous">Book</Link>
</li> </li>
</ul> </ul>
</div> </div>
<div> <div>
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Légal</h4> <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Legal</h4>
<ul class="space-y-3 text-base sm:space-y-4"> <ul class="space-y-3 text-base sm:space-y-4">
<li> <li>
<Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link> <Link class="footer-link group" href="/politique-confidalite">Confidentiality</Link>
</li> </li>
<li> <li>
<Link class="footer-link group" href="/term-condition">Conditions</Link> <Link class="footer-link group" href="/term-condition">Terms</Link>
</li> </li>
</ul> </ul>
</div> </div>
@ -211,28 +211,28 @@ onMounted(() => {
<div class="md:col-span-1 lg:col-span-1"> <div class="md:col-span-1 lg:col-span-1">
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4> <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4>
<p class="mb-4 text-base leading-relaxed text-white/70 sm:text-lg"> <p class="mb-4 text-base leading-relaxed text-white/70 sm:text-lg">
Recevez des inspirations et offres directement dans votre boîte mail. Receive inspiration and offers directly in your inbox.
</p> </p>
<form <form
class="mt-2 flex max-w-md flex-col gap-2 overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm sm:flex-row" class="mt-2 flex max-w-md flex-col gap-2 overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm sm:flex-row"
> >
<input <input
type="email" type="email"
placeholder="Votre e-mail" placeholder="Your e-mail"
class="w-full bg-transparent px-4 py-3 text-base text-white placeholder-white/50 focus:outline-none" class="w-full bg-transparent px-4 py-3 text-base text-white placeholder-white/50 focus:outline-none"
/> />
<button <button
type="button" type="button"
class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-base font-bold whitespace-nowrap text-white transition-all" class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-base font-bold whitespace-nowrap text-white transition-all"
> >
S'abonner Subscribe
</button> </button>
</form> </form>
</div> </div>
</div> </div>
<div class="mt-8 border-t border-white/10 pt-6 text-center text-sm text-white/60 sm:mt-12 sm:text-base"> <div class="mt-8 border-t border-white/10 pt-6 text-center text-sm text-white/60 sm:mt-12 sm:text-base">
© 2024 Kris Saint Ange. Tous droits réservés. © 2025 Kris Saint Ange. All rights reserved.
</div> </div>
</div> </div>
</footer> </footer>

86
resources/js/pages/cards/FreeCardResult.vue
View File

@ -112,22 +112,80 @@
<div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div> <div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
<div class="relative z-10"> <div class="relative z-10">
<!-- En-tête -->
<div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm"> <div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
<span class="text-2xl">💫</span> <span class="text-2xl">🔮</span>
<span class="text-lg font-bold text-white">Guidance Approfondie</span> <span class="text-lg font-bold text-white">Pathfinder Offer</span>
</div>
<!-- Contenu principal -->
<div class="space-y-6 text-left">
<!-- Introduction -->
<div class="text-center">
<h3 class="mb-4 font-title text-xl font-bold text-white md:text-2xl">Dear Explorer of Symbols,</h3>
<p class="leading-relaxed text-white/80">
These revelations are only a prelude to what we could accomplish in a direct consultation. Because the arcana:
</p>
</div>
<!-- Points clés -->
<div class="space-y-3">
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">•</span>
<p class="text-white/80"><strong>Adapt</strong> to your voice and micro-expressions</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">•</span>
<p class="text-white/80"><strong>Deepen</strong> through intuitive real-time dialogue</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">•</span>
<p class="text-white/80"><strong>Transmute</strong> into a tailored action plan</p>
</div>
</div>
<!-- Offre -->
<div class="space-y-4">
<div class="flex items-center space-x-3">
<span class="text-xl text-[var(--c-gold)]">➤</span>
<h4 class="font-title text-lg font-bold text-white">Pathfinder Offer:</h4>
</div>
<p class="text-white/80">Receive an in‑depth analysis where we will:</p>
<div class="space-y-3 pl-4">
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">1.</span>
<p class="text-white/80">Decode the synchronicities between your reading and the one we'll do together</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">2.</span>
<p class="text-white/80">Activate the hidden bridges between past, present, and future</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">3.</span>
<p class="text-white/80">Crystallize a strategic compass for your next choices</p>
</div>
</div>
</div>
</div>
<!-- Bouton CTA et informations -->
<div class="mt-8 space-y-4">
<button
@click="goToBooking"
class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
>
<span class="relative z-10">Book my amplified session here</span>
<span
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
></span>
</button>
<!-- Informations tarif et durée -->
<div class="space-y-2">
<p class="text-sm font-semibold text-[var(--c-gold)]">Limited to 15 days</p>
<p class="text-lg font-bold text-white">Special rate for digital reading holders: €390</p>
</div>
</div> </div>
<p class="relative z-10 mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">
Pour une analyse personnalisée et une guidance plus approfondie, réservez une consultation privée avec Kris Saint Ange.
</p>
<button
@click="goToBooking"
class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
>
<span class="relative z-10">Réserver une Consultation</span>
<span
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
></span>
</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -73,14 +73,14 @@ const clearHover = () => {
<template> <template>
<section class="px-4 py-16 sm:py-20"> <section class="px-4 py-16 sm:py-20">
<h2 class="mb-12 text-center text-3xl font-bold text-white md:text-4xl lg:text-5xl"> <h2 class="mb-12 text-center text-3xl font-bold text-white md:text-4xl lg:text-5xl">
Explorez Nos <span class="text-[var(--c-gold)]">Lectures</span> Explore Our <span class="text-[var(--c-gold)]">Readings</span>
</h2> </h2>
<p <p
v-if="isFreeDrawUsed" v-if="isFreeDrawUsed"
class="mx-auto mb-8 max-w-2xl rounded-lg border border-[var(--c-gold)]/30 bg-gray-900 p-4 text-center text-lg font-semibold text-[var(--c-gold)]" class="mx-auto mb-8 max-w-2xl rounded-lg border border-[var(--c-gold)]/30 bg-gray-900 p-4 text-center text-lg font-semibold text-[var(--c-gold)]"
> >
Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer. You've used your free print! Choose a paid option to continue.
</p> </p>
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3"> <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
@ -125,18 +125,16 @@ const clearHover = () => {
</svg> </svg>
</div> </div>
</div> </div>
<h3 class="text-xl font-bold text-white md:text-2xl">Lecture Gratuite</h3> <h3 class="text-xl font-bold text-white md:text-2xl">Free Reading</h3>
<p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">Gratuit</p> <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">Free</p>
<p class="mt-4 text-sm text-gray-300 md:text-base"> <p class="mt-4 text-sm text-gray-300 md:text-base">Single‑card Reading General Interpretation Quick Tips</p>
Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
</p>
</div> </div>
<button <button
:disabled="isFreeDrawUsed" :disabled="isFreeDrawUsed"
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 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-gradient-to-r from-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
@click="handleSelection(1)" @click="handleSelection(1)"
> >
<span class="relative z-10">Commencer</span> <span class="relative z-10">Begin</span>
<div <div
class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div> ></div>
@ -189,21 +187,19 @@ const clearHover = () => {
</svg> </svg>
</div> </div>
</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">Insight Profile</h3>
<p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">29€</p> <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">9.99 €</p>
<p class="mt-4 text-sm text-gray-200 md:text-base"> <p class="mt-4 text-sm text-gray-200 md:text-base">six‑card Reading Personalized Analysis Tailored Recommendations</p>
Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
</p>
</div> </div>
<button <button
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--c-gold)] px-6 font-bold tracking-wide text-black transition-all duration-300 hover:bg-white hover:shadow-lg" class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--c-gold)] px-6 font-bold tracking-wide text-black transition-all duration-300 hover:bg-white hover:shadow-lg"
@click="handleSelection(3)" @click="handleSelection(6)"
> >
<!-- 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/40 to-transparent transition-transform duration-700 group-hover:translate-x-full" class="absolute inset-0 -translate-x-full -skew-x-12 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 z-10">Discover</span>
<svg <svg
xmlns="http://www.w3.org/2000/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" class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
@ -254,17 +250,15 @@ const clearHover = () => {
</svg> </svg>
</div> </div>
</div> </div>
<h3 class="text-xl font-bold text-white md:text-2xl">Tirage complet</h3> <h3 class="text-xl font-bold text-white md:text-2xl">Full card spread</h3>
<p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">99€</p> <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">99€</p>
<p class="mt-4 text-sm text-gray-300 md:text-base"> <p class="mt-4 text-sm text-gray-300 md:text-base">Eigtheen‑card reading In‑depth exploration Complete strategy</p>
Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
</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-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white" class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white"
@click="handleSelection(21)" @click="handleSelection(18)"
> >
<span class="relative z-10">Explorer</span> <span class="relative z-10">EXPLORE</span>
<div <div
class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div> ></div>

121
resources/js/pages/cards/resultat.vue
View File

@ -131,51 +131,92 @@ onMounted(async () => {
<!-- Consultation CTA --> <!-- Consultation CTA -->
<div <div
v-if="!loading && !error && hasCards" v-if="!loading && !error"
class="relative mx-auto max-w-4xl overflow-hidden rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-purple-800/30 p-8 shadow-2xl backdrop-blur-sm md:p-12" class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-10 text-center shadow-2xl backdrop-blur-lg md:p-12"
> >
<!-- Background decoration --> <!-- Animated background -->
<div <div
class="absolute top-0 right-0 h-32 w-32 translate-x-16 -translate-y-16 rounded-full bg-gradient-to-br from-purple-700/20 to-purple-600/10" class="animate-pulse-slow absolute inset-0 bg-gradient-to-r from-[var(--c-purple)]/10 via-transparent to-[var(--c-gold)]/10"
></div> ></div>
<div
class="absolute bottom-0 left-0 h-24 w-24 -translate-x-12 translate-y-12 rounded-full bg-gradient-to-tr from-purple-700/20 to-purple-600/10"
></div>
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent"></div>
<div class="relative z-10 text-center"> <div class="pointer-events-none absolute -top-20 -left-20 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
<div <div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-full border border-purple-400/30 bg-gradient-to-br from-purple-500 to-purple-400"
> <div class="relative z-10">
<div class="text-2xl text-purple-950">🌟</div> <!-- En-tête -->
<div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
<span class="text-2xl">🔮</span>
<span class="text-lg font-bold text-white">Pathfinder Offer</span>
</div>
<!-- Contenu principal -->
<div class="space-y-6 text-left">
<!-- Introduction -->
<div class="text-center">
<h3 class="mb-4 font-title text-xl font-bold text-white md:text-2xl">Dear Explorer of Symbols,</h3>
<p class="leading-relaxed text-white/80">
These revelations are only a prelude to what we could accomplish in a direct consultation. Because the arcana:
</p>
</div>
<!-- Points clés -->
<div class="space-y-3">
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">•</span>
<p class="text-white/80"><strong>Adapt</strong> to your voice and micro-expressions</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">•</span>
<p class="text-white/80"><strong>Deepen</strong> through intuitive real-time dialogue</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">•</span>
<p class="text-white/80"><strong>Transmute</strong> into a tailored action plan</p>
</div>
</div>
<!-- Offre -->
<div class="space-y-4">
<div class="flex items-center space-x-3">
<span class="text-xl text-[var(--c-gold)]">➤</span>
<h4 class="font-title text-lg font-bold text-white">Pathfinder Offer:</h4>
</div>
<p class="text-white/80">Receive an in‑depth analysis where we will:</p>
<div class="space-y-3 pl-4">
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">1.</span>
<p class="text-white/80">Decode the synchronicities between your reading and the one we'll do together</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">2.</span>
<p class="text-white/80">Activate the hidden bridges between past, present, and future</p>
</div>
<div class="flex items-start space-x-3">
<span class="mt-1 text-[var(--c-gold)]">3.</span>
<p class="text-white/80">Crystallize a strategic compass for your next choices</p>
</div>
</div>
</div>
</div>
<!-- Bouton CTA et informations -->
<div class="mt-8 space-y-4">
<button
@click="goToBooking"
class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
>
<span class="relative z-10">Book my amplified session here</span>
<span
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
></span>
</button>
<!-- Informations tarif et durée -->
<div class="space-y-2">
<p class="text-sm font-semibold text-[var(--c-gold)]">Limited to 15 days</p>
<p class="text-lg font-bold text-white">Special rate for digital reading holders: €390</p>
</div>
</div> </div>
<h3 class="mb-4 bg-gradient-to-r from-purple-300 to-purple-200 bg-clip-text text-2xl font-black text-transparent md:text-3xl">
Approfondissez Votre Voyage
</h3>
<p class="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-purple-300/80">
Pour une guidance personnalisée et une compréhension plus profonde de votre chemin de vie, réservez une consultation
privée avec Kris Saint Ange.
</p>
<button
@click="goToBooking"
class="group relative transform rounded-full border border-purple-400/30 bg-gradient-to-r from-purple-500 to-purple-400 px-8 py-4 text-lg font-bold tracking-wide text-purple-950 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:from-purple-400 hover:to-purple-300 hover:shadow-xl"
>
<span class="relative z-10 flex items-center justify-center">
Réserver une Consultation
<svg
class="ml-2 h-5 w-5 transform transition-transform group-hover:translate-x-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</span>
<div
class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-purple-300 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div>
</button>
<p class="mt-4 text-sm text-purple-400/70">Séances limitées disponibles</p>
</div> </div>
</div> </div>