377 lines
17 KiB
Vue
377 lines
17 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-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
|
||
>
|
||
<!-- Animated border effect -->
|
||
<div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100">
|
||
<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">Free Reading</h3>
|
||
<div class="relative mt-2 inline-block">
|
||
<p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Free</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-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
|
||
>
|
||
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">BEGIN</span>
|
||
<svg
|
||
class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
|
||
fill="none"
|
||
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-[#4c1d95] to-[#371a70] 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)]">
|
||
Insight Profile
|
||
</h3>
|
||
<div class="relative mt-2 inline-block">
|
||
<p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">9.99 €</p>
|
||
<div
|
||
class="absolute -inset-2 rounded-full bg-[var(--c-gold)]/20 opacity-0 blur-md transition-opacity duration-500 group-hover:opacity-100"
|
||
></div>
|
||
</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-600 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-600 group-hover:to-yellow-400 group-hover:shadow-lg"
|
||
>
|
||
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">DISCOVER</span>
|
||
<svg
|
||
class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
|
||
fill="none"
|
||
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-br from-black/80 to-[#1a0b2e] 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)]">
|
||
Full card spread
|
||
</h3>
|
||
<div class="relative mt-2 inline-block">
|
||
<p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">15.90 €</p>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<div
|
||
class="animate-spin-slow h-20 w-20 rounded-full border border-[var(--c-gold)]/30 opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
||
></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-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
|
||
>
|
||
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">EXPLORE</span>
|
||
<svg
|
||
class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
|
||
fill="none"
|
||
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 lang="ts">
|
||
// Define features for each tier
|
||
const freeFeatures = ['Single‑card Reading', 'General Interpretation', 'Quick Tips'];
|
||
|
||
const featuredFeatures = ['six‑card Reading', 'Personalized Analysis', 'Tailored Recommendations'];
|
||
|
||
const premiumFeatures = ['Eigtheen‑card reading', 'In‑depth exploration', 'Complete strategy'];
|
||
</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.5);
|
||
}
|
||
|
||
/* 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>
|