380 lines
18 KiB
Vue
380 lines
18 KiB
Vue
<template>
|
|
<section class="overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
|
|
<!-- Animated background elements -->
|
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div
|
|
v-for="i in 15"
|
|
:key="'bg-' + i"
|
|
class="absolute rounded-full opacity-10"
|
|
:class="{
|
|
'bg-[var(--c-gold)]': i % 3 === 0,
|
|
'bg-[var(--c-purple)]': i % 3 === 1,
|
|
'bg-white': i % 3 === 2,
|
|
}"
|
|
:style="{
|
|
width: `${20 + ((i * 5) % 60)}px`,
|
|
height: `${20 + ((i * 5) % 60)}px`,
|
|
top: `${(i * 7) % 100}%`,
|
|
left: `${(i * 10) % 100}%`,
|
|
animation: `float ${15 + i * 2}s ease-in-out infinite`,
|
|
animationDelay: `${i * 0.7}s`,
|
|
}"
|
|
></div>
|
|
</div>
|
|
|
|
<h2
|
|
class="relative z-10 mb-16 transform text-center text-4xl font-bold text-[var(--c-white)] transition-all duration-700 hover:scale-105 md:text-5xl"
|
|
>
|
|
<span class="relative inline-block">
|
|
Explorez Nos Lectures
|
|
<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 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-gradient-to-b from-[var(--card)] to-[var(--card)]/90 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">
|
|
<div
|
|
class="animate-border-pulse absolute -inset-2 rounded-2xl bg-gradient-to-r from-[var(--c-purple)]/0 via-[var(--c-purple)]/30 to-[var(--c-purple)]/0"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Floating icon -->
|
|
<div
|
|
class="absolute -top-6 -right-6 text-8xl text-[var(--c-gold)] opacity-5 transition-all duration-700 group-hover:scale-110 group-hover:opacity-10"
|
|
>
|
|
✦
|
|
</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>
|
|
<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>
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
|
>
|
|
<div class="animate-ping-slow h-24 w-24 rounded-full border-2 border-[var(--c-gold)]/30"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animated checkmark list -->
|
|
<ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
|
|
<li
|
|
v-for="(feature, index) in freeFeatures"
|
|
:key="index"
|
|
class="flex items-center gap-3 transition-all duration-300"
|
|
:class="{
|
|
'group-hover:-translate-x-1': index === 0,
|
|
'group-hover:-translate-x-2': index === 1,
|
|
'group-hover:-translate-x-3': index === 2,
|
|
}"
|
|
:style="{ transitionDelay: `${index * 100}ms` }"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
<span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<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-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
|
|
>
|
|
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Commencer</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"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
<div
|
|
class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
|
|
></div>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Featured Tier -->
|
|
<div
|
|
class="group relative flex scale-105 flex-col gap-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[var(--c-purple)] to-purple-900 p-8 shadow-lg ring-2 ring-[var(--c-gold)] transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] hover:shadow-2xl"
|
|
>
|
|
<!-- Popular badge with animation -->
|
|
<div class="absolute top-4 right-4 z-10">
|
|
<div class="relative">
|
|
<div class="absolute -inset-1 animate-pulse rounded-full bg-[var(--c-gold)] opacity-75 blur"></div>
|
|
<div class="relative rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-[var(--c-purple)]">POPULAIRE</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sparkle effect -->
|
|
<div
|
|
v-for="i in 3"
|
|
:key="'sparkle-' + i"
|
|
class="animate-sparkle absolute text-[var(--c-gold)] opacity-70"
|
|
:class="{
|
|
'top-4 left-4 text-xl': i === 1,
|
|
'right-6 bottom-6 text-lg': i === 2,
|
|
'top-1/2 left-1/4 text-sm': i === 3,
|
|
}"
|
|
>
|
|
✦
|
|
</div>
|
|
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/10 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
></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-[var(--c-gold)]">
|
|
Profilage
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/90">
|
|
<li
|
|
v-for="(feature, index) in featuredFeatures"
|
|
:key="index"
|
|
class="flex items-center gap-3 transition-all duration-300"
|
|
:class="{
|
|
'group-hover:-translate-x-1': index === 0,
|
|
'group-hover:-translate-x-2': index === 1,
|
|
'group-hover:-translate-x-3': index === 2,
|
|
}"
|
|
:style="{ transitionDelay: `${index * 100}ms` }"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
<span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<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-400 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-300 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>
|
|
<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"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
<div
|
|
class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 group-hover:translate-x-full"
|
|
></div>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Premium Tier -->
|
|
<div
|
|
class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
|
|
>
|
|
<!-- Golden particles -->
|
|
<div
|
|
v-for="i in 5"
|
|
:key="'particle-' + i"
|
|
class="animate-float absolute rounded-full bg-[var(--c-gold)]/40"
|
|
:class="{
|
|
'top-4 left-4 h-3 w-3': i === 1,
|
|
'right-6 bottom-6 h-2 w-2': i === 2,
|
|
'top-1/4 right-4 h-4 w-4': i === 3,
|
|
'bottom-4 left-6 h-3 w-3': i === 4,
|
|
'top-3/4 left-4 h-2 w-2': i === 5,
|
|
}"
|
|
:style="{ animationDelay: `${i * 0.5}s` }"
|
|
></div>
|
|
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
></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-[var(--c-gold)]">
|
|
Quadrige Doré
|
|
</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>
|
|
<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"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
|
|
<li
|
|
v-for="(feature, index) in premiumFeatures"
|
|
:key="index"
|
|
class="flex items-center gap-3 transition-all duration-300"
|
|
:class="{
|
|
'group-hover:-translate-x-1': index === 0,
|
|
'group-hover:-translate-x-2': index === 1,
|
|
'group-hover:-translate-x-3': index === 2,
|
|
}"
|
|
:style="{ transitionDelay: `${index * 100}ms` }"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
<span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<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-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
|
|
>
|
|
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Explorer</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"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
<div
|
|
class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
|
|
></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Define features for each tier
|
|
const freeFeatures = ["Lecture d'une carte", 'Interprétation générale', 'Conseils rapides'];
|
|
|
|
const featuredFeatures = ['Lecture de trois cartes', 'Analyse personnalisée', 'Recommandations ciblées'];
|
|
|
|
const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie', 'Stratégie complète'];
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Custom animations */
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
33% {
|
|
transform: translateY(-5px) rotate(2deg);
|
|
}
|
|
66% {
|
|
transform: translateY(3px) rotate(-2deg);
|
|
}
|
|
}
|
|
|
|
@keyframes border-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes ping-slow {
|
|
0% {
|
|
transform: scale(0.8);
|
|
opacity: 1;
|
|
}
|
|
75%,
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes sparkle {
|
|
0%,
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes spin-slow {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-border-pulse {
|
|
animation: border-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-ping-slow {
|
|
animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
.animate-sparkle {
|
|
animation: sparkle 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spin-slow {
|
|
animation: spin-slow 8s linear infinite;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Custom color variables */
|
|
:root {
|
|
--c-purple: #4c1d95;
|
|
--c-white: #ffffff;
|
|
--c-gold: rgba(245, 158, 11, 0.9);
|
|
--card: #1e1b4b;
|
|
}
|
|
|
|
/* Smooth transitions for all elements */
|
|
* {
|
|
transition-property: color, background-color, transform, opacity, filter;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
</style>
|