96 lines
5.7 KiB
Vue
96 lines
5.7 KiB
Vue
<template>
|
|
<section class="relative overflow-hidden py-20 sm:py-24">
|
|
<!-- Background Image with Overlay -->
|
|
<div class="absolute inset-0 z-0">
|
|
<div class="absolute inset-0 bg-[url('how-back.jpg')] bg-cover bg-center bg-no-repeat"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-[var(--midnight-blue)]/20 to-[var(--subtle-gold)]/30"></div>
|
|
</div>
|
|
|
|
<!-- Content Container -->
|
|
<div class="relative z-10 mx-auto max-w-6xl px-4">
|
|
<!-- Titre avec couleur blanche sur mobile et couleur originale sur desktop -->
|
|
<h2 class="mb-16 text-center text-4xl font-bold text-white drop-shadow-sm md:text-5xl md:text-[var(--midnight-blue)]">
|
|
Comment cela fonctionne
|
|
</h2>
|
|
|
|
<!-- Le reste du code reste identique -->
|
|
<!-- Timeline Container -->
|
|
<div class="relative mx-auto max-w-2xl">
|
|
<!-- Vertical Timeline Line -->
|
|
<div
|
|
class="absolute left-1/2 h-full w-1 -translate-x-1/2 bg-gradient-to-b from-[var(--subtle-gold)] to-[var(--midnight-blue)] shadow-md"
|
|
></div>
|
|
|
|
<!-- Timeline Items -->
|
|
<div class="relative z-10 flex flex-col gap-16">
|
|
<!-- Step 1 -->
|
|
<div class="group flex items-center gap-8">
|
|
<div class="relative">
|
|
<div
|
|
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
|
|
>
|
|
1
|
|
</div>
|
|
<div
|
|
class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
|
|
>
|
|
<h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Choisissez Votre Lecture</h3>
|
|
<p class="text-[var(--midnight-blue)]/80">
|
|
Sélectionnez parmi nos différentes méthodes de divination pour trouver celle qui résonne avec vous.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="group flex items-center justify-end gap-8 text-right">
|
|
<div
|
|
class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
|
|
>
|
|
<h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Recevez Votre Interprétation</h3>
|
|
<p class="text-[var(--midnight-blue)]/80">
|
|
Obtenez une analyse détaillée et personnalisée de votre tirage par nos experts.
|
|
</p>
|
|
</div>
|
|
<div class="relative">
|
|
<div
|
|
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
|
|
>
|
|
2
|
|
</div>
|
|
<div
|
|
class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="group flex items-center gap-8">
|
|
<div class="relative">
|
|
<div
|
|
class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl"
|
|
>
|
|
3
|
|
</div>
|
|
<div
|
|
class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)] opacity-20 blur-md transition-opacity duration-300 group-hover:opacity-40"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="rounded-xl border border-white/50 bg-white/80 p-6 shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:bg-white/90 group-hover:shadow-xl"
|
|
>
|
|
<h3 class="mb-2 text-2xl font-bold text-[var(--midnight-blue)]">Appliquez la Sagesse</h3>
|
|
<p class="text-[var(--midnight-blue)]/80">
|
|
Intégrez les conseils et perspectives reçues dans votre vie quotidienne pour avancer avec clarté.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|