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

add image

Browse Source
This commit is contained in:
Nyavokevin 2025-10-01 11:00:08 +03:00
parent 1fc5628861
commit 86df097fe9
10 changed files with 784 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/aganda-back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 KiB

BIN
public/hero-back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 KiB

BIN
public/how-back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

BIN
public/offer-back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

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

@ -20,13 +20,7 @@ const goToShuffle = () => {
<div class="relative flex items-center justify-center overflow-hidden py-20 text-center sm:py-32">
<!-- Animated background elements -->
<div class="absolute inset-0 overflow-hidden">
<div
class="absolute inset-0 bg-cover bg-center"
style="
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
filter: blur(4px) brightness(0.7);
"
></div>
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/hero-back.jpg'); filter: blur(4px) brightness(0.7)"></div>
<div class="absolute inset-0 bg-gradient-to-t from-[var(--light-ivory)] via-transparent to-transparent"></div>
<!-- Smooth gold particles with stable positions -->

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

@ -1,37 +1,88 @@
<template>
<section class="py-20 sm:py-24">
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Comment cela fonctionne</h2>
<div class="relative mx-auto max-w-2xl">
<div class="absolute left-1/2 h-full w-0.5 -translate-x-1/2 bg-[var(--linen)]"></div>
<div class="relative z-10 flex flex-col gap-16">
<div class="flex items-center gap-8">
<div
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
>
1
<section class="relative overflow-hidden py-20 sm:py-24">
<!-- Background Image with Overlay -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-[url('how-back.jpg')] bg-cover bg-center bg-no-repeat"></div>
<div class="absolute inset-0 bg-gradient-to-br from-[var(--midnight-blue)]/20 to-[var(--subtle-gold)]/30"></div>
</div>
<!-- Content Container -->
<div class="relative z-10 mx-auto max-w-6xl px-4">
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] drop-shadow-sm md:text-5xl">Comment cela fonctionne</h2>
<!-- Timeline Container -->
<div class="relative mx-auto max-w-2xl">
<!-- Vertical Timeline Line -->
<div
class="absolute left-1/2 h-full w-1 -translate-x-1/2 bg-gradient-to-b from-[var(--subtle-gold)] to-[var(--midnight-blue)] shadow-md"
></div>
<!-- Timeline Items -->
<div class="relative z-10 flex flex-col gap-16">
<!-- Step 1 -->
<div class="group flex items-center gap-8">
<div class="relative">
<div
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
>
1
</div>
<div
class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
></div>
</div>
<div
class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
>
<h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Choisissez Votre Lecture</h3>
<p class="text-[var(--midnight-blue)]/80">
Sélectionnez parmi nos différentes méthodes de divination pour trouver celle qui résonne avec vous.
</p>
</div>
</div>
<div class="bg-[var(--light-ivory)] pl-4">
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Choisissez Votre Lecture</h3>
<!-- Step 2 -->
<div class="group flex items-center justify-end gap-8 text-right">
<div
class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
>
<h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Recevez Votre Interprétation</h3>
<p class="text-[var(--midnight-blue)]/80">
Obtenez une analyse détaillée et personnalisée de votre tirage par nos experts.
</p>
</div>
<div class="relative">
<div
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
>
2
</div>
<div
class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
></div>
</div>
</div>
</div>
<div class="flex items-center justify-end gap-8 text-right">
<div class="bg-[var(--light-ivory)] pr-4">
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Recevez Votre Interprétation</h3>
</div>
<div
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
>
2
</div>
</div>
<div class="flex items-center gap-8">
<div
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
>
3
</div>
<div class="bg-[var(--light-ivory)] pl-4">
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Appliquez la Sagesse</h3>
<!-- Step 3 -->
<div class="group flex items-center gap-8">
<div class="relative">
<div
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
>
3
</div>
<div
class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
></div>
</div>
<div
class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
>
<h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Appliquez la Sagesse</h3>
<p class="text-[var(--midnight-blue)]/80">
Intégrez les conseils et perspectives reçues dans votre vie quotidienne pour avancer avec clarté.
</p>
</div>
</div>
</div>
</div>

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

@ -22,6 +22,7 @@ const isFlipped = ref<boolean[]>([]);
const isRestacking = ref(false);
const remainingDeckSize = computed(() => Math.max(0, deckSize - revealedCards.value.length));
const isFinished = computed(() => !!props.drawnCards && revealedCards.value.length >= props.drawnCards.length);
const startDraw = (index: number) => {
if (!props.drawnCards || revealedCards.value.length >= props.drawnCards.length) return;
@ -50,6 +51,7 @@ const startDraw = (index: number) => {
const handleDeckClick = () => {
if (isDrawing.value) return;
if (isFinished.value) return;
// First click spreads the deck
if (!isSpread.value) {
@ -157,9 +159,8 @@ defineExpose({ setDrawnCards });
<transition class="card-stack-fade">
<div
class="card-stack relative mt-4 mb-4 flex h-[500px] w-[300px] items-center justify-center"
:class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking }"
:class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking, finished: isFinished }"
@click="handleDeckClick"
v-show="!drawnCards || revealedCards.length < drawnCards.length"
>
<div v-for="i in remainingDeckSize" :key="i" class="card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
<div class="card-back">
@ -309,6 +310,13 @@ defineExpose({ setDrawnCards });
.card-stack.restacking {
animation: stack-restack 0.5s ease-out;
}
/* Keep stack visible but inert when finished */
.card-stack.finished {
pointer-events: none;
opacity: 0.9;
}
@keyframes stack-restack {
0% {
transform: translateY(-8px) rotateX(3deg) rotateY(-3deg);

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

@ -1,8 +1,9 @@
<script setup lang="ts">
import { Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
const isMobileMenuOpen = ref(false);
const scrolled = ref(false);
const toggleMobileMenu = () => {
isMobileMenuOpen.value = !isMobileMenuOpen.value;
@ -11,126 +12,308 @@ const toggleMobileMenu = () => {
const goToShuffle = () => {
router.visit('/tirage');
};
onMounted(() => {
const handleScroll = () => {
scrolled.value = window.scrollY > 20;
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
});
</script>
<template>
<div class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<div
class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--light-ivory)]/30 via-white to-[var(--linen)]/20"
>
<!-- Background decorative elements -->
<div class="fixed inset-0 z-0 overflow-hidden">
<!-- Subtle gradient orbs -->
<div class="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-[var(--subtle-gold)]/10 blur-3xl"></div>
<div class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-[var(--midnight-blue)]/5 blur-3xl"></div>
<!-- Subtle pattern overlay -->
<div
class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:40px_40px] opacity-[0.02]"
></div>
</div>
<div class="layout-container relative z-10 flex h-full grow flex-col">
<!-- Enhanced Header -->
<header
class="bg-pure-white sticky top-0 z-50 flex items-center justify-between px-4 py-4 whitespace-nowrap backdrop-blur-sm md:px-10 lg:px-20"
class="sticky top-0 z-50 flex items-center justify-between px-4 py-4 transition-all duration-500 md:px-10 lg:px-20"
:class="scrolled ? 'bg-white/90 py-3 shadow-sm backdrop-blur-md' : 'bg-transparent py-4'"
>
<div class="text-midnight-blue flex items-center gap-3">
<img src="icon.jpg" alt="Logo" class="h-30 w-30" />
<!-- Logo with enhanced styling -->
<div class="flex items-center gap-3">
<div class="relative">
<div class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)]/20 blur-sm"></div>
<img src="icon.jpg" alt="Logo" class="relative h-16 w-16 rounded-full object-cover shadow-lg md:h-20 md:w-20" />
</div>
<div class="hidden md:block">
<h1 class="font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h1>
<p class="text-xs text-[var(--midnight-blue)]/70">Oracle & Guidance</p>
</div>
</div>
<nav class="hidden flex-1 items-center justify-center gap-10 md:flex">
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/">Accueil</Link>
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/tirage"
>L'Oracle</Link
<!-- Desktop Navigation -->
<nav class="hidden flex-1 items-center justify-center gap-8 md:flex">
<Link
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
href="/"
>
<span class="relative z-10">Accueil</span>
<div
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
></div>
</Link>
<Link
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
href="/tirage"
>
<span class="relative z-10">L'Oracle</span>
<div
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
></div>
</Link>
<a
v-if="$page.url === '/'"
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
href="#testimonials"
>Témoignages</a
>
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/rendez-vous"
>Prendre Rendez-vous</Link
<span class="relative z-10">Témoignages</span>
<div
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
></div>
</a>
<Link
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
href="/rendez-vous"
>
<span class="relative z-10">Prendre Rendez-vous</span>
<div
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
></div>
</Link>
</nav>
<!-- CTA Button & Mobile Menu -->
<div class="flex items-center gap-4">
<button @click="toggleMobileMenu" class="md:hidden">
<svg class="text-midnight-blue h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
<button
v-if="$page.url === '/'"
@click="goToShuffle"
class="bg-midnight-blue text-pure-white hover:bg-spiritual-earth flex h-10 min-w-[100px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold tracking-wide transition-all duration-300 md:px-6"
class="group relative flex h-12 min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-6 text-sm font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl"
>
<span class="truncate">Commencer</span>
<span class="relative z-10 flex items-center gap-2">
Commencer
<svg
class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</span>
<div
class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div>
</button>
<button
@click="toggleMobileMenu"
class="relative flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--linen)] bg-white/50 backdrop-blur-sm transition-all duration-300 hover:bg-white hover:shadow-sm md:hidden"
>
<svg
class="h-5 w-5 text-[var(--midnight-blue)] transition-transform duration-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
v-if="!isMobileMenuOpen"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</header>
<div class="gradient-bg">
<h1>2</h1>
<!-- Enhanced Mobile Menu -->
<div
v-if="isMobileMenuOpen"
class="fixed inset-0 z-40 bg-white/95 backdrop-blur-md transition-all duration-500 md:hidden"
:class="isMobileMenuOpen ? 'opacity-100' : 'pointer-events-none opacity-0'"
>
<div class="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
<button
@click="toggleMobileMenu"
class="absolute top-6 right-6 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--light-ivory)]"
>
<svg class="h-5 w-5 text-[var(--midnight-blue)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="mb-8 text-center">
<img src="icon.jpg" alt="Logo" class="mx-auto mb-4 h-20 w-20 rounded-full object-cover shadow-lg" />
<h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h2>
<p class="text-[var(--midnight-blue)]/70">Oracle & Guidance</p>
</div>
<nav class="flex w-full max-w-sm flex-col items-center gap-6">
<Link
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
href="/"
@click="toggleMobileMenu"
>
Accueil
</Link>
<Link
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
href="/tirage"
@click="toggleMobileMenu"
>
L'Oracle
</Link>
<Link
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
href="#testimonials"
@click="toggleMobileMenu"
>
Témoignages
</Link>
<Link
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
href="/rendez-vous"
@click="toggleMobileMenu"
>
Prendre Rendez-vous
</Link>
</nav>
<button
@click="goToShuffle"
class="mt-8 w-full max-w-sm rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] py-4 text-lg font-bold text-white shadow-lg transition-all duration-300 hover:shadow-xl"
>
Commencer la Lecture
</button>
</div>
</div>
<nav v-if="isMobileMenuOpen" class="bg-light-ivory/90 flex flex-col items-center gap-4 py-4 md:hidden">
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="#"
@click="toggleMobileMenu"
>Accueil</Link
>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="#"
@click="toggleMobileMenu"
>L'Oracle</Link
>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="#"
@click="toggleMobileMenu"
>Lectures</Link
>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="#"
@click="toggleMobileMenu"
>Témoignages</Link
>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="/rendez-vous"
@click="toggleMobileMenu"
>Booking</Link
>
</nav>
<main class="flex flex-col items-center">
<!-- Main Content -->
<main class="flex flex-1 flex-col items-center">
<slot />
</main>
<footer class="bg-pure-white text-midnight-blue/80 py-12">
<!-- Enhanced Footer -->
<footer class="mt-16 border-t border-[var(--linen)] bg-gradient-to-b from-white to-[var(--light-ivory)]/30 py-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col items-center gap-8">
<div class="flex flex-wrap justify-center gap-x-4 gap-y-2 md:gap-x-8 md:gap-y-4">
<Link class="hover:text-subtle-gold transition-colors" href="/">Accueil</Link>
<a v-if="$page.url = '/'" class="hover:text-subtle-gold transition-colors" href="#testimonials">Témoignages</a>
<Link class="hover:text-subtle-gold transition-colors" href="/politique-confidalite">Politique de Confidentialité</Link>
<Link class="hover:text-subtle-gold transition-colors" href="/term-condition">Conditions d'Utilisation</Link>
<div class="flex flex-col items-center gap-12">
<!-- Logo and description -->
<div class="max-w-md text-center">
<div class="mb-4 flex justify-center">
<img src="icon.jpg" alt="Logo" class="h-16 w-16 rounded-full object-cover shadow-lg" />
</div>
<h3 class="mb-2 font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h3>
<p class="text-sm text-[var(--midnight-blue)]/70">Guidance spirituelle et consultations d'oracle personnalisées</p>
</div>
<div class="flex justify-center gap-4 md:gap-6">
<Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
<!-- Links -->
<div class="flex flex-wrap justify-center gap-x-8 gap-y-4">
<Link
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
href="/"
>
Accueil
<span
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
></span>
</Link>
<a
v-if="$page.url === '/'"
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
href="#testimonials"
>
Témoignages
<span
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
></span>
</a>
<Link
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
href="/politique-confidalite"
>
Politique de Confidentialité
<span
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
></span>
</Link>
<Link
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
href="/term-condition"
>
Conditions d'Utilisation
<span
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
></span>
</Link>
</div>
<!-- Social Links -->
<div class="flex justify-center gap-6">
<Link
class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
href="#"
>
<svg
class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
fill="currentColor"
viewBox="0 0 256 256"
>
<path
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
></path>
</svg>
</Link>
<Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
<Link
class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
href="#"
>
<svg
class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
fill="currentColor"
viewBox="0 0 256 256"
>
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
></path>
</svg>
</Link>
<Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
<Link
class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
href="#"
>
<svg
class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
fill="currentColor"
viewBox="0 0 256 256"
>
<path
d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"
></path>
</svg>
</Link>
</div>
<p class="text-sm">© 2024 Kris Saint Ange. Tous droits réservés.</p>
<!-- Copyright -->
<div class="w-full max-w-md border-t border-[var(--linen)] pt-8 text-center">
<p class="text-sm text-[var(--midnight-blue)]/60">© 2024 Kris Saint Ange. Tous droits réservés.</p>
</div>
</div>
</div>
</footer>
@ -139,52 +322,28 @@ const goToShuffle = () => {
</template>
<style scoped>
/* Utility classes for colors */
.text-midnight-blue {
color: var(--midnight-blue);
/* Smooth transitions for all interactive elements */
* {
transition-property: color, background-color, border-color, transform, box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.bg-midnight-blue {
background-color: var(--midnight-blue);
/* Custom scrollbar */
::-webkit-scrollbar {
width: 6px;
}
.text-spiritual-earth {
color: var(--spiritual-earth);
::-webkit-scrollbar-track {
background: var(--light-ivory);
}
.bg-spiritual-earth {
background-color: var(--spiritual-earth);
::-webkit-scrollbar-thumb {
background: var(--subtle-gold);
border-radius: 3px;
}
.text-subtle-gold {
color: var(--subtle-gold);
}
.bg-subtle-gold {
background-color: var(--subtle-gold);
}
.text-linen {
color: var(--linen);
}
.bg-linen {
background-color: var(--linen);
}
.text-pure-white {
color: var(--pure-white);
}
.bg-pure-white {
background-color: var(--pure-white);
}
.text-light-ivory {
color: var(--light-ivory);
}
.bg-light-ivory {
background-color: var(--light-ivory);
}
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(180deg, var(--light-ivory) 0%, var(--pure-white) 100%);
background-size: 100% 100%;
transition: background-color 0.5s ease;
::-webkit-scrollbar-thumb:hover {
background: var(--spiritual-earth);
}
</style>

262
resources/js/pages/Agenda.vue
View File

@ -48,46 +48,234 @@ const redirectToStipeCheckout = async () => {
<template>
<LandingLayout>
<main class="flex flex-1 justify-center px-10 py-16">
<div class="layout-content-container flex w-full max-w-4xl flex-col items-center gap-12">
<h1 class="text-center text-5xl font-bold text-[var(--midnight-blue)]">Réservez votre consultation</h1>
<div class="flex w-full flex-wrap items-start justify-center gap-16">
<date-picker v-model:selectedDate="selectedDate" />
<div class="flex max-w-md min-w-[320px] flex-1 flex-col gap-6">
<p class="text-center text-lg text-[var(--midnight-blue)]">Entrez vos informations</p>
<form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
<div>
<label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="name">Nom complet</label>
<input
class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
id="name"
name="name"
placeholder="Votre nom complet"
type="text"
v-model="userForm.fullname"
/>
<!-- Background container - only affects the main content -->
<div class="relative min-h-screen">
<!-- Background with mystical elements - only for main content -->
<div class="absolute inset-0 z-0 overflow-hidden">
<!-- Main background with gradient overlay -->
<div class="absolute inset-0 bg-gradient-to-br from-[var(--light-ivory)]/95 via-white/90 to-[var(--linen)]/80"></div>
<!-- Background image with very low opacity -->
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-50" style="background-image: url('/aganda-back.jpg')"></div>
<!-- Decorative floating elements -->
<div class="absolute top-1/4 left-1/4 h-32 w-32 rounded-full bg-[var(--subtle-gold)]/10 blur-xl"></div>
<div class="absolute right-1/4 bottom-1/3 h-40 w-40 rounded-full bg-[var(--midnight-blue)]/5 blur-xl"></div>
<div class="absolute top-1/3 right-1/3 h-24 w-24 rounded-full bg-[var(--spiritual-earth)]/8 blur-lg"></div>
<!-- Subtle pattern overlay -->
<div
class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:60px_60px] opacity-[0.02]"
></div>
</div>
<!-- Main content with background -->
<main class="relative z-10 flex flex-1 justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20">
<div class="layout-content-container flex w-full max-w-6xl flex-col items-center gap-12 lg:gap-16">
<!-- Enhanced Header Section -->
<div class="max-w-3xl text-center">
<h1 class="mb-6 font-serif text-4xl font-bold text-[var(--midnight-blue)] sm:text-5xl lg:text-6xl">
Réservez votre consultation
</h1>
<p class="mx-auto max-w-2xl text-lg text-[var(--midnight-blue)]/80 sm:text-xl">
Choisissez la date de votre consultation spirituelle et laissez-vous guider vers l'éclaircissement
</p>
</div>
<!-- Main Content Container -->
<div class="flex w-full flex-col items-center justify-center gap-12 lg:flex-row lg:items-start lg:gap-16 xl:gap-20">
<!-- Date Picker Card -->
<div class="w-full max-w-md lg:max-w-lg">
<div class="rounded-2xl border border-white/50 bg-white/80 p-6 shadow-xl backdrop-blur-sm">
<div class="mb-6 text-center">
<h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Choisissez votre date</h2>
<p class="mt-2 text-[var(--midnight-blue)]/70">Sélectionnez le moment parfait pour votre guidance</p>
</div>
<date-picker v-model:selectedDate="selectedDate" />
</div>
<div>
<label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="email">Adresse e-mail</label>
<input
class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
id="email"
name="email"
placeholder="Votre adresse e-mail"
type="email"
v-model="userForm.email"
/>
</div>
<!-- Form Card -->
<div class="w-full max-w-md">
<div class="rounded-2xl border border-white/50 bg-white/80 p-8 shadow-xl backdrop-blur-sm">
<div class="mb-8 text-center">
<div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
<svg class="h-6 w-6 text-[var(--subtle-gold)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</div>
<h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Vos informations</h2>
<p class="mt-2 text-[var(--midnight-blue)]/70">Remplissez vos coordonnées pour finaliser la réservation</p>
</div>
<form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
<!-- Name Input -->
<div class="group">
<label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="name"> Nom complet </label>
<div class="relative">
<input
class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
id="name"
name="name"
placeholder="Votre nom complet"
type="text"
v-model="userForm.fullname"
required
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
></div>
</div>
</div>
<!-- Email Input -->
<div class="group">
<label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="email">
Adresse e-mail
</label>
<div class="relative">
<input
class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
id="email"
name="email"
placeholder="Votre adresse e-mail"
type="email"
v-model="userForm.email"
required
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
></div>
</div>
</div>
<!-- Selected Date Display -->
<div class="rounded-xl border border-[var(--linen)] bg-[var(--light-ivory)]/50 p-4">
<p class="mb-1 text-sm font-medium text-[var(--midnight-blue)]">Date sélectionnée :</p>
<p class="text-lg font-semibold text-[var(--spiritual-earth)]">
{{
selectedDate.toLocaleDateString('fr-FR', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
})
}}
</p>
</div>
<!-- Submit Button -->
<button
class="group relative mt-4 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-8 text-lg font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"
type="submit"
:disabled="loading || !userForm.fullname || !userForm.email"
>
<!-- Shine effect -->
<span
class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full"
></span>
<!-- Button content -->
<span class="relative z-10 flex items-center gap-3">
<svg v-if="loading" class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<span>{{ loading ? 'Traitement...' : 'Confirmer et Payer' }}</span>
<svg
v-if="!loading"
class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</span>
</button>
<!-- Security Note -->
<p class="mt-4 text-center text-xs text-[var(--midnight-blue)]/60">
🔒 Paiement sécurisé via Stripe. Vos informations sont protégées.
</p>
</form>
</div>
<button
class="mt-6 flex h-14 w-full cursor-pointer items-center justify-center rounded-full bg-[var(--midnight-blue)] px-8 text-lg font-bold tracking-wide text-[var(--pure-white)] shadow-[var(--linen)] shadow-lg transition-colors duration-300 hover:bg-[var(--spiritual-earth)]"
type="submit"
>
<span class="truncate">Confirmer et Payer</span>
</button>
</form>
</div>
</div>
<!-- Additional Information -->
<div class="mt-8 max-w-2xl text-center">
<div
class="inline-flex items-center gap-4 rounded-2xl border border-white/50 bg-white/50 px-6 py-4 text-sm text-[var(--midnight-blue)]/70 backdrop-blur-sm"
>
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
<span>Consultation confidentielle • Guidance personnalisée • Support après séance</span>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</LandingLayout>
</template>
<style scoped>
/* Custom animations */
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.floating {
animation: float 6s ease-in-out infinite;
}
/* Smooth transitions for form elements */
.form-input {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ensure the background doesn't leak into footer */
.relative.min-h-screen {
background: transparent;
}
/* Custom scrollbar for date picker if needed */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: var(--light-ivory);
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: var(--subtle-gold);
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--spiritual-earth);
}
</style>

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

@ -70,186 +70,205 @@ const clearHover = () => {
hoveredCard.value = null;
};
</script>
<template>
<section class="px-4 py-16 sm:py-20">
<h2 class="mb-12 text-center text-3xl font-bold text-[var(--midnight-blue)] md:text-4xl lg:text-5xl">
Explorez Nos <span class="text-[var(--subtle-gold)]">Lectures</span>
</h2>
<p
v-if="isFreeDrawUsed"
class="mx-auto mb-8 max-w-2xl rounded-lg bg-[var(--light-ivory)] p-4 text-center text-lg font-semibold text-[var(--spiritual-earth)]"
>
Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer.
</p>
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
<!-- Free draw -->
<section class="relative overflow-hidden px-4 py-12 sm:py-16 md:py-20">
<!-- Background with subtle gradient overlay -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-br from-white via-[var(--light-ivory)] to-[var(--linen)] opacity-95"></div>
<div class="absolute inset-0 bg-[url('how-back.jpg')] bg-cover bg-center bg-no-repeat opacity-10 mix-blend-overlay"></div>
<!-- Subtle pattern overlay -->
<div
class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
:class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-80': isFreeDrawUsed }"
@mouseenter="setHover(1)"
@mouseleave="clearHover"
class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:20px_20px] opacity-5"
></div>
</div>
<div class="relative z-10 mx-auto max-w-7xl">
<h2 class="mb-8 text-center text-3xl font-bold text-[var(--midnight-blue)] md:text-4xl lg:text-5xl">Explorez Nos Lectures</h2>
<p
v-if="isFreeDrawUsed"
class="mx-auto mb-10 max-w-2xl rounded-xl border border-[var(--linen)] bg-white/80 p-4 text-center text-base font-medium text-[var(--spiritual-earth)] shadow-sm backdrop-blur-sm"
>
<!-- Decorative elements -->
<div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer.
</p>
<div class="text-center">
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
/>
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
<p class="mt-4 text-sm text-gray-600 md:text-base">
Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
</p>
</div>
<button
:disabled="isFreeDrawUsed"
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)] disabled:cursor-not-allowed disabled:opacity-50"
@click="handleSelection(1)"
>
<span>Commencer</span>
<svg
v-if="!isFreeDrawUsed"
xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
<!-- Premium option -->
<div
class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-b from-[var(--midnight-blue)] to-[#1a365d] p-6 shadow-xl transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl md:scale-105 md:p-8"
@mouseenter="setHover(2)"
@mouseleave="clearHover"
>
<!-- Premium badge -->
<div class="absolute -top-3 left-1/2 -translate-x-1/2 transform">
<span class="rounded-full bg-[var(--subtle-gold)] px-3 py-1 text-xs font-bold text-[var(--midnight-blue)] uppercase"
>Populaire</span
>
</div>
<!-- Shine effect on hover -->
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
<!-- Free draw -->
<div
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
:class="{ 'opacity-100': hoveredCard === 2 }"
></div>
<div class="relative z-10 text-center">
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-[var(--pure-white)] md:text-2xl">Profilage</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
<p class="mt-4 text-sm text-gray-200 md:text-base">
Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
</p>
</div>
<button
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)] hover:shadow-lg"
@click="handleSelection(3)"
class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-white/90 p-6 shadow-lg backdrop-blur-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-xl md:p-8"
:class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-70 grayscale': isFreeDrawUsed }"
@mouseenter="setHover(1)"
@mouseleave="clearHover"
>
<!-- 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>
<svg
xmlns="http://www.w3.org/2000/svg"
class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
<!-- Decorative elements -->
<div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
<!-- Premium plus option -->
<div
class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
@mouseenter="setHover(3)"
@mouseleave="clearHover"
>
<!-- Gold corner accents -->
<div class="absolute top-0 left-0 h-6 w-6 rounded-tl-lg border-t-2 border-l-2 border-[var(--subtle-gold)]"></div>
<div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--subtle-gold)]"></div>
<div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--subtle-gold)]"></div>
<div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--subtle-gold)]"></div>
<div class="text-center">
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
/>
</svg>
<div class="text-center">
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
/>
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
<p class="mt-4 text-sm text-gray-600 md:text-base">
Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
</p>
</div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
<p class="mt-4 text-sm text-gray-600 md:text-base">
Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
</p>
</div>
<button
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-[#e8e0d5] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-[#8a7f6d] hover:text-[var(--pure-white)]"
@click="handleSelection(4)"
>
<span>Explorer</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
<button
:disabled="isFreeDrawUsed"
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
@click="handleSelection(1)"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
<span>Commencer</span>
<svg
v-if="!isFreeDrawUsed"
xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
<!-- Premium option -->
<div
class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-br from-[var(--midnight-blue)] via-[#2d3748] to-[#1a202c] p-6 shadow-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl md:scale-[1.02] md:p-8"
@mouseenter="setHover(2)"
@mouseleave="clearHover"
>
<!-- Premium badge -->
<div class="absolute -top-3 left-1/2 z-20 -translate-x-1/2 transform">
<span
class="rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-4 py-1.5 text-xs font-bold tracking-wide text-[var(--midnight-blue)] uppercase shadow-sm"
>Populaire</span
>
</div>
<!-- Shine effect on hover -->
<div
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
:class="{ 'opacity-100': hoveredCard === 2 }"
></div>
<!-- Subtle pattern overlay -->
<div
class="absolute inset-0 rounded-2xl bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px] opacity-5"
></div>
<div class="relative z-10 text-center">
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 shadow-sm backdrop-blur-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</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(--subtle-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>
</div>
<button
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:from-white hover:to-amber-50 hover:shadow-lg"
@click="handleSelection(3)"
>
<!-- Button shine effect -->
<span
class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/60 to-transparent transition-transform duration-700 group-hover:translate-x-full"
></span>
<span class="relative z-10">Découvrir</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
<!-- Premium plus option -->
<div
class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-white/90 p-6 shadow-lg backdrop-blur-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-xl md:p-8"
@mouseenter="setHover(3)"
@mouseleave="clearHover"
>
<!-- Gold corner accents -->
<div class="absolute top-0 left-0 h-6 w-6 rounded-tl-lg border-t-2 border-l-2 border-[var(--subtle-gold)]"></div>
<div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--subtle-gold)]"></div>
<div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--subtle-gold)]"></div>
<div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--subtle-gold)]"></div>
<div class="text-center">
<div class="mb-4 flex justify-center">
<div
class="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[var(--light-ivory)] to-amber-50 shadow-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
/>
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
<p class="mt-4 text-sm text-gray-600 md:text-base">
Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
</p>
</div>
<button
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-amber-50 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-amber-200 hover:text-[var(--midnight-blue)]"
@click="handleSelection(4)"
>
<span>Explorer</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</div>
</section>