correction formation composant

components/Logiciels/School/Formations.vue

@@ -111,6 +111,7 @@ const formations = ref([
 </script>
 
 <style scoped>
+
 .col-details {
   margin-right: 6rem;
   margin-left: 5rem;

pages/poc.vue

@@ -1,330 +1,194 @@
 <template>
-  <div id="Catalogue">
+  <div id="formations">
     <LayoutContainer>
-      <div class="grey-container">
-        <div class="title-container mt-12 mb-6">
-          <v-icon size="6" class="fa-solid fa-circle icon-title" />
-          <h4 class="subtitle">Découvrez notre catalogue de formation</h4>
-        </div>
-
-        <v-row>
-          <v-col cols="12">
-            <h4 class="catalog ml-6">Catalogue</h4>
+      <div class="container-green mt-12">
+ 
+        <v-container>
+          <v-row>
+          <LayoutUISubTitle
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'Nos accompagnements sur-mesure'"
+            title-color="#fff"
+          />
+        </v-row>
+          <v-row class="mb-6">
+          <v-col
+            cols="12"
+            md="6"
+            v-for="(formation, index) in formations"
+            :key="index"
+          >
+            <v-card class="mb-6">
+              <div class="image-wrapper">
+                <v-img :src="formation.image" class="reunion-img1" />
+                <div :class="formation.overlayClass"></div>
+              </div>
+              <v-card-text>
+                <div class="col-details">
+                  <h4 class="session-title">
+                    {{ formation.sessions }} sessions disponibles
+                  </h4>
+                  <h3 class="formation-title">{{ formation.title }}</h3>
+                  <p class="formation-details">{{ formation.description }}</p>
+                </div>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
+              </v-card-actions>
+            </v-card>
           </v-col>
         </v-row>
+        </v-container>
+ 
+      </div>
 
-
-        <v-row no-gutters=""  class="centered-row ml-12">
-          <v-col v-for="(course, index) in courses" :key="index" cols="4">
-    <v-card class="mb-4"> <!-- Added margin bottom for spacing -->
-      <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">{{ course.description }}</p>
-
-        <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>
-
-        <div class="container-blue">
-          <h6 class="title-obj">Objectifs pédagogiques</h6>
+      <v-row>
+        <v-col cols="4">
           <v-row>
-            <v-col v-for="column in course.additionalObjectives" :key="column.id" cols="6">
-              <ul class="list-obj">
-                <li v-for="(objective, objIndex) in column.objectives" :key="objIndex">
-                  {{ objective }}
-                </li>
-              </ul>
-            </v-col>
+            <LayoutUISubTitle
+              :iconSize="6"
+              :iconClasses="iconClasses"
+              :titleText="'QUELQUES CHIFFRES'"
+            />
           </v-row>
-        </div>
-
-        <v-chip class="badge-time">Durée : {{ course.duration }}</v-chip>
-        <v-chip class="badge-time">{{ course.price }}</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>
+        </v-col>
+      </v-row>
+
+      <v-row class="card-container mb-12">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <LayoutCardStat
+            :chiffre="301500"
+            text="élèves"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="234"
+            text="Clients"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="20304"
+            text="Utilisateurs"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <LayoutCardStat
+            :chiffre="13"
+            text="années d'expérience"
+            backgroundColor="#c3e5e7"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <LogicielsSchoolCaroussel />
+      </v-row>
+
+      <v-row />
     </LayoutContainer>
   </div>
 </template>
 
 <script setup>
-const downloadPdf = (pdfUrl) => {
-  window.open(pdfUrl, "_blank");
-};
-const courses = [
+const formations = ref([
   {
-    number: "01",
-    title: "Formation initiale ",
+    id: 1,
+    image: "/images/logiciels/school/reunion.jpg",
+    overlayClass: "image-overlay1",
+    sessions: "2",
+    title: "Formation prise en main du logiciel - En ligne",
     description:
-      "Cette formation est destinée aux nouveaux utilisateurs. Elle est obligatoire lors de l'acquisition du logiciel. Elle est également utile lors d'un changement de personnel dans la structure. ",
-    objectives: [
-      "Ajuster la configuration du logiciel",
-      "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",
-      "Communiquer avec les personnes du répertoire",
-    ],
-    duration: "14h",
-    additionalObjectives: [
-      {
-        id: 1,
-        objectives: [
-          "Accès et interface",
-          "Configuration",
-          "Répertoire",
-          "Agenda",
-        ],
-      },
-      {
-        id: 2,
-        objectives: [
-          "Parc matériel",
-          "Suivi pédagogique",
-          "Facturation",
-          "Communication",
-        ],
-      },
-    ],
-    price: "1 580 € TTC",
-    downloadLink:
-      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf",
+      "Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux et que vous n’avez pas de temps à perdre,...",
+    buttonText: "S’incrire à une formation",
   },
   {
-    number: "02",
-    title: "Formation complémentaire",
-    // imageUrl: "/images/opentalent_school_black.jpg",
+    id: 2,
+    image: "/images/logiciels/school/reunion.jpg",
+    overlayClass: "image-overlay2",
+    sessions: "10",
+    title: "Webinaire - Apprendre à piloter son activité",
     description:
-      "Cette formation suppose d’avoir les connaissances de base sur le logiciel. Elle permet d’avoir une remise à niveau sur sur des fonctionnalités qui ont été incorrectement comprises / configurées, ou qui ont été récemment développées.",
-    objectives: [
-      "Ajuster la configuration du logiciel",
-      "Gérer les élèves et leurs familles",
-    ],
-    duration: "7h",
-    additionalObjectives: [
-      {
-        id: 1,
-        objectives: ["Accès et interface", "Configuration"],
-      },
-      {
-        id: 2,
-        objectives: ["Répertoire"],
-      },
-    ],
-    price: "790€ TTC",
-    downloadLink:
-      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
+      "Des explications précises sur certains modules du logiciel Opentalent School, c'est possible pour aller encore plus loin...",
+    buttonText: "S'inscrire au webinaire",
   },
-  {
-    number: "03",
-    title: "Formation Typo 3",
-    // imageUrl: "/images/opentalent_school_black.jpg",
-    description:
-      "Cette formation est destinée aux nouveaux utilisateurs Typo3. Elle est optionnelle et permet d'aller plus loin dans la gestion du site internet intégré.",
-    objectives: [
-      "Gérer les pages et leur accès",
-      "Gérer le contenu des pages et leur accès",
-      "Configurer les options du site internet côté logiciel",
-    ],
-    duration: "7h",
-    additionalObjectives: [
-      {
-        id: 1,
-        objectives: ["Gestion des pages", "Gestion des blocs"],
-      },
-      {
-        id: 2,
-        objectives: ["Configuration côté logiciel"],
-      },
-    ],
-    price: "790€ TTC",
-    downloadLink:
-      " https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf",
-  },
-];
+]);
 </script>
 
 <style scoped>
+
+:deep().subtitle {
+  margin-left: 0rem;
+}
 .v-card {
-  border: none !important; 
-  box-shadow: none !important; 
+  border: none !important;
+  box-shadow: none !important;
   background-color: transparent !important;
 }
-.grey-container {
-  background-color: #f8f8f8;
-  padding: 4rem;
-}
-.title-container {
+.col-details {
   display: flex;
   justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  width: 20rem;
-  margin-left: 2rem;
-}
-
-.subtitle {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
+  flex-direction: column;
 
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
-
-.icon-title {
-  margin-right: 0.7rem;
-  color: #64afb7;
 }
-
-.centered-row {
-  margin: auto;
-  justify-content: center;
-}
-.catalog {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  margin-bottom: 3rem;
+.image-wrapper {
+  position: relative;
 }
-.chip-download {
-  width: 31rem;
-  background: #e34461;
-  color: black;
-  background-color: azure;
-  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;
-}
-
-.badge-time {
-  width: 31rem;
-  background: #e34461;
-  color: black;
-  background-color: #fff;
-  font-family: "Barlow";
-  font-style: normal;
+.formation-btn {
+  width: 30rem;
+  height: 4rem;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 1.5rem;
   line-height: 18px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  background: transparent;
+  color: #eff9fb;
+  border: 1px solid #eff9fb;
+  border-radius: 0.5rem;
+  text-transform: none;
 }
-
-.list-obj {
-  margin-top: 0.5rem;
-  font-family: "Barlow";
-  font-style: normal;
+.formation-details {
   font-weight: 300;
-  font-size: 14px;
-  line-height: 18px;
-
-  color: #000000;
+  font-size: 1.2rem;
+  line-height: 1.5rem;
+  color: #eff9fb;
 }
-
-.title-obj {
-  font-family: "Barlow";
-  font-style: normal;
+.formation-title {
   font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
-  color: #0e2d32;
-}
-
-.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;
-  width: 31rem;
-  height: 11rem;
-}
-
-.details-card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  color: #091d20;
-  margin-top: 1rem;
-  width: 31rem;
-  height: 4rem;
+  font-size: 1.8rem;
+  line-height: 26px;
+  color: #ffffff;
+  margin-bottom: 3rem;
 }
 
-.number-card {
-  font-family: "Barlow";
-  font-style: normal;
+.session-title {
   font-weight: 500;
-  font-size: 1.3rem;
-  color: #e34461;
-  margin-right: 1rem;
+  font-size: 1.8rem;
+  line-height: 26px;
+  color: #ffffff;
+  margin-bottom: 3rem;
 }
-
-.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;
+.reunion-img1 {
+  width: 80%;
+  height: 100%;
+}
+.container-green {
+  background-color: #0e2d32;
+  padding: 20px;
+  margin-bottom: 20px;
+  color: white;
 }
 
-.logo-img {
-  width: 10rem;
-  height: 3rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  margin-left: 4rem;
+.card-container {
+  margin-bottom: 20px;
+  margin-left: 10rem;
+  margin-right: 0rem;
 }
 </style>