308 lines
12 KiB
Vue
308 lines
12 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" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.10), rgba(76, 29, 149, 0.05));">
|
|
<!-- Single elegant background image -->
|
|
<div class="absolute inset-0">
|
|
<div class="absolute inset-0 bg-[url('/image002.jpg')] bg-cover bg-center opacity-20 mix-blend-soft-light"></div>
|
|
</div>
|
|
|
|
<!-- Subtle floating elements -->
|
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div
|
|
v-for="i in 12"
|
|
:key="'float-' + i"
|
|
class="absolute opacity-10"
|
|
:class="{
|
|
'text-[var(--c-gold)]': i % 3 === 0,
|
|
'text-[var(--c-purple)]': i % 3 === 1,
|
|
'text-white': i % 3 === 2,
|
|
}"
|
|
:style="{
|
|
fontSize: `${8 + i * 2}px`,
|
|
top: `${(i * 15) % 100}%`,
|
|
left: `${(i * 12) % 100}%`,
|
|
animation: `float ${15 + i * 2}s ease-in-out infinite`,
|
|
animationDelay: `${i * 0.3}s`,
|
|
}"
|
|
>
|
|
{{ i % 3 === 0 ? '✦' : i % 3 === 1 ? '✧' : '☆' }}
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 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">
|
|
<!-- Elegant connecting line -->
|
|
<div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2">
|
|
<div class="relative h-full w-full">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-40"></div>
|
|
<div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Minimal orbs along the line -->
|
|
<div
|
|
v-for="i in 3"
|
|
:key="'orb-' + i"
|
|
class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-80"
|
|
:style="{
|
|
top: `${i * 33}%`,
|
|
}"
|
|
></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-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
|
|
>
|
|
<span class="z-10">1</span>
|
|
<div
|
|
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
|
|
></div>
|
|
</div>
|
|
<!-- Subtle sparkles -->
|
|
<div
|
|
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
|
|
>
|
|
✦
|
|
</div>
|
|
</div>
|
|
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
|
|
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
|
|
<span>Choisissez Votre Lecture</span>
|
|
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
|
|
</h3>
|
|
<p
|
|
class="max-w-md rounded-lg 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)]/30 group-hover:bg-black/40"
|
|
>
|
|
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-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
|
|
<span class="text-lg 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-lg 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)]/30 group-hover:bg-black/40"
|
|
>
|
|
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-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
|
|
>
|
|
<span class="z-10">2</span>
|
|
<div
|
|
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
|
|
></div>
|
|
</div>
|
|
<!-- Subtle sparkles -->
|
|
<div
|
|
class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
|
|
>
|
|
✦
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="group flex items-center gap-8">
|
|
<div class="relative flex-shrink-0">
|
|
<div
|
|
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
|
|
>
|
|
<span class="z-10">3</span>
|
|
<div
|
|
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
|
|
></div>
|
|
</div>
|
|
<!-- Subtle sparkles -->
|
|
<div
|
|
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
|
|
>
|
|
✦
|
|
</div>
|
|
</div>
|
|
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
|
|
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
|
|
<span>Appliquez la Sagesse</span>
|
|
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
|
|
</h3>
|
|
<p
|
|
class="max-w-md rounded-lg 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)]/30 group-hover:bg-black/40"
|
|
>
|
|
Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subtle decorative elements -->
|
|
<div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
|
|
<div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/20 blur-xl"></div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HowItWorks',
|
|
mounted() {
|
|
// Add intersection observer for scroll animations
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1,
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in-up');
|
|
// Stagger animation for each step
|
|
const steps = entry.target.closest('.relative').querySelectorAll('.group');
|
|
steps.forEach((step, index) => {
|
|
step.style.transitionDelay = `${index * 0.2}s`;
|
|
});
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe the container
|
|
const container = document.querySelector('.relative.mx-auto');
|
|
if (container) {
|
|
observer.observe(container);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Custom animations */
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 0.1;
|
|
}
|
|
50% {
|
|
transform: translateY(-10px) rotate(180deg);
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-slow {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Scroll animation */
|
|
.group {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition:
|
|
opacity 0.6s ease-out,
|
|
transform 0.6s ease-out;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Button styles */
|
|
.mystic-btn {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mystic-btn-primary {
|
|
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
|
|
box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
|
|
}
|
|
|
|
.mystic-btn-primary:hover {
|
|
box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
|
|
}
|
|
|
|
.mystic-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.6s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mystic-btn:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
/* Custom color variables */
|
|
:root {
|
|
--c-purple: #4c1d95;
|
|
--c-gold: rgba(245, 158, 11, 0.9);
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.group {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.group:nth-child(2) {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.transform.pl-4,
|
|
.transform.pr-4 {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.relative.mx-auto {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.absolute.left-1\/2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
* {
|
|
transition:
|
|
color 0.3s ease,
|
|
background-color 0.3s ease,
|
|
transform 0.3s ease,
|
|
opacity 0.3s ease;
|
|
}
|
|
</style>
|