refactor Formations section of the school page

components/Logiciels/Artist/Formations.vue

@@ -41,6 +41,10 @@
         </v-container>
       </div>
 
+      <!--
+      TODO: Déplacer le "Quelques chiffres" dans un composant à part,
+      voir comment gérer ça avec les anchored sections
+      -->
       <v-row class="custom-row">
         <LayoutUISubTitle class="mb-12">
           Quelques chiffres

components/Logiciels/School/Projet.vue → components/Logiciels/School/Contact.vue

@@ -1,20 +1,28 @@
 <template>
   <AnchoredSection id="contact">
-    <LayoutContainer id="Contact">
-      <v-row >
+    <LayoutContainer>
+      <!-- Section "Appelez nous" -->
+      <v-row>
         <v-col cols="6">
-          <!-- <div class="help-img">
-
-          </div> -->
-          <v-img class="help-img" src="/images/contact/contact.jpg" />
+          <v-img
+            src="/images/contact/contact.jpg"
+            class="help-img"
+          />
         </v-col>
 
         <v-col cols="5">
-          <LayoutUISubTitle :titleText="` Contactez-nous `" />
+          <LayoutUISubTitle>
+            Contactez-nous
+          </LayoutUISubTitle>
+
+          <LayoutUITitle>
+            Vous avez un projet ?
+          </LayoutUITitle>
 
-          <LayoutUITitle :title="` Vous avez un projet ? `" />
-          <div class="ml-6">
-            <h6 class="subtitle">N'attendez plus, appelez-nous !</h6>
+          <div class="pl-6">
+            <h6 class="subtitle">
+              N'attendez plus, appelez-nous !
+            </h6>
             <p class="contact-details">
               Vous avez une identité, des besoins, des projets... On est là pour
               vous écouter et vous offrir une offre personnalisée ! Que vous
@@ -23,38 +31,53 @@
               logiciel varie en fonction du nombre d'élèves, tout en conservant
               l'intégralité des fonctionnalités.
             </p>
-            <NuxtLink to="nous-contacter">
-            <v-btn class="btn-contact"> Nous contacter </v-btn>
-            </NuxtLink>
+
+            <v-btn to="nous-contacter" class="btn-contact"> Nous contacter </v-btn>
           </div>
         </v-col>
       </v-row>
 
+      <!-- Section "Adhérent CMF" -->
       <v-row class="custom-row" >
         <v-col cols="6" >
-          <LayoutUISubTitle :titleText="` Adhérents CMF `" />
-          <LayoutUITitle :title="` Bénéficiez de conditions privilégiées `" />
-          <div class="ml-4">
-            <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+          <LayoutUISubTitle>
+            Adhérents CMF
+          </LayoutUISubTitle>
+
+          <LayoutUITitle>
+            Bénéficiez de conditions privilégiées
+          </LayoutUITitle>
+
+          <div class="pl-4">
+            <h6 class="subtitle">
+              N'attendez plus, appelez-nous
+            </h6>
+
             <p class="contact-details mr-12">
               Si votre établissement d’enseignement artistique est adhérent à la
               Confédération Musicale de France (CMF), vous bénéficiez
               gratuitement, dans le cadre de votre adhésion, de la version
-              Opentalent Artist standard et de conditions priviliégiés pour la
+              Opentalent Artist standard et de conditions privilégiées pour la
               version Opentalent School. <br />
             </p>
+
             <p class="mt-6 contact-details">
               Contactez-nous directement ou contactez votre fédération pour
               obtenir vos codes d’accès.
             </p>
+
+            <!-- TODO: manque le @click -->
             <v-btn class="btn-contact">
               Je souhaite obtenir mon code d'accès
             </v-btn>
           </div>
         </v-col>
+
         <v-col cols="6">
-          <!-- <v-img class="logo-cmf" src="/images/logiciels/school/cmf_logo_orange.png" /> -->
-          <div class="logo-cmf mt-12"></div>
+           <v-img
+             src="/images/logiciels/school/CMF-vivre_la_musique_ensemble.jpg"
+             class="logo-cmf mt-12"
+           />
         </v-col>
       </v-row>
     </LayoutContainer>
@@ -65,24 +88,22 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped>
-
 .custom-row {
   width: 90%;
   margin: auto;
 }
 
+.help-img {
+  width: 100%;
+  height: 90%;
+  object-fit: cover;
+  object-position: center;
+}
 
 .logo-cmf {
-  background-image: url("/images/logiciels/school/CMF-vivre_la_musique_ensemble.jpg");
   background-repeat: no-repeat;
   background-size: contain;
-  width: 100%;
-  height: 100%;
-}
-
-.help-img {
-
-  width: 100%;
+  width: 80%;
   height: 100%;
 }
 
@@ -96,10 +117,12 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   gap: 9px;
 }
 
-@media (max-width: 1600px) {
-  .contact-details {
-    width: 30rem !important;
-  }
+.subtitle {
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 38px;
+  color: #071b1f;
+  margin-bottom: 2rem;
 }
 
 .contact-details {
@@ -110,18 +133,9 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   text-align: justify;
 }
 
-.subtitle {
-  font-weight: 400;
-  font-size: 34px;
-  line-height: 38px;
-  color: #071b1f;
-  margin-bottom: 2rem;
-}
-
-.help-img {
-  width: 100%;
-  height: 90%;
-  object-fit: cover;
-  object-position: center;
+@media (max-width: 1600px) {
+  .contact-details {
+    width: 30rem !important;
+  }
 }
 </style>

components/Logiciels/School/Formations.vue

@@ -1,52 +1,62 @@
 <template>
   <AnchoredSection id="webinars">
-    <LayoutContainer id="Formations">
-      <div class="container-green mt-12">
+    <LayoutContainer>
+      <div class="alt-theme pt-6 mt-12">
         <v-row>
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Nos accompagnements sur-mesure'"
-            title-color="#fff"
-          />
+          <LayoutUISubTitle>
+            Nos accompagnements sur-mesure
+          </LayoutUISubTitle>
         </v-row>
-        <v-row class="mb-6 align-center">
-          <v-col cols="6" v-for="(formation, index) in formations" :key="index">
-            <div class="image-wrapper mb-6">
+
+        <v-row class="formation pb-6 align-center">
+          <v-col
+            cols="6"
+            v-for="(formation, index) in formations"
+            :key="index"
+          >
+            <div class="mb-6">
               <div :class="formation.overlayClass"></div>
               <div
                 :style="{ backgroundImage: 'url(' + formation.image + ')' }"
                 class="background-img"
               ></div>
             </div>
-            <div class="col-details">
-              <h4 class="session-title">
+
+            <div>
+              <h4>
                 {{ formation.sessions }}
               </h4>
-              <h3 class="formation-title">{{ formation.title }}</h3>
-              <p class="formation-details">{{ formation.description }}</p>
-              <br />
-              <nuxt-link :to="formation.link">
-                <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
-              </nuxt-link>
+
+              <h3>
+                {{ formation.title }}
+              </h3>
+
+              <p class="details mb-5">
+                {{ formation.description }}
+              </p>
+
+              <v-btn :to="formation.link">
+                {{ formation.buttonText }}
+              </v-btn>
             </div>
           </v-col>
         </v-row>
       </div>
 
-      <v-row class="aling-center">
-        <v-col cols="4">
-          <v-container> </v-container>
+      <!--
+      TODO: Déplacer le "Quelques chiffres" dans un composant à part,
+      voir comment gérer ça avec les anchored sections
+      -->
+      <v-row class="align-center">
+        <v-col cols="12">
           <v-row no-gutters>
-            <LayoutUISubTitle
-              :iconSize="6"
-              :iconClasses="iconClasses"
-              :titleText="'Quelques chiffres '"
-            />
-            <LayoutUITitle
-              title="Pour les petits comme pour les GRANDS établissements d'enseignement artistique"
-              title-color="#091d20"
-            />
+            <LayoutUISubTitle>
+              Quelques chiffres
+            </LayoutUISubTitle>
+
+            <LayoutUITitle>
+              Pour les petits comme pour les GRANDS établissements d'enseignement artistique
+            </LayoutUITitle>
           </v-row>
         </v-col>
       </v-row>
@@ -59,47 +69,47 @@
             class="d-flex justify-center align-center small-padding"
           >
             <CommonCardStat
-              :number="'30 > 1 500'"
-              text="Elèves"
-              backgroundColor="#c3e5e7"
+              number="30 > 1 500"
+              text="Élèves"
             />
           </v-col>
           <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :number="234"
+              number="234"
               text="Clients"
-              backgroundColor="#c3e5e7"
             />
           </v-col>
           <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :number="'20 304'"
+              number="20 304"
               text="Utilisateurs"
-              backgroundColor="#c3e5e7"
             />
           </v-col>
           <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :number="13"
+              number="13"
               text="Années d'expérience"
-              backgroundColor="#c3e5e7"
             />
           </v-col>
         </v-row>
       </v-container>
       <v-row />
 
-      <CommonCarouselClients :items="items" />
+      <CommonCarouselClients :items="items" >
+        <template v-slot:title>
+          Plus de <span class="alt-color">5000 structures</span> nous font confiance
+        </template>
+      </CommonCarouselClients>
     </LayoutContainer>
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Formation } from "~/types/interface";
 
-const formations = ref([
+const formations: Array<Formation> = [
   {
-    id: 1,
     image: "/images/logiciels/school/formation.png",
     overlayClass: "image-overlay1",
     sessions: "3 formations disponibles",
@@ -110,7 +120,6 @@ const formations = ref([
     link: "/formations",
   },
   {
-    id: 2,
     image: "/images/logiciels/school/webinaire.png",
     overlayClass: "image-overlay2",
     sessions: "Toutes nos sessions",
@@ -120,27 +129,28 @@ const formations = ref([
     buttonText: "Découvrir nos webinaires ",
     link: "/webinaires",
   },
-]);
-const items = ref([
+];
+
+const items: Array<{ src: string }> = [
   { src: "/images/reviews/school/review1.svg" },
   { src: "/images/reviews/school/review2.png" },
   { src: "/images/reviews/school/review3.png" },
   { src: "/images/reviews/school/review4.jpeg" },
   { src: "/images/reviews/school/review5.jpeg" },
   { src: "/images/reviews/school/review6.jpeg" },
-]);
+];
 </script>
 
 <style scoped>
-
-:deep(.title){
-  width: 60rem;
-}
 .v-row {
   max-width: 1600px;
   margin: 0 auto;
 }
 
+:deep(h2) {
+  width: 60rem;
+}
+
 .background-img {
   width: 600px;
   height: 400px;
@@ -148,56 +158,43 @@ const items = ref([
   background-position: center;
 }
 
-.col-details {
-  margin-right: 6rem;
-}
-
-.formation-btn {
-  font-family: "Barlow";
-  font-style: normal;
-  width: 30rem;
-  height: 4rem;
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 18px;
-  background: transparent;
-  color: #eff9fb;
-  border: 1px solid #eff9fb;
-  border-radius: 0.5rem;
-  text-transform: none;
-}
-.formation-details {
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 1.5rem;
-  color: #eff9fb;
-}
-.formation-title {
-  font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 26px;
-  color: #ffffff;
-  margin-bottom: 3rem;
-}
+.formation {
+  .v-btn {
+    font-family: "Barlow", serif;
+    font-style: normal;
+    width: 30rem;
+    height: 4rem;
+    font-weight: 500;
+    font-size: 1.5rem;
+    line-height: 18px;
+    background: transparent;
+    color: #eff9fb;
+    border: 1px solid #eff9fb;
+    border-radius: 0.5rem;
+    text-transform: none;
+  }
 
-.session-title {
-  font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 26px;
-  color: #ffffff;
-  margin-bottom: 3rem;
-}
+  h3 {
+    font-weight: 500;
+    font-size: 1.8rem;
+    line-height: 26px;
+    color: #ffffff;
+    margin-bottom: 3rem;
+  }
 
-.container-green {
-  background-color: #0e2d32;
-  padding: 20px;
-  margin-bottom: 20px;
-  color: white;
-}
+  h4 {
+    font-weight: 500;
+    font-size: 1.8rem;
+    line-height: 26px;
+    color: #ffffff;
+    margin-bottom: 3rem;
+  }
 
-.card-container {
-  margin-bottom: 20px;
-  margin-left: 10rem;
-  margin-right: 0rem;
+  .details {
+    font-weight: 300;
+    font-size: 1.2rem;
+    line-height: 1.5rem;
+    color: #eff9fb;
+  }
 }
 </style>

pages/opentalent_school.vue

@@ -18,7 +18,7 @@
 
     <LogicielsSchoolComparatif />
 
-    <LogicielsSchoolProjet />
+    <LogicielsSchoolContact />
 
     <LogicielsSchoolFormations />
 
@@ -49,8 +49,6 @@ const menus: Array<MenuScroll> = [
   { anchor: "testimonials", label: "Témoignages" },
 ];
 
-
-
 const stickyMenuActions: Array<StickyMenuAction> = [
   {
     type: StickyMenuActionType.FOLLOW_LINK,

types/interface.d.ts

@@ -77,3 +77,13 @@ interface ComparisonItem {
   includedInStandard: boolean | string,
   includedInPremium: boolean | string,
 }
+
+interface Formation {
+  image: string;
+  overlayClass: string;
+  sessions: string;
+  title: string;
+  description: string;
+  buttonText: string;
+  link: string;
+}