refactor the Formations section of the artist page

components/Common/Card/Stat.vue

@@ -1,32 +1,29 @@
 <template>
-  <div class="card" :style="{ backgroundColor: props.backgroundColor }">
-    <h3 class="chiffre">
-      {{ props.chiffre }}
-    </h3>
-    <p>{{ props.text }}</p>
+  <div class="card">
+    <p>
+      {{ props.number }}
+    </p>
+    <p>
+      {{ props.text }}
+    </p>
   </div>
 </template>
 
-<script setup>
-
+<script setup lang="ts">
 const props = defineProps({
-  chiffre: {
-    type:String,
-    default: 'XXX',
+  number: {
+    type: String
   },
   text: {
-    type: String,
-    default: 'Texte par défaut',
-  },
-  backgroundColor: {
-    type: String,
-    default: '#fac20a',
+    type: String
   },
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .card {
+  background: var(--on-primary-color-alt);
+  color: var(--primary-color-alt);
   border-radius: 10px;
   width: 36rem;
   height: 15rem;
@@ -35,14 +32,15 @@ const props = defineProps({
   justify-content: center;
   align-items: center;
   text-align: center;
-}
 
-.chiffre {
-  font-weight: 600;
-  font-size: 60px;
-  line-height: 68px;
-  text-align: center;
-  color: #091d20;
-  margin-bottom: 0.5rem;
+  p:first-child{
+    font-weight: 600;
+    font-size: 60px;
+    line-height: 68px;
+    text-align: center;
+    margin-bottom: 0.5rem;
+  }
 }
+
+
 </style>

components/Logiciels/Artist/Formations.vue

@@ -1,99 +1,89 @@
 <template>
   <AnchoredSection id="webinars">
-    <div>
-      <LayoutContainer>
-        <div class="container-green 2">
-          <v-container>
-            <v-row class="custom-row">
-              <LayoutUISubTitle
-                class="mt-12"
-                title-color="#fff"
-                :iconSize="6"
-                :iconClasses="iconClasses"
-                :titleText="'Pour aller plus loin'"
-                :iconColor="'#fac20a'"
-              />
-            </v-row>
-
-            <v-row class="mt-12 align-center" no-gutters>
-              <v-col cols="12" lg="6" md="6" sm="6">
-                <div class="reunion-img mb-12"></div>
-              </v-col>
-
-              <v-col cols="12" lg="6" md="6" sm="6">
-                <h3 class="formation-title ml-6 mr-12">
-                  Webinaire - Partez à la découverte du logiciel Opentalent Artist
-                </h3>
-                <p
-                  class="formation-details ml-6 mr-12"
-                  style="text-align: justify"
-                >
-                  Rejoignez notre webinaire, spécialement conçu pour les
-                  professionnels du secteur culturel, orchestres, chorales,
-                  compagnies de danse, ainsi que les troupes de théâtre et de
-                  cirque. Cette session interactive vous offre une occasion unique
-                  de vous immerger dans les fonctionnalités de notre logiciel, de
-                  comprendre ses avantages distinctifs et d'explorer les diverses
-                  versions disponibles. Ne manquez pas cette chance de simplifiez
-                  votre gestion et de faire évoluer votre pratique artistique avec
-                  nos solutions technologiques innovantes !
-                </p>
-                <nuxt-link to="/webinaires">
-                  <v-btn class="formation-btn mt-12 ml-6">
-                    S'inscrire à nos webinaires</v-btn
-                  >
-                </nuxt-link>
-              </v-col>
-            </v-row>
-          </v-container>
-        </div>
-        <v-row class="custom-row">
-          <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="' Quelques chiffres'"
-            class="mb-12"
-          />
-        </v-row>
+    <LayoutContainer>
+      <div class="alt-theme">
         <v-container>
-          <v-row class="card-container mb-12">
-            <v-col
-              cols="3"
-              class="d-flex justify-center align-center small-padding"
-            >
-              <CommonCardStat
-                :chiffre="'184 634'"
-                text="Utilisateurs"
-                backgroundColor="#fac20a"
-              />
-            </v-col>
-            <v-col cols="3" class="d-flex justify-center align-center">
-              <CommonCardStat
-                :chiffre="'3 424'"
-                text="Structures"
-                backgroundColor="#fac20a"
-              />
+          <v-row class="custom-row">
+            <LayoutUISubTitle class="mt-12" >
+              Pour aller plus loin
+            </LayoutUISubTitle>
+          </v-row>
+
+          <v-row class="formation py-12 align-center mb-12" no-gutters>
+            <v-col cols="12" lg="6">
+              <v-img src="/images/logiciels/artist/webinaire.jpg" class="meeting-img" />
             </v-col>
-            <v-col cols="3" class="d-flex justify-center align-center">
-              <CommonCardStat
-                :chiffre="13"
-                text="Années d'expérience"
-                backgroundColor="#fac20a"
-              />
+
+            <v-col cols="12" lg="6" md="6" sm="6">
+              <h3 class="ml-6 mr-12">
+                Webinaire - Partez à la découverte du logiciel Opentalent Artist
+              </h3>
+
+              <p class="details ml-6 mr-12" >
+                Rejoignez notre webinaire, spécialement conçu pour les
+                professionnels du secteur culturel, orchestres, chorales,
+                compagnies de danse, ainsi que les troupes de théâtre et de
+                cirque. Cette session interactive vous offre une occasion unique
+                de vous immerger dans les fonctionnalités de notre logiciel, de
+                comprendre ses avantages distinctifs et d'explorer les diverses
+                versions disponibles. Ne manquez pas cette chance de simplifiez
+                votre gestion et de faire évoluer votre pratique artistique avec
+                nos solutions technologiques innovantes !
+              </p>
+
+              <nuxt-link to="/webinaires">
+                <v-btn class="mt-12 ml-6">
+                  S'inscrire à nos webinaires
+                </v-btn>
+              </nuxt-link>
             </v-col>
           </v-row>
         </v-container>
-        <v-row />
+      </div>
 
-        <v-row />
+      <v-row class="custom-row">
+        <LayoutUISubTitle class="mb-12">
+          Quelques chiffres
+        </LayoutUISubTitle>
+      </v-row>
 
-        <CommonCarouselClients :items="items" >
-          <template v-slot:title>
-            Plus de <span class="alt-color">3400 structures</span> nous ont déjà adoptées
-          </template>
-        </CommonCarouselClients>
-      </LayoutContainer>
-    </div>
+      <v-container>
+        <v-row class="card-container mb-12">
+          <v-col
+            cols="3"
+            class="d-flex justify-center align-center small-padding"
+          >
+            <CommonCardStat
+              number="184 634"
+              text="Utilisateurs"
+            />
+          </v-col>
+
+          <v-col cols="3" class="d-flex justify-center align-center">
+            <CommonCardStat
+              number="3 424"
+              text="Structures"
+            />
+          </v-col>
+
+          <v-col cols="3" class="d-flex justify-center align-center">
+            <CommonCardStat
+              number="13"
+              text="Années d'expérience"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+      <v-row />
+
+      <v-row />
+
+      <CommonCarouselClients :items="items" >
+        <template v-slot:title>
+          Plus de <span class="alt-color">3400 structures</span> nous ont déjà adoptées
+        </template>
+      </CommonCarouselClients>
+    </LayoutContainer>
   </AnchoredSection>
 </template>
 
@@ -119,55 +109,51 @@ const items: Ref<Array<{ src: string }>> = ref([
   color: var(--on-primary-color-alt);
 }
 
-@media (min-width: 1000px) {
-  .custom-row {
-    margin-right: auto;
-    margin-left: auto;
-  }
-}
 .custom-row {
   width: 90%;
   margin-right: auto;
   margin-left: auto;
 }
 
-.formation-btn {
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 18px;
-  background: transparent;
-  color: #eff9fb;
-  border: 1px solid #eff9fb;
-  border-radius: 0.5rem;
-  width: 90%;
-}
-.formation-details {
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: #eff9fb;
-}
-.formation-title {
-  font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 35px;
-  color: #ffffff;
-  margin-bottom: 1rem;
-}
-.reunion-img {
-  width: 600px;
-  height: 500px;
-  background-position: center;
-  background-size: cover;
-  border-radius: 10%;
-  background-image: url("/images/logiciels/artist/webinaire.jpg");
-}
-.container-green {
-  background-color: #0e2d32;
-  padding: 20px;
-  height: auto;
-  margin-bottom: 2rem;
-  color: white;
+.formation {
+  .v-img {
+    width: 600px;
+    height: 500px;
+    background-position: center;
+    background-size: cover;
+    border-radius: 10%;
+  }
+
+  :deep(.v-img img) {
+    object-fit: cover;
+  }
+
+  h3 {
+    font-weight: 500;
+    font-size: 1.8rem;
+    line-height: 35px;
+    color: #ffffff;
+    margin-bottom: 1rem;
+  }
+
+  .details {
+    font-weight: 300;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: #eff9fb;
+    text-align: justify
+  }
+
+  .v-btn {
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 18px;
+    background: transparent;
+    color: #eff9fb;
+    border: 1px solid #eff9fb;
+    border-radius: 0.5rem;
+    width: 90%;
+  }
 }
 
 .card-container {

components/Logiciels/Manager/Formation.vue

@@ -52,21 +52,21 @@
             class="d-flex justify-center align-center small-padding"
           >
             <CommonCardStat
-              :chiffre="140"
+              :number="140"
               text="Structures en réseau"
               backgroundColor="#d8050b"
             />
           </v-col>
           <v-col cols="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :chiffre="'300 000'"
+              :number="'300 000'"
               text="Utilisateurs"
               backgroundColor="#d8050b"
             />
           </v-col>
           <v-col cols="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :chiffre="12"
+              :number="12"
               text="Années de collaboration"
               backgroundColor="#d8050b"
             />

components/Logiciels/School/Formations.vue

@@ -58,28 +58,28 @@
             class="d-flex justify-center align-center small-padding"
           >
             <CommonCardStat
-              :chiffre="'30 > 1 500'"
+              :number="'30 > 1 500'"
               text="Elèves"
               backgroundColor="#c3e5e7"
             />
           </v-col>
           <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :chiffre="234"
+              :number="234"
               text="Clients"
               backgroundColor="#c3e5e7"
             />
           </v-col>
           <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :chiffre="'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
-              :chiffre="13"
+              :number="13"
               text="Années d'expérience"
               backgroundColor="#c3e5e7"
             />

pages/opentalent_artist.vue

@@ -26,7 +26,7 @@
 
     <LogicielsArtistAbonnement />
 
-    <LogicielsArtistFormations/>
+    <LogicielsArtistFormations />
 
     <LogicielsArtistReviews />
 
@@ -78,6 +78,7 @@ const stickyMenuActions: Array<StickyMenuAction> = [
   --primary-color: #ffffff;
   --secondary-color: #fef3ce;
   --on-primary-color: #0e2d32;
+  --primary-color-alt: #262626;
   --on-primary-color-alt: #fac20a;
 }
 </style>