diff --git a/src/lib/components/search/WelcomeSearch.svelte b/src/lib/components/search/WelcomeSearch.svelte
index 158868d50f6189365e7fc4aec4c142e379787920..7b642de143e6cab82202430575ba8288daf3a5b3 100644
--- a/src/lib/components/search/WelcomeSearch.svelte
+++ b/src/lib/components/search/WelcomeSearch.svelte
@@ -48,7 +48,7 @@
</script>
<div
- class="w-full flex items-center gap-1.5 overflow-hidden rounded-t-md bg-white border md:border-2 border-neutral-200 border-b-2 md:border-b-4 border-b-[#A6A00C] min-h-10"
+ class="w-full flex items-center gap-1.5 overflow-hidden rounded-t-md bg-white border md:border-2 border-neutral-200 border-b-2 md:border-b-4 border-b-[#A6A00C] min-h-12"
>
<iconify-icon
class="ml-4 self-center p-1 text-xl text-black"
@@ -56,7 +56,7 @@
/>
<input
autocomplete="off"
- class="w-full px-1 py-1.5 md:px-3 md:py-3 border-none bg-transparent text-sm md:text-base lg:text-lg text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
+ class="w-full px-1 py-1.5 md:px-3 md:py-3 border-none bg-transparent text-base lg:text-lg text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
id="navbar_search"
placeholder="impôt sur le revenu, CSG, ..."
type="search"
diff --git a/src/routes/welcome/+page.svelte b/src/routes/welcome/+page.svelte
index f2ec6a3cc6af18bdef0fc31485967159b8386c55..ecc08822d2c1bb46978a8b9caad5cbb1754c34b1 100644
--- a/src/routes/welcome/+page.svelte
+++ b/src/routes/welcome/+page.svelte
@@ -38,17 +38,35 @@
const welcomePage = getContext("welcomePage") as Writable<boolean | undefined>
const suggestions = [
+ {
+ name: "irpp_economique",
+ label: "Impôt sur le revenu",
+ budget: true,
+ },
{
name: "csg_salaire",
- label: "CSG",
+ label: "CSG salaires",
+ budget: true,
},
{
- name: "irpp_economique",
- label: "Impôt sur le revenu",
+ name: "csg_retraites",
+ label: "CSG retraites",
+ budget: true,
+ },
+ {
+ name: "af",
+ label: "Allocations familiales",
+ budget: true,
+ },
+ {
+ name: "rsa",
+ label: "RSA",
+ budget: false,
},
{
- name: "aide_logement",
+ name: "aides_logement",
label: "Aides au logement",
+ budget: false,
},
]
@@ -197,10 +215,10 @@
class="relative h-[78vh] 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 text-sm md:text-lg 2xl:text-2xl"
+ class="h-full relative z-10 flex flex-col justify-evenly items-center text-base md:text-lg 2xl:text-2xl"
>
<h1
- class="font-serif text-xl md:text-3xl 2xl:text-4xl text-center leading-snug my-10 md:my-0"
+ class="font-serif text-2xl md:text-3xl 2xl:text-4xl text-center leading-snug my-10 md:my-0"
>
Mesurer les <span class="highlight highlight-yellow">impacts</span>
<br />
@@ -211,7 +229,7 @@
<div class="flex flex-col gap-4 mx-5">
<div>
- <h2 class="font-bold text-lg xl:text-2xl 2xl:text-3xl">
+ <h2 class="font-bold text-xl xl:text-2xl 2xl:text-3xl">
Commencer avec un impôt, une cotisation ou une prestation :
</h2>
<span>
@@ -316,9 +334,15 @@
</div>
<ul class="list-disc pl-8">
- <li>consulter le droit en vigueur ;</li>
- <li>consulter les projets de loi du Gouvernement ;</li>
- <li>modifier les paramètres pour voir les impacts d’une réforme.</li>
+ <li>
+ consulter le droit en vigueur et les projets de loi du
+ Gouvernement ;
+ </li>
+
+ <li>
+ modifier les paramètres du droit pour estimer les impacts d’une
+ réforme.
+ </li>
</ul>
</div>
<div class="col-span-4 md:col-span-2 xl:col-span-1">
@@ -385,15 +409,19 @@
<span>Fiche de paie & prestations sociales</span>
</h3>
</div>
- <span>Les dispositifs évaluables sont :</span>
+ <div class="flex md:flex-col">
+ <div>
+ <span>Les dispositifs évaluables sont :</span>
- <ul class="list-disc pl-8">
- <li>les cotisations salariales et patronales ;</li>
- <li>les impôts ;</li>
- <li>les prestations sociales.</li>
- </ul>
+ <ul class="list-disc pl-8">
+ <li>les cotisations salariales et patronales ;</li>
+ <li>les impôts ;</li>
+ <li>les prestations sociales.</li>
+ </ul>
+ </div>
- <img class="mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
+ <img class="md:mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
+ </div>
</div>
<div class="col-span-4 md:col-span-2 xl:col-span-1">
<div class="text-center">
@@ -601,27 +629,32 @@
</h2>
<div
- class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
+ class="font-serif text-lg col-span-4 xl:col-span-2 justify-self-center lg:justify-self-end"
>
<img
- class="max-h-[500px]"
+ class="max-h-[500px] shadow-2xl m-5 rounded-lg border bg-white p-4"
src="welcome-capture-ecran-impact-budget.png"
/>
</div>
- <div class="font-serif text-lg col-span-4 lg:col-span-2 py-5">
- <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}
+ <div class="font-serif text-lg col-span-4 xl:col-span-2 py-5">
+ <h3 class="font-bold">Quels impacts budgétaires ?</h3>
+
+ <ul class="list-disc list-inside">
+ <li>Total des recettes ou dépenses ;</li>
+ <li>Recettes ou dépenses par dixièmes</li>
+ <li>Montant moyen du dispositif par foyer du dixième</li>
+ <li>
+ Proportion de ce montant par rapport aux revenus moyens des foyers du
+ dixième.
+ </li>
+ </ul>
+ <div class="flex flex-wrap gap-3 font-sans text-base items-center mt-4">
+ <h3 class="font-bold text-nowrap">Les dispositifs concernés :</h3>
+ {#each suggestions
+ .filter((suggestion) => suggestion.budget === true)
+ .slice(0, 6) as suggestion}
<a
- class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full"
+ class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-nowrap"
data-sveltekit-noscroll
href={getSimulationUrl({
...displayMode,
@@ -644,6 +677,32 @@
</button>
</div>
</div>
+ <div class="col-span-4 max-w-screen-lg">
+ <h3 class="font-bold">Comment les impacts sont-ils obtenus ?</h3>
+ <p class="text-base">
+ Les calculs budgétaires sont effectués à partir d'une base de données
+ représentative de la population française, élaborée avec l'Enquête
+ Revenus Fiscaux et Sociaux de l'Insee (<a
+ class="link"
+ href="https://www.insee.fr/fr/metadonnees/source/serie/s1231/documentation-methodologique"
+ target="_blank">ERFS-FPR millésime 2019</a
+ >) et la base anonymisée des déclarations d'impôt sur le revenu des
+ foyers fiscaux de la DGFIP - Ministère des finances (<a
+ class="link"
+ href="Déclarations d'impôt sur le revenu des foyers fiscaux (POTE) du Ministère des Finances (DGFIP) (millésime 2021)"
+ target="_blank"
+ >
+ POTE - millésime 2021</a
+ >).
+ <a class="link font-sans" href="/comment-fonctionnent-les-simulateurs">
+ En savoir plus sur le fonctionnement du simulateur
+ <iconify-icon
+ class="text-base align-[-0.1rem]"
+ icon="ri-arrow-right-line"
+ />
+ </a>
+ </p>
+ </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]"
@@ -666,7 +725,7 @@
class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
>
<img
- class="max-h-[500px]"
+ class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
src="welcome-capture-ecran-feuille-de-paie.png"
/>
</div>
@@ -712,7 +771,7 @@
class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
>
<img
- class="max-h-[500px]"
+ class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
src="welcome-capture-ecran-graphiques-cas-types.png"
/>
</div>
@@ -807,7 +866,7 @@
class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
>
<img
- class="max-h-[500px]"
+ class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
src="welcome-capture-ecran-impact-gagnants-perdants.png"
/>
</div>
@@ -850,18 +909,6 @@
</section>
</main>
-<!--<aside-->
-<!-- class="z-10 absolute inset-x-36 inset-y-0 pt-24 overflow-y-scroll bg-white shadow-2xl transition-all delay-75 duration-500"-->
-<!-- class:hidden={displayMode.parametersVariableName === undefined}-->
-<!-- class:translate-y-full={displayMode.parametersVariableName === undefined}-->
-<!-- class:block={displayMode.parametersVariableName !== undefined}-->
-<!-- class:translate-y-0={displayMode.parametersVariableName !== undefined}-->
-<!-->-->
-<!-- <div class="w-full text-center font-serif font-bold text-2xl">-->
-<!-- {variableSummaryByName[displayMode.parametersVariableName]?.short_label}-->
-<!-- </div>-->
-<!--</aside>-->
-
{#if displayMode.parametersVariableName !== undefined}
<VariableDetail
name={displayMode.parametersVariableName}
diff --git a/static/welcome-capture-ecran-impact-budget.png b/static/welcome-capture-ecran-impact-budget.png
index 4d61c1373df7242322de49c59bbe5629fb7c73b0..d6cb84ce46fa85f89531f6376c894447b4308ad8 100644
Binary files a/static/welcome-capture-ecran-impact-budget.png and b/static/welcome-capture-ecran-impact-budget.png differ