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

betagouv · Oct 29, 2024 · 1f9d6d4 · 1f9d6d4
1 parent 5a6fab3
commit 1f9d6d4
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 10 deletions.
diff --git a/src/styles/aides-jeunes.css b/src/styles/aides-jeunes.css
@@ -669,3 +669,30 @@ textarea {
     max-height: 40px;
   }
 }
+
+.aj-home-steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.aj-home-step {
+  display: flex;
+  gap: 1rem;
+}
+
+.aj-home-step__number {
+  background: var(--background-action-high-blue-france);
+  color: white;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.aj-home-step__description {
+  color: var(--text-mention-grey);
+}
diff --git a/src/views/home.vue b/src/views/home.vue
@@ -87,14 +87,23 @@
 
   <div class="fr-container fr-mt-8w">
     <div class="fr-grid-row fr-grid-row--center">
-      <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
-        <h2 class="fr-h3 fr-mb-2w">Comment ça marche ?</h2>
-        <ol class="fr-list">
-          <li>Répondez à quelques questions sur votre situation</li>
-          <li>Obtenez une estimation personnalisée des aides</li>
-          <li>Accédez aux démarches pour faire vos demandes</li>
-          <li>En cas de difficultés, faites vous accompagner gratuitement</li>
-        </ol>
+      <div class="fr-col-12">
+        <h3 class="fr-h3 fr-mb-4w">Comment ça marche ?</h3>
+        <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>
+              <h4 class="fr-text--lg fr-mb-2w">{{ step.title }}</h4>
+              <p class="aj-home-step__description fr-text--sm fr-mb-0">
+                {{ step.description }}
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -195,12 +204,12 @@ const features = ref([
   {
     icon: "timer-line",
     title: "Rapide",
-    description: "Obtenez une estimation en moins de 5 minutes",
+    description: "Obtenez une estimation en <b>moins de 5 minutes</b>",
   },
   {
     icon: "money-euro-circle-line",
     title: "Gratuit",
-    description: "Un service public gratuit et sans engagement",
+    description: "Un service public <b>gratuit et sans engagement</b>",
   },
   {
     icon: "team-line",
@@ -272,6 +281,25 @@ const partners = ref([
   // { name: "TZNR", logo: "/img/partners/tznr.png", link: "#" }, > Pas de site web / logo pour le moment ?
 ])
 
+const steps = [
+  {
+    title: "Je commence une simulation",
+    description: "5 minutes suffisent pour compléter une simulation",
+  },
+  {
+    title: "Je découvre mes aides",
+    description: "Visualisez immédiatement toutes les aides disponibles",
+  },
+  {
+    title: "Je fais mes demandes",
+    description: "Accédez directement aux démarches en ligne",
+  },
+  {
+    title: "Je suis accompagné",
+    description: "Un conseiller peut vous aider gratuitement si besoin",
+  },
+]
+
 function newSituation() {
   store.clear(route.query.external_id as string)
   next()