review home page titles structure

components/Home/EventAgenda.vue

@@ -5,10 +5,10 @@ Section "Agenda" de la page d'accueil
   <LayoutContainer>
     <div class="container">
       <div class="d-flex align-center justify-center">
-        <h2>
+        <h3>
           Retrouvez tous vos évènements dans l'agenda et référencez vous dans
           l'annuaire
-        </h2>
+        </h3>
       </div>
 
       <v-row justify="center">
@@ -52,7 +52,7 @@ const { mdAndDown } = useDisplay();
   }
 }
 
-h2 {
+h3 {
   height: 9rem;
   font-weight: 400;
   font-size: 3rem;

components/Home/Help.vue

@@ -10,10 +10,10 @@ Section "Besoin d'aide" de la page d'accueil
       </v-col>
 
       <v-col cols="12" lg="6" class="col">
-        <h4>
+        <h3>
           Notre équipe est à vos côtés
           pour vous guider
-        </h4>
+        </h3>
 
         <p>
           Besoin d’aide ? <br />
@@ -91,7 +91,7 @@ li {
   border-radius: 3rem;
 }
 
-h4 {
+h3 {
   margin-bottom: 0.7rem;
   font-weight: 400;
   font-size: 2rem;

components/Home/Promotion.vue

@@ -2,15 +2,9 @@
   <LayoutContainer>
     <v-row class="gestion">
       <v-col>
-        <div class="d-flex justify-center align-center flex-column">
-          <v-icon
-            size="6"
-            icon="fas fa-circle"
-          />
-          <h5>
-            GESTION ET PROMOTION
-          </h5>
-        </div>
+        <LayoutUISectionTitle class="alt-theme">
+          GESTION ET PROMOTION
+        </LayoutUISectionTitle>
 
         <v-row>
           <p class="text-block">
@@ -119,22 +113,6 @@ const { mdAndDown } = useDisplay();
     background: var(--primary-color);
   }
 
-  h5 {
-    font-size: 1rem;
-    line-height: 1rem;
-    margin-top: 1rem;
-    color: var(--secondary-color);
-    text-align: center;
-    letter-spacing: 2.16px;
-    text-transform: uppercase;
-  }
-
-  .fa-circle{
-    margin-top: 1rem;
-    color: var(--on-primary-color);
-    margin-right: 1rem;
-  }
-
   .text-block {
     font-weight: 600;
     font-size: 3rem;

components/Home/Reviews.vue

@@ -1,19 +1,13 @@
 <template>
   <LayoutContainer>
     <div class="container-1">
-      <div class="d-flex justify-center align-center flex-column">
-        <v-icon
-          icon="fa-solid fa-circle"
-          size="6"
-        />
-        <h6>
-          Avis Clients
-        </h6>
-      </div>
+      <LayoutUISectionTitle>
+        Avis Clients
+      </LayoutUISectionTitle>
 
-      <h3>
+      <h4>
         C'est vous qui le dites
-      </h3>
+      </h4>
     </div>
 
     <!-- Ecrans larges -->
@@ -274,22 +268,7 @@ const items: Ref<Array<{ src: string }>> = ref([
   background-color: var(--neutral-color);
   height: 22rem;
 
-  .v-icon {
-    margin-top: 1rem;
-    color: var(--secondary-color);
-  }
-
-  h6 {
-    font-size: 1rem;
-    line-height: 1rem;
-    margin-top: 1rem;
-    text-align: center;
-    letter-spacing: 2.16px;
-    text-transform: uppercase;
-    margin-bottom: 0.5rem;
-  }
-
-  h3 {
+  h4 {
     font-size: 2rem;
     line-height: 42px;
     text-align: center;
@@ -299,7 +278,6 @@ const items: Ref<Array<{ src: string }>> = ref([
   @media (max-width: 600px) {
     margin-bottom: 24px;
   }
-
 }
 
 .container-2 {

components/Home/Solution.vue

@@ -4,20 +4,13 @@ Section "Solutions" de la page d'accueil
 
 <template>
   <LayoutContainer>
+    <LayoutUISectionTitle class="alt-theme">
+      3 solutions
+    </LayoutUISectionTitle>
 
-    <div class="d-flex justify-center align-center flex-column">
-      <v-icon
-        size="6"
-        icon="fas fa-circle"
-      />
-      <h5>
-        3 solutions
-      </h5>
-    </div>
-
-    <h3 class="text-center" >
+    <h4 class="text-center" >
       Trouvez la solution faites pour vous
-    </h3>
+    </h4>
 
     <v-row class="solutions center-90">
       <v-col
@@ -157,23 +150,7 @@ const solutions: Array<SolutionItem> = [
   position: relative;
 }
 
-h5 {
-  font-size: 1rem;
-  line-height: 1rem;
-  margin-top: 1rem;
-  color: var(--secondary-color);
-  text-align: center;
-  letter-spacing: 2.16px;
-  text-transform: uppercase;
-}
-
-.fa-circle {
-  margin-top: 1rem;
-  color: var(--on-primary-color);
-  margin-right: 1rem;
-}
-
-h3 {
+h4 {
   margin-top: 0.5rem;
   font-size: 2.8rem;
   line-height: 42px;

components/Layout/UI/SectionTitle.vue

@@ -0,0 +1,41 @@
+<!-- Titre H2 -->
+<template>
+  <div class="d-flex justify-center align-center flex-column">
+    <v-icon
+      size="6"
+      icon="fas fa-circle"
+    />
+    <h3>
+      <slot />
+    </h3>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+h3 {
+  font-size: 1rem;
+  line-height: 1rem;
+  margin-top: 1rem;
+  text-align: center;
+  letter-spacing: 2.16px;
+  text-transform: uppercase;
+  color: var(--primary-color) !important;
+}
+
+.alt-theme h3 {
+  color: var(--on-primary-color-alt) !important;
+}
+
+.fa-circle {
+  margin-top: 1rem;
+  margin-right: 1rem;
+  color: var(--on-neutral-color-light) !important;
+}
+
+.alt-theme .fa-circle {
+  color: var(--on-primary-color) !important;
+}
+</style>

components/Layout/UI/Title.vue

@@ -1,13 +1,9 @@
 <!-- Titre H2 -->
 <template>
   <LayoutContainer>
-    <!--
-    TODO: dans les faits c'est plutôt le sous-titre (même s'il apparait en plus gros)
-    voir à passer en H3, ou même en autre chose qu'un titre
-    -->
-    <h2>
+    <h3>
       <slot />
-    </h2>
+    </h3>
   </LayoutContainer>
 </template>
 
@@ -15,7 +11,7 @@
 </script>
 
 <style scoped lang="scss">
-  h2 {
+  h3 {
     color: var(--on-neutral-color);
     font-weight: 600;
     font-size: 3rem;