correction retour laetita

components/Layout/FAQ.vue

@@ -7,7 +7,7 @@
           <v-col cols="6">
             <div class="container-left">
               <div class="container-title">
-                <v-icon class="fa-brands fa-react icon-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>
@@ -27,7 +27,7 @@
             <div class="btn-container">
               <v-btn class="btn-faq-tuto">
                 <div class="container-button">
-                  <v-icon class="fa-brands fa-react icon-button" />
+                  <v-icon class="fa-solid fa-circle icon-button" size="6" />
                   <p class="text-btn">
                     De nombreux articles tutoriels accessibles 24h/24
                   </p>
@@ -36,7 +36,7 @@
 
               <v-btn class="btn-faq-tuto">
                 <div class="container-button">
-                  <v-icon class="fa-brands fa-react icon-button" />
+                  <v-icon class="fa-solid fa-circle icon-button" size="6" />
                   <p class="text-btn">
                     De nombreux articles tutoriels accessibles 24h/24
                   </p>
@@ -86,10 +86,10 @@
 
 .icon-button {
   color: #fff;
-  font-size: 2rem;
   margin-right: 0.7rem;
   margin-left: 2rem;
   z-index: 2;
+  color: rgba(32, 147, 190);
 }
 .btn-faq-tuto {
   z-index: 2;
@@ -167,8 +167,16 @@
   color: #fff;
   margin-bottom: 2rem;
   font-family: "Barlow";
-  width: 15rem;
+  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");

components/Layout/Footer.vue

@@ -1,6 +1,7 @@
 <template>
+   <footer ref="footerElement">
   <LayoutContainer>
-    <div
+    <!-- <div
       v-if="lgAndUp"
       class="activities"
     >
@@ -30,7 +31,7 @@
           <small class="text-logo-bleu">Tous les établissements d'enseignement artistique</small>
         </v-col>
       </v-row>
-    </div>
+    </div> -->
 
     <div class="footer">
       <div class="content-footer">
@@ -127,11 +128,18 @@
       </div>
     </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>

components/Logiciels/School/Accompagnement.vue

@@ -4,17 +4,12 @@
       <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"
-            />
-            <h5 class="subtitle">
-              Accompagnement
-            </h5>
+            <v-icon size="10" class="fa-solid fa-circle icon-title" />
+            <h5 class="subtitle">Nos accompagnements sur-mesure</h5>
           </div>
         </v-row>
 
-        <v-row>
+        <!-- <v-row>
           <v-col cols="3">
             <v-img
               src="/images/logiciels/school/reunion.jpg"
@@ -47,54 +42,121 @@
               S’incrire à une formation
             </v-btn>
           </v-col>
+        </v-row> -->
+        <v-row>
+          <v-col cols="6">
+            <div class="image-wrapper">
+              <v-img
+                src="/images/logiciels/school/reunion.jpg"
+                class="reunion-img1"
+              />
+              <div class="image-overlay1"></div>
+            </div>
+          </v-col>
+          <v-col cols="6">
+            <div class="image-wrapper">
+              <v-img
+                src="/images/logiciels/school/reunion.jpg"
+                class="reunion-img1"
+              />
+              <div class="image-overlay2"></div>
+            </div>
+          </v-col>
         </v-row>
-      </div>
 
+        <v-row>
+          <v-col cols="6">
+            <div class="col-details">
+              <h4 class="session-title">2 sessions disponibles</h4>
+              <h3 class="formation-title">
+                Formation prise en main du logiciel - En ligne
+              </h3>
+              <p class="formation-details">
+                Parce qu’on sait qu’appréhender un nouvel outil peut-être
+                fastidieux et que vous n’avez pas de temps à perdre,...
+              </p>
+              <br />
+              <p class="formation-details mb-6">
+                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>
+            </div>
+
+            <v-btn class="formation-btn"> S’incrire à une formation </v-btn>
+          </v-col>
+
+          <v-col cols="6">
+            <div class="col-details">
+              <h4 class="session-title">10 sessions disponibles</h4>
+              <h3 class="formation-title">
+                Webinaire - Apprendre à piloter son activité
+              </h3>
+              <p class="formation-details">
+                Des explications précises sur certains modules du logiciel
+                Opentalent School, c'est possible pour aller encore plus loin...
+              </p>
+              <br />
+              <p class="formation-details mb-6">
+                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>
+            </div>
+            <v-btn class="formation-btn"> S'inscrire au webinaire</v-btn>
+          </v-col>
+        </v-row>
+      </div>
+      <v-row >
+        <v-col cols="2">
+          <v-row>
+          <div class="d-flex justify-center align-center mt-6">
+            <v-icon size="10" class="fa-solid fa-circle icon-title" />
+            <h5 class="subtitle">QUELQUES CHIFFRES</h5>
+          </div>
+        </v-row>
+        </v-col>
+      </v-row>
       <v-row class="card-container">
         <v-col
           cols="3"
           class="d-flex justify-center align-center small-padding"
         >
           <div class="card">
-            <h3 class="chiffre">
-              1500
-            </h3>
+            <h3 class="chiffre">30 &lt;1500</h3>
             <p>elèves</p>
           </div>
         </v-col>
 
-        <v-col
-          cols="3"
-          class="d-flex justify-center align-center"
-        >
+        <v-col cols="3" class="d-flex justify-center align-center">
           <div class="card">
-            <h3 class="chiffre">
-              234
-            </h3>
-            <p>utilisateurs</p>
+            <h3 class="chiffre">234</h3>
+            <p>Clients</p>
           </div>
         </v-col>
 
-        <v-col
-          cols="3"
-          class="d-flex justify-center align-center"
-        >
+        <v-col cols="3" class="d-flex justify-center align-center">
           <div class="card">
-            <h3 class="chiffre">
-              20304
-            </h3>
-            <p>clients</p>
+            <h3 class="chiffre">20304</h3>
+            <p>Utilisateurs</p>
           </div>
         </v-col>
 
-        <v-col
-          cols="3"
-          class="d-flex justify-center align-center"
-        >
+        <v-col cols="3" class="d-flex justify-center align-center">
           <div class="card">
-            <h3 class="chiffre">
-              13
-            </h3>
+            <h3 class="chiffre">13</h3>
             <p>années d’expériences</p>
           </div>
         </v-col>
@@ -112,6 +174,44 @@
 <script setup></script>
 
 <style scoped>
+
+.title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 25rem;
+  margin-left: 2rem;
+}
+.presentation-title {
+  color: #071b1f;
+  font-family: Barlow;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.col-details {
+  margin-right: 6rem;
+}
+.image-wrapper {
+  position: relative;
+}
+.image-overlay1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80%;
+  height: 100%;
+  background-color: rgba(32, 147, 190, 0.2);
+  margin-left: 5rem;
+}
 .carousel-button i {
   color: black;
 }
@@ -145,23 +245,26 @@
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-size: 60px;
+  font-size: 50px;
   line-height: 68px;
   text-align: center;
   color: #091d20;
   margin-bottom: 0.5rem;
 }
 .formation-btn {
+  width: 30rem;
+  height: 4rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
-  font-size: 1rem;
+  font-size: 1.5rem;
   line-height: 18px;
   background: transparent;
   color: #eff9fb;
   border: 1px solid #eff9fb;
   border-radius: 0.5rem;
   margin-left: 7rem;
+  text-transform: none;
 }
 .formation-details {
   font-family: "Barlow";
@@ -182,24 +285,49 @@
   margin-left: 7rem;
   margin-bottom: 3rem;
 }
-.reunion-img {
-  width: 100%;
+
+.session-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-img1 {
+  width: 80%;
+  margin-left: 5rem;
   height: 100%;
-  object-fit: cover;
-  border-radius: 20%;
+}
+
+.image-overlay2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80%;
+  height: 100%;
+  background-color: rgba(32, 147, 190, 0.2);
+  width: 80%;
   margin-left: 5rem;
+  height: 100%;
+}
+
+.reunion-img2 {
+  width: 80%;
+  margin-right: 5rem;
+  height: 100%;
 }
 .subtitle {
-  font-family: "Barlow";
-  font-weight: 500;
-  font-size: 0.9rem;
-  line-height: 1.2rem;
+  font-family: Barlow;
+  font-size: 1rem;
+  font-style: normal;
   font-weight: 600;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
+  line-height: 15px;
+  letter-spacing: 1.8px;
   text-transform: uppercase;
+  margin-bottom: 1rem;
 }
 
 .icon-title {

components/Logiciels/School/Avantages.vue

@@ -2,20 +2,20 @@
   <div id="Avantages">
     <LayoutContainer>
       <v-row>
-        <div class="d-flex justify-center align-center">
+        <div class="d-flex justify-center align-center mt-2">
           <v-icon
-            size="10"
+            size="6"
             class="fa-solid fa-circle icon-title"
           />
-          <h5 class="subtitle-avantage">
+          <h4 class="subtitle-avantage">
             Découvrez les avantages de la solution
-          </h5>
+          </h4>
         </div>
       </v-row>
       <v-row>
-        <h3 class="title">
+        <h2 class="title">
           Des avantages concrets
-        </h3>
+        </h2>
       </v-row>
 
       <v-row class="row">
@@ -127,20 +127,25 @@
 
 .title {
   font-family: "Barlow";
-  font-style: normal;
+  margin-top: 2rem;
   font-weight: 600;
-  font-size: 2rem;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
   margin-left: 2rem;
-  margin-top: 1rem;
 }
 
 .subtitle-avantage {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.9rem;
-  margin-left: 0.5rem;
-  margin-right: 73rem;
+  color: #071B1F;
+font-family: Barlow;
+margin-left: 1rem;
+font-size: 1rem;
+font-style: normal;
+font-weight: 600;
+line-height: 15px; 
+letter-spacing: 1.8px;
+text-transform: uppercase;
 }
 
 .icon-title {

components/Logiciels/School/Fonctionnalites.vue

@@ -4,12 +4,9 @@
       <div class="container-green">
         <v-row>
           <div class="d-flex justify-center align-center">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-title"
-            />
+            <v-icon size="10" class="fa-solid fa-circle icon-title" />
             <h4 class="subtitle-fontionnalite">
-              Découvrez toutes les foncitonnalités de notre solution
+              Découvrez toutes les fonctionnalités de notre solution
             </h4>
           </div>
         </v-row>
@@ -24,13 +21,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Bénéficiez d’un espace dédié pour chacun
-              </h6>
+              <h6 class="title-details">ESPACES DÉDIÉS :</h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Administration</li>
+                <li class="li-details">Professeurs</li>
+                <li class="li-details">Élèves/Familles</li>
               </ul>
             </div>
           </v-col>
@@ -38,15 +33,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Gérez les personnes
-              </h6>
+              <h6 class="title-details">RÉPERTOIRE</h6>
               <ul class="list-details">
-                <li>Gestion des élèves, parents/tuteurs</li>
-                <li>Gestion des professeurs et personnel administratif</li>
-                <li>
-                  Gestion des contacts extérieurs, donateurs et partenaires
-                </li>
+                <li class="li-details">Élèves et responsable légaux</li>
+                <li class="li-details">Personnel administratif et professeurs</li>
+                <li class="li-details">Contacts extérieurs, partenaires & donateurs</li>
               </ul>
             </div>
           </v-col>
@@ -54,16 +45,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Facilitez l'inscription en ligne
-              </h6>
+              <h6 class="title-details">PRÉINSCRIPTION EN LIGNE</h6>
               <ul class="list-details">
-                <li>Paramétrage des formulaires</li>
-                <li>Lancement automatisé des réinscriptions</li>
-                <li>Validation des inscriptions</li>
-                <li>
-                  Inscription en ligne optimisée pour les mobiles et tablettes
-                </li>
+                <li class="li-details">Parametrage personnalisé des formulaires & mails automatiques</li>
+                <li class="li-details">Gestion des réinscriptions et des nouvelles inscriptions</li>
+                <li class="li-details">Gestion des quotas et du suivi des préinscription en ligne</li>
               </ul>
             </div>
           </v-col>
@@ -71,13 +57,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Administrez votre propre site
-              </h6>
+              <h6 class="title-details">AGENDA :</h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Création et gestion des cours, examens, événements et prestations pédagogiques</li>
+                <li class="li-details">Planning interactif avec un contrôle de cohérence</li>
+                <li class="li-details">Gestion des présences et absences</li>
               </ul>
             </div>
           </v-col>
@@ -87,15 +71,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Planifiez vos évènements
-              </h6>
+              <h6 class="title-details">PARC MATÉRIEL :  </h6>
               <ul class="list-details">
-                <li>Gestion intégrée au logiciel</li>
-                <li>Simplicité d'utilisation</li>
-                <li>Mise à jour automatique</li>
-                <li>Multi-utilisateurs</li>
-                <li>Sécurisé</li>
+                <li class="li-details">Gestion de votre parc matériel (instruments, costumes, accessoires..)</li>
+                <li class="li-details">Locations et prêts de matériel</li>
+                <li class="li-details">Planification de la maintenance et entretien de matériel</li>
               </ul>
             </div>
           </v-col>
@@ -103,13 +83,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Gérez votre matériel
-              </h6>
+              <h6 class="title-details">SUIVI PÉDAGOGIQUE : </h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Gestion du cursus pédagogique (critères personnalisables)</li>
+                <li class="li-details">Création des examens et envoi des convocations</li>
+                <li class="li-details">Édition des bulletins de notes</li>
               </ul>
             </div>
           </v-col>
@@ -117,13 +95,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Assurez le suivi pédagogique
-              </h6>
+              <h6 class="title-details">FACTURATION :</h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Facturation automatisée selon différents critères </li>
+                <li class="li-details">Suivi des règlements et gestion des relances</li>
+                <li class="li-details">En options : de nombreux moyens de paiement</li>
               </ul>
             </div>
           </v-col>
@@ -131,13 +107,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Facturez en tout simplicité
-              </h6>
+              <h6 class="title-details">COMMUNICATION :</h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Édition et envoi de courriers, de mails ou de SMS*(*en option)</li>
+                <li class="li-details">Création de modèles de courriers, mails ou SMS</li>
+                <li class="li-details">Outil de publipostage intégré pour un envoi personnalisé</li>
               </ul>
             </div>
           </v-col>
@@ -146,15 +120,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Planifiez vos évènements
-              </h6>
+              <h6 class="title-details">SITE INTERNET : </h6>
               <ul class="list-details">
-                <li>Gestion intégrée au logiciel</li>
-                <li>Simplicité d'utilisation</li>
-                <li>Mise à jour automatique</li>
-                <li>Multi-utilisateurs</li>
-                <li>Sécurisé</li>
+                <li class="li-details">Gestion intégrée au logiciel</li>
+                <li class="li-details">Mise à jour automatique des membres et événements sur votre site</li>
+                <li class="li-details">Possibilité de personnalisé votre template</li>
               </ul>
             </div>
           </v-col>
@@ -162,13 +132,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Gérez votre matériel
-              </h6>
+              <h6 class="title-details">STATISTIQUE : </h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Rapport d'activité complet en fonction de vos activités</li>
+                <li class="li-details">Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement</li>
+                <li class="li-details">Export des données du logiciel pour une analyse complète</li>
               </ul>
             </div>
           </v-col>
@@ -176,13 +144,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Assurez le suivi pédagogique
-              </h6>
+              <h6 class="title-details">RÉSEAU CMF : </h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Accès au répertoire du réseau</li>
+                <li class="li-details">Renouvellement de votre adhésion fédérale</li>
+                <li class="li-details">Gestion de l'assurance CMF</li>
               </ul>
             </div>
           </v-col>
@@ -190,13 +156,11 @@
           <v-col cols="3">
             <div class="details-container">
               <v-icon class="fa-brands fa-react icon-details" />
-              <h6 class="title-details">
-                Facturez en tout simplicité
-              </h6>
+              <h6 class="title-details">PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS :  </h6>
               <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
+                <li class="li-details">Sur votre site internet intégré</li>
+                <li class="li-details">Sur l'agenda de la CMF</li>
+                <li class="li-details">Sur l'Agenda culturel Opentalent </li>
               </ul>
             </div>
           </v-col>
@@ -209,12 +173,17 @@
 <script setup></script>
 
 <style scoped>
+
+.li-details{
+  margin-bottom: 0.5rem;
+  line-height: 1.5rem;
+}
 .list-details {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 0.75rem;
-  line-height: 0.9rem;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
   margin-left: 1rem;
   margin-bottom: 1rem;
   color: #ffffff;
@@ -224,9 +193,10 @@
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
-  font-size: 1.3rem;
+  font-size: 1.5rem;
   margin-bottom: 0.7rem;
   width: 15rem;
+  text-transform: uppercase;
 }
 .icon-details {
   font-size: 1.5rem;
@@ -241,20 +211,24 @@
 }
 
 .subtitle-fontionnalite {
-  font-family: "Barlow";
+  font-size: 1rem;
   font-style: normal;
-  font-weight: 500;
-  font-size: 0.8rem;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+  font-family: "Barlow";
   margin-left: 1rem;
   margin-top: -1rem;
   margin-bottom: 1rem;
-  width: 12rem;
+  width: 22rem;
 }
 
 .title-fonctionnalite {
   font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
   font-style: normal;
-  font-weight: 500;
   font-size: 2rem;
   line-height: 1.9rem;
   margin-left: 1rem;
@@ -266,7 +240,7 @@
 
 .container-green {
   background-color: #0e2d32;
-  padding: 5rem;
+  padding: 4rem;
   color: #eff9fb;
 }
 </style>

components/Logiciels/School/MenuScroll.vue

@@ -1,9 +1,10 @@
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row >
       <v-col
         cols="12"
         class="menu-container"
+        :class="{ 'sticky-menu': isSticky }"
       >
         <div
           v-for="menu in menus"
@@ -26,8 +27,26 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from 'vue';
 
+const isSticky = ref(false);
+
+const handleScroll = () => {
+  const scrollPosition = window.scrollY;
+  if (scrollPosition > 800) { 
+    isSticky.value = true;
+  } else {
+    isSticky.value = false;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+});
 const menus = [
   { label: "Presentation" },
   { label: "Avantages" },
@@ -51,7 +70,17 @@ const navigate = (menu) => {
 </script>
 
 <style scoped>
+
+.sticky-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
 .menu-container {
+  z-index: 1000;
   display: flex;
   justify-content: space-around;
   padding: 1rem 10rem;

components/Logiciels/School/Outil.vue

@@ -4,18 +4,10 @@
       <v-row class="outil-row">
         <v-col cols="4">
           <div class="title">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-title"
-            />
-            <h4 class="presentation-title">
-              Présentation d'opentalent school
-            </h4>
+            <v-icon size="6" class="fa-solid fa-circle icon-title" />
+            <h4 class="presentation-title">Présentation d'opentalent school</h4>
           </div>
-          <v-img
-            src="/images/logiciels/school/screen.jpg"
-            class="screen-img"
-          />
+          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img" />
 
           <div class="rectangle-4">
             <div class="black-circle">
@@ -25,15 +17,11 @@
                   class="logo-manager"
                 />
                 <div class="pricing-details">
-                  <p class="pricing-small-text">
-                    à partir de
-                  </p>
+                  <p class="pricing-small-text">à partir de</p>
                   <p class="pricing-big-text">
-                    20€ <span class="smaller-text">/mois</span>
-                  </p>
-                  <p class="pricing-small-text">
-                    payable annuellement
+                    32,90€ <span class="smaller-text">/mois</span>
                   </p>
+                  <p class="pricing-small-text">payable annuellement</p>
                 </div>
               </div>
             </div>
@@ -41,9 +29,7 @@
         </v-col>
 
         <v-col cols="5">
-          <h2 class="outil-title">
-            Un outil complet en ligne
-          </h2>
+          <h2 class="outil-title">Un outil complet en ligne</h2>
           <ul class="outil-ul">
             <li class="outil-list">
               Logiciel de gestion et communication en ligne
@@ -55,55 +41,14 @@
               Gestion quotidienne et en temps réel (suivi pédagogique,
               facturation, encaissement…)
             </li>
-            <li class="outil-list">
-              Pilotage complet de votre structure
-            </li>
+            <li class="outil-list">Pilotage complet de votre structure</li>
           </ul>
         </v-col>
 
-        <!-- <v-col cols="3">
-          <div class="container-square">
-            <v-row>
-              <div class="blue-square">
-                <v-icon class="fa-regular fa-comments icon" />
-                <p class="text-square">
-                  Nous contacter
-                </p>
-              </div>
-            </v-row>
-
-            <v-row>
-              <div class="blue-square">
-                <v-icon class="fa-regular fa-circle-info icon" />
-                <p class="text-square">
-                  Demander une demo
-                </p>
-              </div>
-            </v-row>
-
-            <v-row>
-              <div class="blue-square">
-                <v-icon class="fa-brands fa-readme icon" />
-                <p class="text-square">
-                  Brochure
-                </p>
-              </div>
-            </v-row>
-
-            <v-row>
-              <div class="darkblue-square">
-                <v-icon class="fa-solid fa-phone icon" />
-                <p class="text-square">
-                  Nous Appeler
-                </p>
-              </div>
-            </v-row>
-          </div>
-        </v-col> -->
-        <v-row>
+        <v-row class="row-caracteristiques">
           <v-col cols="4" />
 
-          <v-col cols="5">
+          <v-col cols="6">
             <h2>Des caractéristiques uniques & dédiées</h2>
             <div class="picto-container">
               <div class="picto-group">
@@ -121,9 +66,7 @@
                   class="picto-img"
                   src="/images/logiciels/school/picto2.png"
                 />
-                <p class="picto-text">
-                  Boostez votre visibilité & votre communication
-                </p>
+                <p class="picto-text">Site internet intégré & simple d'usage</p>
               </div>
 
               <div class="picto-group">
@@ -141,9 +84,7 @@
                   class="picto-img"
                   src="/images/logiciels/school/picto4.png"
                 />
-                <p class="picto-text">
-                  Communiquez en réseau
-                </p>
+                <p class="picto-text">Communiquez en réseau</p>
               </div>
             </div>
           </v-col>
@@ -164,10 +105,7 @@
 
         <v-col cols="6">
           <div class="subtitle-logiciel">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-logiciel"
-            />
+            <v-icon size="10" class="fa-solid fa-circle icon-logiciel" />
             <h6>Logiciel Opentalent</h6>
           </div>
 
@@ -184,6 +122,9 @@
 <script setup></script>
 
 <style scoped>
+.row-caracteristiques {
+  margin-top: -10rem;
+}
 .pricing-details {
   display: flex;
   flex-direction: column;
@@ -203,7 +144,7 @@
 }
 
 .pricing-big-text {
-  font-size: 1.8em;
+  font-size: 1.6em;
   font-weight: bold;
 }
 
@@ -211,8 +152,14 @@
   font-size: 0.6em;
 }
 .presentation-title {
-  font-family: "Barlow";
-  width: 20rem;
+  color: #071b1f;
+  font-family: Barlow;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
 }
 
 .black-circle {
@@ -342,7 +289,7 @@
 .container-green {
   background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
     rgba(7, 27, 31, 0.3);
-  height: 35rem;
+  height: 45rem;
 }
 
 .picto-container {

components/Logiciels/School/Premium.vue

@@ -4,7 +4,7 @@
       <v-row>
         <div class="d-flex justify-center align-center">
           <v-icon
-            size="10"
+            size="6"
             class="fa-solid fa-circle icon-title"
           />
           <h5 class="subtitle">
@@ -31,7 +31,7 @@
                 A partir de
               </p>
               <p class="price">
-                44,10 <span class="ttc">ttc</span>
+                32,90€ <span class="ttc">ttc</span>
               </p>
               <p class="month">
                 /mois
@@ -45,7 +45,7 @@
                 A partir de
               </p>
               <p class="price">
-                60,20 <span class="ttc">ttc</span>
+                46,20€ <span class="ttc">ttc</span>
               </p>
               <p class="month">
                 /mois
@@ -71,6 +71,12 @@
                 size="15"
                 class="far fa-check-circle"
               />
+              <v-icon
+                v-else-if="row.column3 == 'cross'"
+                size="15"
+                class="far fa-times-circle"
+                color="red"
+              />
               <span v-else>{{ row.column3 }}</span>
             </td>
             <td class="table-data-second">
@@ -79,6 +85,12 @@
                 size="15"
                 class="far fa-check-circle"
               />
+              <v-icon
+                v-else-if="row.column3 == 'cross'"
+                size="15"
+                class="far fa-times-circle"
+                color="red"
+              />
               <span v-else>{{ row.column4 }}</span>
             </td>
           </tr>
@@ -125,17 +137,45 @@ const tableData = [
     column3: "check",
     column4: "check",
   },
+  {
+    id: 6,
+    column1: "",
+    column2: "Gestion des préinscription en ligne",
+    column3: "cross",
+    column4: "check",
+  },
+  {
+    id: 6,
+    column1: "",
+    column2: "Rapport d'activité détaillé automatique",
+    column3: "check",
+    column4: "check",
+  },
   {
     id: 6,
     column1: "gestion des membres",
-    column2: "",
+    column2: "Fiches adhérents/élèves",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 6,
+    column1: "",
+    column2: "Personnel administratif",
+    column3: "check",
+    column4: "check",
+  },
+  {
+    id: 6,
+    column1: "",
+    column2: "Professeurs",
     column3: "check",
     column4: "check",
   },
   {
     id: 7,
     column1: "",
-    column2: "Tuteurs pour les mineurs",
+    column2: "Responsables légaux ",
     column3: "check",
     column4: "check",
   },
@@ -247,15 +287,20 @@ const tableData = [
   font-weight: 500;
   font-size: 0.9rem;
   margin-left: 0.5rem;
+font-size: 1rem;
+font-style: normal;
+font-weight: 600;
+line-height: 15px; 
+letter-spacing: 1.8px;
+text-transform: uppercase;
 }
 
 .title {
-  font-size: 1.5rem;
+  font-size: 3rem;
   font-weight: 600;
   margin-left: 3rem;
   width: 27rem;
   font-family: "Barlow";
-  font-size: 2.5rem;
   margin-top: 2rem;
 }
 
@@ -282,7 +327,7 @@ const tableData = [
   height: 3rem;
 }
 
-.table-body .table-row:nth-child(even) {
+.table-body .table-row:nth-child(odd) {
   background-color: rgba(32, 147, 190, 0.2);
 }
 </style>

components/Logiciels/School/Projet.vue

@@ -3,11 +3,11 @@
     <LayoutContainer>
       <v-row>
         <div class="project-container" />
-        <v-col cols="4">
+        <v-col cols="6">
           <div class="contact-container">
             <div class="d-flex justify-center align-center">
               <v-icon
-                size="10"
+                size="6"
                 class="fa-solid fa-circle icon-title"
               />
               <h5 class="contact">
@@ -65,7 +65,7 @@
         </v-col>
       </v-row>
 
-      <v-row>
+      <!-- <v-row>
         <v-col
           cols="4"
           class="border-col"
@@ -109,7 +109,7 @@
             Soutien pour votre activité
           </p>
         </v-col>
-      </v-row>
+      </v-row> -->
     </LayoutContainer>
   </div>
 </template>
@@ -187,7 +187,14 @@
 }
 .contact {
   margin-bottom: 0.5rem;
-  margin-right: 10rem;
+  color: #071B1F;
+font-family: Barlow;
+font-size: 1rem;
+font-style: normal;
+font-weight: 600;
+line-height: 15px; 
+letter-spacing: 1.8px;
+text-transform: uppercase;
 }
 
 .icon-title {
@@ -196,14 +203,12 @@
   color: rgba(32, 147, 190, 0.6);
 }
 .title {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
   font-family: "Barlow";
-  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
 }
 
 .subtitle {
@@ -233,5 +238,6 @@
 }
 .femme-casque {
   width: 18rem;
+  margin-left: 15rem;
 }
 </style>

components/Logiciels/School/Reviews.vue

@@ -142,7 +142,7 @@ const cards = [
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
-  color: #e34461;
+  color: rgba(32, 147, 190);
 }
 
 .reviewer-status {
@@ -212,6 +212,10 @@ const cards = [
   border-radius: 1rem;
 }
 
+.v-card{
+  border-radius: 1rem;
+}
+
 .card-container {
   display: flex;
   justify-content: center;

components/Logiciels/School/Solutions.vue

@@ -3,7 +3,7 @@
     <v-row>
       <v-col cols="12">
         <h4 class="solution-title text-center">
-          Ces solutions peuvent vous intéresser
+          Une gamme de logiciels adaptée à chaque structure
         </h4>
       </v-col>
     </v-row>
@@ -32,31 +32,31 @@
             class="ma-2 chip-custom"
             label
           >
-            <span class="chip-detail">Agenda</span>
+            <span class="chip-detail">Orchestres</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"
             label
           >
-            <span class="chip-detail">Facturation</span>
+            <span class="chip-detail">Chorales</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"
             label
           >
-            <span class="chip-detail">Comptabilité</span>
+            <span class="chip-detail">Compagnies de danse</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"
             label
           >
-            <span class="chip-detail">Communication</span>
+            <span class="chip-detail">Compagnies de théâtre</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"
             label
           >
-            <span class="chip-detail">Site internet</span>
+            <span class="chip-detail">Compagnies de cirque</span>
           </v-chip>
         </v-chip-group>
       </v-col>
@@ -87,28 +87,28 @@
             color="primary"
             label
           >
-            <span class="chip-detail">Agenda</span>
+            <span class="chip-detail">Fédérations</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"
             color="primary"
             label
           >
-            <span class="chip-detail">Facturation</span>
+            <span class="chip-detail">Confédération</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"
             color="primary"
             label
           >
-            <span class="chip-detail">Comptabilité</span>
+            <span class="chip-detail">Réseaux</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"
             color="primary"
             label
           >
-            <span class="chip-detail">Communication</span>
+            <span class="chip-detail">Collectivités</span>
           </v-chip>
           <v-chip
             class="ma-2 chip-custom"

components/Logiciels/School/StickyMenu.vue

@@ -67,7 +67,7 @@
 }
 
 .blue-square {
-  background: rgba(32, 147, 190, 0.6);
+  background:blue;
 }
 
 .darkblue-square {
@@ -94,8 +94,9 @@
 #sticky-menu {
   position: sticky;
   top: 10rem;
-  z-index: 10;  /* Pour s'assurer qu'il reste au-dessus des autres éléments */
-  margin-left: 88rem;
+  z-index: 10;  
+  margin-left: 90rem;
+  margin-bottom: -40rem; 
 }
 
 </style>

pages/logiciels/school.vue

@@ -2,8 +2,43 @@
   <LayoutNavigation />
   <LogicielsSchoolBanner />
 
-  <LogicielsSchoolMenuScroll />
-  <LogicielsSchoolStickyMenu />
+  <LogicielsSchoolMenuScroll class="sticky-scroll" />
+
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <v-row class="outil-row">
+      <v-col cols="3">
+        <div class="container-square">
+          <v-row class="blue-square">
+            <div>
+              <v-icon class="fa-regular fa-comments icon" />
+              <p class="text-square">Nous contacter</p>
+            </div>
+          </v-row>
+
+          <v-row class="blue-square">
+            <div>
+              <v-icon class="fa-regular fa-circle-info icon" />
+              <p class="text-square">Demander une demo</p>
+            </div>
+          </v-row>
+
+          <v-row class="blue-square">
+            <div>
+              <v-icon class="fa-brands fa-readme icon" />
+              <p class="text-square">Brochure</p>
+            </div>
+          </v-row>
+
+          <v-row class="darkblue-square">
+            <div>
+              <v-icon class="fa-solid fa-phone icon" />
+              <p class="text-square">Nous Appeler</p>
+            </div>
+          </v-row>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
 
   <LogicielsSchoolOutil />
   <LogicielsSchoolAvantages />
@@ -12,12 +47,92 @@
   <LogicielsSchoolProjet />
   <LogicielsSchoolAccompagnement />
   <LogicielsSchoolReviews />
-  <LogicielsSchoolAgenda />
-  <LayoutFAQ />
-  <LogicielsSchoolSolutions />
-  <LayoutFooter />
+  <!-- <LogicielsSchoolAgenda /> -->
+  <LayoutFAQ id="layout-footer" />
+  <LogicielsSchoolSolutions id="layout-footer"/>
+  <LayoutFooter id="layout-footer" />
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from "vue";
+
+const shouldShowStickyMenu = ref(true);
+
+onMounted(() => {
+  const stickyMenu = document.getElementById("sticky-menu");
+  const footer = document.getElementById("layout-footer");
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      shouldShowStickyMenu.value = !entry.isIntersecting;
+    },
+    {
+      root: null,
+      threshold: 0,
+    }
+  );
+
+  observer.observe(footer);
+});
+</script>
+
+<style scoped>
+
+.container-square {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: white;
+  font-weight: 500;
+  font-size: 0.7rem;
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.blue-square,
+.darkblue-square {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Barlow";
+  width: 10rem;
+  height: 7rem;
+  margin-left: 14rem;
+  padding: 1rem;
+}
+
+.blue-square {
+  background: rgba(32, 147, 190);
+}
+
+.darkblue-square {
+  background: #0e2d32;
+}
+
+.text-square {
+  margin: 0.5rem 2rem;
+}
+
+.icon {
+  margin-right: 1rem;
+}
+
+.icon-logiciel {
+  color: rgba(32, 147, 190);
+  margin-right: 1rem;
+}
+
+.outil-row {
+  margin: 5rem 0;
+}
 
-<style scoped></style>
+#sticky-menu {
+  position: sticky;
+  top: 10rem;
+  z-index: 10;
+  margin-left: 89rem;
+  margin-bottom: -40rem;
+}
+</style>

pages/stick.vue

@@ -1,100 +1,138 @@
-
 <template>
-<div id="app">
-  <v-app>
-      <v-content class="container">
-          <v-row>
-              <v-col sm="4" class="pink">
-                  
-              </v-col>
-              <v-col>
-                  <h2>Center</h2>
-                  <p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
-swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
-ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
-synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
-
-<p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-<p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
-swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
-ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
-synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
-
-<p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-<p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
-swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
-ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
-synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
-
-<p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-<p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
-swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
-ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
-synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
-
-<p>Ethical Kickstarter PBR 
-asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
-Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
-readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
-leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
-forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
-              </v-col>
-              <v-col sm="4" class="pink">
-                  <div class="sticky-top">
-                    <LogicielsSchoolStickyMenu></LogicielsSchoolStickyMenu>
-                  </div>
-              </v-col>
-              
+  <LayoutNavigation />
+  <LogicielsSchoolBanner />
+
+  <LogicielsSchoolMenuScroll class="sticky-scroll" />
+
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <v-row class="outil-row">
+      <v-col cols="3">
+        <div class="container-square">
+          <v-row class="blue-square">
+            <div>
+              <v-icon class="fa-regular fa-comments icon" />
+              <p class="text-square">Nous contacter</p>
+            </div>
+          </v-row>
+
+          <v-row class="blue-square">
+            <div>
+              <v-icon class="fa-regular fa-circle-info icon" />
+              <p class="text-square">Demander une demo</p>
+            </div>
+          </v-row>
+
+          <v-row class="blue-square">
+            <div>
+              <v-icon class="fa-brands fa-readme icon" />
+              <p class="text-square">Brochure</p>
+            </div>
+          </v-row>
+
+          <v-row class="darkblue-square">
+            <div>
+              <v-icon class="fa-solid fa-phone icon" />
+              <p class="text-square">Nous Appeler</p>
+            </div>
           </v-row>
-          
-      </v-content>
-  </v-app>
-</div>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
 
+  <LogicielsSchoolOutil />
+  <LogicielsSchoolAvantages />
+  <LogicielsSchoolFonctionnalites />
+  <LogicielsSchoolPremium />
+  <LogicielsSchoolProjet />
+  <LogicielsSchoolAccompagnement />
+  <LogicielsSchoolReviews />
+  <LogicielsSchoolAgenda />
+  <LayoutFAQ />
+  <LogicielsSchoolSolutions />
+  <LayoutFooter id="layout-footer" />
 </template>
 
-<style>
-.sticky-top {
-    position: sticky;
-    top: 0;
+<script setup>
+import { ref, onMounted } from "vue";
+
+const shouldShowStickyMenu = ref(true);
+
+onMounted(() => {
+  const stickyMenu = document.getElementById("sticky-menu");
+  const footer = document.getElementById("layout-footer");
+
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      shouldShowStickyMenu.value = !entry.isIntersecting;
+    },
+    {
+      root: null,
+      threshold: 0,
+    }
+  );
+
+  observer.observe(footer);
+});
+</script>
+
+<style scoped>
+
+.container-square {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: white;
+  font-weight: 500;
+  font-size: 0.7rem;
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.blue-square,
+.darkblue-square {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Barlow";
+  width: 10rem;
+  height: 7rem;
+  margin-left: 14rem;
+  padding: 1rem;
+}
+
+.blue-square {
+  background: rgba(32, 147, 190);
+}
+
+.darkblue-square {
+  background: #0e2d32;
+}
+
+.text-square {
+  margin: 0.5rem 2rem;
+}
+
+.icon {
+  margin-right: 1rem;
+}
+
+.icon-logiciel {
+  color: rgba(32, 147, 190);
+  margin-right: 1rem;
+}
+
+.outil-row {
+  margin: 5rem 0;
+}
+
+#sticky-menu {
+  position: sticky;
+  top: 10rem;
+  z-index: 10;
+  margin-left: 89rem;
+  margin-bottom: -40rem;
 }
-</style>
+</style>