From 04e3eb2f0778dc24660b5f259d387bedbfdd3684 Mon Sep 17 00:00:00 2001
From: Alejandro MG <alejandro@amguillen.dev>
Date: Tue, 23 Jan 2024 15:42:30 +0100
Subject: [PATCH] Adjustments to the landing's page UI

---
 .../src/views/LandingPage/MissionBlock.vue    | 30 +++++++++++++-----
 frontend/src/views/LandingPage/StatsBlock.vue | 31 ++++++++++++-------
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/frontend/src/views/LandingPage/MissionBlock.vue b/frontend/src/views/LandingPage/MissionBlock.vue
index fa3fde85..7f15d19d 100644
--- a/frontend/src/views/LandingPage/MissionBlock.vue
+++ b/frontend/src/views/LandingPage/MissionBlock.vue
@@ -1,21 +1,35 @@
 <template>
-  <div class="fr-container p-6 py-6 sm:!py-0 sm:!p-0 grid grid-cols-12">
+  <div class="fr-container p-6 sm:!py-4 sm:!px-0 grid grid-cols-12 gap-0 sm:gap-4 md:gap-10">
     <div class="col-span-12 md:col-span-6">
       <h2>Notre Mission</h2>
       <p class="fr-h6">Accroître la transparence du secteur des compléments alimentaires</p>
-      <p>Car aujourd’hui, 60% des français en consomment régulièrement.</p>
+      <p class="fr-text--alt italic">Car aujourd’hui, 60% des français en consomment régulièrement.</p>
     </div>
     <div class="col-span-12 md:col-span-6">
       <h3 class="fr-h6">Concrètement, notre service a vocation :</h3>
-      <ul>
-        <li>Faciliter et fluidifier l’instruction des mises sur le marché de compléments alimentaires</li>
-        <li>
-          Autonomiser et responsabiliser les professionnels du secteur en leur fournissant les ressources et outils
+      <ul class="list-none">
+        <li class="flex" v-for="point in bulletPoints" :key="point.text">
+          <div class="mr-3 text-xl">{{ point.icon }}</div>
+          <p class="!mb-2">{{ point.text }}</p>
         </li>
-        <li>Informer les consommateurs, les rendre acteurs de leur consommation</li>
       </ul>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const bulletPoints = [
+  {
+    icon: "🗂️",
+    text: "Faciliter et fluidifier l’instruction des mises sur le marché de compléments alimentaires",
+  },
+  {
+    icon: "🤝",
+    text: "Autonomiser et responsabiliser les professionnels du secteur en leur fournissant les ressources et outils",
+  },
+  {
+    icon: "🤔",
+    text: "Informer les consommateurs, les rendre acteurs de leur consommation",
+  },
+]
+</script>
diff --git a/frontend/src/views/LandingPage/StatsBlock.vue b/frontend/src/views/LandingPage/StatsBlock.vue
index 2dd64ff4..cce8b1b2 100644
--- a/frontend/src/views/LandingPage/StatsBlock.vue
+++ b/frontend/src/views/LandingPage/StatsBlock.vue
@@ -1,20 +1,27 @@
 <template>
   <div class="bg-blue-france-975">
     <div class="fr-container p-6 py-6 sm:py-10 md:py-16 grid grid-cols-12 gap-0 md:gap-16">
-      <div class="col-span-12 md:col-span-4">
-        <div class="fr-display--xs !m-0 !mb-2">1600</div>
-        <div>nouvelles déclarations de mises sur le marché tous les mois</div>
-      </div>
-      <div class="col-span-12 md:col-span-4">
-        <div class="fr-display--xs !m-0 !mb-2">3</div>
-        <div>instructrices pour couvrir l’ensemble de ces demandes</div>
-      </div>
-      <div class="col-span-12 md:col-span-4">
-        <div class="fr-display--xs !m-0 !mb-2">50%</div>
-        <div>de produits circulant dans la distribution mais non déclarés</div>
+      <div class="col-span-12 md:col-span-4" v-for="stat in stats" :key="stat.label">
+        <div class="fr-text--alt text-5xl italic font-normal m-0 mb-4">{{ stat.number }}</div>
+        <div class="fr-text--alt italic">{{ stat.label }}</div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const stats = [
+  {
+    number: "1600",
+    label: "nouvelles déclarations de mises sur le marché tous les mois",
+  },
+  {
+    number: "3",
+    label: "instructrices pour couvrir l’ensemble de ces demandes",
+  },
+  {
+    number: "50%",
+    label: "de produits circulant dans la distribution mais non déclarés",
+  },
+]
+</script>