correction carousel review

components/Logiciels/School/Accompagnement.vue

@@ -138,12 +138,12 @@ margin-bottom: .5rem;
   font-family: 'Barlow';
 font-style: normal;
 font-weight: 500;
-font-size: 15px;
+font-size: 1rem;
 line-height: 18px;
 background: transparent;
 color: #EFF9FB;
 border: 1px solid #EFF9FB;
-border-radius: 2rem;
+border-radius: .5rem;
 margin-left: 7rem;
 
 }
@@ -151,8 +151,8 @@ margin-left: 7rem;
   font-family: 'Barlow';
 font-style: normal;
 font-weight: 300;
-font-size: 14px;
-line-height: 18px;
+font-size: 1rem;
+line-height: 1.5rem;
 color: #EFF9FB;
 margin-left: 7rem;
 
@@ -161,7 +161,7 @@ margin-left: 7rem;
   font-family: 'Barlow';
 font-style: normal;
 font-weight: 500;
-font-size: 22px;
+font-size: 1.8rem;
 line-height: 26px;
 color: #FFFFFF;
 margin-left: 7rem;

components/Logiciels/School/Caroussel.vue

@@ -30,6 +30,15 @@
 
 <script setup>
 import { Carousel, Slide } from "vue3-carousel";
+const carousel = ref(null);
+
+const goPrevious = () => {
+  carousel.value.prev();
+};
+
+const goNext = () => {
+  carousel.value.next();
+};
 const items = ref([
   { src: "/images/reviews/review1.png" },
   { src: "/images/reviews/review2.png" },
@@ -37,10 +46,6 @@ const items = ref([
   { src: "/images/reviews/review4.png" },
   { src: "/images/reviews/review5.png" },
 ]);
-let carousel;
-
-const goPrevious = () => carousel.prev();
-const goNext = () => carousel.next();
 </script>
 
 <style scoped>

components/Logiciels/School/Projet.vue

@@ -58,22 +58,24 @@
       <v-row>
         <v-col cols="4" class="border-col">
           <div class="d-flex justify-center align-center">
-            <v-icon class="fa-brands fa-react icon"></v-icon>
+            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
           </div>
-          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+          <p class="d-flex justify-center align-center details">Paiement Sécurisé</p>
         </v-col>
         <v-col cols="4" class="border-col">
           <div class="d-flex justify-center align-center">
-            <v-icon class="fa-brands fa-react icon"></v-icon>
+            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
           </div>
-          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+          <p class="d-flex justify-center align-center details">Service clef en main</p>
         </v-col>
 
         <v-col cols="4" class="border-col">
           <div class="d-flex justify-center align-center">
-            <v-icon class="fa-brands fa-react icon"></v-icon>
+            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
           </div>
-          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+          <p class="d-flex justify-center align-center details">
+            Soutien pour votre activité
+          </p>
         </v-col>
       </v-row>
     </LayoutContainer>
@@ -83,6 +85,19 @@
 <script setup></script>
 
 <style scoped>
+
+.details{
+  color: var(--vert-100, #091D20);
+  margin-right: auto;
+  margin-left: auto;
+  width: 8rem;
+text-align: center;
+margin-top: .7rem;
+font-size: 1rem;
+font-family: "Barlow";
+font-weight: 300;
+line-height: 14px;
+}
 .border-col {
   border-top: 1px solid #e5e5e5;
   border-right: 1px solid #e5e5e5;
@@ -140,12 +155,12 @@
   font-style: normal;
 }
 .contact {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-right: 10rem;
 }
 
 .icon-title {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-right: 1rem;
   color: rgba(32, 147, 190, 0.6);
 }
@@ -182,8 +197,7 @@
 }
 
 .icon {
-  margin-top: 2rem;
-  font-size: 3rem;
+  margin-top: 1rem;
   color: #0e2d32;
 }
 .femme-casque {

components/Logiciels/School/Reviews.vue

@@ -1,113 +1,164 @@
 <template>
   <div id="Temoignages">
-  <LayoutContainer>
-    <div class="container-green">
-      <v-row>
-        <v-col cols="4">
-          <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
-        </v-col>
-
-        <v-col cols="8">
-          <div class="card-container">
-            <v-card class="card">
-              <v-card-item>
-                <v-card-text>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
-                  exercitationem deleniti aspernatur illo rem deserunt sapiente
-                  tempore dolorem ipsa aliquid vel nihil eius.
-                </v-card-text>
-
-                <div class="card-footer">
-                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
-
-                  <p class="reviewer-status">Chef d'orchestre</p>
-                  <p class="reviewer-structure">Conservatoire de Lyon</p>
-                </div>
-              </v-card-item>
-            </v-card>
-
-            <v-card class="card">
-              <v-card-item>
-                <v-card-text>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
-                  exercitationem deleniti aspernatur illo rem deserunt sapiente
-                  tempore dolorem ipsa aliquid vel nihil eius.
-                </v-card-text>
-
-                <div class="card-footer">
-                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
-
-                  <p class="reviewer-status">Chef d'orchestre</p>
-                  <p class="reviewer-structure">Conservatoire de Lyon</p>
-                </div>
-              </v-card-item>
-            </v-card>
-
-            <v-card class="card">
-              <v-card-item>
-                <v-card-text>
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Provident porro fuga incidunt quae, doloremque tenetur aliquam
-                  exercitationem deleniti aspernatur illo rem deserunt sapiente
-                  tempore dolorem ipsa aliquid vel nihil eius.
-                </v-card-text>
-
-                <div class="card-footer">
-                  <v-card-actions class="reviewer-name"> Laurent Lebon </v-card-actions>
-
-                  <p class="reviewer-status">Chef d'orchestre</p>
-                  <p class="reviewer-structure">Conservatoire de Lyon</p>
-                </div>
-              </v-card-item>
-            </v-card>
+    <LayoutContainer>
+      <div class="container-green">
+        <v-row>
+          <v-col cols="4">
+            <h3 class="reviews-title">C'est 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"></i>
           </div>
-        </v-col>
-      </v-row>
-    </div>
-  </LayoutContainer>
-</div>
+          <div class="carousel-button" @click="goNext">
+            <i class="fas fa-chevron-right"></i>
+          </div>
+        </div>
+          </v-col>
+
+          <v-col cols="8">
+            <Carousel
+          :itemsToShow="3"
+          :itemsToScroll="1"
+          v-slot="{ carousel: _carousel }"
+          ref="carousel"
+        >
+          <Slide class="card" v-for="(card, index) in cards" :key="index">
+
+            <div class="card-container">
+              <v-card >
+                <v-card-item>
+                  <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>
+            </div>
+          </Slide>
+        </Carousel>
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+  </div>
 </template>
 
-<script></script>
+<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 cards = [
+  {
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
+    name: "Laurent Lebon",
+    status: "Chef d'orchestre",
+    structure: "Conservatoire de Lyon",
+  },
+  {
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
+    name: "Laurent Lebon",
+    status: "Chef d'orchestre",
+    structure: "Conservatoire de Lyon",
+  },
+  {
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
+    name: "Laurent Lebon",
+    status: "Chef d'orchestre",
+    structure: "Conservatoire de Lyon",
+  },
+  {
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
+    name: "Laurent Lebon",
+    status: "Chef d'orchestre",
+    structure: "Conservatoire de Lyon",
+  },
+  {
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.",
+    name: "Laurent Lebon",
+    status: "Chef d'orchestre",
+    structure: "Conservatoire de Lyon",
+  },
+];
+</script>
 
 <style scoped>
-
-.reviewer-name{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 500;
-font-size: 20px;
-line-height: 24px;
-color: #E34461;
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid #fff;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 4rem;
 }
 
-.reviewer-status{
-  font-family: 'Barlow';
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 600;
-font-size: 12px;
-line-height: 16px;
-display: flex;
-align-items: center;
-letter-spacing: 0.18em;
-text-transform: uppercase;
+.carousel-button i {
+  color: #fff;
+}
+.reviewer-name {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  color: #e34461;
 }
 
-.reviewer-structure{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 0.8rem;
-line-height: 14px;
-display: flex;
-align-items: center;
+.reviewer-status {
+  font-family: "Barlow";
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
 
-color: #071B1F;
+.reviewer-structure {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.8rem;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  color: #071b1f;
 }
 
+.review-description{
+  text-align: left;
+}
 .card-footer {
   display: flex;
   flex-direction: column;
@@ -116,15 +167,15 @@ color: #071B1F;
   margin-top: 3rem;
 }
 
-.card-text{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 1rem;
-line-height: 1rem;
-margin-left: 1.5rem;
-margin-right: 1.5rem;
-height: 12rem;
+.card-text {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+  height: 12rem;
 }
 .reviews-title {
   font-size: 2rem;
@@ -142,10 +193,8 @@ height: 12rem;
 }
 
 .card {
-  width: 70rem;
-  height: 23rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  width: 80rem;
+  margin-left: .5rem;
   border-radius: 1rem;
 }
 
@@ -155,6 +204,7 @@ height: 12rem;
   align-items: center;
   margin-top: 5rem;
   margin-bottom: 3rem;
+  margin-right: 2rem;
 }
 
 .container-green {