41 lines
2.1 KiB
Vue
41 lines
2.1 KiB
Vue
<template>
|
|
<section class="py-20 sm:py-24">
|
|
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Comment cela fonctionne</h2>
|
|
<div class="relative mx-auto max-w-2xl">
|
|
<div class="absolute left-1/2 h-full w-0.5 -translate-x-1/2 bg-[var(--linen)]"></div>
|
|
<div class="relative z-10 flex flex-col gap-16">
|
|
<div class="flex items-center gap-8">
|
|
<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"
|
|
>
|
|
1
|
|
</div>
|
|
<div class="bg-[var(--light-ivory)] pl-4">
|
|
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Choisissez Votre Lecture</h3>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-8 text-right">
|
|
<div class="bg-[var(--light-ivory)] pr-4">
|
|
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Recevez Votre Interprétation</h3>
|
|
</div>
|
|
<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"
|
|
>
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-8">
|
|
<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"
|
|
>
|
|
3
|
|
</div>
|
|
<div class="bg-[var(--light-ivory)] pl-4">
|
|
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Appliquez la Sagesse</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|