refactor the Review section of the school page

components/Common/ReviewCard.vue

@@ -1,202 +0,0 @@
-<template>
-    <LayoutContainer>
-      <div class="container-green">
-        <v-row class="custom-row">
-          <v-col cols="3">
-            <div
-              style="
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                height: 100%;
-              "
-            >
-              <h3 class="reviews-title">Ce sont eux qui en parlent le mieux</h3>
-              <div class="d-flex justify-center align-center">
-                <div class="carousel-button" @click="goPrevious">
-                  <i class="fas fa-chevron-left" />
-                </div>
-                <div class="carousel-button" @click="goNext">
-                  <i class="fas fa-chevron-right" />
-                </div>
-              </div>
-            </div>
-          </v-col>
-
-          <v-col cols="9">
-            <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="1" :wrap-around="true">
-              <Slide v-for="(card, index) in cards" :key="index" class="card">
-                <v-container>
-                  <v-card>
-                    <v-card-item class="card-container">
-                      <v-card-text class="review-description">
-                        {{ card.description }}
-                      </v-card-text>
-
-                      <div class="card-footer">
-                        <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p>
-                        <p class="reviewer-structure">
-                          {{ card.structure }}
-                        </p>
-                      </div>
-                    </v-card-item>
-                  </v-card>
-                </v-container>
-              </Slide>
-            </Carousel>
-          </v-col>
-        </v-row>
-      </div>
-    </LayoutContainer>
-</template>
-
-<script setup>
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-
-const carousel = ref(null);
-
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
-
-const props = defineProps({
-  cards: {
-    type: Array,
-    required: true,
-  },
-});
-</script>
-<style scoped>
-
-
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-.v-container {
-  padding: 0 !important;
-}
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 60px;
-  height: 60px;
-  background-color: transparent;
-  border: 2px solid #fff;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-bottom: 2rem;
-}
-
-.carousel-button i {
-  color: #fff;
-}
-.reviewer-name {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: rgba(32, 147, 190);
-  margin-top: 5rem;
-
-  text-align: justify !important;
-}
-
-.reviewer-status {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-
-  text-align: justify !important;
-}
-
-.reviewer-structure {
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.card-footer {
-  min-height: 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
-
-.reviews-title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #fff;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-top: 3rem;
-  text-align: center;
-
-}
-@media (min-width:2100px) {
-  .review-description {
-    min-height: 150px !important;
-    max-height: 150px   !important;
-  }
-  .v-card {
-    min-height: 360px !important;
-    max-height: 360px !important;
-  }
-}
-.card {
-  margin-left: 0.5rem;
-  border-radius: 1rem;
-}
-.review-description {
-  text-align: justify;
-  min-height: 200px;
-  max-height: 200px;
-  overflow: auto;
-  font-size: 0.9rem;
-}
-.v-card {
-  border-radius: 1rem;
-  min-height: 450px;
-  max-height: 450px;
-  margin-top: 2rem;
-  margin-bottom: 0.6rem;
-
-}
-
-.card-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-
-
-}
-
-.container-green {
-  background-color: #0e2d32;
-}
-</style>

components/Common/ReviewSection.vue

@@ -0,0 +1,217 @@
+<template>
+    <LayoutContainer class="alt-theme">
+      <v-row class="custom-row">
+        <v-col cols="3">
+          <div class="controls-section">
+            <h3>
+              Ce sont eux qui en parlent le mieux
+            </h3>
+
+            <div class="carousel-controls">
+              <v-btn
+                icon="fas fa-chevron-left"
+                @click="goPrevious"
+              />
+              <v-btn
+                icon="fas fa-chevron-right"
+                @click="goNext"
+              />
+            </div>
+          </div>
+        </v-col>
+
+        <v-col cols="9">
+          <Carousel
+            ref="carousel"
+            :items-to-show="3"
+            :items-to-scroll="1"
+            :wrap-around="true"
+          >
+            <Slide
+              v-for="(card, index) in cards"
+              :key="index"
+              class="card inv-theme"
+            >
+              <v-container>
+                <v-card>
+                  <v-card-item>
+                    <v-card-text>
+                      {{ card.review }}
+                    </v-card-text>
+
+                    <footer>
+                      <v-card-actions>
+                        {{ card.name }}
+                      </v-card-actions>
+
+                      <p class="reviewer-status">
+                        {{ card.status }}
+                      </p>
+                      <p class="reviewer-structure">
+                        {{ card.structure }}
+                      </p>
+                    </footer>
+                  </v-card-item>
+                </v-card>
+              </v-container>
+            </Slide>
+          </Carousel>
+        </v-col>
+      </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+
+const props = defineProps({
+  cards: {
+    type: Array,
+    required: true,
+  },
+});
+
+const carousel: Ref<typeof Carousel | null> = ref(null);
+
+const goPrevious = () => {
+  carousel.value!.prev();
+};
+
+const goNext = () => {
+  carousel.value!.next();
+};
+</script>
+
+<style scoped lang="scss">
+.v-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.v-container {
+  padding: 0 !important;
+}
+
+.controls-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+
+  h3 {
+    font-weight: 600;
+    font-size: 42px;
+    line-height: 42px;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-top: 3rem;
+    text-align: center;
+  }
+
+  .carousel-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .v-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
+    background-color: transparent;
+    border: 2px solid #fff;
+    cursor: pointer;
+    margin-right: 1rem;
+    margin-bottom: 2rem;
+    border-radius: 0;
+  }
+}
+
+.carousel {
+  .v-card-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+  }
+
+  .v-card-text {
+    text-align: justify;
+    min-height: 200px;
+    max-height: 200px;
+    overflow: auto;
+    font-size: 0.9rem;
+  }
+
+  footer {
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
+
+  .v-card-actions {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    color: var(--on-primary-color) !important;
+    margin-top: 5rem;
+    text-align: justify !important;
+  }
+
+  .reviewer-status {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    text-align: justify !important;
+  }
+
+  .reviewer-structure {
+    font-weight: 300;
+    font-size: 0.8rem;
+    line-height: 14px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  @media (min-width:2100px) {
+    .v-card-text {
+      min-height: 150px !important;
+      max-height: 150px !important;
+    }
+  }
+}
+
+.card {
+  margin-left: 0.5rem;
+  border-radius: 1rem;
+}
+
+.v-card {
+  padding: 0 0.5rem;
+  border-radius: 1rem;
+  min-height: 450px;
+  max-height: 450px;
+  margin-top: 2rem;
+  margin-bottom: 0.6rem;
+}
+
+@media (min-width:2100px) {
+  .v-card {
+    min-height: 360px !important;
+    max-height: 360px !important;
+  }
+}
+</style>

components/Formation/Reviews.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="Temoignages">
     <LayoutContainer>
-      <CommonReviewCard :cards="cards" />
+      <CommonReviewSection :cards="cards" />
     </LayoutContainer>
   </div>
 </template>

components/Logiciels/Artist/Reviews.vue

@@ -2,25 +2,26 @@
   <AnchoredSection id="testimonials">
     <div>
       <LayoutContainer>
-        <CommonReviewCard :cards="cards" />
+        <CommonReviewSection :cards="cards" />
       </LayoutContainer>
     </div>
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Review } from "~/types/interface";
 
-const cards = [
+const cards: Array<Review> = [
   {
-    description:
+    review:
       "L'outil répond à toutes les demandes d'une structure de notre taille et la connexion avec le site internet est très pratique.",
     name: "Patrice MONTESSUIT",
     status: "Directeur musical ",
     structure: "Orchestre d'Harmonie de Cluses (74)",
   },
   {
-    description:
+    review:
       "C'est un outil de travail très intéressant, complet et intuitif quand on comprend certaines subtilités. Il a très bien évolué aussi bien pour les chorales que les harmonie. Mes remarques ont toujours été prises en compte.",
     name: "Gérard LEFÈBVRE ",
     status: "Président",
@@ -29,12 +30,12 @@ const cards = [
 ];
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .v-container {
   padding: 0 !important;
 }
 
-:deep().reviewer-name {
+:deep(.reviewer-name) {
   color: rgb(250, 194, 10) !important;
 }
 </style>

components/Logiciels/Manager/Reviews.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer id="Temoignages">
-    <CommonReviewCard :cards="cards" />
+    <CommonReviewSection :cards="cards" />
   </LayoutContainer>
 </template>
 

components/Logiciels/School/Reviews.vue

@@ -1,40 +1,41 @@
 <template>
   <AnchoredSection id="testimonials">
-    <div id="Temoignages">
+    <div>
       <LayoutContainer>
-        <CommonReviewCard :cards="cards" />
+        <CommonReviewSection :cards="cards" />
       </LayoutContainer>
     </div>
   </AnchoredSection>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Review } from "~/types/interface";
 
-const cards = [
+const cards: Array<Review> = [
   {
-    description:
+    review:
       "C'est un logiciel simple d'utilisation après la formation. Pensé pour la musique, il s'adapte rès bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
     name: "Patrice CATHELIN ",
     status: "Directeur administratif & pédagogique ",
     structure: "Conservatoire de Musique & de Danse de Sens (78)",
   },
   {
-    description:
+    review:
       "Étant présente depuis presque le début, je suis fière d'avoir vu grandir ce logiciel et d'avoir évoluée avec lui. De plus, je me suis sentie écoutée lors de mes propositions d'amélioration, car beaucoup ont vu le jour. Enfin, l'accompagnement et la réactivité n'ont jamais faibli depuis toutes ces années",
     name: "Karine GIRAUD",
     status: "Secrétaire administrative",
     structure: "Association Musicale Sainte Cécile de Lagord (17)",
   },
   {
-    description:
+    review:
       "Logiciel très complet qui permet de faire beaucoup de choses. J’apprécie particulièrement la réactivité, la bienveillance et le fait que l’équipe soit à l'écoute pour faire évoluer l'outil en fonction de nos besoins. Si besoin, la FAQ est vraiment utile. Elle permet de trouver rapidement une solution face à un problème rencontré..",
     name: "Laurent BEL",
     status: "Directeur administratif & pédagogique",
     structure: " École de Musique EPIC Musique en 4 Rivières (74)",
   },
   {
-    description:
+    review:
       "Opentalent est une entreprise avec de vraies valeurs humaines, à l'écoute de chaque structure et qui ne cesse de s'améliorer pour toujours coller aux besoins de ses clients. Plus qu'une relation commerciale, c'est pour nous un véritable partenaire au quotidien..",
     name: "Philippe BORY",
     status: "Personnel administratif",

types/interface.d.ts

@@ -87,3 +87,4 @@ interface Formation {
   buttonText: string;
   link: string;
 }
+