correction laetitia

components/Home/Caroussel.vue

@@ -119,7 +119,7 @@ const carouselItems = ref([
   {
     logo: "/images/carousel/school/school.png",
     description:
-      "Pour les petits comme pour les grans établissements d’enseignement artistique.Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements...",
+      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique telle que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire. Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
     buttonClass: "btn-school",
     image: "/images/carousel/school/Fille_School.png",
     color: "rgba(32, 147, 190, 0.4)",
@@ -132,7 +132,7 @@ const carouselItems = ref([
   {
     logo: "/images/carousel/artist/artist.png",
     description:
-      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de cirque, théâtre et danse.Gérez votre activité avec un logiciel de gestion et communication au service de votre passion.",
+      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion..",
     buttonClass: "btn-artist",
     image: "/images/carousel/artist/musician.png",
     color: "rgba(250, 194, 10, 0.4)",

components/Home/Promotion.vue

@@ -64,7 +64,8 @@
           <div class="horizontal-line" />
           <div class="picto-group">
             <v-img
-              src="/images/pictoHome/picto1.svg"
+            src="/images/pictoHome/picto4.svg"
+
               class="picto-sm"
             />
             <p class="text-outil-sm">
@@ -76,7 +77,8 @@
           <div class="horizontal-line" />
           <div class="picto-group">
             <v-img
-              src="/images/pictoHome/picto2.svg"
+            src="/images/pictoHome/picto3.svg"
+             
               class="picto-sm"
             />
             <p class="text-outil-sm">
@@ -88,7 +90,9 @@
           <div class="horizontal-line" />
           <div class="picto-group">
             <v-img
-              src="/images/pictoHome/picto3.svg"
+            src="/images/pictoHome/picto1.svg"
+
+             
               class="picto-sm"
             />
             <p class="text-outil-sm">
@@ -101,7 +105,7 @@
           <div class="horizontal-line" />
           <div class="picto-group mb-12">
             <v-img
-              src="/images/pictoHome/picto4.svg"
+            src="/images/pictoHome/picto2.svg"
               class="picto-sm"
             />
             <p class="text-outil-sm">
@@ -235,7 +239,7 @@ const zoomOut = () => {
   margin-bottom: 8rem;
 }
 .screen {
-  width: 900px;
+  width: 700px;
   object-fit: cover;
   margin: 2rem auto;
   text-align: center;
@@ -249,7 +253,7 @@ const zoomOut = () => {
 }
 
 .subtitle {
-  font-size: 1.5rem;
+  font-size: 1rem;
   line-height: 1rem;
   margin-top: 1rem;
   color: #c1eff0;
@@ -320,18 +324,22 @@ const zoomOut = () => {
   margin: 3rem 2rem 10rem;
 }
 
+.v-container{
+  padding: 0;
+}
+
 .text-gestion {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-size: 4rem;
+  font-size: 3.5rem;
   line-height: 5.5rem;
   text-align: center;
   color: white;
   height: 20rem;
   margin-top: 3rem;
   width: 55rem;
-  margin: 3rem auto 30rem;
+  margin: 2rem auto 28rem;
 }
 
 .span-color {

components/Home/Solution.vue

@@ -176,17 +176,18 @@ const goNext = () => {
 const solutions = [
   {
     name: "Artist",
-    description: "Orchestre, chorales, compagnies de danse, théâtre et cirque",
+    description: "Orchestres, chorales, compagnies de danse, théâtre et cirque",
     image: "/images/OpenTalent_LogoNoir_Jaune_white.png",
+    link: "/logiciels/artist",
     class: "artist-image",
     solutions: [
       "Gestion des membres",
-      "Agenda",
+      "Agenda de la structure",
       "Matériel & médiathèque",
       "Export de données",
       "Communication",
       "Statistiques",
-      "Site internet",
+      "Site internet intégré",
       "Partage de données en réseau",
     ],
   },
@@ -197,13 +198,13 @@ const solutions = [
     link: "/logiciels/school",
     class: "school-image",
     solutions: [
-      "Gestion des personnes",
+      "Gestion des membres",
       "Préinscription en ligne*",
-      "Agenda",
+      "Agenda de la structure",
       "Suivi pédagogique",
-      "Règlements",
+      "Gestion administrative et financière",
       "Communication",
-      "Site internet",
+      "Site internet intégré",
       "Statistiques",
     ],
   },
@@ -219,8 +220,8 @@ const solutions = [
       "Suivi pédagogique",
       "Règlements",
       "Communication",
-      "Site internet",
-      "Statistiques",
+      "Site internet intégré",
+      "Statistiques du réseau",
     ],
   },
 ];
@@ -237,10 +238,9 @@ onMounted(() => {
 }
 
 .solution-subtitle {
-  font-size: 1.5rem;
+  font-size: 1rem;
   line-height: 1rem;
   margin-top: 1rem;
-  margin-bottom: 2rem;
   color: #c1eff0;
   text-align: center;
   font-family: "Barlow";
@@ -248,7 +248,8 @@ onMounted(() => {
   text-transform: uppercase;
 }
 .title {
-  font-size: 2rem;
+  margin-top: .5rem;
+  font-size: 2.5rem;
   line-height: 42px;
   text-align: center;
   color: #ffffff;

components/Layout/Footer.vue

@@ -1,7 +1,7 @@
 <template>
-   <footer ref="footerElement">
-  <LayoutContainer>
-    <!-- <div
+  <footer ref="footerElement">
+    <LayoutContainer>
+      <!-- <div
       v-if="lgAndUp"
       class="activities"
     >
@@ -14,6 +14,7 @@
           <small class="text-logo-jaune">
             Orchestres, chorales, danse, théatre, cirque</small>
         </v-col>
+        <div class="vertical-bar" />
 
         <v-col cols="3">
           <v-img
@@ -22,7 +23,7 @@
           />
           <small class="text-logo-rouge">Fédérations, confédérations, collectivités</small>
         </v-col>
-
+        <div class="vertical-bar" />
         <v-col cols="4">
           <v-img
             class="logo logo-bleu"
@@ -33,116 +34,174 @@
       </v-row>
     </div> -->
 
-    <div class="footer">
-      <div class="content-footer">
-        <v-row>
-          <v-col
-            :cols="smAndDown ? 12 : 3"
-            :class="smAndDown ? 'logo-opentalent-sm' : ''"
-          >
-            <v-img
-              class="logo"
-              src="/images/Logo-blanc.png"
-              width="294px"
-              height="49px"
-            />
-          </v-col>
-
-          <v-col
-            :cols="smAndDown ? 6 : 2"
-            :class="smAndDown ? 'link-sm' : ''"
-          >
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-              Liens Rapides
-            </v-row>
-            <v-row>
-              <small class="small-link">A propos</small>
-            </v-row>
-            <v-row>
-              <small class="small-link">Nos logiciels</small>
-            </v-row>
-            <v-row>
-              <small class="small-link">Nos actus</small>
-            </v-row>
-          </v-col>
-
-          <v-col
-            :cols="smAndDown ? 6 : 2"
-            :class="smAndDown ? 'link-sm' : ''"
-          >
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-              Informations
-            </v-row>
-            <v-row>
-              <small class="small-link">FAQ</small>
-            </v-row>
-            <v-row>
-              <small class="small-link">Nous rejoindre</small>
-            </v-row>
-            <v-row>
-              <small class="small-link">Presse</small>
-            </v-row>
-            <v-row>
-              <small class="small-link">CGV</small>
-            </v-row>
-          </v-col>
-
-          <v-col
-            :cols="smAndDown ? 6 : 2"
-            :class="smAndDown ? 'link-sm' : ''"
-          >
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-              Espace client
-            </v-row>
-            <v-row>
-              <small class="small-link">Mon compte</small>
-            </v-row>
-            <v-row>
-              <small class="small-link">Nous contacter</small>
-            </v-row>
-          </v-col>
-
-          <v-col
-            :cols="smAndDown ? 6 : 2"
-            :class="smAndDown ? 'link-sm' : ''"
-          >
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
-              Liens Rapides
-            </v-row>
-
-            <v-row>
-              <v-col :cols="smAndDown ? 4 : 2">
-                <v-icon class="fab fa-facebook" />
-              </v-col>
-
-              <v-col :cols="smAndDown ? 4 : 2">
-                <v-icon class="fab fa-linkedin" />
-              </v-col>
-
-              <v-col :cols="smAndDown ? 4 : 2">
-                <v-icon class="fab fa-youtube" />
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
+      <div class="footer">
+        <div class="content-footer">
+          <v-row>
+            <v-col
+              :cols="smAndDown ? 12 : 2"
+              :class="smAndDown ? 'logo-opentalent-sm' : 'flex-container'"
+            >
+              <v-img
+                class="logo"
+                src="/images/Logo-blanc.png"
+                width="294px"
+                height="65px"
+              />
+              <small class="ml-6 right-reserved"
+                >© 2022 Opentalent, Tous droits réservés</small
+              >
+            </v-col>
+
+            <v-col
+              :cols="smAndDown ? 6 : 2"
+              :class="smAndDown ? 'link-sm' : ''"
+            >
+              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+                <h5 class="ml-12 mt-10 h5-title">Agenda culturel</h5>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Agenda</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Annuaire</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Actualités</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Annonces</small>
+              </v-row>
+            </v-col>
+            
+
+            <v-col
+              :cols="smAndDown ? 6 : 2"
+              :class="smAndDown ? 'link-sm' : 'details-footer'"
+            >
+              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+                <h5 class="ml-12 mt-10 h5-title">Nos logiciels culturels</h5>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Opentalent Artist</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Opentalent School</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Opentalent Manager</small>
+              </v-row>
+            </v-col>
+
+
+
+            <v-col
+              :cols="smAndDown ? 6 : 2"
+              :class="smAndDown ? 'link-sm' : 'details-footer'"
+            >
+              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+                <h5 class="ml-12 mt-8 h5-title">Espace client</h5>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Foire Aux Questions</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Support en ligne</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Nous contacter</small>
+              </v-row>
+            </v-col>
+
+            <v-col
+              :cols="smAndDown ? 6 : 2"
+              :class="smAndDown ? 'link-sm' : 'details-footer'"
+            >
+              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+                <h5 class="ml-12 mt-10 h5-title">Conditions & politiques</h5>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Mentions légales</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Conditions Générales d'Utilisation</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Conditions Générales de Ventes</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Politique de confidentialite & protection des données personnelles</small>
+              </v-row>
+              <v-row>
+                <small class="small-link ml-12">Politique d'utilisation des cookies</small>
+              </v-row>
+            </v-col>
+
+            <v-col
+              :cols="smAndDown ? 6 : 2"
+              :class="smAndDown ? 'link-sm' : ''"
+            >
+              <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+                <h5 class="ml-12 mt-10 h5-title">Suivez-nous</h5>
+              </v-row>
+
+              <v-row class="ml-5">
+                <v-col :cols="smAndDown ? 4 : 2">
+                  <v-icon class="fab fa-facebook" />
+                </v-col>
+
+                <v-col :cols="smAndDown ? 4 : 2">
+                  <v-icon class="fab fa-linkedin" />
+                </v-col>
+
+                <v-col :cols="smAndDown ? 4 : 2">
+                  <v-icon class="fab fa-youtube" />
+                </v-col>
+              </v-row>
+
+            </v-col>
+          </v-row>
+        </div>
       </div>
-    </div>
-  </LayoutContainer>
-</footer>
+    </LayoutContainer>
+  </footer>
 </template>
 
 <script setup>
 import { useDisplay } from "vuetify";
-import { ref, provide } from 'vue';
+import { ref, provide } from "vue";
 
 const footerElement = ref(null);
 
-provide('footerElement', footerElement);
+provide("footerElement", footerElement);
 const { smAndDown, lgAndUp } = useDisplay();
-
 </script>
 
 <style scoped>
+
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.vertical-bar {
+  height: 4rem;
+  border: 0.1rem solid #ECFBFC;
+  margin-left: 10px;
+  margin-top: 3rem;
+}
+
+.right-reserved {
+  color: rgba(255, 255, 255, 0.6);
+  font-family: Space Grotesk;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+}
+.h5-title {
+  font-size: 1.1rem;
+  font-style: normal;
+  letter-spacing: 1.2px;
+}
 .link-sm {
   display: flex;
   flex-direction: column;
@@ -178,11 +237,8 @@ const { smAndDown, lgAndUp } = useDisplay();
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 0.7rem;
+  font-size: 0.9rem;
   line-height: 20px;
-
-  /* identical to box height, or 143% */
-
   color: #ffffff;
 }
 .container {
@@ -199,14 +255,14 @@ const { smAndDown, lgAndUp } = useDisplay();
 
 .footer {
   margin-top: 2rem;
-  margin-bottom: 6rem;
+  margin-bottom: 3rem;
 }
 
 .logo {
-  margin-top: 25px;
-  margin-bottom: 21px;
+  margin-top: 2rem;
   width: 141px;
   height: 77px;
+  margin-bottom: 5rem;
 }
 
 .logo-jaune {

components/Layout/Prefooter.vue

@@ -0,0 +1,193 @@
+<template>
+  <footer ref="footerElement">
+    <LayoutContainer>
+      <div v-if="lgAndUp" class="activities">
+        <v-row>
+          <v-col cols="4">
+            <v-img
+              class="logo logo-jaune"
+              src="/images/OpenTalent_LogoNoir_Jaune_white.png"
+            />
+            <small class="text-logo-jaune">
+              Orchestres, chorales, danse, théatre, cirque</small
+            >
+          </v-col>
+          <div class="vertical-bar" />
+
+          <v-col cols="3">
+            <v-img
+              class="logo logo-rouge"
+              src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
+            />
+            <small class="text-logo-rouge"
+              >Fédérations, confédérations, collectivités</small
+            >
+          </v-col>
+          <div class="vertical-bar" />
+          <v-col cols="4">
+            <v-img class="logo logo-bleu" src="/images/logo_school_white.png" />
+            <small class="text-logo-bleu"
+              >Tous les établissements d'enseignement artistique</small
+            >
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+  </footer>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { ref, provide } from "vue";
+
+const footerElement = ref(null);
+
+provide("footerElement", footerElement);
+const { smAndDown, lgAndUp } = useDisplay();
+</script>
+
+<style scoped>
+
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.vertical-bar {
+  height: 4rem;
+  border: 0.1rem solid #ECFBFC;
+  margin-left: 10px;
+  margin-top: 3rem;
+}
+
+.right-reserved {
+  color: rgba(255, 255, 255, 0.6);
+  font-family: Space Grotesk;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+}
+.h5-title {
+  font-size: 1.1rem;
+  font-style: normal;
+  letter-spacing: 1.2px;
+}
+.link-sm {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.logo-opentalent-sm {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon:nth-child(2) {
+  margin-left: 10px;
+}
+.title-link,
+.title-link-sm {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 20px;
+  margin-bottom: 1rem;
+}
+
+.title-link-sm {
+  margin-bottom: 0.1rem;
+}
+
+.small-link {
+  margin-bottom: 0.5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.9rem;
+  line-height: 20px;
+  color: #ffffff;
+}
+.container {
+  background: #091d20;
+  color: aliceblue;
+}
+
+.activities {
+  height: 12rem;
+  background: #091d20;
+  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
+}
+
+
+.logo {
+  margin-top: 2rem;
+  width: 141px;
+  height: 77px;
+}
+
+.logo-jaune {
+  margin-left: 307.74px;
+}
+
+.logo-rouge {
+  margin-left: 117px;
+}
+
+.logo-bleu {
+  margin-left: 91.74px;
+}
+
+.text-logo-jaune {
+  margin-left: 14rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+
+  color: #ecfbfc;
+
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.text-logo-rouge {
+  margin-left: 37.74px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+
+  color: #ecfbfc;
+
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.text-logo-bleu {
+  height: 24px;
+  left: 897px;
+  top: 7858px;
+  margin-left: 25.74px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+  color: #ecfbfc;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+</style>

components/Logiciels/School/FAQ.vue

@@ -0,0 +1,209 @@
+<template>
+  <div id="Aide">
+    <LayoutContainer>
+      <div class="container-img">
+        <div class="overlay" />
+        <v-row>
+          <v-col cols="6">
+            <div class="container-left">
+              <div class="container-title">
+                <v-icon size="6" class="fa-solid fa-circle icon-title " />
+                <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-solid fa-circle icon-button" size="6" />
+                  <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-solid fa-circle icon-button" size="6" />
+                  <p class="text-btn">
+                    De nombreux articles tutoriels accessibles 24h/24
+                  </p>
+                </div>
+              </v-btn>
+            </div>
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.container-left {
+  margin-left: 6rem;
+}
+
+.text-btn {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 26px;
+  color: #f0e8e4;
+  white-space: normal !important;
+  text-align: left;
+}
+.btn-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10rem;
+  margin-right: 15rem;
+}
+
+.container-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 20rem;
+  height: 3.5rem;
+}
+
+.icon-button {
+  color: #fff;
+  margin-right: 0.7rem;
+  margin-left: 2rem;
+  z-index: 2;
+  color: rgba(32, 147, 190);
+}
+.btn-faq-tuto {
+  z-index: 2;
+
+  width: 20rem;
+  height: 5.5rem;
+  margin-left: 3rem;
+  border-radius: 6px;
+  font-family: "Barlow";
+  background: transparent;
+  color: #fff;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  line-height: 1rem;
+  border: 1px white solid;
+  margin-bottom: 2rem;
+  text-transform: none !important;
+}
+
+.subtitle-faq {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #fff;
+  margin-top: 5rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  margin-right: 25rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  z-index: 2;
+}
+.btn-faq {
+  width: 14rem;
+  height: 3.5rem;
+  margin-left: 3rem;
+  background: #ffffff;
+  border-radius: 6px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8rem;
+  z-index: 2;
+
+  text-transform: none !important;
+  line-height: 1rem;
+}
+.title-faq {
+  font-size: 2rem;
+  font-weight: 500;
+  color: #fff;
+  font-family: "Barlow";
+  margin-left: 3rem;
+  margin-right: 15rem;
+  width: 28rem;
+  margin-bottom: 3rem;
+}
+.container-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 3rem;
+}
+
+.icon-title {
+  font-size: 1rem;
+  color: #64afb7;
+  margin-right: 0.5rem;
+  margin-top: 3rem;
+}
+.subtitle-faq {
+  color: #fff;
+  margin-bottom: 2rem;
+  font-family: "Barlow";
+  width: 25rem;
+  margin-right: 15rem;
+
+  font-family: Barlow;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+.container-img {
+  background-image: url("/images/logiciels/school/faq.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 35rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.container-img::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1;
+}
+
+.v-row {
+  position: relative;
+  z-index: 2;
+}
+</style>

components/Logiciels/School/MenuScroll.vue

@@ -27,19 +27,52 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
+
+const refs = reactive({
+  Presentation: null,
+  Avantages: null,
+  Fonctionnalites: null,
+  Comparatif: null,
+  contact: null,
+  Temoignages: null,
+  formations: null,
+  Aide: null
+});
 
 const isSticky = ref(false);
 
 const handleScroll = () => {
   const scrollPosition = window.scrollY;
+
   if (scrollPosition > 800) { 
     isSticky.value = true;
   } else {
     isSticky.value = false;
   }
+
+  // Mettez à jour le menu actif en fonction de la position du défilement
+  for (const key of Object.keys(refs)) {
+    const element = refs[key];
+    if (element) {
+      const top = element.offsetTop;
+      const bottom = top + element.offsetHeight;
+      if (scrollPosition >= top && scrollPosition < bottom) {
+        activeMenu.value = key;
+        break;
+      }
+    }
+  }
 };
 
+onMounted(() => {
+  Object.keys(refs).forEach(key => {
+    refs[key] = document.getElementById(key);
+  });
+
+  window.addEventListener('scroll', handleScroll);
+});
+
 onMounted(() => {
   window.addEventListener('scroll', handleScroll);
 });
@@ -53,8 +86,8 @@ const menus = [
   { label: "Fonctionnalites" },
   { label: "Comparatif" },
   { label: "contact" },
-  { label: "Temoignages" },
   { label: "formations" },
+  { label: "Temoignages" },
   { label: "Aide" },
 ];
 

pages/actualites.vue

@@ -0,0 +1,191 @@
+<template>
+  <LayoutNavigation />
+
+  <h1 class="title">Toutes les news</h1>
+
+  <v-row>
+    <v-col>
+      <div class="back-container-pagination d-flex justify-space-between">
+        <v-col cols="6">
+          <v-btn class="back-pagination" text @click="goBack">
+            <v-icon>mdi-arrow-left</v-icon>
+            Retour
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <div class="d-flex justify-end">
+            <v-pagination
+              v-model="page"
+              :length="pages"
+              @input="onPageChange"
+            ></v-pagination>
+          </div>
+        </v-col>
+      </div>
+    </v-col>
+  </v-row>
+
+  <v-row
+    class="d-flex align-center mb-6"
+    v-for="(actualite, index) in actualites"
+    :key="index"
+  >
+    <v-card class="container-green">
+      <v-card-item>
+        <v-container fluid>
+          <v-row align="center">
+            <v-col cols="3">
+              <v-img
+                :src="actualite.image"
+                alt="poster"
+                class="image-actu mt-12"
+              />
+            </v-col>
+
+            <v-col cols="9">
+              <div class="border">
+                <NuxtLink class="text-decoration-none">
+                  <v-card-title class="card-title">
+                    {{ actualite.titre }}
+                  </v-card-title>
+                </NuxtLink>
+
+                <v-card-text class="infos">
+                  <table>
+                    <tr>
+                      <div class="container-info">
+                        <td>
+                          {{ actualite.description }}
+                        </td>
+                      </div>
+                    </tr>
+                  </table>
+                </v-card-text>
+                <v-col :cols="actionsColumnWidth">
+                  <v-card-actions class="justify-end">
+                    <div class="container-button justify-end">
+                      <v-btn class="btn btn-common btn-subscribe" text>
+                        <v-icon class="fas fa-info mr-2"></v-icon>En savoir plus
+                      </v-btn>
+                    </div>
+                  </v-card-actions>
+                </v-col>
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-item>
+    </v-card>
+  </v-row>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const actualites = ref([
+  {
+    image: "/images/actualites/actualite1.png",
+    titre: "ANDRÉA BOCCELLI EN CONCERT GRATUIT À LOURDES - JUIL 2023",
+    description:
+      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. Et quis nostrum non praesentium impedit 33 doloribus cumque et adipisci velit! Et pariatur nihil quo modi dolorum qui porro corporis est vero alias et eligendi officiis!",
+  },
+  {
+    image: "/images/actualites/actualite3.png",
+    titre: "DÉCOUVREZ L’INCROYABLE HISTOIRE DU VIOLON DU TITANIC",
+    description:
+      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. Et quis nostrum non praesentium impedit 33 doloribus cumque et adipisci velit! Et pariatur nihil quo modi dolorum qui porro corporis est vero alias et eligendi officiis!",
+  },
+  {
+    image: "/images/actualites/actualite4.png",
+    titre: "RETOUR SUR LE BRASS BAND 2023",
+    description: "Lorem ipsum dolor sit amet...",
+  },
+  {
+    image: "/images/actualites/actualite2.png",
+    titre: "ÉTÉ CULTUREL : APPEL À CANDIDATURE",
+    description: "Lorem ipsum dolor sit amet...",
+  },
+]);
+</script>
+
+<style scoped>
+.title {
+  color: #d1cdc7;
+  margin-left: 5rem;
+  margin-top: 2rem;
+  font-family: Barlow;
+  font-size: 42px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 42px;
+}
+.container-info {
+  color: #fff;
+  font-family: Barlow;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 26px;
+}
+.border {
+  border: 1px solid white !important;
+  padding: 10px;
+  border-radius: 20px;
+  width: 100%;
+}
+
+.image-actu {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  bottom: 2rem;
+}
+
+.btn-common {
+  display: flex;
+  left: 0;
+  padding: 25px 28px;
+  align-items: center;
+  gap: 9px;
+  color: var(--NEUTRAL---BLANC, #fff);
+  font-family: Barlow;
+  font-size: 0.8rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 15px;
+  letter-spacing: 1.3px;
+  text-transform: uppercase;
+}
+
+.btn {
+  background: var(--Vert-60, #64afb7);
+}
+
+.card-title {
+  color: var(--NEUTRAL---BLANC, #fff);
+  font-family: Barlow;
+  font-size: 36px;
+  margin-left: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 39px;
+}
+
+.container-green {
+  border-radius: 10px;
+  background: #112528;
+  margin-bottom: 2rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  color: #fff;
+  color: #fff;
+  font-family: Barlow;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 39px;
+  width: 100%;
+  height: auto;
+}
+</style>

pages/index.vue

@@ -8,7 +8,10 @@
   <HomeReviews />
   <!-- <HomeNews /> -->
   <HomeHelp />
-  <LayoutFooter />
+  <LayoutPrefooter />
+  <LayoutFooter/>
 </template>
 
-<script></script>
+<script>
+
+</script>

pages/logiciels/school.vue

@@ -48,7 +48,7 @@
   <LogicielsSchoolAccompagnement />
   <LogicielsSchoolReviews />
   <!-- <LogicielsSchoolAgenda /> -->
-  <LayoutFAQ id="layout-footer" />
+  <LogicielsSchoolFAQ id="layout-footer" />
   <LogicielsSchoolSolutions id="layout-footer"/>
   <LayoutFooter id="layout-footer" />
 </template>