refactor catalog section of the formations page

app.vue

@@ -3,3 +3,6 @@
 </template>
 
 <script setup lang="ts"></script>
+
+<!-- TODO: définir la police Barlow de manière générique et la virer partout
+ailleurs -->

components/Formation/Catalogue.vue

@@ -1,92 +1,114 @@
 <template>
   <AnchoredSection id="catalog">
-    <LayoutContainer v-if="!mdAndDown">
-      <div class="grey-container">
-        <v-row class="custom-row">
-          <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Découvrez notre catalogue de formation'"
-        />
+    <LayoutContainer>
+      <v-row class="custom-row">
+        <LayoutUISubTitle>
+          Découvrez notre catalogue de formation
+        </LayoutUISubTitle>
 
-        <LayoutUITitle title="Catalogue" />
-        </v-row>
+        <LayoutUITitle class="ml-8">
+          Catalogue
+        </LayoutUITitle>
+      </v-row>
 
+      <v-row class="custom-row catalog">
+        <v-col
+          v-for="(course, index) in courses"
+          :key="index"
+          cols="4"
+        >
+          <v-card class="mb-4">
+            <v-card-text>
+              <div class="title-card-container">
+                <span class="number-card">
+                  {{ course.number }}
+                </span>
 
-        <v-row  class="custom-row" style="  padding: 2rem; max-width: 90%; margin-left: auto; margin-right: auto;">
-          <v-col v-for="(course, index) in courses" :key="index" cols="4">
-            <v-card class="mb-4">
-              <v-card-text>
-                <div class="title-card-container">
-                  <span class="number-card">{{ course.number }}</span>
-                  <h4 class="card-title">{{ course.title }}</h4>
-                  <v-img class="logo-img" :src="course.imageUrl" />
-                </div>
-                <p class="details-card mb-6">{{ course.description }}</p>
+                <h4>
+                  {{ course.title }}
+                </h4>
+              </div>
 
-                <div class="container-blue">
-                  <h6 class="title-obj">Objectifs pédagogiques</h6>
-                  <ul class="list-obj">
-                    <li
-                      v-for="(objective, objIndex) in course.objectives"
-                      :key="objIndex"
-                    >
-                      {{ objective }}
-                    </li>
-                  </ul>
-                </div>
+              <p class="details-card mb-6">
+                {{ course.description }}
+              </p>
 
-                <div class="container-blue">
-                  <h6 class="title-obj">Programme</h6>
-                  <v-row>
-                    <v-col
-                      v-for="column in course.program"
-                      :key="column.id"
-                      cols="6"
-                    >
-                      <ul class="list-obj">
-                        <li
-                          v-for="(objective, objIndex) in column.objectives"
-                          :key="objIndex"
-                        >
-                          {{ objective }}
-                        </li>
-                      </ul>
-                    </v-col>
-                  </v-row>
-                </div>
+              <div class="objectives">
+                <h6 class="title-obj">
+                  Objectifs pédagogiques
+                </h6>
 
-                <v-chip class="badge-time"
+                <ul>
+                  <li
+                    v-for="(objective, objIndex) in course.objectives"
+                    :key="objIndex"
                   >
-                  <span> Durée : {{ course.duration }}</span>
-                 </v-chip
-                >
-                <v-chip class="badge-time">  <span>{{ course.price }}</span></v-chip>
-                <v-chip
-                  class="chip-download"
-                  @click="downloadPdf(course.downloadLink)"
-                >
-                  Télécharger le programme de formation
-                </v-chip>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-      </div>
+                    {{ objective }}
+                  </li>
+                </ul>
+              </div>
+
+              <div class="program">
+                <h6 class="title-obj">
+                  Programme
+                </h6>
+
+                <v-row>
+                  <v-col
+                    v-for="column in course.program"
+                    :key="column.id"
+                    cols="6"
+                  >
+                    <ul>
+                      <li
+                        v-for="(objective, objIndex) in column.objectives"
+                        :key="objIndex"
+                      >
+                        {{ objective }}
+                      </li>
+                    </ul>
+                  </v-col>
+                </v-row>
+              </div>
+
+              <v-chip class="badge-time">
+                <span>
+                  Durée : {{ course.duration }}
+                </span>
+              </v-chip>
+
+              <v-chip class="badge-time">
+                <span>
+                  {{ course.price }}
+                </span>
+              </v-chip>
+
+              <v-chip
+                class="chip-download"
+                @click="downloadPdf(course.downloadLink)"
+              >
+                Télécharger le programme de formation
+              </v-chip>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
     </LayoutContainer>
   </AnchoredSection>
 </template>
 
-<script setup>
-
+<script setup lang="ts">
 import { useDisplay } from "vuetify";
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
-const { smAndDown, mdAndDown } = useDisplay();
+import { Training } from "~/types/interface";
+
+const { mdAndDown } = useDisplay();
 
-const downloadPdf = (pdfUrl) => {
+const downloadPdf = (pdfUrl: string) => {
   window.open(pdfUrl, "_blank");
 };
-const courses = [
+
+const courses: Array<Training> = [
   {
     number: "01",
     title: "Formation initiale ",
@@ -97,7 +119,7 @@ const courses = [
       "Gérer les élèves et leurs familles",
       "Générer des factures et faire le suivi des règlements",
       "Gérer le planning des cours",
-      "Evaluer les élèves et générer des bulletins",
+      "Évaluer les élèves et générer des bulletins",
       "Communiquer avec les personnes du répertoire",
     ],
     duration: "14h",
@@ -181,128 +203,124 @@ const courses = [
 
 <style scoped>
 
-*{
+* {
   text-align: justify;
 }
+
 .custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.v-card {
-  border: none !important;
-  box-shadow: none !important;
-  background-color: transparent !important;
-}
-.grey-container {
-  background-color: #f8f8f8;
 
-}
-.chip-download {
-  border-radius: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+.catalog {
+  padding: 2rem;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
 
-.badge-time {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+  .v-card {
+    border: none !important;
+    box-shadow: none !important;
+    background-color: transparent !important;
+  }
 
-.badge-time span {
-  color: var(--Vert-90, #0E2D32);
-}
+  .title-card-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 1.2rem;
+    width: 31rem;
+    border-bottom: 1px solid #0e2d32;
+    padding: 1rem 0;
 
-.list-obj {
-  margin-top: 0.5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 18px;
+    .number-card {
+      font-family: "Barlow", serif;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 1.3rem;
+      color: #b9e5e7;
+      margin-right: 1rem;
+    }
+  }
 
-  color: #000000;
-}
+  .details-card {
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 1rem;
+    line-height: 1rem;
+    color: #091d20;
+    margin-top: 1rem;
+    margin-bottom: .5rem;
+    height: 5rem;
+  }
 
-.title-obj {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
-  color: #0e2d32;
-}
+  .objectives, .program {
+    justify-content: space-between;
+    align-items: center;
+    background: #c3e5e7;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 1rem;
+    padding: 1rem 1rem 1rem 1.5rem;
+    height: 13rem;
 
-.container-blue {
-  justify-content: space-between;
-  align-items: center;
-  background: #c3e5e7;
-  padding: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  border-radius: 1rem;
-  padding-left: 1.5rem;
-  height: 13rem;
-}
+    h6 {
+      font-family: "Barlow", serif;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 20px;
+      color: var(--primary-color);
+    }
 
-.details-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  color: #091d20;
-  margin-top: 1rem;
-  margin-bottom: .5rem;
-  height: 5rem;
-}
+    ul {
+      margin-top: 0.5rem;
+      font-family: "Barlow", serif;
+      font-style: normal;
+      font-weight: 300;
+      font-size: 14px;
+      line-height: 18px;
+    }
+  }
 
-.number-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #b9e5e7;
-  margin-right: 1rem;
-}
+  .badge-time {
+    color: white;
+    border: 1px solid #0e2d32;
+    border-radius: 3rem;
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 18px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-.title-card-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.2rem;
-  width: 31rem;
-  border-bottom: 1px solid #0e2d32;
-}
+    span {
+      color: #0E2D32;
+    }
+  }
 
-.logo-img {
-  width: 10rem;
-  height: 3rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  margin-left: 4rem;
+  .chip-download {
+    border-radius: 3rem;
+    font-family: "Barlow", serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 18px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

components/Formation/Presentation.vue

@@ -1,24 +1,25 @@
 <template>
   <AnchoredSection id="presentation">
     <LayoutContainer>
-      <v-row class="custom-row mt-6">
-        <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'Présentation de nos formations'"
-        />
+      <v-row class="mt-6">
+        <LayoutUISubTitle>
+          Présentation de nos formations
+        </LayoutUISubTitle>
       </v-row>
 
-      <v-row class=" custom-row mb-12">
+      <v-row class="mb-12">
         <v-col cols="6">
-          <img class="programme-img1" src="/images/formation/programme2.jpg" />
+          <v-img
+            src="/images/formation/programme2.jpg"
+            class="programme-img1"/>
         </v-col>
 
         <v-col cols="6">
           <h3 class="title-programme mb-6">
             Un programme de formation complet sur nos logiciels
           </h3>
-          <p class="details-programme">
+
+          <p class="details-programme mb-4">
             Nous avons défini un programme de formation complet pour
             l’utilisation de notre logiciel
             <span class="school"> Opentalent School </span>pour lequel la
@@ -26,7 +27,7 @@
             formation, votre logiciel sera complètement paramétré et vous serez
             complètement autonome.
           </p>
-          <br />
+
           <p class="details-programme">
             Dans le cadre de notre solution
             <span class="manager">Opentalent Manager</span> , nous pouvons
@@ -37,83 +38,72 @@
         </v-col>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row>
         <v-col cols="6">
-          <h3 class="title-programme mb-6 mt-4 ">
+          <h3 class="title-programme mb-6 mt-4">
             Des formations à la demande et sur-mesure
           </h3>
-          <p class="details-programme ">
+
+          <p class="details-programme">
             Afin de prendre en compte les évolutions de votre structure, nous
             pouvons enseuite organiser des sessions de formations spécifiques
             pour répondre à vos besoins : outils complets, mise en route,
             fonctionnalités spécifiques, utilisation du site web....
           </p>
         </v-col>
+
         <v-col cols="6">
-          <img class="programme-img2" src="/images/formation/programme.jpg" />
+          <v-img
+            src="/images/formation/programme.jpg"
+            class="programme-img2"
+          />
         </v-col>
       </v-row>
     </LayoutContainer>
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
-<style scoped>
-
-@media (max-width: 1800px) {
-  .custom-row {
-  margin-left: auto;
-  margin-right: auto;
-}
-}
-.custom-row {
+<style scoped lang="scss">
+.v-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
-.school {
-  color: #64afb7;
-}
 
-.manager {
-  color: #d8050b;
+.v-img {
+  width: 80%;
+  height: 100%;
+  border-radius: 10%;
 }
 
-
-.details-programme {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 20px;
-  color: #091d20;
-  width: 35rem;
-  text-align: justify;
+h3, p {
+    font-family: "Barlow", serif;
+    font-style: normal;
+    width: 35rem;
 }
 
-.title-programme {
-  font-family: "Barlow";
-  font-style: normal;
+h3 {
   font-weight: 600;
   font-size: 42px;
   line-height: 42px;
-  color: #071b1f;
-  width: 35rem;
 }
 
+p {
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 20px;
+  text-align: justify;
+}
 
-.programme-img1 {
-  width: 80%;
-  height: 100%;
-  border-radius: 10%;
+.school {
+  color: #64afb7;
 }
 
-.programme-img2 {
-  width: 80%;
-  height: 100%;
-  border-radius: 10%;
+.manager {
+  color: #d8050b;
 }
 </style>

components/Layout/UI/Title.vue

@@ -16,7 +16,7 @@
 
 <style scoped lang="scss">
   h2 {
-    color: var(--on-primary-color);
+    color: var(--on-neutral-color);
     font-weight: 600;
     font-size: 3rem;
     line-height: 3rem;

pages/formations.vue

@@ -9,7 +9,9 @@
 
   <FormationPresentation />
 
-  <FormationCatalogue />
+  <div v-if="lgAndUp">
+    <FormationCatalogue />
+  </div>
 
   <FormationOPCA />
 
@@ -28,6 +30,9 @@
 
 <script setup lang="ts">
 import { MenuScroll } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { lgAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },

types/interface.d.ts

@@ -90,3 +90,18 @@ interface Formation {
   link: string;
 }
 
+interface Program {
+  id: number;
+  objectives: string[];
+}
+
+interface Training {
+  number: string;
+  title: string;
+  description: string;
+  objectives: string[];
+  duration: string;
+  program: Program[];
+  price: string;
+  downloadLink: string;
+}