Skip to main content
Sign in
Snippets Groups Projects

Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur

1 file
+ 30
17
Compare changes
  • Side-by-side
  • Inline
+ 30
17
@@ -176,21 +176,23 @@
</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]"
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] font-serif text-base 2xl:text-lg"
>
<h2
class="justify-self-center max-w-prose text-2xl font-light col-span-4 text-center"
>
Les caractéristiques du simulateur ⬇️
</h2>
<div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
>
Actions possibles
</span>
<h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
<h3
class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
>
<span> Consulter et modifier</span>
<span class="inline-flex gap-2">
la loi <img alt="Picto stylo" class="w-7" src="/picto_pen.svg" />
@@ -204,17 +206,23 @@
<li>modifier les paramètres pour voir les impacts d’une réforme.</li>
</ul>
</div>
<div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
>
Entités impactées
</span>
<h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
<h3
class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
>
<span class="inline-flex gap-2">
Budget de l'État
<PictoBudgetEtat />
<img
alt="Picto cas type"
class="w-7"
src="/pictos/picto_etat.svg"
/>
</span>
<br />
<span class="inline-flex items-center gap-2">
@@ -249,14 +257,16 @@
</ul>
</div>
<div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
>
Périmètre concerné
</span>
<h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
<h3
class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
>
<span>Fiche de paie & prestations&nbsp;sociales</span>
</h3>
</div>
@@ -270,14 +280,16 @@
<img class="mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
</div>
<div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
<span
class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
>
Période concernée
</span>
<h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
<h3
class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
>
<span>Année en cours ou à venir</span>
</h3>
</div>
@@ -294,7 +306,7 @@
</span>
</div>
<div class="col-span-4 flex flex-col items-center gap-1">
<div class="col-span-4 flex flex-col items-center gap-1 font-sans">
<a
class="inline-flex items-center gap-2 text-[#343bff] uppercase font-semibold tracking-widest hover:underline"
href="#"
@@ -314,7 +326,7 @@
</section>
<section
id="dispositif-couverts"
class="grid grid-cols-2 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
class="grid grid-cols-2 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white text-base 2xl:text-lg"
>
<h2 class="text-2xl font-light col-span-2 text-center">
Les {withLinkedVariableNames.length} dispositifs couverts<br />par le
@@ -323,16 +335,17 @@
{#each waterfallsDecompositions as { waterfall, visibleDecompositions }}
{#if visibleDecompositions.length > 0}
<div>
<h3 class="font-bold text-lg mt-1.5">
<div class="col-span-2 md:col-span-1">
<h3 class="font-bold mt-1.5 text-lg 2xl:text-xl">
Dispositifs affectant les {waterfall.label.toLowerCase()}s :
</h3>
<p class="font-serif mb-4">
{#if waterfall.label.toLowerCase() === "particulier"}
Tous les dispositifs des particuliers : du salaire de base
<span class="text-sm">- salaire brut + primes -</span> jusqu'aux prestations
sociales, en passant par les cotisations, contributions et les impôts
:
<span class="text-sm 2xl:text-base"
>- salaire brut + primes -</span
> jusqu'aux prestations sociales, en passant par les cotisations, contributions
et les impôts :
{:else if waterfall.label.toLowerCase() === "employeur"}
Tous les dispositifs concernant les employeurs, de la rémunération
brute aux cotisations patronales et allègements employeurs,
Loading