Ajoute une modale de bienvenue pour l'accueil des nouveaux parlementaires

src/lib/components/WelcomeModal.svelte

+<script>
+  import Icon from "@iconify/svelte"
+  import { Dialog, DialogOverlay } from "@rgossiaux/svelte-headlessui"
+
+  let isOpen = true
+</script>
+
+{#if !isOpen}
+  <button
+    class="hidden md:block fixed bg-white p-5 shadow-2xl rounded-full mx-2 top-20 right-4 border-2 text-lg tracking-wide"
+    on:click={() => (isOpen = true)}
+  >
+    Bienvenue ! 👋
+  </button>
+  <button
+    class="fixed md:hidden bg-white p-5 shadow-2xl rounded-l-full top-20 right-0 border-2 text-base tracking-wide"
+    on:click={() => (isOpen = true)}
+  >
+    👋
+  </button>
+{/if}
+
+<Dialog open={isOpen} on:close={() => (isOpen = false)}>
+  <DialogOverlay />
+
+  <div
+    class="bg-white bottom-0 fixed max-h-[75vh] min-w-full pt-8 px-8 md:px-16 shadow-lg overflow-y-auto z-40"
+  >
+    <div class="flex justify-end">
+      <button class="uppercase text-sm" on:click={() => (isOpen = false)}
+        ><Icon class="w-10 h-10" icon="ri-close-line" /></button
+      >
+    </div>
+    <div class="my-5 pb-5 h-full">
+      <h2
+        class="text-3xl first-letter:text-8xl first-letter:font-bold first-letter:text-slate-900
+      first-letter:mr-2 first-letter:float-left font-serif"
+      >
+        <span class="font-bold "
+          >Bienvenue aux nouveaux parlementaires
+        </span><br /> et leurs équipes !
+      </h2>
+      <p class="text-xl mt-10 tracking-wide md:w-3/5">
+        LexImpact est un <span class="font-bold"
+          >service interne de l'Assemblée nationale</span
+        >, rattaché à la direction du Contrôle et de l'évaluation. Ce site
+        internet public,
+        <span class="font-serif italic">leximpact.an.fr</span>, vous permet
+        d'accéder aux travaux et productions du service.
+      </p>
+      <div class="flex flex-col md:flex-row gap-10 mt-10 items-end mb-10">
+        <div class="w-full md:w-2/5">
+          <p class="font-serif font-bold mt-5 text-lg mb-4 ">
+            LexImpact vous aide à&nbsp;:
+          </p>
+          <ul class="font-serif list-disc list-inside text-lg">
+            <li class="my-2">📊 chiffrer vos amendements&nbsp;;</li>
+            <li class="my-2">
+              👨‍👧‍👦 voir les impacts sur des ménages types&nbsp;;
+            </li>
+            <li class="my-2">
+              🔎 comprendre le fonctionnement d'un dispositif&nbsp;;
+            </li>
+            <li class="mt-2">
+              🗺 découvrir votre circonscription par la donnée.
+            </li>
+          </ul>
+        </div>
+        <div class="font-serif w-full md:w-2/5">
+          <p class="text-black leading-relaxed font-serif text-lg">
+            Nos outils sont en amélioration continue,
+            <span class="font-bold"
+              >pour être informé des dernières fonctionnalités, données ou
+              actualités,</span
+            >
+            rejoignez-nous sur
+            <a
+              class="inline-block text-black underline hover:text-le-bleu "
+              href="https://chat.whatsapp.com/JLqiO8nuitlHRqry4FK2Cm"
+            >
+              <Icon
+                class="inline-block w-6 h-6"
+                icon="ri-whatsapp-line"
+              />WhatsApp</a
+            >
+            et
+            <a
+              class="inline-block text-black underline hover:text-le-bleu"
+              href="https://t.me/joinchat/UI8LKl2iDlZhNDU8"
+            >
+              <Icon
+                class="inline-block w-6 h-6"
+                icon="ri-telegram-fill"
+              />Telegram</a
+            >.
+          </p>
+        </div>
+        <div class="w-full md:w-1/5 flex  justify-end">
+          <img
+            class=""
+            width="100"
+            src="/logo-assemblee-nationale.png"
+            alt="Pictogramme représentant un panneau de circulation indiquant commune"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</Dialog>