Skip to content
Snippets Groups Projects
Commit 9ff9756d authored by Dorine Lambinet's avatar Dorine Lambinet Committed by Toufic Batache
Browse files

Ajoute section graphiques des cas types

parent d825720d
No related branches found
No related tags found
1 merge request!210Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur
...@@ -232,11 +232,11 @@ ...@@ -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" 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 <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 <span
class="border-b-2 border-black pb-3 font-serif italic font-light highlight" class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
>le budgétaire</span ><span class="highlight">le budgétaire</span></span
> >
<br /> <br />
<br /> <br />
...@@ -292,11 +292,11 @@ ...@@ -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]" 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 <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 <span
class="border-b-2 border-black pb-3 font-serif italic font-light highlight" class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
>la feuille de paie</span ><span class="highlight">la feuille de paie</span></span
> >
<br /> <br />
<br /> <br />
...@@ -334,6 +334,97 @@ ...@@ -334,6 +334,97 @@
</div> </div>
</div> </div>
</section> </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 «&nbsp;fiche de paie&nbsp;»</span
>
</h4>
<p class="font-serif text-base text-center">
Vérifiez que vous êtes bien sur l’onglet «&nbsp;fiche de paie&nbsp;»
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 «&nbsp;fiche de paie&nbsp;», déplier l’accordéon
«&nbsp;Voir ce cas type sur un graphique faisant évoluer le
salaire&nbsp;».
</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> </main>
<style lang="postcss"> <style lang="postcss">
...@@ -341,6 +432,10 @@ ...@@ -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; @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 { .fond {
background-color: #ffffff; background-color: #ffffff;
/* Polka dots - Heropatterns.com échelle réduite */ /* Polka dots - Heropatterns.com échelle réduite */
......
static/welcome-capture-ecran-graphiques-cas-types.png

581 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment