Rework page d'accueil [WIP] (#4679)

* feat: rework page d'accueil

* refactor: amélioration de la section "Comment ça marche?"

* fix: test 2e2 home-page

* feat: divise la page Home en sections

* feat: ajoute une section faq

* refactor: home / hero-section

* refactor: home page

* refactor: déplace et refacto du bouton d'accès à la liste des aides

* refactor: hero-section

* feat: ajoute les liens des partenaires

* fix: accessibilité - axe

* fix: lint

* style: améliore le dégradé du titre de la hero-section

* style: supprime les bullet points des balises <li>

* feat: ajoute la recherche par mot clef dans la liste des aides via un query param + màj liste des aides (section benefit showcase)

* refactor: et => et/ou

* feat: cache certaines sections de la page d'accueil dans l'iframe

* refactor: label bouton d'accès à la liste des aides

* refactor: label et contenu dans la section "service public"

* refactor: suppr. sous-descriptif section "comment ça marche ?"

* feat: ajoute du lazy loading sur les images de la section "partenaires"
https://developer.mozilla.org/fr/docs/Web/HTML/Element/img#attr-loading

* refactor: optimisation images section partenaires - utilisation extension webP + fallback en jpg

* refactor: découpage logo jeunes.gouv.fr

* test suppression section partenaires

* test sans le gif de présentation

* test sans le gif de présentation et sans la section partenaires

* chore: réactive les sections partenaires et showcase

* feat: ajoute lien vers page confidentialité + ajout back-button (confidentialite.vue)

* refactor: mise à jour liens (features-section.vue)

* refactor: mise à jour liens (features-section.vue)

* refactor: contenu (features-section.vue)

* refactor: contenu (features-section.vue)

* refactor: Ajoute les liens vers la CSS et l'aide Départ 18-25 (showcase page d'accueil)

* refactor: ordre des liens (showcase page d'accueil)

* refactor: accessibilité liens (showcase page d'accueil)

* refactor: réintroduit le terme "service public" (features-section.vue)

* refactor: retire le point d'accompagnement dans le section "Comment ça marche?"

* refactor: met à jour la section des partenaires

* refactor: met à jour des logos section des partenaires

* refactor: renommage méthode (rebase avec main)

* refactor: formations -> formation

* refactor: réordonner les logos des partenaires

* refactor: amélioration images JPEG (partenaires)

* chore: désactive les partenaires liés à des communes

* refactor: désactive partenaire rdv service-public et ajoute un commentaire

cypress/utils/navigate.js

@@ -18,9 +18,7 @@ const goHome = () => {
     .invoke("attr", "content")
     .should("match", /\d+ aides/i)
 
-  cy.get('[data-testid="home-hero-content"]')
-    .invoke("text")
-    .should("contain", "aides")
+  cy.get('[data-testid="home-page"]').invoke("text").should("contain", "aides")
 
   cy.get('[data-testid="new-simulation"]').click()
 }

src/components/home/benefits-showcase-section.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="fr-background-alt--grey fr-py-6w fr-mt-6w">
+    <div class="fr-container">
+      <h2 class="fr-h3 fr-mb-4w">
+        Ne passez à côté d'aucune aide financière
+      </h2>
+      <div class="fr-grid-row fr-grid-row--gutters">
+        <div class="fr-col-12 fr-col-md-6">
+          <img
+            src="https://betagouv.github.io/aides-jeunes-files/public/resultats_simulation.gif"
+            alt="Capture d'écran de la page de résultats"
+            class="fr-responsive-img fr-mb-2w"
+          />
+        </div>
+        <div class="fr-col-12 fr-col-md-6">
+          <ul class="fr-list fr-list--no-bullet">
+            <li
+              v-for="(aide, index) in aides"
+              :key="`aide-${index}`"
+              class="fr-mb-2w"
+            >
+              <a
+                :href="aide.link"
+                target="_blank"
+                rel="noopener"
+                :title="`${aide.name} - Nouvelle fenêtre`"
+                class="fr-link fr-fi-arrow-right-line fr-link--icon-right"
+              >
+                {{ aide.name }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const aides = [
+  {
+    name: "Départ 18-25",
+    link: "/aides/depart1825_montant_maximum",
+  },
+  { name: "Pass Sport", link: "/aides/pass_sport" },
+  {
+    name: "Bourse sur critères sociaux",
+    link: "/aides/bourse_criteres_sociaux",
+  },
+  { name: "Prime d'Activité", link: "/aides/ppa" },
+  { name: "Revenu de solidarité active (RSA)", link: "/aides/rsa" },
+  {
+    name: "Complémentaire santé solidaire (CSS)",
+    link: "/aides/css_participation_forfaitaire",
+  },
+  {
+    name: "Allocations familiales",
+    link: "/aides?keyword=allocations+familiales",
+  },
+  { name: "Aides covoiturage", link: "/aides?keyword=covoiturage" },
+  { name: "Aides vélo", link: "/aides?keyword=vélo" },
+]
+</script>

src/components/home/features-section.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="fr-background-alt--grey fr-py-4w fr-mt-4w">
+    <div class="fr-container">
+      <div class="fr-grid-row fr-grid-row--gutters">
+        <div
+          v-for="(feature, index) in features"
+          :key="`feature-${index}`"
+          class="fr-col-12 fr-col-md-4"
+        >
+          <div class="fr-card fr-card--no-border">
+            <div class="fr-card__body">
+              <div class="fr-card__content">
+                <div class="fr-card__title">
+                  <span
+                    :class="['fr-icon-' + feature.icon, 'fr-icon--lg']"
+                    aria-hidden="true"
+                  ></span>
+                  {{ feature.title }}
+                </div>
+                <p class="fr-card__desc" v-html="feature.description"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const features = [
+  {
+    icon: "timer-line",
+    title: "Rapide et gratuit",
+    description:
+      "Obtenez une estimation de vos aides gratuitement en <b>moins de 5 minutes</b>.",
+  },
+  {
+    icon: "lock-line",
+    title: "Service public",
+    description:
+      "Vos données personnelles sont protégées et ne sont jamais utilisées à des fins commerciales, conformément à notre <a title='Confidentialité' href='/confidentialite'>politique de confidentialité</a>.",
+  },
+  {
+    icon: "team-line",
+    title: "Complet",
+    description:
+      "Les informations sur les aides sont mises à jour et vérifiées quotidiennement par <a title='Notre équipe - Nouvelle fenêtre' rel='noopener' target='_blank' href='https://beta.gouv.fr/startups/aides.jeunes.html#equipe'>notre équipe</a>.",
+  },
+]
+</script>

src/components/home/hero-section.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import { EventAction, EventCategory } from "@lib/enums/event.js"
+import { useStore } from "@/stores/index.js"
+import { useRoute, useRouter } from "vue-router"
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+const context = process.env.VITE_CONTEXT
+const benefitsNumber = process.env.VITE_BENEFIT_COUNT
+
+const hasExistingSituation = computed(() => store.passSanityCheck)
+
+const aideDomains = ref([
+  "logement",
+  "santé",
+  "famille",
+  "transports",
+  "études",
+  "formation",
+  "travail",
+  "loisirs",
+  "vacances",
+])
+
+const eventActionResume = EventAction.ReprendreMaSimulation
+const eventCategoryHome = EventCategory.Home
+
+const ctaLabel = computed(() =>
+  hasExistingSituation.value
+    ? "Commencer une nouvelle simulation"
+    : "Je commence ma simulation"
+)
+
+function newSituation() {
+  store.clear(route.query.external_id as string)
+  next()
+}
+
+function next() {
+  store.setOpenFiscaParameters()
+  if (context !== "production") {
+    store.verifyOpenfiscaBenefitVariables()
+  }
+  router.push({ name: "simulation" })
+}
+</script>
+
+<template>
+  <div class="fr-container">
+    <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+      <div class="fr-col-12 fr-col-md-6 fr-mt-2w">
+        <h1 class="fr-h3 fr-mb-3w">
+          <span class="aj-hero-highlight d-block">
+            Évaluez vos droits à {{ benefitsNumber }} aides
+          </span>
+          <br class="fr-hidden fr-unhidden-sm" />
+          en quelques clics.
+        </h1>
+        <p class="fr-text--md fr-mb-3w">
+          Découvrez toutes les aides financières auxquelles vous avez droit en
+          matière de
+          <b
+            >{{ aideDomains.slice(0, -1).join(", ") }} et
+            {{ aideDomains[aideDomains.length - 1] }}</b
+          >.
+        </p>
+        <p class="fr-text--xs fr-mb-2w fr-text--disabled">
+          Avant de démarrer la simulation, pensez à vous munir de vos ressources
+          et/ou de celles de vos parents si vous êtes encore à leur charge.
+        </p>
+        <div class="fr-btns-group fr-btns-group--inline-md">
+          <button
+            v-if="hasExistingSituation"
+            v-analytics="{
+              action: eventActionResume,
+              category: eventCategoryHome,
+            }"
+            class="fr-btn"
+            @click="next"
+          >
+            Reprendre ma simulation
+          </button>
+          <button
+            v-analytics="{ action: ctaLabel, category: eventCategoryHome }"
+            class="fr-btn fr-btn--lg"
+            :class="hasExistingSituation ? 'fr-btn--secondary' : ''"
+            data-testid="new-simulation"
+            @click="newSituation"
+          >
+            {{ ctaLabel }}
+          </button>
+        </div>
+        <div>
+          <router-link
+            class="fr-text--sm fr-link fr-fi-arrow-right-line fr-link--icon-right"
+            to="/aides"
+          >
+            Accéder à la liste des aides
+          </router-link>
+        </div>
+      </div>
+      <div class="fr-col-12 fr-col-md-6 fr-hidden fr-unhidden-md fr-mt-2w">
+        <img
+          src="@/assets/images/home_illustration.png"
+          class="aj-hero-image"
+          alt="Illustration du simulateur d'aides"
+        />
+      </div>
+    </div>
+  </div>
+</template>

src/components/home/how-it-works-section.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="fr-container fr-mt-8w">
+    <div class="fr-grid-row fr-grid-row--center">
+      <div class="fr-col-12">
+        <h2 class="fr-h3 fr-mb-4w">Comment ça marche ?</h2>
+        <div class="aj-home-steps">
+          <div
+            v-for="(step, index) in steps"
+            :key="`steps-${index}`"
+            class="aj-home-step"
+          >
+            <div class="aj-home-step__number">{{ index + 1 }}</div>
+            <div>
+              <h3 class="fr-text--lg">{{ step.title }}</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const steps = [
+  {
+    title: "Je commence une simulation",
+  },
+  {
+    title: "Je découvre mes aides",
+  },
+  {
+    title: "Je fais mes demandes",
+  },
+]
+</script>

src/components/home/partners-section.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="fr-container fr-my-8w">
+    <h2 class="fr-h3 fr-mb-4w fr-text--center">Nos partenaires</h2>
+    <span class="aj-partners">
+      <a
+        v-for="partner in partners"
+        :key="partner.id"
+        :href="partner.link"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="aj-partner-link"
+      >
+        <picture>
+          <source
+            :srcset="getImagePath(partner.id, 'webp')"
+            type="image/webp"
+          />
+          <source :srcset="getImagePath(partner.id, 'jpg')" type="image/jpeg" />
+          <img
+            :src="getImagePath(partner.id, 'jpg')"
+            :alt="partner.name"
+            class="aj-partner-logo"
+            loading="lazy"
+            width="200"
+            height="100"
+          />
+        </picture>
+      </a>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const getImagePath = (id: string, format: "webp" | "jpg") =>
+  `/img/partners/${id}.${format}`
+
+interface Partner {
+  id: string
+  name: string
+  link: string
+}
+
+const partners: Partner[] = [
+  // In maintenance mode, some partners are not available anymore
+  // however, it is still possible to show them again later.
+  {
+    id: "openfisca",
+    name: "OpenFisca",
+    link: "https://openfisca.org/fr/",
+  },
+  {
+    id: "demarches-simplifiees",
+    name: "Démarches Simplifiées",
+    link: "https://demarches-simplifiees.fr/",
+  },
+  // {
+  //   id: "rdv-service-public",
+  //   name: "RDV Service Public",
+  //   link: "https://rdv.anct.gouv.fr/",
+  // },
+  {
+    id: "domifa",
+    name: "Domifa",
+    link: "https://domifa.fabrique.social.gouv.fr/",
+  },
+  {
+    id: "mesaidesvelo",
+    name: "Mesaidesvelo.fr",
+    link: "https://mesaidesvelo.fr/",
+  },
+  // {
+  //   id: "cc-pays-chataigneraie",
+  //   name: "Communauté de communes du Pays de la Châtaigneraie",
+  //   link: "https://www.paysdelachataigneraie.fr/",
+  // },
+  // {
+  //   id: "bordeaux-metropole",
+  //   name: "Bordeaux",
+  //   link: "https://www.bordeaux-metropole.fr/",
+  // },
+  // {
+  //   id: "montpellier-metropole",
+  //   name: "Montpellier",
+  //   link: "https://www.montpellier3m.fr/",
+  // },
+  // {
+  //   id: "toulon-metropole",
+  //   name: "Toulon",
+  //   link: "https://metropoletpm.fr/",
+  // },
+  // {
+  //   id: "ville-aubervilliers",
+  //   name: "Aubervilliers",
+  //   link: "https://www.aubervilliers.fr/",
+  // },
+  // {
+  //   id: "ville-vannes",
+  //   name: "Vannes",
+  //   link: "https://www.mairie-vannes.fr/",
+  // },
+  {
+    id: "covoiturage.beta.gouv.fr",
+    name: "covoiturage.beta.gouv.fr",
+    link: "https://covoiturage.beta.gouv.fr/",
+  },
+  {
+    id: "jeunes.gouv.fr",
+    name: "jeunes.gouv.fr",
+    link: "https://jeunes.gouv.fr/",
+  },
+  {
+    id: "etudiant.gouv.fr",
+    name: "étudiants.gouv.fr",
+    link: "https://etudiants.gouv.fr/",
+  },
+]
+</script>