add actu carousel and navigation scroll

components/Home/News.vue

@@ -1,98 +1,180 @@
 <template>
   <LayoutContainer>
-      <v-row>
-        <v-col cols="6">
-          <h6 class="small-title">Découvrez nos dernières actualités</h6>
-          <h2 class="title">Quoi de neuf ?</h2>
-        </v-col>
-
-        <v-col cols="6">
-          <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <!-- caroussel des aactualités-->
-        <v-col cols="12">
-          <v-sheet
-    class="mx-auto"
-    max-width="800"
-  >
-    <v-slide-group
-      v-model="model"
-      class="pa-4"
-      selected-class="bg-primary"
-      show-arrows
-    >
-      <v-slide-group-item
-        v-for="item in items"
-        :key="i"
-        v-slot="{ isSelected, toggle, selectedClass }"
-      >
-        <v-card
-          color="grey-lighten-1"
-          :class="['ma-4', selectedClass]"
-          height="200"
-          width="100"
-          @click="toggle"
-        >
-          <div class="d-flex fill-height align-center justify-center">
-            <v-scale-transition>
-              <v-icon
-                v-if="isSelected"
-                color="white"
-                size="48"
-                icon="mdi-close-circle-outline"
-              ></v-icon>
-            </v-scale-transition>
-          </div>
-        </v-card>
-      </v-slide-group-item>
-    </v-slide-group>
-
-    <v-expand-transition>
-      <v-sheet
-        v-if="model != null"
-        height="200"
-      >
-        <div class="d-flex fill-height align-center justify-center">
-          <h3 class="text-h6">
-            Selected {{ model }}
-          </h3>
+    <v-row>
+      <v-col cols="6">
+        <div class="container-title">
+          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+
+        <h6 class="small-title">Découvrez nos dernières actualités</h6>
+      </div>
+        <h2 class="title">Quoi de neuf ?</h2>
+      </v-col>
+
+      <v-col cols="6">
+        <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+        <v-col cols="2">
+          <div class="d-flex justify-center align-center">
+            <div class="carousel-button" @click="goPrevious">
+          <i class="fas fa-chevron-left"></i>
+        </div>
+        <div class="carousel-button" @click="goNext">
+          <i class="fas fa-chevron-right"></i>
         </div>
-      </v-sheet>
-    </v-expand-transition>
-  </v-sheet>
-        </v-col>
-      </v-row>
+          </div>
+
+      </v-col>
+
+      <v-col cols="10">
+        <Carousel  :itemsToShow="3.5" :itemsToScroll="1" v-slot="{ carousel: _carousel }" ref="carousel">
+        <Slide class="slide-card" v-for="(actu, index) in actus" :key="index">
+          <div class="card ">
+            <img class="card-img-top" :src="actu.img" alt="Card image cap">
+            <div class="card-body">
+              <h5 class="card-title">{{ actu.title }}</h5>
+              <p class="card-text">{{ actu.content }}</p>
+            </div>
+            
+            <div class="card-footer">
+              <p class="card-date">{{ actu.date }}</p>
+              <button class="card-button">+</button>
+            </div>
+          </div>
+        </Slide>
+      </Carousel>
+      </v-col>
+    </v-row>
   </LayoutContainer>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+import { Carousel, Slide } from 'vue3-carousel';
+import 'vue3-carousel/dist/carousel.css';
 
-const items = ref([
-  { src: "/images/reviews/review1.png" },
-  { src: "/images/reviews/review2.png" },
-  { src: "/images/reviews/review3.png" },
-  { src: "/images/reviews/review4.png" },
-  { src: "/images/reviews/review5.png" },
+const actus = ref([
+  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '20/06/2023', img: '/images/actu/actu1.jpg' },
+  { title: 'AMÉLIORATION DU RÉPERTOIRE', content: 'Sed laeditur hic coetuum magnificus', date: '21/06/2023', img: '/images/actu/actu2.jpg' },
+  { title: 'fOIRE AUX QUESTIONS', content: 'Sed laeditur hic coetuum magnificus', date: '22/06/2023', img: '/images/actu/actu3.jpg' },
+  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '23/06/2023', img: '/images/actu/actu4.jpg' },
+  { title: 'Actu 1', content: 'Sed laeditur hic coetuum magnificus gegr', date: '24/06/2023', img: '/images/actu/actu5.jpg' },
+  { title: 'Actu 2', content: 'Sed laeditur hic coetuum magnificus', date: '25/06/2023', img: '/images/actu/actu6.jpg' },
+  { title: 'Actu 3', content: 'Sed laeditur hic coetuum magnificus', date: '26/06/2023', img: '/images/actu/actu1.jpg' },
+  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '27/06/2023', img: '/images/actu/actu2.jpg' }
 ]);
 
+let carousel;
+
+const goPrevious = () => carousel.prev();
+const goNext = () => carousel.next();
+
 </script>
 
 <style scoped>
-.carousel-card {
-  width: calc(100% / 3 - 12px);
-  height: 150px;
-  border-radius: 8px;
-  overflow: hidden;
-  transition: 0.3s;
+
+.card {
+  border: 0.5px solid #C4C4C4;
+  border-radius: 15px 15px 0 0;
+  margin-bottom: 2rem;
 }
 
-.carousel-card.active {
-  transform: scale(1.05);
+.icon-title{
+  color: #64AFB7;
+  margin-top: 4.5rem;
+
+}
+.container-title{
+  display: flex;
+  align-items: center;
+  margin-left: 2rem;
+  margin-top: 4.5rem;
+}
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid #000000;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 4rem;
+}
+
+.carousel-button i {
+  color: #000000;
+}
+.card-text{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 16px;
+line-height: 18px;
+margin-bottom: 1rem;
+color: #091D20;
+}
+.card-title{
+  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;
+margin-top: 1rem;
+margin-bottom: 1rem;
+}
+.card-date {
+  font-size: 0.8em;
+  color: #888;
+  margin-left: 1rem;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
+
+.card-body {
+  text-align: left;
+  margin-bottom:1rem ;
+  margin-left: 1rem;
+}
+
+
+.card-button {
+  background-color: transparent;
+  border: none;
+  width: 2.5rem;
+  font-size: 1.5em;
+  text-align: right;
+  color: #ffffff;
+  background-color: #64AFB7;;
+  border: none;
+  text-align: center;
+  
+}
+.slide-card{
+  margin-left: 1rem;
+  margin-right: 1rem;
+
+}
+
+.card-img-top {
+  border-radius: 15px 15px 0 0;
+  width: 100%;
+  height: 90%;
+  object-fit: cover;
+  object-position: center; 
+}
 .small-title {
   font-family: "Barlow";
   font-style: normal;
@@ -115,29 +197,27 @@ const items = ref([
   line-height: 42px;
   margin-left: 2rem;
   color: #071b1f;
+  margin-bottom: 2rem;
 }
 
 .btn-news {
   color: #9edbdd;
-  margin-left: 10rem;
+  margin-left: 25rem;
   margin-top: 8rem;
+  top: 6rem;
   border-radius: 2rem;
   font-family: "Barlow";
   background: transparent;
-  /** border color 9edbdd */
   border: 1px solid #9edbdd;
   border-radius: 6px;
   font-style: normal;
   font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
   text-transform: uppercase;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 25px;
-  font-weight: 700;
   font-size: 10px;
   line-height: 15px;
 }
-</style>
+</style>

components/Home/Promotion.vue

@@ -37,7 +37,7 @@
       <v-row>
         <v-col cols="6" >
           <v-row class="row-outil">
-            <p class="text-outil-details with-border-top">Logiciel de Gestion et 
communication en ligne</p>
+            <p class="text-outil-details with-border-top mt-3">Logiciel de Gestion et 
communication en ligne</p>
 
           </v-row>
 
@@ -110,6 +110,7 @@ font-weight: 400;
 font-size: 2rem;
 color: #0E2D32;
 margin-top: -20rem;
+margin-bottom: 3rem;
 }
 
 .col-gestion {

components/Home/Reviews.vue

@@ -1,5 +1,5 @@
-<template>
-  <LayoutContainer>
+<template >
+  <LayoutContainer :overflow="false">
     <div class="container-color">
       <h6 class="small-title">Avis Clients</h6>
 
@@ -15,7 +15,7 @@
               <v-img src="/images/reviews/photo1.jpg"></v-img>
             </v-avatar>
             <v-card-title>
-              <span class="review-name">John Doe left</span>
+              <span class="review-name">John Doe </span>
             </v-card-title>
 
             <v-card-text>
@@ -72,7 +72,7 @@
               <v-img src="/images/reviews/photo1.jpg"></v-img>
             </v-avatar>
             <v-card-title>
-              <span class="review-name">John Doe left</span>
+              <span class="review-name">John Doe </span>
             </v-card-title>
 
             <v-card-text>
@@ -119,48 +119,80 @@
             >
           </v-card>
         </v-col>
+        
         <h2 class="title">Plus de 5 000 structures nous font confiance</h2>
+        <div class="d-flex justify-center align-center">
+            <div class="carousel-button" @click="goPrevious">
+          <i class="fas fa-chevron-left"></i>
+        </div>
+        <div class="carousel-button" @click="goNext">
+          <i class="fas fa-chevron-right"></i>
+        </div>
+          </div>
+        
       </v-row>
-      <div class="carousel">
-    <v-carousel
-      cycle
-      height="200"
-      hide-delimiters
       
-    >
-      <v-carousel-item
-        v-for="(item, i) in items"
-        :key="i"
-        :src="item.src"
-      ></v-carousel-item>
-    </v-carousel>
-  </div>
+      <Carousel class="carrousel elevation-6" :itemsToShow="4" :itemsToScroll="2" v-slot="{ carousel: _carousel }" ref="carousel">
+        <Slide v-for="(item, index) in items" :key="index">
+          <div class="card">
+            <v-img class="card-img" :src="item.src" alt="Card image cap" />
+          </div>
+        </Slide>
+      </Carousel>
     </div>
   </LayoutContainer>
 </template>
 
 <script setup>
-
-
+import { Carousel, Slide } from 'vue3-carousel';
 const items = ref([
-  { src: "/images/reviews/review1.png" },
+{ src: "/images/reviews/review1.png" },
   { src: "/images/reviews/review2.png" },
   { src: "/images/reviews/review3.png" },
   { src: "/images/reviews/review4.png" },
   { src: "/images/reviews/review5.png" },
 ]);
+let carousel;
 
+const goPrevious = () => carousel.prev();
+const goNext = () => carousel.next();
 </script>
 
 <style scoped>
+.carousel-button i {
+  color: #ffffff;
+}
 
-/** add ombre in carousel */
-.carousel{
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid #ffffff;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
+.card-img{
+  height: 10rem;
+  width: 10rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  
+}
+.carousel {
   background-color: white;
   margin-top: 2rem;
-  margin-bottom: 4rem;
   border-radius: 20px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  height: 13em;
+  width: 60rem;
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: #071b1f ;
 }
 .container-green {
   background-color: #0e2d32;

components/Logiciels/School/Accompagnement.vue

@@ -1,89 +1,92 @@
 <template>
-  <LayoutContainer>
-    <div class="container-green">
-      <v-row>
-        <h6>Accompagnement</h6>
-      </v-row>
-
-      <v-row>
-        <v-col cols="3">
-          <v-img
-            src="/images/logiciels/school/reunion.jpg"
-            class="reunion-img"
-          ></v-img>
-        </v-col>
+  <div id="Accompagnement">
+    <LayoutContainer>
+      <div class="container-green">
+        <v-row>
+          <h6>Accompagnement</h6>
+        </v-row>
 
-        <v-col cols="6">
-          <h3>Formation prise en main du logiciel - En ligne</h3>
-          <p>
-            Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux
-            et que vous n’avez pas de temps à perdre,... Lors de votre
-            souscription, nous vous invitons à choisir des dates de formation
-            qui se déroulera sous 2 jours non consécutifs. En effet, ce sont des
-            journées riches d’informations et nous mettons un point d’honneur à
-            vous laisser digérer cette première journée, vous familiariser
-            davantage avec vos nouvelles connaissances avant de passer à la
-            seconde. Destinée aux nouveaux utilisateurs, elle est obligatoire
-            lors de l'acquisition du logiciel. Elle est également utile lors
-            d'un changement de personnel dans la structure.
-          </p>
+        <v-row>
+          <v-col cols="3">
+            <v-img
+              src="/images/logiciels/school/reunion.jpg"
+              class="reunion-img"
+            ></v-img>
+          </v-col>
 
-          <v-btn>S’incrire à une formation</v-btn>
-        </v-col>
-      </v-row>
-    </div>
+          <v-col cols="6">
+            <h3>Formation prise en main du logiciel - En ligne</h3>
+            <p>
+              Parce qu’on sait qu’appréhender un nouvel outil peut-être
+              fastidieux et que vous n’avez pas de temps à perdre,... Lors de
+              votre souscription, nous vous invitons à choisir des dates de
+              formation qui se déroulera sous 2 jours non consécutifs. En effet,
+              ce sont des journées riches d’informations et nous mettons un
+              point d’honneur à vous laisser digérer cette première journée,
+              vous familiariser davantage avec vos nouvelles connaissances avant
+              de passer à la seconde. Destinée aux nouveaux utilisateurs, elle
+              est obligatoire lors de l'acquisition du logiciel. Elle est
+              également utile lors d'un changement de personnel dans la
+              structure.
+            </p>
 
-    <v-row class="card-container">
-  <v-col cols="3" class="d-flex justify-center align-center small-padding">
-    <div class="card">
-      <h3>30 1500</h3>
-      <p>elèves</p>
-    </div>
-  </v-col>
+            <v-btn>S’incrire à une formation</v-btn>
+          </v-col>
+        </v-row>
+      </div>
 
-  <v-col cols="3" class="d-flex justify-center align-center">
-    <div class="card">
-      <h3>30 1500</h3>
-      <p>elèves</p>
-    </div>
-  </v-col>
+      <v-row class="card-container">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <div class="card">
+            <h3>30 1500</h3>
+            <p>elèves</p>
+          </div>
+        </v-col>
 
-  <v-col cols="3" class="d-flex justify-center align-center">
-    <div class="card">
-      <h3>30 1500</h3>
-      <p>elèves</p>
-    </div>
-  </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <div class="card">
+            <h3>30 1500</h3>
+            <p>elèves</p>
+          </div>
+        </v-col>
 
-  <v-col cols="3" class="d-flex justify-center align-center">
-    <div class="card">
-      <h3>30 1500</h3>
-      <p>elèves</p>
-    </div>
-  </v-col>
-</v-row>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <div class="card">
+            <h3>30 1500</h3>
+            <p>elèves</p>
+          </div>
+        </v-col>
 
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <div class="card">
+            <h3>30 1500</h3>
+            <p>elèves</p>
+          </div>
+        </v-col>
+      </v-row>
 
-    <v-row>
-      <!-- Caroussel-->
-      <v-carousel>
-        <v-carousel-item
-          v-for="(item, i) in items"
-          :key="i"
-          :src="item.src"
-          reverse-transition="fade-transition"
-          transition="fade-transition"
-        ></v-carousel-item>
-      </v-carousel>
-    </v-row>
-  </LayoutContainer>
+      <v-row>
+        <!-- Caroussel-->
+        <v-carousel>
+          <v-carousel-item
+            v-for="(item, i) in items"
+            :key="i"
+            :src="item.src"
+            reverse-transition="fade-transition"
+            transition="fade-transition"
+          ></v-carousel-item>
+        </v-carousel>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-
-
 .container-green {
   background-color: #0e2d32;
   padding: 20px;
@@ -95,12 +98,12 @@
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: 20rem;
-  margin-right:20rem;
+  margin-right: 20rem;
 }
 .card {
-  background: #C3E5E7;
+  background: #c3e5e7;
   border-radius: 10px;
-  padding-left: 5rem; 
+  padding-left: 5rem;
   padding-right: 5rem;
   padding-top: 3rem;
   padding-bottom: 3rem;

components/Logiciels/School/Avantages.vue

@@ -1,60 +1,75 @@
 <template>
-  <LayoutContainer>
-    <v-row>
-      <div class="d-flex justify-center align-center">
-        <v-icon class="fa-brands fa-react icon-title"></v-icon>
-        <h5 class="subtitle-avantage">Découvrez les avantages de la solution</h5>
-
-      </div>
-    </v-row>
-    <v-row>
-      <h3 class="title">Des avantages concrets</h3>
-    </v-row>
-
-    <v-row class="row">
-      <v-col cols="4">
-        <div class="title-card">
-          <h4 class="description-card">Une gestion collaborative</h4>
-          <span class="number-card">03</span>
+  <div id="Avantages">
+    <LayoutContainer>
+      <v-row>
+        <div class="d-flex justify-center align-center">
+          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <h5 class="subtitle-avantage">
+            Découvrez les avantages de la solution
+          </h5>
         </div>
+      </v-row>
+      <v-row>
+        <h3 class="title">Des avantages concrets</h3>
+      </v-row>
 
-        <hr />
-        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
-          perdez plus de temps avec des fichiers sur diverses applications.
-        </p>
-      </v-col>
-      <v-col cols="4">
-        <div class="title-card">
-          <h4>Une gestion collaborative</h4>
-          <span class="number-card">03</span>
-        </div>
+      <v-row class="row">
+        <v-col cols="4"> 
+          <div class="title-card">
+            <h4 class="description-card">Un gain de temps</h4>
+            <span class="number-card">01</span>
+          </div>
 
-        <hr />
-        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
-          perdez plus de temps avec des fichiers sur diverses applications.
-        </p>
-        <p><v-chip class="chip-card">Membre cmf</v-chip></p>
-        <v-img src="/images/logiciels/school/screen3.png"></v-img>
-      </v-col>
-      <v-col cols="4">
-        <div class="title-card">
-          <h4>Une gestion collaborative</h4>
-          <span class="number-card">03</span>
-        </div>
-        <hr />
-        <p class="details-card"> Centralisez toutes vos informations sur un seul et même outil et ne
-          perdez plus de temps avec des fichiers sur diverses applications.
-        </p>
-      </v-col>
-    </v-row>
+          <hr />
+          <p class="details-card">
+            Centralisez toutes vos informations sur un seul et même outil et ne
+            perdez plus de temps avec des fichiers sur diverses applications.
+          </p>
+          <p><v-chip class="chip-card">Membre cmf</v-chip></p>
+          <v-img src="/images/logiciels/school/screen3.png"></v-img>
+        </v-col>
+        <v-col cols="4">
+          <div class="title-card">
+            <h4 class="description-card">Une activité structurée</h4>
+            <span class="number-card">02</span>
+          </div>
 
-  </LayoutContainer>
+          <hr />
+          <p class="details-card">
+            Des espaces dédiés et des outils spécifiques à vos besoins pour une
+            gestion optimisée et une lecture simplifiée.
+          </p>
+          
+        </v-col>
+        <v-col cols="4">
+          <div class="title-card">
+            <h4 class="description-card">Une gestion collaborative</h4>
+            <span class="number-card">03</span>
+          </div>
+          <hr />
+          <p class="details-card">
+            Grâce à des comptes dédiés, personnalisés et autonomes, permettez à
+            vos membres de mettre à jour leurs informations et d'interagir dans
+            leur agenda.
+          </p>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-.v-chip{
+.description-card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.5rem;
+  line-height: 1rem;
+  color: #0e2d32;
+}
+.v-chip {
   background: white;
   color: black;
   margin-top: 2rem;
@@ -62,29 +77,28 @@
 }
 
 .details-card {
-  font-family: 'Barlow';
+  font-family: "Barlow";
   font-style: normal;
   font-weight: normal;
   font-size: 1rem;
-  color: #091D20;
+  color: #091d20;
   margin-top: 1rem;
 }
 .number-card {
-  font-family: 'Barlow';
+  font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
   font-size: 1.3rem;
-  color: #E34461;
+  color: #e34461;
 }
 
-
 /** pour title-card : flex avec un espaece between */
 .title-card {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  font-family: 'Barlow';
+  font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
   font-size: 1.3rem;
@@ -98,26 +112,25 @@
 }
 
 .title {
-  font-family: 'Barlow';
+  font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
   font-size: 2rem;
   margin-left: 2rem;
   margin-top: 1rem;
-
 }
 
 .subtitle-avantage {
-  font-family: 'Barlow';
+  font-family: "Barlow";
   font-style: normal;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 0.9rem;
   margin-left: 0.5rem;
   margin-right: 73rem;
 }
 
 .icon-title {
-  color: #D8050B;
+  color: rgba(32, 147, 190, 0.6);
   font-size: 1.5rem;
   margin-left: 2rem;
 }

components/Logiciels/School/Banner.vue

@@ -45,39 +45,18 @@
       </v-col>
     </v-row>
 
-    <v-row>
-      <v-col cols="12" class="menu-container">
-        <div v-for="menu in menus" :key="menu.label">
-          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{ menu.label }}</v-chip>
-          <span v-else>{{ menu.label }}</span>
-        </div>
-      </v-col>
-    </v-row>
   </LayoutContainer>
 </template>
 
 <script setup>
-const state = ref({
-  activeMenu: "Présentation",
-})
-
-const menus = [
-  { label: 'Présentation' },
-  { label: 'Avantages' },
-  { label: 'Fonctionnalités' },
-  { label: 'Comparatif' },
-  { label: 'Contact' },
-  { label: 'Accompagnement' },
-  { label: 'Témoignages' },
-  { label: 'Aide' }
-];
 </script>
 
 <style scoped>
+
+/** titre au dessus de la banner */
 .container-title {
   display: flex;
   justify-content: space-around;
-  font-family: "Barlow";
   line-height: 16px;
   display: flex;
   align-items: center;
@@ -86,29 +65,27 @@ const menus = [
   border-bottom: 0.1rem solid #eaeaea;
 }
 
-.text-left {
+.logiciel {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 600;
   font-size: 3rem;
   line-height: 85px;
+  text-align: center;
   color: #000000;
-  opacity: 0.1;
-  margin-top: 2rem;
-  margin-left: 5rem;
+  margin-left: 6rem;
+  margin-right: 4rem;
 }
-
-.logiciel {
+.text-left {
   font-family: "Barlow";
   font-style: normal;
+  font-weight: 600;
   font-size: 3rem;
   line-height: 85px;
-  text-align: center;
   color: #000000;
-  margin-left: 6rem;
-  margin-right: 4rem;
+  opacity: 0.1;
+  margin-top: 2rem;
+  margin-left: 5rem;
 }
-
 .text-right {
   margin-top: 2rem;
   font-family: "Barlow";
@@ -123,28 +100,7 @@ const menus = [
   margin-right: 5rem;
 }
 
-.menu-container {
-  display: flex;
-  justify-content: space-around;
-  padding: 1rem 10rem;
-  background: white;
-  color: #bbb8b8;
-  font-family: "Barlow";
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-
-.v-chip.active-menu {
-  background: black;
-  color: white;
-}
-
+/** banner et cadre pour logo et description de logiciel */
 .black-square {
   position: absolute;
   bottom: 0.4rem;
@@ -157,8 +113,8 @@ const menus = [
 
 .blue-square {
   position: absolute;
-  bottom: 0.5rem;
-  right: 12rem;
+  bottom: 0.4rem;
+  right: 13rem;
   width: 13rem;
   height: 10rem;
   background: #0e2d32;

components/Logiciels/School/FAQ.vue

@@ -1,74 +1,76 @@
 <template>
-  <LayoutContainer>
-    <div class="container-img">
-      <v-row>
-        <v-col cols="6">
-          <div class="container-left">
-
-            <div class="container-title">
-            <v-icon class="fa-brands fa-react icon-title"></v-icon>
-            <h5 class="subtitle-faq">
-              Vous voulez tirer le meilleur de notre logiciel ?
-            </h5>
-          </div>
-          <h3 class="title-faq">
-            Quelle que soit votre demande, notre équipe est à vos côtés pour
-            vous guider
-          </h3>
-
-          <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
-          </div>
-
-        </v-col>
-
-        <v-col cols="6">
-
-          <div class="btn-container">
-            <v-btn class="btn-faq-tuto">
-            <div class="container-button">
-        <v-icon class="fa-brands fa-react icon-button"></v-icon>
-        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
-      </div>
-          </v-btn>
-
-          <v-btn class="btn-faq-tuto">
-            <div class="container-button">
-        <v-icon class="fa-brands fa-react icon-button"></v-icon>
-        <p class="text-btn">De nombreux articles tutoriels accessibles 24h/24</p>
+  <div id="Aide">
+    <LayoutContainer>
+      <div class="container-img">
+        <v-row>
+          <v-col cols="6">
+            <div class="container-left">
+              <div class="container-title">
+                <v-icon class="fa-brands fa-react icon-title"></v-icon>
+                <h5 class="subtitle-faq">
+                  Vous voulez tirer le meilleur de notre logiciel ?
+                </h5>
+              </div>
+              <h3 class="title-faq">
+                Quelle que soit votre demande, notre équipe est à vos côtés pour
+                vous guider
+              </h3>
+
+              <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+            </div>
+          </v-col>
+
+          <v-col cols="6">
+            <div class="btn-container">
+              <v-btn class="btn-faq-tuto">
+                <div class="container-button">
+                  <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                  <p class="text-btn">
+                    De nombreux articles tutoriels accessibles 24h/24
+                  </p>
+                </div>
+              </v-btn>
+
+              <v-btn class="btn-faq-tuto">
+                <div class="container-button">
+                  <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                  <p class="text-btn">
+                    De nombreux articles tutoriels accessibles 24h/24
+                  </p>
+                </div>
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
       </div>
-          </v-btn>
-          </div>
-
-        </v-col>
-      </v-row>
-    </div>
-  </LayoutContainer>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-
-.container-left{
+.container-left {
   margin-left: 6rem;
 }
 
 .text-btn {
-  font-family: 'Barlow';
+  font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
   font-size: 16px;
   line-height: 26px;
-  color: #F0E8E4;
+  color: #f0e8e4;
+  white-space: normal !important;
+  text-align: left;
 }
-.btn-container{
+.btn-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   margin-top: 10rem;
   margin-right: 15rem;
-  
 }
 
 .container-button {
@@ -79,13 +81,13 @@
   height: 3.5rem;
 }
 
-.icon-button{
+.icon-button {
   color: #fff;
   font-size: 2rem;
-  margin-right: 1rem;
+  margin-right: 0.7rem;
   margin-left: 2rem;
 }
-.btn-faq-tuto{
+.btn-faq-tuto {
   width: 20rem;
   height: 5.5rem;
   margin-left: 3rem;
@@ -102,7 +104,7 @@
   text-transform: none !important;
 }
 
-.subtitle-faq{
+.subtitle-faq {
   font-size: 1.5rem;
   font-weight: 500;
   color: #fff;
@@ -128,16 +130,16 @@
   font-size: 0.8rem;
   text-transform: none !important;
   line-height: 1rem;
-  
 }
 .title-faq {
   font-size: 2rem;
   font-weight: 500;
   color: #fff;
-  margin-bottom: 2rem;
   font-family: "Barlow";
   margin-left: 3rem;
   margin-right: 15rem;
+  width: 28rem;
+  margin-bottom: 3rem;
 }
 .container-title {
   display: flex;
@@ -153,21 +155,11 @@
   margin-top: 3rem;
 }
 .subtitle-faq {
-  font-size: 1.5rem;
-  font-weight: 500;
   color: #fff;
   margin-bottom: 2rem;
-  margin-top: 5rem;
   font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
+  width: 15rem;
+  margin-right: 15rem;
 }
 .container-img {
   background-image: url("/images/logiciels/school/faq.jpg");
@@ -180,4 +172,5 @@
   justify-content: center;
   align-items: center;
 }
+
 </style>

components/Logiciels/School/Fonctionnalites.vue

@@ -1,161 +1,218 @@
 <template>
-  <LayoutContainer>
-    <div class="container-green">
-    <v-row>
-      <div class="d-flex justify-center align-center">
-        <v-icon class="fa-brands fa-react icon-title"></v-icon>
-      <h4 class="subtitle-fontionnalite">Découvrez toutes les foncitonnalités de notre solution</h4>
+  <div id="Fonctionnalites">
+    <LayoutContainer>
+      <div class="container-green">
+        <v-row>
+          <div class="d-flex justify-center align-center">
+            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <h4 class="subtitle-fontionnalite">
+              Découvrez toutes les foncitonnalités de notre solution
+            </h4>
+          </div>
+        </v-row>
+
+        <v-row>
+          <h2 class="title-fonctionnalite">
+            Des fonctionnalités adaptées à vos besoins
+          </h2>
+        </v-row>
+
+        <v-row>
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">
+                Bénéficiez d’un espace dédié pour chacun
+              </h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Gérez les personnes</h6>
+              <ul class="list-details">
+                <li>Gestion des élèves, parents/tuteurs</li>
+                <li>Gestion des professeurs et personnel administratif</li>
+                <li>
+                  Gestion des contacts extérieurs, donateurs et partenaires
+                </li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Facilitez l'inscription en ligne</h6>
+              <ul class="list-details">
+                <li>Paramétrage des formulaires</li>
+                <li>Lancement automatisé des réinscriptions</li>
+                <li>Validation des inscriptions</li>
+                <li>
+                  Inscription en ligne optimisée pour les mobiles et tablettes
+                </li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Administrez votre propre site</h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Planifiez vos évènements</h6>
+              <ul class="list-details">
+                <li> Gestion intégrée au logiciel</li>
+                <li>Simplicité d'utilisation</li>
+                <li>Mise à jour automatique</li>
+                <li>Multi-utilisateurs</li>
+                <li>Sécurisé</li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Gérez votre matériel</h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Assurez le suivi pédagogique</h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Facturez en tout simplicité</h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Planifiez vos évènements</h6>
+              <ul class="list-details">
+                <li> Gestion intégrée au logiciel</li>
+                <li>Simplicité d'utilisation</li>
+                <li>Mise à jour automatique</li>
+                <li>Multi-utilisateurs</li>
+                <li>Sécurisé</li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Gérez votre matériel</h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Assurez le suivi pédagogique</h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+
+          <v-col cols="3">
+            <div class="details-container">
+              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <h6 class="title-details">Facturez en tout simplicité</h6>
+              <ul class="list-details">
+                <li>Accès admin</li>
+                <li>Accès professeurs</li>
+                <li>Accès élèves/familles</li>
+              </ul>
+            </div>
+          </v-col>
+        </v-row>
       </div>
-    </v-row>
-
-    <v-row>
-      <h2 class="title-fonctionnalite">Des fonctionnalités adaptées à vos besoins</h2>
-    </v-row>
-
-    <v-row>
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-
-      <v-col cols="3">
-        <div class="details-container">
-          <v-icon class="fa-brands fa-react icon-details"></v-icon>
-          <h6 class="title-details">Bénéficiez d’un espace dédié pour chacun</h6>
-        <ul class="list-details">
-          <li>Accès admin</li>
-          <li>Accès professeurs</li>
-          <li>Accès élèves/familles</li>
-        </ul>
-        </div>
-
-      </v-col>
-    </v-row>
+    </LayoutContainer>
   </div>
-  </LayoutContainer>
-
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
 <style scoped>
-
-.list-details{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 0.75rem;
-line-height: 0.9rem;
-margin-left: 1rem;
-margin-bottom: 1rem;
-color: #FFFFFF;
+.list-details {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.75rem;
+  line-height: 0.9rem;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+  color: #ffffff;
+  width: 14rem;
 }
-.title-details{
+.title-details {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
-  font-size: 1rem;
+  font-size: 1.3rem;
   margin-bottom: 0.7rem;
+  width: 15rem;
 }
 .icon-details {
   font-size: 1.5rem;
   margin-bottom: 0.9rem;
-  color:  #C1EFF0;
+  color: #c1eff0;
 }
 
-.icon-title{
+.icon-title {
   font-size: 0.8rem;
   margin-bottom: 2rem;
-  color: #C1EFF0;
+  color: #c1eff0;
 }
 
 .subtitle-fontionnalite {
@@ -174,16 +231,17 @@ color: #FFFFFF;
   font-style: normal;
   font-weight: 500;
   font-size: 2rem;
+  line-height: 1.9rem;
   margin-left: 1rem;
   margin-top: -1rem;
   width: 25rem;
   margin-bottom: 2rem;
+  margin-top: 1rem;
 }
 
-
 .container-green {
-  background-color: #0E2D32;
+  background-color: #0e2d32;
   padding: 5rem;
-  color: #EFF9FB;
+  color: #eff9fb;
 }
-</style>
+</style>

components/Logiciels/School/MenuScroll.vue

@@ -0,0 +1,71 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <div v-for="menu in menus" :key="menu.label" @click="navigate(menu)">
+          <v-chip v-if="activeMenu === menu.label" class="active-menu">{{
+            menu.label
+          }}</v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menus = [
+  { label: "Presentation" },
+  { label: "Avantages" },
+  { label: "Fonctionnalites" },
+  { label: "Comparatif" },
+  { label: "Contact" },
+  { label: "Accompagnement" },
+  { label: "Temoignages" },
+  { label: "Aide" },
+];
+
+const activeMenu = ref(menus[0].label);
+
+const navigate = (menu) => {
+  activeMenu.value = menu.label;
+  // En supposant que chaque composant de la page ait un ID qui correspond à son nom
+  const element = document.getElementById(menu.label);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth" });
+  }
+};
+</script>
+
+<style scoped>
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.menu-container div:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+
+</style>

components/Logiciels/School/Outil.vue

@@ -1,148 +1,186 @@
 <template>
-  <LayoutContainer>
-    <v-row class="outil-row">
-      <v-col cols="4">
-        <div class="title">
-          <v-icon class="fa-brands fa-react icon-title"></v-icon>
-          <h4>Présentation d'opentalent school</h4>
-        </div>
-        <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
-        </v-img>
-
-        <div class="rectangle-4">
-          <div class="black-circle">
-            <div class="content-flex">
-              <v-img src="/images/logo_school_white.png" class="logo-manager">
-              </v-img>
-              <p class="devis">Sur devis</p>
-            </div>
+  <div id="Presentation">
+    <LayoutContainer>
+      <v-row class="outil-row">
+        <v-col cols="4">
+          <div class="title">
+            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <h4 class="presentation-title">Présentation d'opentalent school</h4>
           </div>
-        </div>
-      </v-col>
-
-      <v-col cols="5">
-        <h2 class="outil-title">Un outil complet en ligne</h2>
-        <ul class="outil-ul">
-          <li class="outil-list">
-            Logiciel de gestion et communication en ligne
-          </li>
-          <li class="outil-list">
-            Destiné aux établissements d'enseignement artistique
-          </li>
-          <li class="outil-list">
-            Gestion quotidienne et en temps réel (suivi pédagogique,
-            facturation, encaissement…)
-          </li>
-          <li class="outil-list">Pilotage complet de votre structure</li>
-        </ul>
-      </v-col>
-
-      <v-col cols="3">
-        <div class="container-square">
-          <v-row>
-            <div class="blue-square">
-              <v-icon class="fa-regular fa-comments icon"></v-icon>
-              <p class="text-square">Nous contacter</p>
-            </div>
-          </v-row>
-
-          <v-row>
-            <div class="blue-square">
-              <v-icon class="fa-regular fa-circle-info icon"></v-icon>
-              <p class="text-square">Demander une demo</p>
-            </div>
-          </v-row>
+          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
+          </v-img>
 
-          <v-row>
-            <div class="blue-square">
-              <v-icon class="fa-brands fa-readme icon"></v-icon>
-              <p class="text-square">Brochure</p>
+          <div class="rectangle-4">
+            <div class="black-circle">
+              <div class="content-flex">
+                <v-img src="/images/logo_school_white.png" class="logo-manager">
+                </v-img>
+                <div class="pricing-details">
+                  <p class="pricing-small-text">à partir de</p>
+                  <p class="pricing-big-text">
+                    20€ <span class="smaller-text">/mois</span>
+                  </p>
+                  <p class="pricing-small-text">payable annuellement</p>
+                </div>
+              </div>
             </div>
-          </v-row>
-
-          <v-row>
-            <div class="darkblue-square">
-              <v-icon class="fa-solid fa-phone icon"></v-icon>
-              <p class="text-square">Nous Appeler</p>
-            </div>
-          </v-row>
-        </div>
-      </v-col>
-      <v-row>
-        <v-col cols="4"> </v-col>
+          </div>
+        </v-col>
 
         <v-col cols="5">
-          <h2>Des caractéristiques uniques & dédiées</h2>
-          <div class="picto-container">
-            <div class="picto-group">
-              <v-img
-                class="picto-img"
-                src="/images/logiciels/school/picto1.png"
-              ></v-img>
-              <p class="picto-text">
-                Logiciel de gestion & communication full web
-              </p>
-            </div>
+          <h2 class="outil-title">Un outil complet en ligne</h2>
+          <ul class="outil-ul">
+            <li class="outil-list">
+              Logiciel de gestion et communication en ligne
+            </li>
+            <li class="outil-list">
+              Destiné aux établissements d'enseignement artistique
+            </li>
+            <li class="outil-list">
+              Gestion quotidienne et en temps réel (suivi pédagogique,
+              facturation, encaissement…)
+            </li>
+            <li class="outil-list">Pilotage complet de votre structure</li>
+          </ul>
+        </v-col>
 
-            <div class="picto-group">
-              <v-img
-                class="picto-img"
-                src="/images/logiciels/school/picto2.png"
-              ></v-img>
-              <p class="picto-text">
-                Boostez votre visibilité & votre communication
-              </p>
-            </div>
+        <v-col cols="3">
+          <div class="container-square">
+            <v-row>
+              <div class="blue-square">
+                <v-icon class="fa-regular fa-comments icon"></v-icon>
+                <p class="text-square">Nous contacter</p>
+              </div>
+            </v-row>
 
-            <div class="picto-group">
-              <v-img
-                class="picto-img"
-                src="/images/logiciels/school/picto3.png"
-              ></v-img>
-              <p class="picto-text">
-                Boostez votre visibilité & votre communication
-              </p>
-            </div>
+            <v-row>
+              <div class="blue-square">
+                <v-icon class="fa-regular fa-circle-info icon"></v-icon>
+                <p class="text-square">Demander une demo</p>
+              </div>
+            </v-row>
 
-            <div class="picto-group">
-              <v-img
-                class="picto-img"
-                src="/images/logiciels/school/picto4.png"
-              ></v-img>
-              <p class="picto-text">Communiquez en réseau</p>
-            </div>
+            <v-row>
+              <div class="blue-square">
+                <v-icon class="fa-brands fa-readme icon"></v-icon>
+                <p class="text-square">Brochure</p>
+              </div>
+            </v-row>
+
+            <v-row>
+              <div class="darkblue-square">
+                <v-icon class="fa-solid fa-phone icon"></v-icon>
+                <p class="text-square">Nous Appeler</p>
+              </div>
+            </v-row>
           </div>
         </v-col>
+        <v-row>
+          <v-col cols="4"> </v-col>
+
+          <v-col cols="5">
+            <h2>Des caractéristiques uniques & dédiées</h2>
+            <div class="picto-container">
+              <div class="picto-group">
+                <v-img
+                  class="picto-img"
+                  src="/images/logiciels/school/picto1.png"
+                ></v-img>
+                <p class="picto-text">
+                  Logiciel de gestion & communication full web
+                </p>
+              </div>
+
+              <div class="picto-group">
+                <v-img
+                  class="picto-img"
+                  src="/images/logiciels/school/picto2.png"
+                ></v-img>
+                <p class="picto-text">
+                  Boostez votre visibilité & votre communication
+                </p>
+              </div>
+
+              <div class="picto-group">
+                <v-img
+                  class="picto-img"
+                  src="/images/logiciels/school/picto3.png"
+                ></v-img>
+                <p class="picto-text">
+                  Boostez votre visibilité & votre communication
+                </p>
+              </div>
+
+              <div class="picto-group">
+                <v-img
+                  class="picto-img"
+                  src="/images/logiciels/school/picto4.png"
+                ></v-img>
+                <p class="picto-text">Communiquez en réseau</p>
+              </div>
+            </div>
+          </v-col>
 
-        <v-col cols="2"> </v-col>
+          <v-col cols="2"> </v-col>
+        </v-row>
       </v-row>
-    </v-row>
 
-    <v-row class="container-green">
-      <v-row>
+      <v-row class="container-green">
+        <v-row>
+          <v-col cols="6">
+            <p class="citation-school">
+              “ Pour les petits comme pour les grands établissements
+              d’enseignement artistique.“
+            </p>
+          </v-col>
+        </v-row>
+
         <v-col cols="6">
-          <p class="citation-school">
-            “ Pour les petits comme pour les grands établissements
-            d’enseignement artistique.“
-          </p>
+          <div class="subtitle-logiciel">
+            <v-icon size="10" class="fa-solid fa-circle icon-logiciel"></v-icon>
+            <h6 >Logiciel Opentalent</h6>
+          </div>
+          
+          <v-img src="/images/logiciels/school/screen2.png" class="screen2-img">
+          </v-img>
         </v-col>
       </v-row>
-
-      <v-col cols="6">
-        <h6 class="subtitle-logiciel">Logiciel Opentalent</h6>
-        <v-img src="/images/logiciels/school/screen2.png" class="screen2-img">
-        </v-img>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-* {
+.pricing-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: black;
+  font-weight: 500;
+  font-size: 1rem;
+  margin-left: 7rem;
+  margin-top: -2.5rem;
+  width: 10rem;
+}
+
+.pricing-small-text {
+  font-size: 0.6em;
+}
+
+.pricing-big-text {
+  font-size: 1.8em;
+  font-weight: bold;
+}
+
+.smaller-text {
+  font-size: 0.6em;
+}
+.presentation-title {
   font-family: "Barlow";
-  font-style: normal;
+  width: 20rem;
 }
 
 .black-circle {
@@ -196,7 +234,7 @@
 }
 
 .icon-title {
-  margin-right: 1.5rem;
+  margin-right: 0.7rem;
   color: rgba(32, 147, 190, 0.6);
 }
 
@@ -225,6 +263,7 @@
 }
 
 .outil-title {
+  font-family: "Barlow";
   font-weight: 600;
   font-size: 3rem;
   line-height: 18px;
@@ -233,6 +272,7 @@
 }
 
 .outil-ul {
+  font-family: "Barlow";
   margin-left: 1rem;
   font-weight: 300;
   font-size: 1rem;
@@ -251,6 +291,8 @@
   margin-left: 2rem;
 }
 .subtitle-logiciel {
+  display: flex;
+  align-items: center;
   font-weight: 600;
   font-size: 1.5rem;
   line-height: 18px;
@@ -260,14 +302,16 @@
   margin-top: 4rem;
   top: 10rem;
 }
+
+.icon-logiciel {
+  color: rgba(32, 147, 190, 0.6);
+  margin-right: 1rem;
+}
 .container-green {
   background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
     rgba(7, 27, 31, 0.3);
   height: 35rem;
 }
-.title-picto-container {
-  align-items: start;
-}
 
 .picto-container {
   display: flex;
@@ -287,8 +331,8 @@
   font-size: 1.5rem;
   line-height: 18px;
   color: #091d20;
-  margin-left: 5rem;
-  margin-right: 5rem;
+  width: 25rem;
+  margin-left: 2rem;
 }
 
 .screen-img {
@@ -302,12 +346,14 @@
   margin-bottom: 5rem;
 }
 .darkblue-square {
+  font-family: "Barlow";
   width: 10rem;
   height: 7rem;
   background: #0e2d32;
   margin-left: 14rem;
 }
 .blue-square {
+  font-family: "Barlow";
   margin-left: 14rem;
   width: 10rem;
   height: 7rem;

components/Logiciels/School/Premium.vue

@@ -1,31 +1,56 @@
 <template>
-  <LayoutContainer>
-    <h6 class="subtitle">Comparatif de nos solutions</h6>
-    <h3 class="title">Et si vous passiez à la version Premium</h3>
-    <table class="table-comparatif">
-      <thead>
-        <tr>
-          <th class="thead"></th>
-          <th class="thead"></th>
-          <th class="thead">
-            <p>Standard</p>
-            <p>A partir de 44,10 ttc /mois</p>
-          </th>
-          <th class="thead">
-            <p>Premium</p>
-            <p>A partir de 60,20 ttc /mois</p>
-          </th>        </tr>
-      </thead>
-      <tbody class="table-body">
-        <tr v-for="row in tableData" :key="row.id" class="table-row">
-          <td class="table-data">{{ row.column1 }}</td>
-          <td>{{ row.column2 }}</td>
-          <td>{{ row.column3 }}</td>
-          <td>{{ row.column4 }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </LayoutContainer>
+  <div id="Comparatif">
+    <LayoutContainer>
+      <div class="d-flex justify-center align-center">
+        <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+        <h5 class="subtitle">Découvrez les avantages de la solution</h5>
+      </div>
+
+      <h3 class="title">Et si vous passiez à la version Premium</h3>
+      <table class="table-comparatif">
+        <thead>
+          <tr>
+            <th class="thead"></th>
+            <th class="thead"></th>
+            <th class="thead">
+              <p class="standard">Standard</p>
+              <p class="from">A partir de </p>
+              <p class="price">44,10 <span class="ttc">ttc</span> </p>
+              <p class="month">/mois</p>
+            </th>
+            <th class="thead premium-column">
+              <p class="standard">Premium</p>
+              <p class="from">A partir de </p>
+              <p class="price">60,20 <span class="ttc">ttc</span> </p>
+              <p class="month">/mois</p>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="table-body">
+          <tr v-for="row in tableData" :key="row.id" class="table-row">
+            <td class="table-data table-data-left">{{ row.column1 }}</td>
+            <td class="table-data ">{{ row.column2 }}</td>
+            <td class="table-data-second">
+              <v-icon
+                size="15"
+                class="far fa-check-circle"
+                v-if="row.column3 == 'check'"
+              ></v-icon>
+              <span v-else>{{ row.column3 }}</span>
+            </td >
+            <td class="table-data-second ">
+              <v-icon
+                size="15"
+                class="far fa-check-circle"
+                v-if="row.column4 == 'check'"
+              ></v-icon>
+              <span v-else>{{ row.column4 }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script>
@@ -35,119 +60,188 @@ export default {
       tableData: [
         {
           id: 1,
-          column1: "Donnée 1",
-          column2: "Donnée 2",
-          column3: "Donnée 3",
-          column4: "Donnée 4",
+          column1: "Espace mémoire",
+          column2: "Stockage disponible",
+          column3: "1 Go",
+          column4: "2 Go",
         },
         {
           id: 2,
-          column1: "Donnée 5",
-          column2: "Donnée 6",
-          column3: "Donnée 7",
-          column4: "Donnée 8",
+          column1: "Administration",
+          column2: "Compte Internet avec gestion des droits",
+          column3: "150",
+          column4: "300",
         },
         {
           id: 3,
-          column1: "Donnée 9",
-          column2: "Donnée 10",
-          column3: "Donnée 11",
-          column4: "Donnée 12",
+          column1: "",
+          column2: "Gestion des rôles",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 4,
-          column1: "Donnée 13",
-          column2: "Donnée 14",
-          column3: "Donnée 15",
-          column4: "Donnée 16",
+          column1: "",
+          column2: "Gestion du bureau et du CA",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 5,
-          column1: "Donnée 17",
-          column2: "Donnée 18",
-          column3: "Donnée 19",
-          column4: "Donnée 20",
+          column1: "",
+          column2: "Gestion des commissions",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 6,
-          column1: "Donnée 21",
-          column2: "Donnée 22",
-          column3: "Donnée 23",
-          column4: "Donnée 24",
+          column1: "gestion des membres",
+          column2: "",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 7,
-          column1: "Donnée 25",
-          column2: "Donnée 26",
-          column3: "Donnée 27",
-          column4: "Donnée 28",
+          column1: "",
+          column2: "Tuteurs pour les mineurs",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 8,
-          column1: "Donnée 29",
-          column2: "Donnée 30",
-          column3: "Donnée 31",
-          column4: "Donnée 32",
+          column1: "gestion des élèves",
+          column2: "Nombre d’élève maximum",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 9,
-          column1: "Donnée 33",
-          column2: "Donnée 34",
-          column3: "Donnée 35",
-          column4: "Donnée 36",
+          column1: "",
+          column2: "Fiche élève avec gestion des tuteurs",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 10,
-          column1: "Donnée 37",
-          column2: "Donnée 38",
-          column3: "Donnée 39",
-          column4: "Donnée 40",
+          column1: "",
+          column2: "Corus suivi",
+          column3: "check",
+          column4: "check",
         },
         {
           id: 11,
-          column1: "Donnée 41",
-          column2: "Donnée 42",
-          column3: "Donnée 43",
-          column4: "Donnée 44",
+          column1: "",
+          column2: "Suivi pédagogique",
+          column3: "check",
+          column4: "check",
         },
       ],
     };
   },
 };
 </script>
-
+.
 <style scoped>
 
-.subtitle {
-  font-size: 1.5rem;
-  font-weight: 400;
-  margin-left: 9rem;
+.table-data-second {
+  padding-right: 5rem;
+}
+.standard{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 12px;
+line-height: 16px;
+text-align: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+color: #0E2D32;
+padding-right: 5rem;
 }
 
-.title{
-  font-size: 1.5rem;
-  font-weight: 400;
-  margin-left: 9rem;
+.from, .ttc{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 12px;
+line-height: 14px;
+text-align: center;
+color: #454545;
+padding-right: 5rem;
 }
 
-.thead {
-  background-color: #fff;
-  height: 8rem;
+.price, .month{
   font-family: 'Barlow';
 font-style: normal;
 font-weight: 400;
 font-size: 30px;
 line-height: 34px;
+text-align: center;
+color: #454545;
+}
+
+
+.month{
+  padding-right: 5rem;
+}
+
+.table-data-left{
+  width: 15rem;
+  padding-right: 2rem;
+}
+.table-data {
+  text-align: left;
+  padding-left: 20px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #454545;
+}
+.icon-title {
+  color: rgba(32, 147, 190, 0.6);
+}
+.subtitle {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  margin-right: 73rem;
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin-left: 3rem;
+  width: 27rem;
+  font-family: "Barlow";
+  font-size: 2.5rem;
+  margin-top: 2rem;
+}
+
+.thead {
+  background-color: #fff;
+  height: 8rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 30px;
+  line-height: 34px;
 }
 .table-comparatif {
-  width: 74rem;
+  width: 80rem;
   margin-top: 1rem;
-  margin-left: 15rem;
+  margin-left: 5rem;
   margin-right: 5rem;
   border: none;
   border-collapse: collapse;
 }
-.table-row{
+.table-row {
   background-color: white;
   text-align: center;
   height: 3rem;
@@ -156,5 +250,4 @@ line-height: 34px;
 .table-body .table-row:nth-child(even) {
   background-color: rgba(32, 147, 190, 0.2);
 }
-
 </style>

components/Logiciels/School/Projet.vue

@@ -1,10 +1,11 @@
 <template>
+  <div id="Contact">
   <LayoutContainer>
     <v-row>
       <div class="project-container">
         
       </div>
-      <v-col cols="3">
+      <v-col cols="4">
         <div class="contact-container">
           <h5 class="contact">Contactez-nous</h5>
           <v-img
@@ -14,7 +15,7 @@
           </v-img>
         </div>
       </v-col>
-      <v-col cols="8">
+      <v-col cols="6">
         <div class="project-container">
           <h5 class="title">Vous avez un projet ?</h5>
           <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
@@ -56,20 +57,20 @@
     </v-row>
 
     <v-row>
-      <v-col cols="4" class="border">
+      <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>
         </div>
         <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
       </v-col>
-      <v-col cols="4" class="border">
+      <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>
         </div>
         <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
       </v-col>
 
-      <v-col cols="4" class="border">
+      <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>
         </div>
@@ -77,19 +78,29 @@
       </v-col>
     </v-row>
   </LayoutContainer>
+</div>
 </template>
 
 <script setup></script>
 
 <style scoped>
 
+.border-col{
+  border-top: 1px solid #E5E5E5;
+  border-right: 1px solid #E5E5E5;
+  height: 8rem;
+}
 .border-row{
   border: 1px solid #E5E5E5;
+  margin-left: 10rem;
+  margin-right: 28rem;
+  margin-bottom: 3rem;
 }
 .cmf-container{
+  margin-left: 3rem;
   margin-top: 4rem;
   margin-bottom: 4rem;
-  width: 35rem;
+  width: 30rem;
 }
 
 .logo-cmf{
@@ -129,6 +140,7 @@ font-weight: 300;
 font-size: 16px;
 line-height: 20px;
 color: #091D20;
+width: 20rem;
 }
 .contact{
   margin-top: 2rem;
@@ -152,7 +164,7 @@ margin-bottom: 2rem;
 }
 
 .contact-container{
-  margin-left: 4rem;
+  margin-left: 10rem;
 font-weight: 600;
 font-size: 12px;
 line-height: 16px;
@@ -161,12 +173,10 @@ text-transform: uppercase;
 margin-top: 4rem;
 margin-bottom: 2rem;
 }
-.border {
-  border-top: 1px solid #000;
-  border-right: 1px solid #000;
-}
+
 
 .icon {
+  margin-top: 2rem;
   font-size: 3rem;
   color: #0e2d32;
 }

components/Logiciels/School/Reviews.vue

@@ -1,4 +1,5 @@
 <template>
+  <div id="Temoignages">
   <LayoutContainer>
     <div class="container-green">
       <v-row>
@@ -66,6 +67,7 @@
       </v-row>
     </div>
   </LayoutContainer>
+</div>
 </template>
 
 <script></script>

package.json

@@ -25,6 +25,7 @@
     "@nuxtjs/i18n": "^8.0.0-beta.9",
     "@pinia-orm/nuxt": "^1.1.7",
     "@pinia/nuxt": "^0.4.7",
+    "@splidejs/vue-splide": "^0.6.12",
     "@syncfusion/ej2-vue-calendars": "^20.4.54",
     "@turf/turf": "^6.5.0",
     "@vue-leaflet/vue-leaflet": "^0.9.0",
@@ -46,7 +47,7 @@
     "typeface-barlow": "^1.1.13",
     "vite-plugin-vuetify": "^1.0.2",
     "vue-social-sharing": "^3.0.9",
-    "vue3-carousel": "^0.2.12",
+    "vue3-carousel": "^0.3.1",
     "vue3-datepicker": "^0.3.4",
     "vuetify": "^3.1.15"
   },

pages/about.vue

@@ -4,6 +4,7 @@
   <AboutHistoire />
   <AboutValeurs />
   <AboutLogiciels />
+  <LayoutFooter/>
 </template>
 
 <script setup>

pages/actu.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="row">
+    <div class="col-2">
+      <button @click="goPrevious">Précédent</button>
+      <button @click="goNext">Suivant</button>
+    </div>
+    <div class="col-8">
+      <Carousel class="carrousel" :itemsToShow="3.5" :itemsToScroll="1" v-slot="{ carousel }">
+        <Slide v-for="(actu, index) in actus" :key="index">
+          <div class="card">
+            <img class="card-img-top" :src="'https://picsum.photos/300/300?random='+index" alt="Card image cap">
+            <div class="card-body">
+              <h5 class="card-title">{{ actu.title }}</h5>
+              <p class="card-text">{{ actu.content }}</p>
+              <p class="card-date">{{ actu.date }}</p>
+            </div>
+            <div class="card-footer">
+              <button class="card-button">+</button>
+            </div>
+          </div>
+        </Slide>
+      </Carousel>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Carousel, Slide } from 'vue3-carousel';
+import 'vue3-carousel/dist/carousel.css';
+
+const actus = ref([
+  { title: 'Actu 1', content: 'Contenu 1', date: '20/06/2023' },
+  { title: 'Actu 2', content: 'Contenu 2', date: '21/06/2023' },
+  { title: 'Actu 3', content: 'Contenu 3', date: '22/06/2023' },
+  { title: 'fenihfze', content: 'bjkeffbezk', date: '23/06/2023' },
+  { title: 'Actu 1', content: 'Contenu 1', date: '24/06/2023' },
+  { title: 'Actu 2', content: 'Contenu 2', date: '25/06/2023' },
+  { title: 'Actu 3', content: 'Contenu 3', date: '26/06/2023' },
+  { title: 'fenihfze', content: 'bjkeffbezk', date: '27/06/2023' }
+]);
+
+let carouselInstance;
+
+const goNext = () => carouselInstance.value.advance(1);
+const goPrevious = () => carouselInstance.value.advance(-1);
+
+</script>
+
+<style scoped>
+.row {
+  display: flex;
+}
+
+.col-4,
+.col-8 {
+  flex: 1 1 0;
+}
+
+.card {
+  border-radius: 15px 15px 0 0;
+  border: 1px solid #ccc;
+  width: auto;
+  height: auto;
+}
+
+.card-img-top {
+  border-radius: 15px 15px 0 0;
+  width: 100%;
+  height: auto;
+}
+
+.card-date {
+  font-size: 0.8em;
+  color: #888;
+}
+
+.card-footer {
+  text-align: right;
+}
+
+.card-button {
+  background-color: transparent;
+  border: none;
+  font-size: 1.5em;
+  color: #888;
+}
+
+</style>

pages/logiciels/school.vue

@@ -1,6 +1,7 @@
 <template>
   <LayoutNavigation /> 
   <LogicielsSchoolBanner />
+  <LogicielsSchoolMenuScroll />
   <LogicielsSchoolOutil />
   <LogicielsSchoolAvantages />
   <LogicielsSchoolFonctionnalites />

yarn.lock

@@ -1669,6 +1669,18 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
   integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
 
+"@splidejs/splide@^4.1.3":
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/@splidejs/splide/-/splide-4.1.4.tgz#02d029360569e7d75d28357a9727fc48322015a3"
+  integrity sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==
+
+"@splidejs/vue-splide@^0.6.12":
+  version "0.6.12"
+  resolved "https://registry.yarnpkg.com/@splidejs/vue-splide/-/vue-splide-0.6.12.tgz#063731cf8ec2d1f9a14ffacbe3a315db63ab6ff2"
+  integrity sha512-eQb8pnGMN8Tr0FVaQo1PUMZlMHl8fSqHNXPTx79eeE2dkZqbsvq6jRzXoT9ZF7hFkxdOEmB6qYNp93SUwV684g==
+  dependencies:
+    "@splidejs/splide" "^4.1.3"
+
 "@syncfusion/ej2-base@~20.4.48", "@syncfusion/ej2-base@~20.4.51":
   version "20.4.51"
   resolved "https://registry.yarnpkg.com/@syncfusion/ej2-base/-/ej2-base-20.4.51.tgz#93a551c1ee092815233d4fa06200318ffd9e9fbc"
@@ -10822,10 +10834,10 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue3-carousel@^0.2.12:
-  version "0.2.12"
-  resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.2.12.tgz#94f1a2744120cfe71585861cd522a475cbd5a727"
-  integrity sha512-yG5MCu/zOusFtIpyihlBtQtt5kI8dA5SqAWBJfGk8vxsbFo4P5OYC2jzCX/ZxLckS/Zw9AB+AahmKFGd1dncbw==
+vue3-carousel@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.3.1.tgz#d001be7dea416dc2f4e66afc4d56af66696dc117"
+  integrity sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==
 
 vue3-datepicker@^0.3.4:
   version "0.3.4"