diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte index df60cde16c463a5178f00e0dff1bf68de892aa02..c0843a2307f4926898d4506714fa804dd9383d51 100644 --- a/src/routes/welcome/+page.svelte +++ b/src/routes/welcome/+page.svelte @@ -89,7 +89,9 @@ <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="text-2xl font-light col-span-4 text-center"> + <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"> @@ -219,10 +221,82 @@ </a> </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-white" + > + <h2 class="text-2xl font-bold col-span-4 text-center"> + Les {suggestions.length} dispositifs couverts par le simulateur LexImpact socio-fiscal : + </h2> + </section> + <section + 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" + > + <span + class="border-b-2 border-black pb-3 font-serif italic font-light highlight" + >le budgétaire</span + > + <br /> + <br /> + Calculer les impacts budgétaires d’une réforme de CSG, impôt sur le revenu + ou allocations familiales + </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-impact-budget.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 class="flex gap-3 font-sans text-base items-center mt-6"> + <!--ICI mettre uniquement les dispositifs "budget"--> + {#each suggestions.slice(0, 3) as suggestion} + <a + class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full" + href={newSimulationUrl({ + ...displayMode, + parametersVariableName: suggestion.name, + })} + > + {suggestion.label} + </a> + {/each} + </div> + + <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" + > + Simulateur budgétaire<iconify-icon + class="ml-2 align-[-0.4rem] text-2xl" + icon="ri-arrow-right-line" + /> + </button> + </div> + </section> </main> <style lang="postcss"> .highlight { @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; } + + .fond { + background-color: #ffffff; + /* Polka dots - Heropatterns.com échelle réduite */ + background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ded500' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"); + } </style> diff --git a/static/welcome-capture-ecran-impact-budget.png b/static/welcome-capture-ecran-impact-budget.png new file mode 100644 index 0000000000000000000000000000000000000000..4d61c1373df7242322de49c59bbe5629fb7c73b0 Binary files /dev/null and b/static/welcome-capture-ecran-impact-budget.png differ