236 lines
14 KiB
Vue
236 lines
14 KiB
Vue
<template>
|
|
<section class="bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
|
|
<h2 class="mb-16 transform text-center text-4xl font-bold text-[var(--c-white)] transition-all duration-700 hover:scale-105 md:text-5xl">
|
|
Explorez Nos Lectures
|
|
</h2>
|
|
|
|
<div class="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"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
></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>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Gratuit</p>
|
|
</div>
|
|
<ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
|
|
<li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Lecture d'une carte
|
|
</li>
|
|
<li class="flex items-center gap-3 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Interprétation générale
|
|
</li>
|
|
<li class="flex items-center gap-3 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Conseils rapides
|
|
</li>
|
|
</ul>
|
|
<button
|
|
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center 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="transition-transform duration-300 group-hover:translate-x-1">Commencer</span>
|
|
<svg
|
|
class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</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"
|
|
>
|
|
<div class="absolute top-4 right-4 z-10 rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-[var(--c-purple)]">
|
|
POPULAIRE
|
|
</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>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">29€</p>
|
|
</div>
|
|
<ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/90">
|
|
<li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Lecture de trois cartes
|
|
</li>
|
|
<li class="flex items-center gap-3 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Analyse personnalisée
|
|
</li>
|
|
<li class="flex items-center gap-3 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Recommandations ciblées
|
|
</li>
|
|
</ul>
|
|
<button
|
|
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center 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="transition-transform duration-300 group-hover:translate-x-1">Découvrir</span>
|
|
<svg
|
|
class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</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"
|
|
>
|
|
<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>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">99€</p>
|
|
</div>
|
|
<ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
|
|
<li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Lecture de quatre cartes
|
|
</li>
|
|
<li class="flex items-center gap-3 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Exploration approfondie
|
|
</li>
|
|
<li class="flex items-center gap-3 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
|
|
<svg
|
|
class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<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>
|
|
Stratégie complète
|
|
</li>
|
|
</ul>
|
|
<button
|
|
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center 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="transition-transform duration-300 group-hover:translate-x-1">Explorer</span>
|
|
<svg
|
|
class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Custom animations for the cards */
|
|
.group:hover .group-hover\:-translate-x-1 {
|
|
transform: translateX(-4px);
|
|
}
|
|
|
|
/* Smooth transitions for all elements */
|
|
* {
|
|
transition-property: color, background-color, transform, opacity;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
</style>
|