Merge pull request #139 from betagouv/ui-adjustments

Ajustements à la UI avant la mise en prod

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>

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>