move some numbers sections into new components

.gitlab-ci.yml

@@ -12,13 +12,13 @@ before_script:
 qa:
   stage: qa
   script:
-    - yarn lint 
+    - yarn lint
 
-deploy_test:
-  stage: deploy_test
-  script:
-    # - apt-get update -qq && apt-get install -y -qq sshpass
-    # - ssh exploitation@test5 "cd /var/opentalent/git/portail_v2 && nvm exec yarn deploy && echo 'Deploy successful' "
-    - ssh exploitation@test3 'ls /tmp'
-  only:
-    - home
+#deploy_test:
+#  stage: deploy_test
+#  script:
+#    # - apt-get update -qq && apt-get install -y -qq sshpass
+#    # - ssh exploitation@test5 "cd /var/opentalent/git/portail_v2 && nvm exec yarn deploy && echo 'Deploy successful' "
+#    - ssh exploitation@test3 'ls /tmp'
+#  only:
+#    - home

components/Logiciels/Artist/Formations.vue

@@ -40,68 +40,12 @@
           </v-row>
         </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
-        </LayoutUISubTitle>
-      </v-row>
-
-      <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>
 
 <script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
-
-const items: Ref<Array<{ src: string }>> = ref([
-  { src: "/images/reviews/artist/review1.jpeg" },
-  { src: "/images/reviews/artist/review2.jpg" },
-  { src: "/images/reviews/artist/review3.jpeg" },
-  { src: "/images/reviews/artist/review4.jpg" },
-  { src: "/images/reviews/artist/review5.png" },
-  { src: "/images/reviews/artist/review6.jpeg" },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -109,10 +53,6 @@ const items: Ref<Array<{ src: string }>> = ref([
   padding: 0 !important;
 }
 
-.alt-color {
-  color: var(--on-primary-color-alt);
-}
-
 .custom-row {
   width: 90%;
   margin-right: auto;
@@ -159,12 +99,4 @@ const items: Ref<Array<{ src: string }>> = ref([
     width: 90%;
   }
 }
-
-.card-container {
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 </style>

components/Logiciels/Artist/Reviews.vue

@@ -2,7 +2,9 @@
   <AnchoredSection id="testimonials">
     <div>
       <LayoutContainer>
-        <CommonReviewSection :cards="cards" />
+        <LogicielsArtistSomeNumbers />
+
+        <CommonReviewSection :cards="cards" class="alt-theme" />
       </LayoutContainer>
     </div>
   </AnchoredSection>

components/Logiciels/Artist/SomeNumbers.vue

@@ -0,0 +1,74 @@
+<template>
+  <LayoutContainer>
+    <v-row class="custom-row">
+      <LayoutUISubTitle class="mb-12">
+        Quelques chiffres
+      </LayoutUISubTitle>
+    </v-row>
+
+    <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>
+
+    <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>
+</template>
+
+<script setup lang="ts">
+const items: Ref<Array<{ src: string }>> = ref([
+  { src: "/images/reviews/artist/review1.jpeg" },
+  { src: "/images/reviews/artist/review2.jpg" },
+  { src: "/images/reviews/artist/review3.jpeg" },
+  { src: "/images/reviews/artist/review4.jpg" },
+  { src: "/images/reviews/artist/review5.png" },
+  { src: "/images/reviews/artist/review6.jpeg" },
+]);
+</script>
+
+<style scoped lang="scss">
+.custom-row {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.card-container {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+</style>

components/Logiciels/Manager/Formation.vue

@@ -41,54 +41,6 @@
           </v-col>
         </v-row>
       </div>
-
-      <v-row class="align-center">
-        <LayoutUISubTitle>
-          Quelques chiffres
-        </LayoutUISubTitle>
-      </v-row>
-
-      <v-container>
-        <v-row class="card-container justify-center mb-12">
-          <v-col
-            cols="3"
-            class="d-flex justify-center align-center small-padding"
-          >
-            <CommonCardStat
-              number="140"
-              text="Structures en réseau"
-              backgroundColor="#d8050b"
-            />
-          </v-col>
-          <v-col cols="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="300 000"
-              text="Utilisateurs"
-              backgroundColor="#d8050b"
-            />
-          </v-col>
-          <v-col cols="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="12"
-              text="Années de collaboration"
-              backgroundColor="#d8050b"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <v-row>
-        <v-col cols="12" class="justify-center">
-          <span class="cmf-trust-statement">
-            La plus grande Confédération Musicale de France nous fait confiance
-          </span>
-        </v-col>
-      </v-row>
-
-      <v-img
-        src="/images/logiciels/manager/cmf.jpg"
-        class="cmf-img mb-6"
-      />
     </LayoutContainer>
   </AnchoredSection>
 </template>
@@ -120,14 +72,6 @@ const formations = ref([
     link: "/webinaires",
   },
 ]);
-const items = ref([
-  { 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>
@@ -186,17 +130,4 @@ const items = ref([
     color: #eff9fb;
   }
 }
-
-.cmf-img {
-  width: 30rem;
-  height: 18rem;
-  margin-top: 2rem;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.cmf-trust-statement {
-  font-size: 2rem;
-  text-align: center;
-}
 </style>

components/Logiciels/Manager/Reviews.vue

@@ -2,7 +2,9 @@
   <AnchoredSection id="testimonials">
     <div>
       <LayoutContainer>
-        <CommonReviewSection :cards="cards" />
+        <LogicielsManagerSomeNumbers />
+
+        <CommonReviewSection :cards="cards" class="alt-theme" />
       </LayoutContainer>
     </div>
   </AnchoredSection>

components/Logiciels/Manager/SomeNumbers.vue

@@ -0,0 +1,106 @@
+<template>
+  <LayoutContainer>
+    <v-row class="align-center">
+      <LayoutUISubTitle>
+        Quelques chiffres
+      </LayoutUISubTitle>
+    </v-row>
+
+    <v-container>
+      <v-row class="card-container justify-center mb-12">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <CommonCardStat
+            number="140"
+            text="Structures en réseau"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <CommonCardStat
+            number="300 000"
+            text="Utilisateurs"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <CommonCardStat
+            number="12"
+            text="Années de collaboration"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-row>
+      <v-col cols="12" class="justify-center">
+        <span class="cmf-trust-statement">
+          La plus grande Confédération Musicale de France nous fait confiance
+        </span>
+
+        <v-img
+          src="/images/logiciels/manager/cmf.jpg"
+          class="cmf-img mb-6"
+        />
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.custom-row {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.v-row {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+:deep(h2) {
+  width: 60rem;
+}
+
+.card-container {
+  --primary-color-alt: white;
+
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+
+.background-img {
+  width: 600px;
+  height: 400px;
+  background-size: cover;
+  background-position: center;
+}
+
+.cmf-img {
+  width: 30rem;
+  height: 18rem;
+  margin-top: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.cmf-trust-statement {
+  font-size: 2rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>

components/Logiciels/School/Formations.vue

@@ -41,64 +41,6 @@
           </v-col>
         </v-row>
       </div>
-
-      <!--
-      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>
-              Quelques chiffres
-            </LayoutUISubTitle>
-
-            <LayoutUITitle>
-              Pour les petits comme pour les GRANDS établissements d'enseignement artistique
-            </LayoutUITitle>
-          </v-row>
-        </v-col>
-      </v-row>
-
-      <v-container>
-        <v-row class="mb-12">
-          <v-col
-            cols="12"
-            lg="3"
-            class="d-flex justify-center align-center small-padding"
-          >
-            <CommonCardStat
-              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"
-              text="Clients"
-            />
-          </v-col>
-          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="20 304"
-              text="Utilisateurs"
-            />
-          </v-col>
-          <v-col cols="12" lg="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 />
-
-      <CommonCarouselClients :items="items" >
-        <template v-slot:title>
-          Plus de <span class="alt-color">5000 structures</span> nous font confiance
-        </template>
-      </CommonCarouselClients>
     </LayoutContainer>
   </AnchoredSection>
 </template>
@@ -129,15 +71,6 @@ const formations: Array<Formation> = [
     link: "/webinaires",
   },
 ];
-
-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>

components/Logiciels/School/Reviews.vue

@@ -2,7 +2,9 @@
   <AnchoredSection id="testimonials">
     <div>
       <LayoutContainer>
-        <CommonReviewSection :cards="cards" />
+        <LogicielsSchoolSomeNumbers />
+
+        <CommonReviewSection :cards="cards" class="alt-theme" />
       </LayoutContainer>
     </div>
   </AnchoredSection>

components/Logiciels/School/SomeNumbers.vue

@@ -0,0 +1,105 @@
+<template>
+  <LayoutContainer>
+    <v-row class="align-center custom-row">
+      <v-col cols="12">
+        <v-row no-gutters>
+          <LayoutUISubTitle>
+            Quelques chiffres
+          </LayoutUISubTitle>
+
+          <LayoutUITitle>
+            Pour les petits comme pour les GRANDS établissements d'enseignement artistique
+          </LayoutUITitle>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <v-container>
+      <v-row class="mb-12 card-container custom-row">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <CommonCardStat
+            number="30 > 1 500"
+            text="Élèves"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
+          <CommonCardStat
+            number="234"
+            text="Clients"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
+          <CommonCardStat
+            number="20 304"
+            text="Utilisateurs"
+          />
+        </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 />
+
+    <CommonCarouselClients :items="items" >
+      <template v-slot:title>
+        Plus de <span class="alt-color">5000 structures</span> nous font confiance
+      </template>
+    </CommonCarouselClients>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+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 lang="scss">
+.custom-row {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.v-row {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+:deep(h2) {
+  width: 60rem;
+}
+
+.card-container {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+</style>

pages/opentalent_artist.vue

@@ -28,7 +28,7 @@
 
     <LogicielsArtistFormations />
 
-    <LogicielsArtistReviews class="alt-theme"/>
+    <LogicielsArtistReviews />
 
     <LayoutFAQ />
 

pages/opentalent_manager.vue

@@ -20,7 +20,7 @@
 
     <LogicielsManagerFormation />
 
-    <LogicielsManagerReviews class="alt-theme"/>
+    <LogicielsManagerReviews />
 
     <LayoutFAQ />
 

pages/opentalent_school.vue

@@ -22,7 +22,7 @@
 
     <LogicielsSchoolFormations />
 
-    <LogicielsSchoolReviews class="alt-theme"/>
+    <LogicielsSchoolReviews/>
 
     <LayoutFAQ  />