preview (image)
<div class="bg-ui-light">
<div class="container-desktop flex flex-col md:flex-row p-5 md:p-20 gap-10 md:gap-20">
<div class="flex flex-col gap-5 md:w-1/4">
<h2 class="font-bold text-3xl md:text-4.5xl leading-13">Comment ça marche ?</h2>
<span class="text-xl md:text-3xl leading-9">Estimation rapide ou précise ? Les étapes pour avoir une estimation précise en quelques clics</span>
<button class="btn btn-primary py-2.75 md:px-13 flex-1 md:flex-none">Je me lance</button>
</div>
<div class="md:w-3/4 grid grid-cols-2 lg:grid-cols-3 gap-7 relative">
<div class="flex flex-col bg-white rounded-[15px] max-w-[260px] gap-4 p-4 md:p-8 z-10">
<?= icon('step-1', 'w-11'); ?>
<span class="text-2xl font-bold">Estimation rapide</span>
<span>Sur la base de votre <span class="font-bold">immatriculation</span> ou de simples <span
class="font-bold">informations</span>, nous vous proposons une fourchette de prix de reprise</span>
</div>
<div class="flex flex-col bg-white rounded-[15px] max-w-[260px] gap-4 p-4 md:p-8 z-10">
<?= icon('step-2', 'w-11'); ?>
<span class="text-2xl font-bold">Quelques précisions</span>
<span>Vous pouvez <span class="font-bold">poursuivre l’estimation</span> pour l’avoir au centime près</span>
<span>Quelques questions sur l’état de votre véhicule, intérieur et extérieur</span>
</div>
<div class="flex flex-col bg-white rounded-[15px] max-w-[260px] gap-4 p-4 md:p-8 z-10 order-4 xl:order-3">
<?= icon('step-3', 'w-11'); ?>
<span class="text-2xl font-bold">Et quelques photos</span>
<span>Uploadez <span class="font-bold">quelques photos</span> de votre véhicule pour que nos experts puissent réaliser une évaluation précise</span>
</div>
<div class="flex flex-col bg-white rounded-[15px] max-w-[260px] gap-4 p-4 md:p-8 z-10 order-3 xl:order-5">
<?= icon('step-4', 'w-11'); ?>
<span class="text-2xl font-bold">Analyse de votre dossier</span>
<span>Nos <span class="font-bold">experts</span> analysent votre dossier <span
class="font-bold">sous 24H.</span></span>
</div>
<div class="relative order-5 xl:order-4">
<div class="flex flex-col bg-white rounded-[15px] max-w-[260px] gap-4 p-4 md:p-8 z-10 relative">
<?= icon('check-blue-colored', 'w-11'); ?>
<span class="text-2xl font-bold">Votre estimation est prête</span>
<span>Vous recevez votre estimation par mail et vous la retrouvez à tout moment dans votre garage en ligne.</span>
</div>
<span class="block lg:hidden left-[30%] absolute border-r-[5px] border-icon top-[-25%] h-[50%]"></span>
</div>
<span class="absolute border-t-[5px] border-r-[5px] border-b-[5px] border-icon w-[83%] h-[54%] top-[7%] rounded-br-[60px]"></span>
</div>
</div>
</div>