correction logiciels artist

components/Logiciels/Artist/Accompagnement.vue

@@ -1,89 +1,170 @@
 <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>
+          <div class="d-flex justify-center align-center mt-6">
+            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <h5 class="subtitle">pour aller plus loin</h5>
+          </div>
+        </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 class="formation-title">
+              Webinaire de découverte - Nouveaux utilisateurs
+            </h3>
+            <p class="formation-details">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </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 class="formation-btn">S’incrire à une session</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 class="chiffre">XXX</h3>
+            <p>utilisateurs</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 class="chiffre">XXX</h3>
+            <p>utilisateurs</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 class="chiffre">XXX</h3>
+            <p>utilisateurs</p>
+          </div>
+        </v-col>
+      </v-row>
 
+      <v-row>
+        <LogicielsSchoolCaroussel />
+      </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> </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
+.carousel-button i {
+  color: black;
+}
 
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid black;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  text-align: center;
+  color: #0e2d32;
+  width: 30rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2rem;
+}
+.chiffre {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 60px;
+  line-height: 68px;
+  text-align: center;
+  color: #091d20;
+  margin-bottom: 0.5rem;
+}
+.formation-btn {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 18px;
+  background: transparent;
+  color: #eff9fb;
+  border: 1px solid #eff9fb;
+  border-radius: 0.5rem;
+  margin-left: 7rem;
+}
+.formation-details {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: #eff9fb;
+  margin-left: 7rem;
+}
+.formation-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.8rem;
+  line-height: 26px;
+  color: #ffffff;
+  margin-left: 7rem;
+  margin-bottom: 3rem;
+}
+.reunion-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 20%;
+  margin-left: 5rem;
+}
+.subtitle {
+  font-family: "Barlow";
+  font-weight: 500;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
 
+.icon-title {
+  color: #fac20a;
+  font-size: 1.5rem;
+  margin-right: 0.5rem;
+  margin-left: 5rem;
+}
 .container-green {
   background-color: #0e2d32;
   padding: 20px;
@@ -92,17 +173,21 @@
 }
 
 .card-container {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-left: 20rem;
-  margin-right:20rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .card {
-  background: #C3E5E7;
+  background: #fac20a;
   border-radius: 10px;
-  padding-left: 5rem; 
-  padding-right: 5rem;
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+  width: 36rem;
+  height: 15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 </style>

components/Logiciels/Artist/Agenda.vue

@@ -1,55 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="4">
-        <h3>L'agenda Opentalent</h3>
-      </v-col>
-
-      <v-col cols="4"> </v-col>
-
-      <v-col cols="4">
-        <v-btn>Tous les évèvenements</v-btn>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <!-- slide card-->
-      <v-col cols="4">
-        <v-card>
-          <v-img
-            src="/images/logiciels/school/enseignement.jpg"
-            class="enseignement"
-          >
-            <v-card-title class="title">Enseignement</v-card-title>
-          </v-img>
-        </v-card>
-      </v-col>
-      
-      <v-col cols="4">
-        <v-card>
-          <v-img
-            src="/images/logiciels/school/enseignement.jpg"
-            class="enseignement"
-          >
-            <v-card-title class="title">Enseignement</v-card-title>
-          </v-img>
-        </v-card>
-      </v-col>
-
-      <v-col cols="4">
-        <v-card>
-          <v-img
-            src="/images/logiciels/school/enseignement.jpg"
-            class="enseignement"
-          >
-            <v-card-title class="title">Enseignement</v-card-title>
-          </v-img>
-        </v-card>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped></style>

components/Logiciels/Artist/Avantages.vue

@@ -1,60 +1,65 @@
 <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">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>
-        <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>
+        </v-col>
+        <v-col cols="4">
+          <div class="title-card">
+            <h4>Une gestion collaborative</h4>
+            <span class="number-card">03</span>
+          </div>
 
-  </LayoutContainer>
+          <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>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-.v-chip{
+.v-chip {
   background: white;
   color: black;
   margin-top: 2rem;
@@ -62,29 +67,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,17 +102,16 @@
 }
 
 .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-size: 0.9rem;
@@ -117,7 +120,7 @@
 }
 
 .icon-title {
-  color: #D8050B;
+  color: #FAC20A;
   font-size: 1.5rem;
   margin-left: 2rem;
 }

components/Logiciels/Artist/Banner.vue

@@ -45,32 +45,11 @@
       </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>
@@ -123,27 +102,6 @@ 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;
-}
 
 .black-square {
   position: absolute;
@@ -154,14 +112,6 @@ const menus = [
   background: #FAC20A;
 }
 
-.blue-square {
-  position: absolute;
-  bottom: 0.5rem;
-  right: 12rem;
-  width: 13rem;
-  height: 10rem;
-  background: #0e2d32;
-}
 
 .white-square {
   position: absolute;

components/Logiciels/Artist/Fonctionnalites.vue

@@ -1,145 +1,214 @@
 <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 class="fa-brands fa-react 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">
+                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>
+
+        <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>
       </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;
 }
-.title-details{
+.title-details {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
@@ -149,13 +218,13 @@ color: #FFFFFF;
 .icon-details {
   font-size: 1.5rem;
   margin-bottom: 0.9rem;
-  color: #D8050B;
+  color:#FAC20A;
 }
 
-.icon-title{
+.icon-title {
   font-size: 0.8rem;
   margin-bottom: 2rem;
-  color: #D8050B;
+  color:#FAC20A;
 }
 
 .subtitle-fontionnalite {
@@ -180,10 +249,9 @@ color: #FFFFFF;
   margin-bottom: 2rem;
 }
 
-
 .container-green {
-  background-color: #0E2D32;
+  background-color: #0e2d32;
   padding: 5rem;
-  color: #EFF9FB;
+  color: #eff9fb;
 }
-</style>
+</style>

components/Logiciels/Artist/Outil.vue

@@ -1,9 +1,10 @@
 <template>
+    <div id="Presentation">
   <LayoutContainer>
     <v-row class="outil-row">
       <v-col cols="4">
         <div class="title">
-          <v-icon class="fa-brands fa-react icon-title"></v-icon>
+          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
           <h4>Présentation d'opentalent artist</h4>
         </div>
         <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
@@ -125,6 +126,7 @@
       </v-col>
     </v-row>
   </LayoutContainer>
+</div>
 </template>
 
 <script setup></script>
@@ -140,7 +142,7 @@
 
 .icon-title {
   margin-right: 1.5rem;
-  color: rgba(32, 147, 190, 0.6);
+  color: #FAC20A
 }
 .text-square {
   font-family: "Barlow";

components/Logiciels/Artist/Premium.vue

@@ -1,160 +1,257 @@
 <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>
+      <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">Comparatif de nos solutions</h5>
+        </div>
+      </v-row>
+      <v-row>
+        <h3 class="title">Et si vous passiez à la version Premium</h3>
+      </v-row>
+
+      <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">11 <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">18 <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>
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          id: 1,
-          column1: "Donnée 1",
-          column2: "Donnée 2",
-          column3: "Donnée 3",
-          column4: "Donnée 4",
-        },
-        {
-          id: 2,
-          column1: "Donnée 5",
-          column2: "Donnée 6",
-          column3: "Donnée 7",
-          column4: "Donnée 8",
-        },
-        {
-          id: 3,
-          column1: "Donnée 9",
-          column2: "Donnée 10",
-          column3: "Donnée 11",
-          column4: "Donnée 12",
-        },
-        {
-          id: 4,
-          column1: "Donnée 13",
-          column2: "Donnée 14",
-          column3: "Donnée 15",
-          column4: "Donnée 16",
-        },
-        {
-          id: 5,
-          column1: "Donnée 17",
-          column2: "Donnée 18",
-          column3: "Donnée 19",
-          column4: "Donnée 20",
-        },
-        {
-          id: 6,
-          column1: "Donnée 21",
-          column2: "Donnée 22",
-          column3: "Donnée 23",
-          column4: "Donnée 24",
-        },
-        {
-          id: 7,
-          column1: "Donnée 25",
-          column2: "Donnée 26",
-          column3: "Donnée 27",
-          column4: "Donnée 28",
-        },
-        {
-          id: 8,
-          column1: "Donnée 29",
-          column2: "Donnée 30",
-          column3: "Donnée 31",
-          column4: "Donnée 32",
-        },
-        {
-          id: 9,
-          column1: "Donnée 33",
-          column2: "Donnée 34",
-          column3: "Donnée 35",
-          column4: "Donnée 36",
-        },
-        {
-          id: 10,
-          column1: "Donnée 37",
-          column2: "Donnée 38",
-          column3: "Donnée 39",
-          column4: "Donnée 40",
-        },
-        {
-          id: 11,
-          column1: "Donnée 41",
-          column2: "Donnée 42",
-          column3: "Donnée 43",
-          column4: "Donnée 44",
-        },
-      ],
-    };
+<script setup>
+const tableData = [
+  {
+    id: 1,
+    column1: "Espace mémoire",
+    column2: "Stockage disponible",
+    column3: "1 Go",
+    column4: "2 Go",
+  },
+  {
+    id: 2,
+    column1: "Administration",
+    column2: "Compte Internet avec gestion des droits",
+    column3: "150",
+    column4: "300",
+  },
+  {
+    id: 3,
+    column1: "",
+    column2: "Gestion des rôles",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 4,
+    column1: "",
+    column2: "Gestion du bureau et du CA",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 5,
+    column1: "",
+    column2: "Gestion des commissions",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 6,
+    column1: "gestion des membres",
+    column2: "",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 7,
+    column1: "",
+    column2: "Tuteurs pour les mineurs",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 8,
+    column1: "gestion des élèves",
+    column2: "Nombre d’élève maximum",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 9,
+    column1: "",
+    column2: "Fiche élève avec gestion des tuteurs",
+    column3: "check",
+    column4: "check",
   },
-};
+  {
+    id: 10,
+    column1: "",
+    column2: "Corus suivi",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 11,
+    column1: "",
+    column2: "Suivi pédagogique",
+    column3: "check",
+    column4: "check",
+  },
+];
 </script>
-
+.
 <style scoped>
+.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;
+  margin-bottom: 1rem;
+}
 
-.subtitle {
-  font-size: 1.5rem;
+.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;
+}
+
+.ttc {
+  text-transform: uppercase;
+}
+
+.price,
+.month {
+  font-family: "Barlow";
+  font-style: normal;
   font-weight: 400;
-  margin-left: 9rem;
+  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;
 
-.title{
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #454545;
+}
+.icon-title {
+  color:#FAC20A;
   font-size: 1.5rem;
-  font-weight: 400;
-  margin-left: 9rem;
+  margin-left: 3rem;
+}
+.subtitle {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  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;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 30px;
+  line-height: 34px;
 }
 .table-comparatif {
-  width: 74rem;
+  width: 80%;
   margin-top: 1rem;
-  margin-left: 15rem;
-  margin-right: 5rem;
+  margin-right: auto;
+  margin-left: auto;
   border: none;
   border-collapse: collapse;
 }
-.table-row{
+.table-row {
   background-color: white;
   text-align: center;
   height: 3rem;
 }
 
 .table-body .table-row:nth-child(even) {
-  background: rgba(250, 194, 10, 0.2);
+  background-color:#FAC20A33
 }
-
 </style>

components/Logiciels/Artist/Projet.vue

@@ -1,85 +1,205 @@
 <template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="4">
-        <h5>Contactez-nous</h5>
-        <v-img
-          src="/images/logiciels/school/femme-casque.jpg"
-          class="femme-casque"
-        >
-        </v-img>
-      </v-col>
-      <v-col cols="8">
-        <h5>Vous avez un projet ?</h5>
-        <h6>N'attendez plus, appelez-nous</h6>
-        <p>
-          Vous avez une identité, des besoins, des projets... On est là pour
-          vous écouter et vous offrir une offre personnalisée ! Que vous soyez
-          une petite ou une structure plus conséquente, notre offre s'adapte à
-          toutes les tailles : le prix de l’abonnement au logiciel varie en
-          fonction du nombre d'élèves, tout en conservant l'intégralité des
-          fonctionnalités.
-        </p>
+  <div id="Contact">
+    <LayoutContainer>
+      <v-row>
+        <v-col cols="3">
+          <div class="d-flex justify-center align-center">
+            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <h5 class="subtitle-abo">S'abonner dès maintenant</h5>
+          </div>
+        </v-col>
 
-        <v-btn> Nous contacter</v-btn>
-      </v-col>
-    </v-row>
+        <v-col cols="0">
+            <h5 class="subtitle">
+              Opentalent Artist, la solution que vous attendiez...
+            </h5>
+            <p>
+              Que vous soyez une petite ou une structure plus conséquente, notre
+              offre s'adapte à toutes les tailles : le prix de l’abonnement au
+              logiciel varie en fonction du nombre d'élèves, tout en conservant
+              l'intégralité des fonctionnalités.
+            </p>
+            <h3>
+              Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
+            </h3>
+        </v-col>
+      </v-row>
 
-    <v-row>
-      <v-col cols="2">
-        <v-img src="/images/logiciels/school/cmf_logo_orange.png"></v-img>
-      </v-col>
-      <v-col cols="10">
-        <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
-        <p>
-          Si votre établissement d’enseignement artistique est adhérent à la
-          Confédération Musicale de France (CMF), vous bénéficiez gratuitement,
-          dans le cadre de votre adhésion, de la version Opentalent Artist
-          standard et de conditions priviliégiés pour la version Opentalent
-          School. Contactez nous direcetement ou contactez votre fédération pour
-          obtenir vos codes d’accès.
-        </p>
-      </v-col>
-    </v-row>
 
-    <v-row >
-      <v-col cols="4" class="border" >
-        <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">
-        <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-row class="border-row">
+        <v-col cols="2">
+          <v-img
+            class="logo-cmf"
+            src="/images/logiciels/school/cmf_logo_orange.png"
+          ></v-img>
+        </v-col>
+        <v-col cols="10">
+          <div class="cmf-container">
+            <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
+            <p>
+              Si votre établissement d’enseignement artistique est adhérent à la
+              Confédération Musicale de France (CMF), vous bénéficiez
+              gratuitement, dans le cadre de votre adhésion, de la version
+              Opentalent Artist standard et de conditions priviliégiés pour la
+              version Opentalent School. Contactez nous direcetement ou
+              contactez votre fédération pour obtenir vos codes d’accès.
+            </p>
+          </div>
+        </v-col>
+      </v-row>
 
-      <v-col cols="4" class="border">
-        <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-row>
-  </LayoutContainer>
+      <v-row>
+        <v-col cols="4" class="border-col">
+          <div class="d-flex justify-center align-center">
+            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
+          </div>
+          <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 size="35" class="fa-brands fa-react icon"></v-icon>
+          </div>
+          <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 size="35" class="fa-brands fa-react icon"></v-icon>
+          </div>
+          <p class="d-flex justify-center align-center details">
+            Soutien pour votre activité
+          </p>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
+.details {
+  color: var(--vert-100, #091d20);
+  margin-right: auto;
+  margin-left: auto;
+  width: 8rem;
+  text-align: center;
+  margin-top: 0.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;
+  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: 30rem;
+}
 
-.border{
-  border-top: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
-  border-right: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
+.logo-cmf {
+  width: 10rem;
+  height: 10rem;
+  margin-top: 3rem;
+  margin-bottom: 4rem;
+  margin-left: 3rem;
 }
 
-.icon{
-  font-size: 3rem;
-  color: #0E2D32;
+.project-container {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
 }
-.femme-casque {
+
+.btn-contact {
+  background: #f4aa2a;
+  border-radius: 6px;
+  color: #fff;
+
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+  font-family: "Barlow";
+  font-style: normal;
+}
+
+.contact-details {
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
   width: 20rem;
+  font-family: "Barlow";
+  font-style: normal;
+}
+.contact {
+  margin-bottom: 0.5rem;
+}
+
+.icon-title {
+  margin-right: 1rem;
+  color: #fac20a;
+}
+.title {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  font-family: "Barlow";
+  font-style: normal;
+}
+.subtitle-abo {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+.subtitle {
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 38px;
+  color: #071b1f;
+  margin-bottom: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
+}
+
+.contact-container {
+  margin-left: 5rem;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-top: 4rem;
+  margin-bottom: 2rem;
+}
+
+.icon {
+  margin-top: 1rem;
+  color: #0e2d32;
+}
+.femme-casque {
+  width: 18rem;
 }
 </style>

components/Logiciels/Artist/Reviews.vue

@@ -1,111 +1,164 @@
 <template>
-  <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>
+  <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>
+            <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 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;
@@ -114,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;
@@ -140,10 +193,8 @@ height: 12rem;
 }
 
 .card {
-  width: 70rem;
-  height: 23rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  width: 80rem;
+  margin-left: .5rem;
   border-radius: 1rem;
 }
 
@@ -153,6 +204,7 @@ height: 12rem;
   align-items: center;
   margin-top: 5rem;
   margin-bottom: 3rem;
+  margin-right: 2rem;
 }
 
 .container-green {

components/Logiciels/Manager/Reviews.vue

@@ -1,111 +1,164 @@
 <template>
-  <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>
+  <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>
+            <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 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;
@@ -114,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;
@@ -140,10 +193,8 @@ height: 12rem;
 }
 
 .card {
-  width: 70rem;
-  height: 23rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  width: 80rem;
+  margin-left: .5rem;
   border-radius: 1rem;
 }
 
@@ -153,6 +204,7 @@ height: 12rem;
   align-items: center;
   margin-top: 5rem;
   margin-bottom: 3rem;
+  margin-right: 2rem;
 }
 
 .container-green {

components/Logiciels/School/Banner.vue

@@ -53,7 +53,6 @@
 
 <style scoped>
 
-/** titre au dessus de la banner */
 .container-title {
   display: flex;
   justify-content: space-around;

components/Logiciels/School/Premium.vue

@@ -3,13 +3,12 @@
     <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">Comparatif de nos solutions</h5>
-      </div>
+          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <h5 class="subtitle">Comparatif de nos solutions</h5>
+        </div>
       </v-row>
       <v-row>
         <h3 class="title">Et si vous passiez à la version Premium</h3>
-
       </v-row>
 
       <table class="table-comparatif">
@@ -19,14 +18,14 @@
             <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="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="from">A partir de</p>
+              <p class="price">60,20 <span class="ttc">ttc</span></p>
               <p class="month">/mois</p>
             </th>
           </tr>
@@ -34,7 +33,7 @@
         <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">{{ row.column2 }}</td>
             <td class="table-data-second">
               <v-icon
                 size="15"
@@ -42,8 +41,8 @@
                 v-if="row.column3 == 'check'"
               ></v-icon>
               <span v-else>{{ row.column3 }}</span>
-            </td >
-            <td class="table-data-second ">
+            </td>
+            <td class="table-data-second">
               <v-icon
                 size="15"
                 class="far fa-check-circle"
@@ -58,143 +57,139 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          id: 1,
-          column1: "Espace mémoire",
-          column2: "Stockage disponible",
-          column3: "1 Go",
-          column4: "2 Go",
-        },
-        {
-          id: 2,
-          column1: "Administration",
-          column2: "Compte Internet avec gestion des droits",
-          column3: "150",
-          column4: "300",
-        },
-        {
-          id: 3,
-          column1: "",
-          column2: "Gestion des rôles",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 4,
-          column1: "",
-          column2: "Gestion du bureau et du CA",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 5,
-          column1: "",
-          column2: "Gestion des commissions",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 6,
-          column1: "gestion des membres",
-          column2: "",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 7,
-          column1: "",
-          column2: "Tuteurs pour les mineurs",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 8,
-          column1: "gestion des élèves",
-          column2: "Nombre d’élève maximum",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 9,
-          column1: "",
-          column2: "Fiche élève avec gestion des tuteurs",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 10,
-          column1: "",
-          column2: "Corus suivi",
-          column3: "check",
-          column4: "check",
-        },
-        {
-          id: 11,
-          column1: "",
-          column2: "Suivi pédagogique",
-          column3: "check",
-          column4: "check",
-        },
-      ],
-    };
+<script setup>
+const tableData = [
+  {
+    id: 1,
+    column1: "Espace mémoire",
+    column2: "Stockage disponible",
+    column3: "1 Go",
+    column4: "2 Go",
+  },
+  {
+    id: 2,
+    column1: "Administration",
+    column2: "Compte Internet avec gestion des droits",
+    column3: "150",
+    column4: "300",
+  },
+  {
+    id: 3,
+    column1: "",
+    column2: "Gestion des rôles",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 4,
+    column1: "",
+    column2: "Gestion du bureau et du CA",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 5,
+    column1: "",
+    column2: "Gestion des commissions",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 6,
+    column1: "gestion des membres",
+    column2: "",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 7,
+    column1: "",
+    column2: "Tuteurs pour les mineurs",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 8,
+    column1: "gestion des élèves",
+    column2: "Nombre d’élève maximum",
+    column3: "check",
+    column4: "check",
   },
-};
+  {
+    id: 9,
+    column1: "",
+    column2: "Fiche élève avec gestion des tuteurs",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 10,
+    column1: "",
+    column2: "Corus suivi",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 11,
+    column1: "",
+    column2: "Suivi pédagogique",
+    column3: "check",
+    column4: "check",
+  },
+];
 </script>
 .
 <style scoped>
-
 .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;
+.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;
+  margin-bottom: 1rem;
+
 }
 
-.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;
+.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;
 }
 
-.ttc{
+.ttc {
   text-transform: uppercase;
 }
 
-.price, .month{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 400;
-font-size: 30px;
-line-height: 34px;
-text-align: center;
-color: #454545;
+.price,
+.month {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 30px;
+  line-height: 34px;
+  text-align: center;
+  color: #454545;
 }
 
-
-.month{
+.month {
   padding-right: 5rem;
 }
 
-.table-data-left{
+.table-data-left {
   width: 15rem;
   padding-right: 2rem;
 }

pages/about.vue

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

pages/logiciels/artist.vue

@@ -1,6 +1,7 @@
 <template>
   <LayoutNavigation /> 
   <LogicielsArtistBanner />
+  <LogicielsArtistMenuScroll />
   <LogicielsArtistOutil />
   <LogicielsArtistAvantages />
   <LogicielsArtistFonctionnalites />
@@ -8,7 +9,6 @@
   <LogicielsArtistProjet/>
   <LogicielsArtistAccompagnement/>
   <LogicielsArtistReviews/>
-  <LogicielsArtistAgenda/>
   <LayoutFAQ/>
   <LogicielsArtistSolutions/>
   <LayoutFooter />