diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte index 65f58ea3266b7c8fd5141224d46ea67bbc304c82..8623d45bbf4fb89420b9e6f779ee0e553b4e2e0f 100644 --- a/src/routes/welcome/+page.svelte +++ b/src/routes/welcome/+page.svelte @@ -232,11 +232,11 @@ class="fond grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white" > <h2 - class="justify-self-center text-2xl font-bold col-span-4 text-center relative z-10 max-w-prose" + class="justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose" > <span - class="border-b-2 border-black pb-3 font-serif italic font-light highlight" - >le budgétaire</span + class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10" + ><span class="highlight">le budgétaire</span></span > <br /> <br /> @@ -292,11 +292,11 @@ 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" + class="justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose" > <span - class="border-b-2 border-black pb-3 font-serif italic font-light highlight" - >la feuille de paie</span + class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10" + ><span class="highlight">la feuille de paie</span></span > <br /> <br /> @@ -334,6 +334,97 @@ </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-[#D7E2F4]" + > + <h2 + class="justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose" + > + <span + class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10" + ><span class="highlight">les graphiques cas types</span></span + > + <br /> + <br /> + Consulter l’évolution du système socio-fiscal d’un cas type selon son salaire + </h2> + + <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-graphiques-cas-types.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 + > + </div> + <div class="col-span-4 grid grid-cols-3 gap-12 bg-[#D7E2F4]"> + <h3 + class="justify-self-center text-2xl font-light col-span-3 text-center relative z-10 max-w-prose" + > + Comment accéder à cette fonctionnalité ? + </h3> + + <div + class=" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end" + > + <h4 class="relative font-light text-xl font-sans mb-4 text-center z-10"> + <span class="highlight-grey">1. Sélectionner un cas type</span> + </h4> + <p class="font-serif text-base text-center"> + Rendez-vous sur le <a href="#" class="link text-le-bleu">simulateur</a + >, sélectionnez un cas type. + </p> + </div> + <div + class=" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end" + > + <h4 class="relative font-light text-xl font-sans mb-4 text-center z-10"> + <span class="highlight-grey" + >2. Cliquer sur l’onglet « fiche de paie »</span + > + </h4> + <p class="font-serif text-base text-center"> + Vérifiez que vous êtes bien sur l’onglet « fiche de paie » + et non sur une vue zoomée sur un seul dispositif. + </p> + </div> + <div + class=" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end" + > + <h4 class="relative font-light text-xl font-sans mb-4 text-center z-10"> + <span class="highlight-grey" + >3. Défiler vers le bas et ouvrir l’accordéon</span + > + </h4> + <p class="font-serif text-base text-center"> + En bas de la « fiche de paie », déplier l’accordéon + « Voir ce cas type sur un graphique faisant évoluer le + salaire ». + </p> + </div> + <div class="flex justify-center col-span-3"> + <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 les graphiques<iconify-icon + class="ml-2 align-[-0.4rem] text-2xl" + icon="ri-arrow-right-line" + /> + </button> + </div> + </div> + </section> </main> <style lang="postcss"> @@ -341,6 +432,10 @@ @apply relative before:absolute before:-z-10 before:top-1 before:bottom-0 before:-left-1 before:-right-4 before:bg-le-jaune before:bg-opacity-65; } + .highlight-grey { + @apply relative before:absolute before:-z-10 before:top-1 before:bottom-0 before:-left-1 before:-right-4 before:bg-[#C5C39C] before:bg-opacity-65; + } + .fond { background-color: #ffffff; /* Polka dots - Heropatterns.com échelle réduite */ diff --git a/static/welcome-capture-ecran-graphiques-cas-types.png b/static/welcome-capture-ecran-graphiques-cas-types.png new file mode 100644 index 0000000000000000000000000000000000000000..6683b10efe305812197feb1f1c9d4d002d070f5a Binary files /dev/null and b/static/welcome-capture-ecran-graphiques-cas-types.png differ