english
This commit is contained in:
Nyavokevin
parent
90b8137b4d
commit
113573866d
@ -29,8 +29,8 @@ class StripeController extends Controller
|
||||
$clientSessionId = Str::uuid();
|
||||
|
||||
$priceIds = [
|
||||
3 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
|
||||
21 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
|
||||
6 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
|
||||
18 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
|
||||
];
|
||||
|
||||
if (!isset($priceIds[$count])) {
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
|
||||
@theme inline {
|
||||
--font-title: 'Montserrat ExtraBold', sans-serif;
|
||||
--font-sub-title: 'Poppins', cursive;
|
||||
--font-text: 'Roboto', sans-serif;
|
||||
--font-sub-title: 'Roboto', sans-serif;
|
||||
--font-text: 'Poppins', cursive;
|
||||
|
||||
--font-body: var(--font-text);
|
||||
--font-heading: var(--font-title);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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 -->
|
||||
<div class="absolute inset-0">
|
||||
<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="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 -->
|
||||
<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 -->
|
||||
<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">
|
||||
<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
|
||||
>
|
||||
|
||||
<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">
|
||||
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>
|
||||
|
||||
<div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
||||
@ -40,7 +38,7 @@
|
||||
@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"
|
||||
>
|
||||
<span class="relative z-10">Réserver une Consultation</span>
|
||||
<span class="relative z-10">Book a Consultation Discover the Readings</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%]"
|
||||
></span>
|
||||
@ -49,11 +47,11 @@
|
||||
@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]"
|
||||
>
|
||||
Découvrir les Lectures
|
||||
Book a Consultation
|
||||
</button>
|
||||
</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>
|
||||
|
||||
@ -48,20 +48,20 @@
|
||||
:class="{ 'animate-fade-in-up': isMounted }"
|
||||
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="purple-glow">Chemin</span>
|
||||
<span class="purple-glow">Mystical</span>
|
||||
<!-- Purple underline accent -->
|
||||
</span>
|
||||
Mystique
|
||||
Path
|
||||
</h1>
|
||||
|
||||
<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="{ '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
|
||||
voyage de découverte de soi.
|
||||
Unlock the wisdom of the universe with personalized oracle card readings. Choose your spread and begin your journey of
|
||||
self-discovery.
|
||||
</p>
|
||||
|
||||
<!-- 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%]"
|
||||
></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 -->
|
||||
</button>
|
||||
@ -91,8 +91,8 @@
|
||||
class="text-center transition-all delay-700 duration-1000"
|
||||
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
|
||||
>
|
||||
<p class="text-sm text-white/60 md:text-base">
|
||||
🎴 <span class="font-semibold text-purple-300">Votre première carte est offerte</span> - Aucune carte bancaire requise
|
||||
<p class="text-sm text-white/80 md:text-base">
|
||||
🎴 <span class="font-semibold text-purple-300"> Get your first reading free</span> - No credit card required
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,21 @@
|
||||
<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));">
|
||||
<!-- Single elegant background image -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute inset-0 bg-[url('/image002.jpg')] bg-cover bg-center opacity-20 mix-blend-soft-light"></div>
|
||||
<section
|
||||
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"
|
||||
style="background: linear-gradient(to bottom, #1a0b2e, #2d1b69, #1a0b2e)"
|
||||
>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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
|
||||
v-for="i in 12"
|
||||
:key="'float-' + i"
|
||||
class="absolute opacity-10"
|
||||
class="absolute opacity-15"
|
||||
:class="{
|
||||
'text-[var(--c-gold)]': i % 3 === 0,
|
||||
'text-[var(--c-purple)]': i % 3 === 1,
|
||||
@ -28,19 +33,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Container with full width content -->
|
||||
<div class="relative w-full">
|
||||
<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="relative inline-block">
|
||||
Comment cela fonctionne
|
||||
How It Works ?
|
||||
<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 -->
|
||||
<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="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-40"></div>
|
||||
<div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></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/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -48,7 +55,7 @@
|
||||
<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"
|
||||
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}%`,
|
||||
}"
|
||||
@ -59,11 +66,11 @@
|
||||
<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"
|
||||
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-30"
|
||||
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 -->
|
||||
@ -75,13 +82,13 @@
|
||||
</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>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/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"
|
||||
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"
|
||||
>
|
||||
Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
|
||||
Select the type of reading that matches your current needs and aspirations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,21 +98,21 @@
|
||||
<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>
|
||||
<span>Receive Your Interpretation</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"
|
||||
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"
|
||||
>
|
||||
Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
|
||||
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)]/30"
|
||||
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-30"
|
||||
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 -->
|
||||
@ -121,11 +128,11 @@
|
||||
<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"
|
||||
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-30"
|
||||
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 -->
|
||||
@ -137,21 +144,22 @@
|
||||
</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>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/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"
|
||||
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"
|
||||
>
|
||||
Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
|
||||
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)]/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 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>
|
||||
</section>
|
||||
</template>
|
||||
@ -195,21 +203,21 @@ export default {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 0.1;
|
||||
opacity: 0.15;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) rotate(180deg);
|
||||
opacity: 0.3;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
<div class="relative z-10">
|
||||
<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">
|
||||
Plus Qu’un Guide,
|
||||
Beyond a Guide,
|
||||
</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="inline-block cursor-default transition-all duration-500 hover:scale-110">Un</span>
|
||||
<span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110">Manuscrit</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">A</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">Manuscript</span>
|
||||
</span>
|
||||
</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">
|
||||
<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 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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -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">
|
||||
<!-- Free Tier -->
|
||||
<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 -->
|
||||
<div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100">
|
||||
@ -51,11 +51,9 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Lecture Gratuite
|
||||
</h3>
|
||||
<h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-purple-300">Free Reading</h3>
|
||||
<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
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
||||
>
|
||||
@ -93,7 +91,7 @@
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
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"
|
||||
@ -140,10 +138,10 @@
|
||||
|
||||
<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)]">
|
||||
Profilage
|
||||
Insight Profile
|
||||
</h3>
|
||||
<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
|
||||
class="absolute -inset-2 rounded-full bg-[var(--c-gold)]/20 opacity-0 blur-md transition-opacity duration-500 group-hover:opacity-100"
|
||||
></div>
|
||||
@ -178,7 +176,7 @@
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
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"
|
||||
@ -195,7 +193,7 @@
|
||||
|
||||
<!-- Premium Tier -->
|
||||
<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 -->
|
||||
<div
|
||||
@ -218,10 +216,10 @@
|
||||
|
||||
<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)]">
|
||||
Tirage complet de cartes
|
||||
Full card spread
|
||||
</h3>
|
||||
<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="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
|
||||
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
|
||||
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"
|
||||
@ -278,11 +276,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
// 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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<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">
|
||||
Ce Que Nos Initiés Disent
|
||||
Testimonials from Our Initiates
|
||||
</h2>
|
||||
|
||||
<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 -->
|
||||
<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
|
||||
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 -->
|
||||
<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
|
||||
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 -->
|
||||
<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
|
||||
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"
|
||||
|
||||
@ -233,7 +233,7 @@ defineExpose({ setDrawnCards });
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: `${autoDrawProgress}%` }"></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>
|
||||
|
||||
<!-- Always show the card stack -->
|
||||
@ -254,8 +254,7 @@ defineExpose({ setDrawnCards });
|
||||
|
||||
<!-- Auto-draw prompt -->
|
||||
<div v-if="shouldAutoDraw && !isAutoDrawing && revealedCards.length === 0" class="auto-draw-prompt">
|
||||
<div class="prompt-icon">✨</div>
|
||||
<div class="prompt-text">Cliquez pour une distribution automatique</div>
|
||||
<div class="prompt-text">Click for automatic distribution</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
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
|
||||
@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"
|
||||
>
|
||||
<span class="relative z-10">Résultat du tirage</span>
|
||||
<span class="relative z-10">Draw result</span>
|
||||
<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"
|
||||
fill="none"
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<!-- Header / intro kept centered and constrained -->
|
||||
<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">
|
||||
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>
|
||||
<p class="mt-4 mx-auto 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.
|
||||
<p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--midnight-blue)]/80">
|
||||
Draw on ancient wisdom to light your path. Draw a card and receive the message intended for you today.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<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"
|
||||
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">
|
||||
<!-- 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)]"
|
||||
href="/"
|
||||
>
|
||||
Accueil
|
||||
Home
|
||||
<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"
|
||||
></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)]"
|
||||
href="/tirage"
|
||||
>
|
||||
Tirages
|
||||
Readings
|
||||
<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"
|
||||
></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)]"
|
||||
href="/#testimonials"
|
||||
>
|
||||
Témoignages
|
||||
Testimonials
|
||||
<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"
|
||||
></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"
|
||||
@click="goToBooking"
|
||||
>
|
||||
<span class="relative z-10 truncate">Réserver</span>
|
||||
<span class="relative z-10 truncate">Book</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>
|
||||
@ -151,7 +151,7 @@ onMounted(() => {
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" />
|
||||
</div>
|
||||
<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>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<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>
|
||||
<ul class="space-y-3 text-base sm:space-y-4">
|
||||
<li>
|
||||
<Link class="footer-link group" href="/">Accueil</Link>
|
||||
<Link class="footer-link group" href="/">Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a class="footer-link group" href="#testimonials">Témoignages</a>
|
||||
<a class="footer-link group" href="#testimonials">Testimonials</a>
|
||||
</li>
|
||||
<li>
|
||||
<Link class="footer-link group" href="/tirage">Lectures</Link>
|
||||
<Link class="footer-link group" href="/tirage">Readings</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link class="footer-link group" href="/rendez-vous">Rendez-vous</Link>
|
||||
<Link class="footer-link group" href="/rendez-vous">Book</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</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">
|
||||
<li>
|
||||
<Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link>
|
||||
<Link class="footer-link group" href="/politique-confidalite">Confidentiality</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link class="footer-link group" href="/term-condition">Conditions</Link>
|
||||
<Link class="footer-link group" href="/term-condition">Terms</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -211,28 +211,28 @@ onMounted(() => {
|
||||
<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>
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<input
|
||||
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"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
S'abonner
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</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">
|
||||
© 2024 Kris Saint Ange. Tous droits réservés.
|
||||
© 2025 Kris Saint Ange. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -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="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">
|
||||
<span class="text-2xl">💫</span>
|
||||
<span class="text-lg font-bold text-white">Guidance Approfondie</span>
|
||||
<span class="text-2xl">🔮</span>
|
||||
<span class="text-lg font-bold text-white">Pathfinder Offer</span>
|
||||
</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.
|
||||
|
||||
<!-- 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">Réserver une Consultation</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -73,14 +73,14 @@ const clearHover = () => {
|
||||
<template>
|
||||
<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">
|
||||
Explorez Nos <span class="text-[var(--c-gold)]">Lectures</span>
|
||||
Explore Our <span class="text-[var(--c-gold)]">Readings</span>
|
||||
</h2>
|
||||
|
||||
<p
|
||||
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)]"
|
||||
>
|
||||
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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white md:text-2xl">Lecture Gratuite</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">Gratuit</p>
|
||||
<p class="mt-4 text-sm text-gray-300 md:text-base">
|
||||
Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
|
||||
</p>
|
||||
<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">Free</p>
|
||||
<p class="mt-4 text-sm text-gray-300 md:text-base">Single‑card Reading General Interpretation Quick Tips</p>
|
||||
</div>
|
||||
<button
|
||||
: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"
|
||||
@click="handleSelection(1)"
|
||||
>
|
||||
<span class="relative z-10">Commencer</span>
|
||||
<span class="relative z-10">Begin</span>
|
||||
<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"
|
||||
></div>
|
||||
@ -189,21 +187,19 @@ const clearHover = () => {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white md:text-2xl">Profilage</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">29€</p>
|
||||
<p class="mt-4 text-sm text-gray-200 md:text-base">
|
||||
Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
|
||||
</p>
|
||||
<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">9.99 €</p>
|
||||
<p class="mt-4 text-sm text-gray-200 md:text-base">six‑card Reading Personalized Analysis Tailored Recommendations</p>
|
||||
</div>
|
||||
<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"
|
||||
@click="handleSelection(3)"
|
||||
@click="handleSelection(6)"
|
||||
>
|
||||
<!-- Button shine effect -->
|
||||
<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"
|
||||
></span>
|
||||
<span class="relative z-10">Découvrir</span>
|
||||
<span class="relative z-10">Discover</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"
|
||||
@ -254,17 +250,15 @@ const clearHover = () => {
|
||||
</svg>
|
||||
</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-4 text-sm text-gray-300 md:text-base">
|
||||
Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-gray-300 md:text-base">Eigtheen‑card reading In‑depth exploration Complete strategy</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-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
|
||||
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>
|
||||
|
||||
@ -131,51 +131,92 @@ onMounted(async () => {
|
||||
|
||||
<!-- Consultation CTA -->
|
||||
<div
|
||||
v-if="!loading && !error && hasCards"
|
||||
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"
|
||||
v-if="!loading && !error"
|
||||
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
|
||||
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
|
||||
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="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="text-2xl text-purple-950">🌟</div>
|
||||
<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 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">
|
||||
<!-- 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>
|
||||
<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.
|
||||
|
||||
<!-- 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="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"
|
||||
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 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>
|
||||
<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>
|
||||
<p class="mt-4 text-sm text-purple-400/70">Séances limitées disponibles</p>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user