diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte index c0843a2307f4926898d4506714fa804dd9383d51..65f58ea3266b7c8fd5141224d46ea67bbc304c82 100644 --- a/src/routes/welcome/+page.svelte +++ b/src/routes/welcome/+page.svelte @@ -41,7 +41,7 @@ <main class="h-full bg-yellow-50"> <section - class="relative h-[78%] before:absolute before:top-0 before:inset-x-0 before:h-[50vh] before:bg-gradient-to-b before:from-[#9AAAB4] before:to-transparent" + class="relative h-[78%] before:absolute before:top-0 before:inset-x-0 before:h-[50vh] before:bg-gradient-to-b before:from-[#9AAAB4] before:to-transparent fond" > <div class="h-full relative z-10 flex flex-col justify-evenly items-center"> <h1 class="font-serif text-4xl text-center leading-snug"> @@ -275,16 +275,63 @@ </a> {/each} </div> + <div class="flex lg:justify-start justify-center"> + <button + class="mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase" + title="Vers le simulateur budgétaire de l'impôt sur le revenu" + > + Utiliser le simulateur budgétaire<iconify-icon + class="ml-2 align-[-0.4rem] text-2xl" + icon="ri-arrow-right-line" + /> + </button> + </div> + </div> + </section> + <section + class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#E3E4D6]" + > + <h2 + class="justify-self-center text-2xl font-bold col-span-4 text-center relative z-10 max-w-prose" + > + <span + class="border-b-2 border-black pb-3 font-serif italic font-light highlight" + >la feuille de paie</span + > + <br /> + <br /> + Visualiser l’ensemble des impôts, cotisations et prestations sociales qui affectent + un cas type + </h2> - <button - class="mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase" - title="Vers le simulateur budgétaire de l'impôt sur le revenu" + <div + class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end" + > + <img + class="max-h-[500px]" + src="welcome-capture-ecran-feuille-de-paie.png" + /> + </div> + <div class="font-serif text-lg col-span-4 lg:col-span-2"> + <span> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet + laoreet mauris, ut cursus lorem. Sed vitae dolor risus. Ut molestie + imperdiet dapibus. Nulla facilisi. Vivamus laoreet nibh at magna auctor, + eget accumsan er at volutpat. Pellentesque id est pellentesque, aliquam + purus id, ullamcorper lorem. Integer sit amet metus nulla. Vivamus + ullamcorper rutrum erat. Fusce tincidunt augue et effici iaculis.</span > - Simulateur budgétaire<iconify-icon - class="ml-2 align-[-0.4rem] text-2xl" - icon="ri-arrow-right-line" - /> - </button> + <div class="flex lg:justify-start justify-center"> + <button + class="mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase" + title="Vers le simulateur budgétaire de l'impôt sur le revenu" + > + Consulter la feuille de paie d'un cas type<iconify-icon + class="ml-2 align-[-0.4rem] text-2xl" + icon="ri-arrow-right-line" + /> + </button> + </div> </div> </section> </main> diff --git a/static/welcome-capture-ecran-feuille-de-paie.png b/static/welcome-capture-ecran-feuille-de-paie.png new file mode 100644 index 0000000000000000000000000000000000000000..75435bf227050d3e3a776e5e9b2bbf3f3b665e3b Binary files /dev/null and b/static/welcome-capture-ecran-feuille-de-paie.png differ