292 lines
13 KiB
Vue
292 lines
13 KiB
Vue
<template>
|
|
<section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
|
|
<!-- Background images with transparency -->
|
|
<div class="absolute inset-0 opacity-10">
|
|
<div class="absolute top-0 left-0 h-1/3 w-1/3 bg-[url('/background/IMG_2254.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
|
|
<div class="absolute right-0 bottom-0 h-1/3 w-1/3 bg-[url('/background/IMG_2252.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
|
|
</div>
|
|
|
|
<!-- Animated floating elements -->
|
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div
|
|
v-for="i in 8"
|
|
:key="'float-' + i"
|
|
class="absolute rounded-full opacity-20"
|
|
:class="{
|
|
'bg-[var(--c-gold)]': i % 2 === 0,
|
|
'bg-[var(--c-purple)]': i % 2 === 1,
|
|
}"
|
|
:style="{
|
|
width: `${15 + i * 3}px`,
|
|
height: `${15 + i * 3}px`,
|
|
top: `${(i * 12) % 100}%`,
|
|
left: `${(i * 15) % 100}%`,
|
|
animation: `float ${12 + i}s ease-in-out infinite`,
|
|
animationDelay: `${i * 0.5}s`,
|
|
}"
|
|
></div>
|
|
</div>
|
|
|
|
<h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
|
|
<span class="relative inline-block">
|
|
Comment cela fonctionne
|
|
<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 mx-auto max-w-4xl">
|
|
<!-- Animated connecting line with glow effect -->
|
|
<div class="absolute top-0 bottom-0 left-1/2 w-1 -translate-x-1/2">
|
|
<div class="relative h-full w-full bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60">
|
|
<div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/30 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Glowing orbs along the line -->
|
|
<div
|
|
v-for="i in 3"
|
|
:key="'orb-' + i"
|
|
class="animate-orb-pulse absolute left-1/2 h-6 w-6 -translate-x-1/2 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-80 shadow-lg"
|
|
:style="{
|
|
top: `${i * 33}%`,
|
|
animationDelay: `${i * 0.3}s`,
|
|
}"
|
|
></div>
|
|
|
|
<div class="relative z-10 flex flex-col gap-16">
|
|
<!-- Step 1 -->
|
|
<div class="group flex items-center gap-8">
|
|
<div class="relative flex-shrink-0">
|
|
<div
|
|
class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
|
|
>
|
|
<span class="z-10">1</span>
|
|
<div
|
|
class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
|
|
></div>
|
|
</div>
|
|
<!-- Decorative sparkles -->
|
|
<div
|
|
v-for="i in 3"
|
|
:key="'sparkle1-' + i"
|
|
class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
:class="{
|
|
'top-0 right-0 text-lg': i === 1,
|
|
'bottom-0 left-0 text-sm': i === 2,
|
|
'top-1/2 -right-2 text-xs': i === 3,
|
|
}"
|
|
:style="{ animationDelay: `${i * 0.2}s` }"
|
|
>
|
|
✦
|
|
</div>
|
|
</div>
|
|
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
|
|
<h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
|
|
<span>Choisissez Votre Lecture</span>
|
|
<span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
|
|
</h3>
|
|
<p
|
|
class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
|
|
>
|
|
Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="group flex items-center justify-end gap-8 text-right">
|
|
<div class="transform pr-4 transition-all duration-500 group-hover:-translate-y-1">
|
|
<h3 class="mb-2 flex items-center justify-end gap-2 text-2xl font-bold text-white">
|
|
<span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
|
|
<span>Recevez Votre Interprétation</span>
|
|
</h3>
|
|
<p
|
|
class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
|
|
>
|
|
Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
|
|
</p>
|
|
</div>
|
|
<div class="relative flex-shrink-0">
|
|
<div
|
|
class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
|
|
>
|
|
<span class="z-10">2</span>
|
|
<div
|
|
class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
|
|
></div>
|
|
</div>
|
|
<!-- Decorative sparkles -->
|
|
<div
|
|
v-for="i in 3"
|
|
:key="'sparkle2-' + i"
|
|
class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
:class="{
|
|
'top-0 left-0 text-lg': i === 1,
|
|
'right-0 bottom-0 text-sm': i === 2,
|
|
'top-1/2 -left-2 text-xs': i === 3,
|
|
}"
|
|
:style="{ animationDelay: `${i * 0.2}s` }"
|
|
>
|
|
✦
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="group flex items-center gap-8">
|
|
<div class="relative flex-shrink-0">
|
|
<div
|
|
class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
|
|
>
|
|
<span class="z-10">3</span>
|
|
<div
|
|
class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
|
|
></div>
|
|
</div>
|
|
<!-- Decorative sparkles -->
|
|
<div
|
|
v-for="i in 3"
|
|
:key="'sparkle3-' + i"
|
|
class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
|
:class="{
|
|
'top-0 right-0 text-lg': i === 1,
|
|
'bottom-0 left-0 text-sm': i === 2,
|
|
'top-1/2 -right-2 text-xs': i === 3,
|
|
}"
|
|
:style="{ animationDelay: `${i * 0.2}s` }"
|
|
>
|
|
✦
|
|
</div>
|
|
</div>
|
|
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
|
|
<h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
|
|
<span>Appliquez la Sagesse</span>
|
|
<span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
|
|
</h3>
|
|
<p
|
|
class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
|
|
>
|
|
Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animated decorative elements -->
|
|
<div class="absolute -top-10 -left-10 h-24 w-24 animate-pulse rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
|
|
<div class="absolute -right-10 -bottom-10 h-32 w-32 animate-pulse rounded-full bg-[var(--c-purple)]/20 blur-xl delay-1000"></div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HowItWorks',
|
|
mounted() {
|
|
// Add intersection observer for scroll animations
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.2,
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in-up');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe each step
|
|
document.querySelectorAll('.group').forEach((step) => {
|
|
observer.observe(step);
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Custom animations */
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
33% {
|
|
transform: translateY(-8px) rotate(2deg);
|
|
}
|
|
66% {
|
|
transform: translateY(5px) rotate(-2deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-slow {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes orb-pulse {
|
|
0%,
|
|
100% {
|
|
transform: translateX(-50%) scale(1);
|
|
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
|
|
}
|
|
70% {
|
|
transform: translateX(-50%) scale(1.05);
|
|
box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
|
|
}
|
|
}
|
|
|
|
.group {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition:
|
|
opacity 0.6s ease-out,
|
|
transform 0.6s ease-out;
|
|
}
|
|
|
|
.group:nth-child(1) {
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
.group:nth-child(2) {
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.group:nth-child(3) {
|
|
transition-delay: 0.5s;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-orb-pulse {
|
|
animation: orb-pulse 2s infinite;
|
|
}
|
|
|
|
/* Custom color variables */
|
|
:root {
|
|
--c-purple: #4c1d95;
|
|
--c-gold: rgba(245, 158, 11, 0.9);
|
|
--linen: #faf0e6;
|
|
}
|
|
|
|
/* Smooth transitions for all elements */
|
|
* {
|
|
transition-property: color, background-color, transform, opacity, box-shadow, border-color;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
</style>
|