fix result card
This commit is contained in:
Nyavokevin
parent
1fdc43efe9
commit
cf89535c14
@ -1,37 +1,72 @@
|
||||
<template>
|
||||
<div
|
||||
class="border-linen flex flex-col items-center gap-6 md:gap-8 rounded-lg border bg-white p-6 md:p-8 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row"
|
||||
class="flex flex-col items-center gap-6 md:gap-8 rounded-2xl bg-gradient-to-br from-purple-900/40 to-purple-800/30 border border-purple-700/30 p-6 md:p-8 shadow-2xl transition-all duration-500 hover:shadow-3xl md:flex-row backdrop-blur-sm hover:border-purple-600/50 group"
|
||||
>
|
||||
<!-- Card Image -->
|
||||
<!-- Card Image Container -->
|
||||
<div class="relative">
|
||||
<!-- Card Image with Glow Effect -->
|
||||
<div
|
||||
class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105"
|
||||
class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-xl bg-cover bg-center bg-no-repeat transition-all duration-500 group-hover:scale-105 relative overflow-hidden"
|
||||
:style="{
|
||||
'background-image': `url(/cards/${cardNumber + 1}.png)`,
|
||||
'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
|
||||
'background-image': `url(${imageUrl || '/cards/' + (cardNumber + 1) + '.png'})`,
|
||||
transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
|
||||
}"
|
||||
>
|
||||
<!-- Gradient Overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-900/10 to-purple-900/20 rounded-xl"></div>
|
||||
|
||||
<!-- Glow Effect -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
:style="{
|
||||
'box-shadow': orientation === 'reversed'
|
||||
? '0 0 30px 10px rgba(239, 68, 68, 0.4)'
|
||||
: '0 0 30px 10px rgba(168, 85, 247, 0.4)'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Orientation Badge -->
|
||||
<div
|
||||
v-if="orientation === 'reversed'"
|
||||
class="absolute top-2 right-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full"
|
||||
class="absolute top-3 right-3 bg-gradient-to-r from-red-600 to-red-700 text-red-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-red-500/30 shadow-lg"
|
||||
>
|
||||
Inversée
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
|
||||
>
|
||||
Droite
|
||||
</div>
|
||||
|
||||
<!-- Card Number Badge -->
|
||||
<div class="absolute -bottom-2 -left-2 bg-gradient-to-r from-purple-700 to-indigo-700 text-purple-100 text-sm font-bold w-10 h-10 rounded-full flex items-center justify-center border-2 border-purple-900/50 shadow-lg">
|
||||
{{ cardNumber }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Content -->
|
||||
<div class="flex flex-col gap-3 text-center md:text-left">
|
||||
<p class="text-spiritual-earth text-xs sm:text-sm tracking-widest uppercase font-semibold">
|
||||
Carte {{ cardNumber }}
|
||||
<div class="flex flex-col gap-4 text-center md:text-left flex-1">
|
||||
<!-- Card Number -->
|
||||
<p class="text-purple-300/70 text-xs sm:text-sm tracking-widest uppercase font-semibold">
|
||||
Carte #{{ cardNumber }}
|
||||
</p>
|
||||
<h3 class="text-midnight-blue text-xl sm:text-2xl font-bold leading-tight">
|
||||
|
||||
<!-- Card Name -->
|
||||
<h3 class="text-2xl sm:text-3xl font-black bg-gradient-to-r from-purple-200 to-purple-100 bg-clip-text text-transparent leading-tight">
|
||||
{{ name }}
|
||||
</h3>
|
||||
<div class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed" v-html="description">
|
||||
|
||||
<!-- Description -->
|
||||
<div class="text-purple-300/90 text-base sm:text-lg leading-relaxed font-medium" v-html="description"></div>
|
||||
|
||||
<!-- Decorative Divider -->
|
||||
<div class="w-16 h-0.5 bg-gradient-to-r from-purple-600 to-transparent rounded-full mt-2 mx-auto md:mx-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hover Effect Background -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-500 pointer-events-none"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -49,17 +84,50 @@ defineProps<Props>();
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
animation: slideUp 0.5s ease-out;
|
||||
animation: cardAppear 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
@keyframes cardAppear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom shadow for hover effect */
|
||||
.shadow-3xl {
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
0 0 30px rgba(168, 85, 247, 0.3);
|
||||
}
|
||||
|
||||
/* Smooth transitions for all interactive elements */
|
||||
* {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for description */
|
||||
.text-base::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.text-base::-webkit-scrollbar-track {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.text-base::-webkit-scrollbar-thumb {
|
||||
background: rgba(168, 85, 247, 0.4);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.text-base::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(168, 85, 247, 0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,14 +31,18 @@ onMounted(() => {
|
||||
class="fixed top-0 z-50 w-full transition-all duration-300"
|
||||
:class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
|
||||
>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between px-6 py-2 whitespace-nowrap">
|
||||
<div class="container mx-auto px-4 sm:px-6">
|
||||
<div class="flex items-center justify-between px-2 py-2 whitespace-nowrap sm:px-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-12 w-30 transition-transform duration-300 hover:scale-105" />
|
||||
<img
|
||||
src="/logo-success.webp"
|
||||
alt="Logo"
|
||||
class="h-10 w-24 transition-transform duration-300 hover:scale-105 sm:h-12 sm:w-30"
|
||||
/>
|
||||
</div>
|
||||
<nav class="hidden items-center gap-8 md:flex">
|
||||
<nav class="hidden items-center gap-4 md:flex lg:gap-8">
|
||||
<Link
|
||||
class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/"
|
||||
>
|
||||
Accueil
|
||||
@ -47,7 +51,7 @@ onMounted(() => {
|
||||
></span>
|
||||
</Link>
|
||||
<Link
|
||||
class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/tirage"
|
||||
>
|
||||
Tirages
|
||||
@ -56,7 +60,7 @@ onMounted(() => {
|
||||
></span>
|
||||
</Link>
|
||||
<Link
|
||||
class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/"
|
||||
>
|
||||
Témoignages
|
||||
@ -65,17 +69,17 @@ onMounted(() => {
|
||||
></span>
|
||||
</Link>
|
||||
</nav>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 sm:gap-4">
|
||||
<button
|
||||
class="mystic-btn mystic-btn-primary group relative inline-flex h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5"
|
||||
class="mystic-btn mystic-btn-primary group relative hidden h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex sm:px-6"
|
||||
@click="goToBooking"
|
||||
>
|
||||
<span class="relative z-10 truncate">Réserver une Session</span>
|
||||
<span class="relative z-10 truncate">Réserver</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>
|
||||
<button class="text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
|
||||
<button class="p-2 text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
@ -88,80 +92,80 @@ onMounted(() => {
|
||||
<!-- Enhanced Mobile Menu -->
|
||||
<div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
|
||||
<div
|
||||
class="absolute top-0 right-0 h-full w-3/4 bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
|
||||
class="absolute top-0 right-0 h-full w-full max-w-sm bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
|
||||
@click.stop
|
||||
>
|
||||
<div class="mb-8 flex items-center justify-between">
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
|
||||
<button @click="toggleMobileMenu" class="text-white">
|
||||
<button @click="toggleMobileMenu" class="p-2 text-white">
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-6">
|
||||
<nav class="flex flex-col gap-4">
|
||||
<Link
|
||||
class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/"
|
||||
@click="toggleMobileMenu"
|
||||
>Accueil</Link
|
||||
>
|
||||
<Link
|
||||
class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/tirage"
|
||||
@click="toggleMobileMenu"
|
||||
>Tirages</Link
|
||||
>
|
||||
<Link
|
||||
class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
||||
href="/"
|
||||
@click="toggleMobileMenu"
|
||||
>Témoignages</Link
|
||||
>
|
||||
<button
|
||||
class="mystic-btn mystic-btn-primary group relative mt-4 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300"
|
||||
class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300"
|
||||
@click="
|
||||
goToBooking;
|
||||
goToBooking();
|
||||
toggleMobileMenu();
|
||||
"
|
||||
>
|
||||
<span class="relative z-10 truncate">Réserver une Session</span>
|
||||
<span class="relative z-10">Réserver une Session</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="relative flex min-h-screen w-full flex-col items-center pt-20">
|
||||
<main class="relative flex min-h-screen w-full flex-col items-center pt-16 sm:pt-20">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Enhanced Footer -->
|
||||
<footer class="relative border-t border-white/10 bg-gradient-to-t from-black to-[var(--c-deep-navy)] text-white">
|
||||
<div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
|
||||
<div class="mx-auto max-w-7xl px-6 py-14">
|
||||
<div class="grid gap-10 md:grid-cols-3">
|
||||
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-14">
|
||||
<div class="grid gap-8 md:grid-cols-3 lg:gap-10">
|
||||
<!-- Brand + tagline -->
|
||||
<div>
|
||||
<div class="md:col-span-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
|
||||
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24 sm:h-12 sm:w-30" />
|
||||
</div>
|
||||
<p class="mt-4 max-w-sm text-sm text-white/70">
|
||||
<p class="mt-4 max-w-sm text-sm leading-relaxed text-white/70">
|
||||
Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
|
||||
</p>
|
||||
<div class="mt-6 flex gap-4">
|
||||
<div class="mt-6 flex gap-3">
|
||||
<a class="social-icon group" href="#" aria-label="Instagram">
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<rect x="32" y="32" width="192" height="192" rx="48"></rect>
|
||||
<circle cx="128" cy="128" r="40" fill="black"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="social-icon group" href="#" aria-label="Facebook">
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="social-icon group" href="#" aria-label="X">
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M152.23,116.19l62.51-78.85H184.2l-38.79,49-30.06-49H80.2l43.9,70.44L60.44,218.66H99l42.31-53.56,32.63,53.56h35.09Z"
|
||||
></path>
|
||||
@ -171,10 +175,10 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<!-- Quick links -->
|
||||
<div class="grid grid-cols-2 gap-8 md:grid-cols-2">
|
||||
<div class="grid grid-cols-2 gap-6 sm:gap-8 md:col-span-1 md:grid-cols-2">
|
||||
<div>
|
||||
<h4 class="mb-4 text-lg font-bold tracking-wider text-white">Navigation</h4>
|
||||
<ul class="space-y-3 text-sm">
|
||||
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Navigation</h4>
|
||||
<ul class="space-y-2 text-sm sm:space-y-3">
|
||||
<li>
|
||||
<Link class="footer-link group" href="/">Accueil</Link>
|
||||
</li>
|
||||
@ -190,23 +194,27 @@ onMounted(() => {
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-4 text-lg font-bold tracking-wider text-white">Légal</h4>
|
||||
<ul class="space-y-3 text-sm">
|
||||
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Légal</h4>
|
||||
<ul class="space-y-2 text-sm sm:space-y-3">
|
||||
<li>
|
||||
<Link class="footer-link group" href="/politique-confidalite">Politique de Confidentialité</Link>
|
||||
<Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link class="footer-link group" href="/term-condition">Conditions d'Utilisation</Link>
|
||||
<Link class="footer-link group" href="/term-condition">Conditions</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div>
|
||||
<h4 class="mb-4 text-lg font-bold tracking-wider text-white">Newsletter</h4>
|
||||
<p class="mb-4 text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
|
||||
<form class="mt-2 flex max-w-md overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm">
|
||||
<div class="md:col-span-1 lg:col-span-1">
|
||||
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Newsletter</h4>
|
||||
<p class="mb-4 text-sm leading-relaxed text-white/70">
|
||||
Recevez des inspirations et offres directement dans votre boîte mail.
|
||||
</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"
|
||||
@ -214,7 +222,7 @@ onMounted(() => {
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="mystic-btn mystic-btn-secondary px-4 text-sm font-bold whitespace-nowrap text-white transition-all"
|
||||
class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-sm font-bold whitespace-nowrap text-white transition-all"
|
||||
>
|
||||
S'abonner
|
||||
</button>
|
||||
@ -222,7 +230,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:text-sm">
|
||||
<div class="mt-8 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:mt-12 sm:text-sm">
|
||||
© 2024 Kris Saint Ange. Tous droits réservés.
|
||||
</div>
|
||||
</div>
|
||||
@ -283,8 +291,8 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
@ -301,11 +309,13 @@ onMounted(() => {
|
||||
position: relative;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #ffd700;
|
||||
padding-left: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.footer-link::before {
|
||||
@ -367,4 +377,48 @@ header {
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 2px rgba(125, 91, 166, 0.5);
|
||||
}
|
||||
|
||||
/* Responsive improvements */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
/* Better touch targets for mobile */
|
||||
button,
|
||||
a {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* Improve mobile menu spacing */
|
||||
.fixed .absolute {
|
||||
width: 85%;
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* Stack footer columns on very small screens */
|
||||
footer .grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* Center align footer content on mobile */
|
||||
footer .md\\:col-span-1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .flex {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent horizontal scroll */
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,41 +44,81 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<LandingLayout>
|
||||
<main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
|
||||
<div class="layout-content-container flex w-full max-w-4xl flex-col">
|
||||
<main class="min-h-screen bg-gradient-to-br py-8">
|
||||
<div class="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8 text-center md:mb-12">
|
||||
<h1 class="text-midnight-blue mb-2 text-3xl font-bold sm:text-4xl md:text-5xl">Votre Lecture</h1>
|
||||
<p class="text-spiritual-earth mx-auto max-w-2xl text-base sm:text-lg">
|
||||
Voici une analyse détaillée de votre lecture choisie. Veuillez vérifier avant de procéder au paiement.
|
||||
<div class="mt-10 mb-12 text-center md:mb-16">
|
||||
<h1
|
||||
class="mb-4 bg-gradient-to-r from-purple-300 via-purple-200 to-purple-100 bg-clip-text text-4xl font-black text-transparent md:text-5xl lg:text-6xl"
|
||||
>
|
||||
Votre Lecture Spirituelle
|
||||
</h1>
|
||||
<p class="mx-auto max-w-3xl text-lg leading-relaxed text-purple-300/80 md:text-xl">
|
||||
Découvrez les messages que l'univers a préparés pour vous. Cette analyse détaillée vous guidera sur votre chemin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-16">
|
||||
<div class="h-12 w-12 animate-spin rounded-full border-t-2 border-b-2 border-[var(--subtle-gold)]"></div>
|
||||
<div v-if="loading" class="flex flex-col items-center justify-center py-20">
|
||||
<div class="relative">
|
||||
<div class="h-16 w-16 animate-spin rounded-full border-4 border-purple-700/30"></div>
|
||||
<div
|
||||
class="absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform animate-pulse rounded-full bg-gradient-to-r from-purple-400 to-purple-300"
|
||||
></div>
|
||||
</div>
|
||||
<p class="mt-6 font-medium text-purple-300/80">Chargement de votre lecture...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="mb-8 rounded-lg bg-red-50 p-6 text-center">
|
||||
<div class="mb-2 font-medium text-red-700">Erreur</div>
|
||||
<p class="text-red-600">{{ error }}</p>
|
||||
<button @click="$router.back()" class="mt-4 rounded-md bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700">
|
||||
Retour
|
||||
<div v-else-if="error" class="mx-auto mb-12 max-w-2xl">
|
||||
<div
|
||||
class="rounded-2xl border border-red-700/30 bg-gradient-to-br from-red-900/30 to-purple-900/40 p-8 text-center shadow-2xl backdrop-blur-sm"
|
||||
>
|
||||
<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border border-red-700/20 bg-red-900/40">
|
||||
<div class="text-2xl text-red-300">⚠️</div>
|
||||
</div>
|
||||
<h3 class="mb-2 text-xl font-bold text-red-200">Une erreur est survenue</h3>
|
||||
<p class="mb-6 text-red-300/90">{{ error }}</p>
|
||||
<button
|
||||
@click="$router.back()"
|
||||
class="transform rounded-full border border-red-500/20 bg-gradient-to-r from-red-600 to-purple-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
|
||||
>
|
||||
Retour à la page précédente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="!hasCards" class="rounded-lg bg-gray-50 p-8 text-center">
|
||||
<p class="text-gray-600">Aucune carte n'a été trouvée pour votre session.</p>
|
||||
<div v-else-if="!hasCards" class="mx-auto max-w-2xl">
|
||||
<div
|
||||
class="rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-indigo-900/30 p-12 text-center shadow-2xl backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border border-purple-600/20 bg-purple-800/30"
|
||||
>
|
||||
<div class="text-3xl text-purple-300">🔮</div>
|
||||
</div>
|
||||
<h3 class="mb-3 text-2xl font-bold text-purple-200">Aucune carte trouvée</h3>
|
||||
<p class="mb-6 text-purple-300/80">Votre session n'a pas généré de lecture. Veuillez réessayer ou contacter le support.</p>
|
||||
<button
|
||||
@click="$router.back()"
|
||||
class="rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-600 to-indigo-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:shadow-lg"
|
||||
>
|
||||
Nouvelle tentative
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards Results -->
|
||||
<div v-else class="mb-8 md:mb-12">
|
||||
<div class="space-y-6 md:space-y-8">
|
||||
<card-result
|
||||
<div v-else class="mb-12 md:mb-16">
|
||||
<div class="grid gap-8 md:gap-10">
|
||||
<div
|
||||
v-for="(card, index) in cards"
|
||||
:key="card.id || index"
|
||||
class="transform transition-all duration-500 hover:scale-[1.02]"
|
||||
:style="{ animationDelay: `${index * 100}ms` }"
|
||||
>
|
||||
<card-result
|
||||
:card-number="card.id"
|
||||
:name="card.name"
|
||||
:image-url="card.image_url"
|
||||
@ -87,22 +127,69 @@ onMounted(async () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consultation CTA -->
|
||||
<div
|
||||
v-if="!loading && !error"
|
||||
class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
|
||||
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"
|
||||
>
|
||||
<div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
|
||||
<p class="text-midnight-blue/80 mx-auto mb-6 max-w-2xl text-base leading-relaxed md:mb-8 md:text-lg">
|
||||
Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
|
||||
<!-- Background decoration -->
|
||||
<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"
|
||||
></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>
|
||||
<h3 class="mb-4 bg-gradient-to-r from-purple-300 to-purple-200 bg-clip-text text-2xl font-black text-transparent md:text-3xl">
|
||||
Approfondissez Votre Voyage
|
||||
</h3>
|
||||
<p class="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-purple-300/80">
|
||||
Pour une guidance personnalisée et une compréhension plus profonde de votre chemin de vie, réservez une consultation
|
||||
privée avec Kris Saint Ange.
|
||||
</p>
|
||||
<button
|
||||
@click="goToBooking"
|
||||
class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
|
||||
class="group relative transform rounded-full border border-purple-400/30 bg-gradient-to-r from-purple-500 to-purple-400 px-8 py-4 text-lg font-bold tracking-wide text-purple-950 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:from-purple-400 hover:to-purple-300 hover:shadow-xl"
|
||||
>
|
||||
<span class="relative z-10 flex items-center justify-center">
|
||||
Réserver une Consultation
|
||||
<svg
|
||||
class="ml-2 h-5 w-5 transform transition-transform group-hover:translate-x-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-purple-300 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
></div>
|
||||
</button>
|
||||
<p class="mt-4 text-sm text-purple-400/70">Séances limitées disponibles</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div
|
||||
v-if="!loading && !error && hasCards"
|
||||
class="mx-auto mt-8 max-w-2xl rounded-2xl border border-green-700/30 bg-gradient-to-r from-green-900/30 to-emerald-900/20 p-6 text-center backdrop-blur-sm"
|
||||
>
|
||||
<div class="flex items-center justify-center space-x-3">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-full border border-green-600/20 bg-green-800/40">
|
||||
<div class="text-green-300">✓</div>
|
||||
</div>
|
||||
<p class="font-medium text-green-200">Votre lecture a été générée avec succès !</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -110,18 +197,76 @@ onMounted(async () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout-content-container {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
.container {
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Staggered animation for cards */
|
||||
.grid > * {
|
||||
animation: slideInLeft 0.6s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar for dark theme */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* Glow effects for interactive elements */
|
||||
button {
|
||||
box-shadow: 0 4px 15px rgba(128, 90, 213, 0.3);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 8px 25px rgba(128, 90, 213, 0.5);
|
||||
}
|
||||
|
||||
/* Subtle background pattern */
|
||||
main::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(199, 120, 221, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(128, 90, 213, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user