page formation

components/About/Agenda.vue

@@ -1,93 +1,75 @@
 <template>
-  <LayoutContainer :overflow="false">
-    <v-row>
-      <v-col cols="4">
-        <h2 class="title">
-          L'agenda Opentalent
-        </h2>
-      </v-col>
+  <div id="L'agenda opentalent">
+    <LayoutContainer :overflow="false">
+      <v-row>
+        <v-col cols="4">
+          <h2 class="title">L'agenda Opentalent</h2>
+        </v-col>
 
-      <v-col cols="4">
-        <div class="d-flex justify-center align-center">
-          <div
-            class="carousel-button"
-            @click="goPrevious"
-          >
-            <i class="fas fa-chevron-left" />
-          </div>
-          <div
-            class="carousel-button"
-            @click="goNext"
-          >
-            <i class="fas fa-chevron-right" />
+        <v-col cols="4">
+          <div class="d-flex justify-center align-center">
+            <div class="carousel-button" @click="goPrevious">
+              <i class="fas fa-chevron-left" />
+            </div>
+            <div class="carousel-button" @click="goNext">
+              <i class="fas fa-chevron-right" />
+            </div>
           </div>
-        </div>
-      </v-col>
+        </v-col>
 
-      <v-col cols="4">
-        <v-btn
-          class="btn-news"
-          text
-        >
-          VOIR TOUTES LES ACTUALITÉS
-        </v-btn>
-      </v-col>
-    </v-row>
+        <v-col cols="4">
+          <v-btn class="btn-news" text> VOIR TOUTES LES ACTUALITÉS </v-btn>
+        </v-col>
+      </v-row>
 
-    <p class="agenda-details">
-      Retrouvez tous les évènements culturels autour de chez vous.
-    </p>
+      <p class="agenda-details">
+        Retrouvez tous les évènements culturels autour de chez vous.
+      </p>
 
-    <v-row>
-      <v-col cols="12">
-        <Carousel
-          ref="carousel"
-          :items-to-show="3"
-          :items-to-scroll="2"
-        >
-          <Slide
-            v-for="(event, index) in events"
-            :key="index"
-            class="slide-card"
-          >
-            <div class="card">
-              <img
-                class="card-img-top"
-                :src="event.img"
-                alt="Card image cap"
-              >
-              <div class="card-body">
-                <small class="card-rdv">{{ event.rdv }}</small>
-                <h5 class="card-title">
-                  {{ event.title }}
-                </h5>
-                <p class="card-localisation">
-                  {{ event.localisation }}
-                </p>
-              </div>
+      <v-row>
+        <v-col cols="12">
+          <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="2">
+            <Slide
+              v-for="(event, eventIndex) in events"
+              :key="eventIndex"
+              class="slide-card"
+            >
+              <div class="card">
+                <img
+                  class="card-img-top"
+                  :src="event.img"
+                  alt="Card image cap"
+                />
+                <div class="card-body">
+                  <small class="card-rdv">{{ event.rdv }}</small>
+                  <h5 class="card-title">
+                    {{ event.title }}
+                  </h5>
+                  <p class="card-localisation">
+                    {{ event.localisation }}
+                  </p>
+                </div>
 
-              <div class="card-footer">
-                <v-chip-group
-                  active-class="primary--text"
-                  column
-                >
-                  <v-chip
-                    v-for="(tag, indexTag) in event.tags"
-                    :key="indexTag"
-                    class="ma-2 chip-custom"
-                    :color="tagColor(tag)"
-                    label
-                  >
-                    <span :class="tagTextColor(tag)">{{ tag }}</span>
-                  </v-chip>
-                </v-chip-group>
+                <div class="card-footer">
+                  <v-chip-group active-class="primary--text" column>
+                    <v-chip
+                      v-for="(tag, tagIndex) in event.tags"
+                      :key="tagIndex"
+                      class="ma-2 chip-custom"
+                      :color="tagColor(tag)"
+                      label
+                    >
+                      <span :class="tagTextColor(tag)">{{ tag }}</span>
+                    </v-chip>
+                  </v-chip-group>
+                </div>
               </div>
-            </div>
-          </Slide>
-        </Carousel>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+            </Slide>
+          </Carousel>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup>
@@ -263,12 +245,13 @@ const goNext = () => carousel.next();
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-left: 4rem;
 }
 
 .card-body {
   text-align: left;
   margin-bottom: 1rem;
-  margin-left: 1rem;
+  margin-left: 5rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
@@ -278,7 +261,10 @@ const goNext = () => carousel.next();
 
 .card-img-top {
   border-radius: 9px 9px 0 0;
-  width: 100%;
+  max-width: 400px;
+  min-width: 400px;
+  min-height: 300px;
+  max-height: 300px;
   object-fit: cover;
   object-position: center;
 }

components/About/Banner.vue

@@ -1,4 +1,97 @@
 <template>
+  <LayoutContainer>
+    <v-row>
+      <LayoutUIBannerTitle
+        :centerText="'Qui sommes nous ?'"
+      />
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <LayoutUIBanner
+          :imageSrc="'/images/solutions/school.jpg'"
+          imageAlt="'line'"
+        />
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+
+:deep().logiciel{
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  width: 100%;
+}
+
+
+:deep().text-left, :deep().text-right, :deep().description-square, :deep().black-square, :deep().blue-square  {
+  display: none;
+}
+:deep().text-right {
+  display: none;
+}
+
+.container-title {
+  display: flex;
+  justify-content: space-around;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.text-left {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  color: #000000;
+  opacity: 0.1;
+  margin-top: 2rem;
+  margin-left: 5rem;
+}
+.text-right {
+  margin-top: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  text-align: right;
+  opacity: 0.1;
+  margin-right: 5rem;
+}
+
+
+.logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  margin-left: 6rem;
+  margin-right: 4rem;
+}
+
+</style>
+
+
+<!-- <template>
   <LayoutContainer>
     <v-row>
       <v-col
@@ -214,4 +307,4 @@ const menus = [
   margin: 0 auto;
   transform: scaleX(-1);
 }
-</style>
+</style> -->

components/About/Histoire.vue

@@ -1,73 +1,109 @@
 <template>
   <LayoutContainer>
-    <v-row>
-      <v-col cols="3">
-        <h5 class="title">
-          Qui sommes-nous
-        </h5>
-      </v-col>
+    
+    <div id="Qui sommes-nous">
+      <v-row class="mt-12"> 
+        <v-col cols="3">
+          <div class="title-container">
+            <v-icon size="6" class="fa-solid fa-circle icon-title" />
+            <h4 class="subtitle">Qui sommes-nous</h4>
+          </div>
+        </v-col>
 
-      <v-col cols="9">
-        <h3 class="italic-title">
-          “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
-          la référence pour la gestion et la promotion du spectacle vivant sur
-          les territoires.”
-        </h3>
-      </v-col>
-    </v-row>
+        <v-col cols="9">
+          <h3 class="italic-title">
+            “Imaginé par des musiciens pour des musiciens, Opentalent se veut
+            être la référence pour la gestion et la promotion du spectacle
+            vivant sur les territoires.”
+          </h3>
+        </v-col>
+      </v-row>
 
-    <v-row>
-      <v-col cols="6">
-        <v-img
-          class="passion-img"
-          src="/images/about/passion.jpg"
-        />
-      </v-col>
+      <v-row>
+        <v-col cols="6">
+          <v-img class="passion-img" src="/images/about/passion.jpg" />
+        </v-col>
 
-      <v-col cols="6">
-        <h2 class="passion-title">
-          Une histoire de passionnés
-        </h2>
-        <p class="passion-details">
-          En 2005, Guillaume Corcoba, musicien depuis toujours et à ce moment là
-          président d'un orchestre d'harmonie, mais également membre du conseil
-          d'administration de sa fédération, réfléchit à un outil pour
-          centraliser les informations de sa structure, mais également au niveau
-          fédéral. Il souhaite simplifier la gestion des structures culturelles
-          et en faire la promotion, car pour lui, le milieu culturel est
-          indispensable. Il est rapidement rejoint par Michel Pernet-Solliet,
-          lui aussi musicien, et ils montent ensemble Openassos, qui deviendra
-          quelques années plus tard, Opentalent. Opentalent c'est un ensemble de
-          3 logiciels spécialement dédiés à la culture et un portail culturel
-          pour en faire la promotion.
-        </p>
+        <v-col cols="6">
+          <h2 class="passion-title">Une histoire de passionnés</h2>
+          <p class="passion-details">
+            En 2005, Guillaume Corcoba, musicien depuis toujours et à ce moment
+            là président d'un orchestre d'harmonie, mais également membre du
+            conseil d'administration de sa fédération, réfléchit à un outil pour
+            centraliser les informations de sa structure, mais également au
+            niveau fédéral. Il souhaite simplifier la gestion des structures
+            culturelles et en faire la promotion, car pour lui, le milieu
+            culturel est indispensable. Il est rapidement rejoint par Michel
+            Pernet-Solliet, lui aussi musicien, et ils montent ensemble
+            Openassos, qui deviendra quelques années plus tard, Opentalent.
+            Opentalent c'est un ensemble de 3 logiciels spécialement dédiés à la
+            culture et un portail culturel pour en faire la promotion.
+          </p>
 
-        <h2 class="culture-title">
-          La Culture au service du développement territorial
-        </h2>
-        <p class="culture-details">
-          Qui n'a jamais entendu que la culture coûtait trop cher ? On l'entend
-          , ha ça oui on l'a même trop entendu ! Mais la culture c'est avant
-          tout un facteur de lien social incroyable. On se retrouve, on échange,
-          on partage... on vit ensemble. On crée des vrais moments et on
-          développe des groupes de passionnés. On participe à rendre nos
-          collectivités attractives et surtout on les fait vivre, toute l'année,
-          à toutes les saisons. Depuis plusieurs décennies, un grand nombre de
-          territoires s'appuie sur le développement de la culture comme un outil
-          de développement territorial pour faire face à la
-          désindustrialisation, à une croissance démographique ralentie ou
-          encore une image défavorable. Ce modèle de développement par la
-          culture pour pallier un déficit d’attractivité touristique inspire de
-          plus en plus de politiques de développement territorial.
-        </p>
-      </v-col>
-    </v-row>
+          <h2 class="culture-title">
+            La Culture au service du développement territorial
+          </h2>
+          <p class="culture-details">
+            Qui n'a jamais entendu que la culture coûtait trop cher ? On
+            l'entend , ha ça oui on l'a même trop entendu ! Mais la culture
+            c'est avant tout un facteur de lien social incroyable. On se
+            retrouve, on échange, on partage... on vit ensemble. On crée des
+            vrais moments et on développe des groupes de passionnés. On
+            participe à rendre nos collectivités attractives et surtout on les
+            fait vivre, toute l'année, à toutes les saisons. Depuis plusieurs
+            décennies, un grand nombre de territoires s'appuie sur le
+            développement de la culture comme un outil de développement
+            territorial pour faire face à la désindustrialisation, à une
+            croissance démographique ralentie ou encore une image défavorable.
+            Ce modèle de développement par la culture pour pallier un déficit
+            d’attractivité touristique inspire de plus en plus de politiques de
+            développement territorial.
+          </p>
+        </v-col>
+      </v-row>
+    </div>
   </LayoutContainer>
 </template>
 
 <script setup></script>
 
 <style scoped>
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 15rem;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
 .culture-details {
   font-family: "Barlow";
   font-style: normal;

components/About/Logiciels.vue

@@ -1,205 +1,173 @@
 <template>
-  <LayoutContainer :overflow="false">
-    <div class="container-title">
-      <p class="solution-subtitle">
-        ce qui nous anime
-      </p>
-      <h3 class="title">
-        Nos Logiciels
-      </h3>
-    </div>
-
-    <v-row>
-      <v-col
-        cols="3"
-        class="col-info"
-      >
-        <small class="opentalent-small">Opentalent</small>
-        <h2 class="logiciel-name">
-          Artist
-        </h2>
-        <hr class="bar">
-        <p class="description-logiciel">
-          Orchestre, chorales, compagnies de danse, théâtre et cirque
-        </p>
-
-        <v-row>
-          <div class="artist-image">
-            <v-img
-              src="/images/OpenTalent_LogoNoir_Jaune_white.png"
-              class="logo"
-            />
-          </div>
-        </v-row>
-
-        <v-row>
-          <v-col cols="6">
-            <ul class="list-solutions">
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-            </ul>
-          </v-col>
-
-          <v-col cols="6">
-            <ul>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-            </ul>
-          </v-col>
-        </v-row>
-      </v-col>
-
-      <v-col
-        cols="3"
-        class="col-info"
-      >
-        <small class="opentalent-small">Opentalent</small>
-        <h2 class="logiciel-name">
-          Manager
-        </h2>
-        <hr class="bar">
-        <p class="description-logiciel">
-          Fédérations, confédérations et collectivités
-        </p>
-
-        <v-row>
+  <div id="Nos logiciels">
+    <LayoutContainer :overflow="false">
+      <div class="title-container mt-12">
+        <v-icon size="6" class="fa-solid fa-circle icon-title" />
+        <h4 class="subtitle">Ce qui nous anime</h4>
+      </div>
+
+      <h3 class="title">Nos Logiciels</h3>
+
+      <v-row>
+        <v-col cols="3" class="col-info">
+          <small class="opentalent-small">Opentalent</small>
+          <h2 class="logiciel-name">Artist</h2>
+          <hr class="bar" />
+          <p class="description-logiciel">
+            Orchestre, chorales, compagnies de danse, théâtre et cirque
+          </p>
+
           <v-row>
-            <div class="manager-image">
+            <div class="artist-image">
               <v-img
-                src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
+                src="/images/OpenTalent_LogoNoir_Jaune_white.png"
                 class="logo"
               />
-              <div class="overlay">
-                <button class="discover-button">
-                  Découvrir
-                </button>
-              </div>
             </div>
           </v-row>
-        </v-row>
-
-        <v-row>
-          <v-col cols="6">
-            <ul class="list-solutions">
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-            </ul>
-          </v-col>
-
-          <v-col cols="6">
-            <ul>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-            </ul>
-          </v-col>
-        </v-row>
-      </v-col>
-
-      <v-col
-        cols="3"
-        class="col-info"
-      >
-        <small class="opentalent-small">Opentalent</small>
-        <h2 class="logiciel-name">
-          School
-        </h2>
-        <hr class="bar">
-        <p class="description-logiciel">
-          Petits et grands établissements d'enseignement artistique
-        </p>
-
-        <v-row>
+
           <v-row>
-            <div class="school-image">
-              <v-img
-                src="/images/logo_school_white.png"
-                class="logo"
-              />
-            </div>
+            <v-col cols="6">
+              <ul class="list-solutions">
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+              </ul>
+            </v-col>
+
+            <v-col cols="6">
+              <ul>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+              </ul>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="3" class="col-info">
+          <small class="opentalent-small">Opentalent</small>
+          <h2 class="logiciel-name">Manager</h2>
+          <hr class="bar" />
+          <p class="description-logiciel">
+            Fédérations, confédérations et collectivités
+          </p>
+
+          <v-row>
+            <v-row>
+              <div class="manager-image">
+                <v-img
+                  src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
+                  class="logo"
+                />
+                <div class="overlay">
+                  <button class="discover-button">Découvrir</button>
+                </div>
+              </div>
+            </v-row>
           </v-row>
-        </v-row>
-
-        <v-row>
-          <v-col cols="6">
-            <ul class="list-solutions">
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-            </ul>
-          </v-col>
-
-          <v-col cols="6">
-            <ul>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-              <li class="details-solution">
-                Gestion des membres
-              </li>
-            </ul>
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+
+          <v-row>
+            <v-col cols="6">
+              <ul class="list-solutions">
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+              </ul>
+            </v-col>
+
+            <v-col cols="6">
+              <ul>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+              </ul>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="3" class="col-info">
+          <small class="opentalent-small">Opentalent</small>
+          <h2 class="logiciel-name">School</h2>
+          <hr class="bar" />
+          <p class="description-logiciel">
+            Petits et grands établissements d'enseignement artistique
+          </p>
+
+          <v-row>
+            <v-row>
+              <div class="school-image">
+                <v-img src="/images/logo_school_white.png" class="logo" />
+              </div>
+            </v-row>
+          </v-row>
+
+          <v-row>
+            <v-col cols="6">
+              <ul class="list-solutions">
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+              </ul>
+            </v-col>
+
+            <v-col cols="6">
+              <ul>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+                <li class="details-solution">Gestion des membres</li>
+              </ul>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <style scoped>
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 15rem;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
 .discover-button {
   background-color: transparent;
   border: none;
@@ -369,14 +337,18 @@
   text-transform: uppercase;
   color: #0e2d32;
 }
+
 .title {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 00;
-  font-size: 2rem;
+  font-weight: 600;
+  font-size: 42px;
   line-height: 42px;
-  color: #0e2d32;
+  color: #071b1f;
+  flex: none;
   margin-bottom: 3rem;
+  margin-top: 2rem;
+  margin-left: 5rem;
 }
 
 .solution-subtitle {

components/About/MenuScroll.vue

@@ -0,0 +1,123 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col
+        cols="12"
+        class="menu-container"
+        :class="{ 'sticky-menu': isSticky }"
+      >
+        <div v-for="menu in menus" :key="menu.label" @click="navigate(menu)">
+          <v-chip v-if="activeMenu === menu.label" class="active-menu">
+            {{ menu.label }}
+          </v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, reactive } from "vue";
+
+const refs = reactive({
+  about: null,
+  valeurs: null,
+  logiciels: null,
+  agenda: null,
+  histoire: null,
+  equipe: null,
+});
+
+const isSticky = ref(false);
+
+const handleScroll = () => {
+  const scrollPosition = window.scrollY;
+
+  if (scrollPosition > 800) {
+    isSticky.value = true;
+  } else {
+    isSticky.value = false;
+  }
+
+  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);
+});
+
+const menus = [
+  { label: "Qui sommes-nous" },
+  { label: "Nos valeurs" },
+  { label: "Nos logiciels" },
+  { label: "L'agenda opentalent" },
+  { label: "Notre Histoire" },
+  { label: "Notre équipe" },
+];
+
+const activeMenu = ref(menus[0].label);
+
+const navigate = (menu) => {
+  activeMenu.value = menu.label;
+  const element = document.getElementById(menu.label);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth" });
+  }
+};
+</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: 1;
+  display: flex;
+  justify-content: space-around;
+  background: white;
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.menu-container div:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

components/About/Valeurs.vue

@@ -1,32 +1,25 @@
 <template>
   <LayoutContainer>
-    <v-row>
+    <div id="Nos valeurs">
+    <v-row class="mr-6 mb-6 mt-12">
       <v-col cols="5">
-        <h3 class="title-valeur">
-          Les valeurs qui nous portent
-        </h3>
+        <div class="title-container">
+            <v-icon size="6" class="fa-solid fa-circle icon-title" />
+            <h4 class="subtitle">Les valaurs qui nous portent</h4>
+          </div>
 
         <div class="container-img">
-          <img
-            class="image-ronde top-img"
-            src="/images/about/valeur1.jpg"
-          >
+          <img class="image-ronde top-img" src="/images/about/valeur1.jpg" />
 
           <v-row>
-            <img
-              class="image-ronde left-img"
-              src="/images/about/valeur2.jpg"
-            >
+            <img class="image-ronde left-img" src="/images/about/valeur2.jpg" />
             <img
               class="image-ronde right-img"
               src="/images/about/valeur3.jpg"
-            >
+            />
           </v-row>
 
-          <img
-            class="image-ronde bottom-img"
-            src="/images/about/valeur4.jpg"
-          >
+          <img class="image-ronde bottom-img" src="/images/about/valeur4.jpg" />
         </div>
       </v-col>
 
@@ -35,9 +28,7 @@
           <v-row class="row">
             <v-col cols="6">
               <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">
-                Management social
-              </h6>
+              <h6 class="title-valeurs">Management social</h6>
               <p>
                 Guillaume et Michel sont sur la même longueur d’onde et donnent
                 le « La » à un management social et solidaire où plus que de
@@ -51,61 +42,87 @@
 
             <v-col cols="6">
               <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">
-                Management social
-              </h6>
+              <h6 class="title-valeurs">Satisfaction client</h6>
               <p>
-                Guillaume et Michel sont sur la même longueur d’onde et donnent
-                le « La » à un management social et solidaire où plus que de
-                mettre en avant l'entreprise, ils privilégient la mise en avant
-                des hommes et femmes qui la composent. Toux ceux qui participent
-                jour après jour à l’écriture de la partition sont valorisés. Le
-                partage, l’échange et le dialogue en lieu et place des liens de
-                subordination.
+                Opentalent met un point d’honneur à satisfaire ses clients en
+                leur proposant des solutions de qualité, un projet global dans
+                lequel ils se retrouvent. L’intention de base est bel et bien de
+                proposer un équilibre entre les solutions informatiques et la
+                volonté personnelle en lien avec la production et les publics
+                concernés.
               </p>
             </v-col>
           </v-row>
           <v-row class="row">
             <v-col cols="6">
               <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">
-                Management social
-              </h6>
+              <h6 class="title-valeurs">Écologie</h6>
               <p>
-                Guillaume et Michel sont sur la même longueur d’onde et donnent
-                le « La » à un management social et solidaire où plus que de
-                mettre en avant l'entreprise, ils privilégient la mise en avant
-                des hommes et femmes qui la composent. Toux ceux qui participent
-                jour après jour à l’écriture de la partition sont valorisés. Le
-                partage, l’échange et le dialogue en lieu et place des liens de
-                subordination.
+                Proche des entreprises de l’Économie Sociale et Solidaire,
+                Opentalent accorde une grande importance aux démarches liées à
+                l’écologie et au développement durable. Le code des outils est
+                par exemple optimisé pour limiter les ressources nécessaires des
+                serveurs, réduisant ainsi leur empreinte carbone et améliorant
+                le confort des utilisateurs au quotidien.
               </p>
             </v-col>
 
             <v-col cols="6">
               <v-icon class="fa-brands fa-react icon" />
-              <h6 class="title-valeurs">
-                Management social
-              </h6>
+              <h6 class="title-valeurs">Open source</h6>
               <p>
-                Guillaume et Michel sont sur la même longueur d’onde et donnent
-                le « La » à un management social et solidaire où plus que de
-                mettre en avant l'entreprise, ils privilégient la mise en avant
-                des hommes et femmes qui la composent. Toux ceux qui participent
-                jour après jour à l’écriture de la partition sont valorisés. Le
-                partage, l’échange et le dialogue en lieu et place des liens de
-                subordination.
+                Opentalent est une entreprise qui croit profondément aux vertus
+                des logiciels Open Source et qui par son action contribue à leur
+                développement.
               </p>
             </v-col>
           </v-row>
         </div>
       </v-col>
     </v-row>
+    </div>
   </LayoutContainer>
 </template>
 
 <script setup></script>
 <style scoped>
+
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 20rem;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
 .row {
   border-top: 1px solid #e5e5e5;
 }

components/Form/ApplicationForm.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-dialog v-model="dialog" persistent max-width="600">
+    <v-card>
+      <v-card-title>
+        Formulaire de Candidature
+      </v-card-title>
+      <v-card-text>
+        <!-- Ajoutez ici les champs du formulaire -->
+        <v-form @submit="submitApplication">
+          <v-text-field v-model="nom" label="Nom"></v-text-field>
+          <v-text-field v-model="prenom" label="Prénom"></v-text-field>
+          <v-text-field v-model="email" label="Email"></v-text-field>
+          <v-text-field v-model="telephone" label="Téléphone"></v-text-field>
+          <input type="file" @change="handleFileUpload" />
+          <v-textarea v-model="message" label="Message"></v-textarea>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn @click="dialog = false">Annuler</v-btn>
+        <v-btn @click="submitApplication" color="primary">Envoyer</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialog: false,
+      nom: "",
+      prenom: "",
+      email: "",
+      telephone: "",
+      cv: null,
+      lettreMotivation: null,
+      message: ""
+    };
+  },
+  methods: {
+    openApplicationForm() {
+      this.dialog = true;
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        // Gérer le fichier ici, par exemple
+      }
+    },
+    submitApplication() {
+      // Gérer l'envoi du formulaire ici
+      this.dialog = false;
+    }
+  }
+};
+</script>

components/Formation/Banner.vue

@@ -2,41 +2,32 @@
   <LayoutContainer>
     <div class="container-title">
       <v-col cols="12">
-        <h1 class="formation">
-          Formation
-        </h1>
+        <h1 class="formation">Formation</h1>
         <h4 class="subtitle-formation">
-          Prise en main ou piqûre de rappel, on est toujours à vos côtés.
+          Prise en main ou piqûre de rappel,
+          <br />
+          on est toujours à vos côtés.
         </h4>
       </v-col>
     </div>
-
     <v-row>
-      <v-col cols="12">
+      <v-col cols="12" style="position: relative">
         <img
           src="/images/formation/banner.jpg"
           alt="line"
           class="cover-image"
-        >
+        />
+        <div class="image-text mt-12">
+          Et si vous passiez rapidement à la vitesse supérieure...
+        </div>
       </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-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>
@@ -46,22 +37,22 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-const state = ref({
-  activeMenu: "Présentation",
-});
 
-const menus = [
-  { label: "Présentation" },
-  { label: "catalogue" },
-  { label: "FINANCEMENT" },
-  { label: "CERTIFICATION" },
-  { label: "INSCRIPTION" },
-  { label: "ÉVALUATION" },
-];
 </script>
 
 <style scoped>
+.image-text {
+  position: absolute;
+  top: 40px;
+  left: 20px;
+  font-family: "Barlow";
+  color: white;
+  font-size: 3rem;
+  width: 30rem;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 40px;
+}
 .subtitle-formation {
   font-family: "Barlow";
   font-style: normal;
@@ -88,7 +79,6 @@ const menus = [
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  border-bottom: 0.1rem solid #eaeaea;
 }
 
 .menu-container {
@@ -105,7 +95,6 @@ const menus = [
   text-align: center;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  border-bottom: 0.1rem solid #eaeaea;
 }
 
 .v-chip.active-menu {
@@ -117,7 +106,7 @@ const menus = [
   width: 100%;
   height: 35rem;
   object-fit: cover;
-  object-position: center 10%;
+  object-position: center 30%;
   margin: 0 auto;
   transform: scaleX(-1);
 }

components/Formation/Catalogue.vue

@@ -1,282 +1,223 @@
 <template>
-  <LayoutContainer>
-    <h4 class="title">
-      Découvrez notre catalogue de formation
-    </h4>
-
-    <v-row>
-      <v-col cols="12">
-        <h4 class="catalog">
-          Catalogue
-        </h4>
-      </v-col>
-    </v-row>
-
-    <v-row
-      no-gutters
-      class="centered-row"
-    >
-      <v-col
-        cols="4"
-        class="col-card"
-      >
-        <v-row>
-          <div class="title-card-container">
-            <span class="number-card">03</span>
-            <h4 class="card-title">
-              Formation initiale
-            </h4>
-            <v-img
-              class="logo-img"
-              src="/images/opentalent_school_black.jpg"
-            />
-          </div>
-
-          <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-row>
-
-        <v-row>
-          <div class="container-blue">
-            <h6 class="title-obj">
-              Objectifs pédagogiques
-            </h6>
-            <ul class="list-obj">
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-            </ul>
-          </div>
-        </v-row>
-
-        <v-row>
-          <v-chip class="badge-time">
-            Durée : 14h
-          </v-chip>
-        </v-row>
-
-        <div class="container-blue">
-          <h6 class="title-obj">
-            Objectifs pédagogiques
-          </h6>
-
-          <v-row>
-            <v-col cols="6">
-              <ul class="list-obj">
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul class="list-obj">
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-              </ul>
-            </v-col>
-          </v-row>
-        </div>
-
-        <v-row>
-          <v-chip class="badge-time">
-            1 580 € H.T
-          </v-chip>
-        </v-row>
-
-        <v-row>
-          <v-chip class="chip-download">
-            Télécharger le programme de formation
-          </v-chip>
-        </v-row>
-      </v-col>
-
-      <v-col
-        cols="4"
-        class="col-card"
-      >
-        <v-row>
-          <div class="title-card-container">
-            <span class="number-card">03</span>
-            <h4 class="card-title">
-              Formation initiale
-            </h4>
-            <v-img
-              class="logo-img"
-              src="/images/opentalent_school_black.jpg"
-            />
-          </div>
-
-          <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-row>
-
-        <v-row>
-          <div class="container-blue">
-            <h6 class="title-obj">
-              Objectifs pédagogiques
-            </h6>
-            <ul class="list-obj">
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-            </ul>
-          </div>
-        </v-row>
-
-        <v-row>
-          <v-chip class="badge-time">
-            Durée : 14h
-          </v-chip>
-        </v-row>
-
-        <div class="container-blue">
-          <h6 class="title-obj">
-            Objectifs pédagogiques
-          </h6>
-
-          <v-row>
-            <v-col cols="6">
-              <ul class="list-obj">
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-              </ul>
-            </v-col>
-
-            <v-col cols="6">
-              <ul class="list-obj">
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-              </ul>
-            </v-col>
-          </v-row>
+  <div id="Catalogue">
+    <LayoutContainer>
+      <div class="grey-container">
+        <div class="title-container mt-12 mb-6">
+          <v-icon size="6" class="fa-solid fa-circle icon-title" />
+          <h4 class="subtitle">Découvrez notre catalogue de formation</h4>
         </div>
 
         <v-row>
-          <v-chip class="badge-time">
-            1 580 € H.T
-          </v-chip>
-        </v-row>
-
-        <v-row>
-          <v-chip class="chip-download">
-            Télécharger le programme de formation
-          </v-chip>
-        </v-row>
-      </v-col>
-
-      <v-col
-        cols="4"
-        class="col-card"
-      >
-        <v-row>
-          <div class="title-card-container">
-            <span class="number-card">03</span>
-            <h4 class="card-title">
-              Formation initiale
-            </h4>
-            <v-img
-              class="logo-img"
-              src="/images/opentalent_school_black.jpg"
-            />
-          </div>
-
-          <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-row>
-
-        <v-row>
-          <div class="container-blue">
-            <h6 class="title-obj">
-              Objectifs pédagogiques
-            </h6>
-            <ul class="list-obj">
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-              <li>Ajuster la configuration du logiciel</li>
-            </ul>
-          </div>
+          <v-col cols="12">
+            <h4 class="catalog ml-6">Catalogue</h4>
+          </v-col>
         </v-row>
 
-        <v-row>
-          <v-chip class="badge-time">
-            Durée : 14h
-          </v-chip>
+        <v-row no-gutters class="centered-row ml-12">
+          <v-col v-for="(course, index) in courses" :key="index" cols="4">
+            <v-row>
+              <div class="title-card-container">
+                <span class="number-card">{{ course.number }}</span>
+                <h4 class="card-title">{{ course.title }}</h4>
+                <v-img class="logo-img" :src="course.imageUrl" />
+              </div>
+              <p class="details-card">{{ course.description }}</p>
+            </v-row>
+            <v-row>
+              <div class="container-blue">
+                <h6 class="title-obj">Objectifs pédagogiques</h6>
+                <ul class="list-obj">
+                  <li
+                    v-for="(objective, objIndex) in course.objectives"
+                    :key="objIndex"
+                  >
+                    {{ objective }}
+                  </li>
+                </ul>
+              </div>
+            </v-row>
+            <v-row>
+              <v-chip class="badge-time">Durée : {{ course.duration }}</v-chip>
+            </v-row>
+            <div class="container-blue">
+              <h6 class="title-obj">Objectifs pédagogiques</h6>
+              <v-row>
+                <v-col
+                  v-for="column in course.additionalObjectives"
+                  :key="column.id"
+                  cols="6"
+                >
+                  <ul class="list-obj">
+                    <li
+                      v-for="(objective, objIndex) in column.objectives"
+                      :key="objIndex"
+                    >
+                      {{ objective }}
+                    </li>
+                  </ul>
+                </v-col>
+              </v-row>
+            </div>
+            <v-row>
+              <v-chip class="badge-time">{{ course.price }}</v-chip>
+            </v-row>
+            <v-row>
+              <v-chip
+                class="chip-download"
+                @click="downloadPdf(course.downloadLink)"
+              >
+                Télécharger le programme de formation
+              </v-chip>
+            </v-row>
+          </v-col>
         </v-row>
+      </div>
+    </LayoutContainer>
+  </div>
+</template>
 
-        <div class="container-blue">
-          <h6 class="title-obj">
-            Objectifs pédagogiques
-          </h6>
-
-          <v-row>
-            <v-col cols="6">
-              <ul class="list-obj">
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-              </ul>
-            </v-col>
+<script setup>
+const downloadPdf = (pdfUrl) => {
+  window.open(pdfUrl, "_blank");
+};
+const courses = [
+  {
+    number: "01",
+    title: "Formation initiale ",
+    description:
+      "Cette formation est 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. ",
+    objectives: [
+      "Ajuster la configuration du logiciel",
+      "Gérer les élèves et leurs familles",
+      "Générer des factures et faire le suivi des règlements",
+      "Gérer le planning des cours",
+      "Evaluer les élèves et générer des bulletins",
+      "Communiquer avec les personnes du répertoire",
+    ],
+    duration: "14h",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: [
+          "Accès et interface",
+          "Configuration",
+          "Répertoire",
+          "Agenda",
+        ],
+      },
+      {
+        id: 2,
+        objectives: [
+          "Parc matériel",
+          "Suivi pédagogique",
+          "Facturation",
+          "Communication",
+        ],
+      },
+    ],
+    price: "1 580 € TTC",
+    downloadLink:
+      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf",
+  },
+  {
+    number: "02",
+    title: "Formation complémentaire",
+    // imageUrl: "/images/opentalent_school_black.jpg",
+    description:
+      "Cette formation suppose d’avoir les connaissances de base sur le logiciel. Elle permet d’avoir une remise à niveau sur sur des fonctionnalités qui ont été incorrectement comprises / configurées, ou qui ont été récemment développées.",
+    objectives: [
+      "Ajuster la configuration du logiciel",
+      "Gérer les élèves et leurs familles",
+    ],
+    duration: "7h",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: ["Accès et interface", "Configuration"],
+      },
+      {
+        id: 2,
+        objectives: ["Répertoire"],
+      },
+    ],
+    price: "790€ TTC",
+    downloadLink:
+      "https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf",
+  },
+  {
+    number: "03",
+    title: "Formation Typo 3",
+    // imageUrl: "/images/opentalent_school_black.jpg",
+    description:
+      "Cette formation est destinée aux nouveaux utilisateurs Typo3. Elle est optionnelle et permet d'aller plus loin dans la gestion du site internet intégré.",
+    objectives: [
+      "Gérer les pages et leur accès",
+      "Gérer le contenu des pages et leur accès",
+      "Configurer les options du site internet côté logiciel",
+    ],
+    duration: "7h",
+    additionalObjectives: [
+      {
+        id: 1,
+        objectives: ["Gestion des pages", "Gestion des blocs"],
+      },
+      {
+        id: 2,
+        objectives: ["Configuration côté logiciel"],
+      },
+    ],
+    price: "790€ TTC",
+    downloadLink:
+      " https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf",
+  },
+];
+</script>
 
-            <v-col cols="6">
-              <ul class="list-obj">
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-                <li>Accès et interface</li>
-              </ul>
-            </v-col>
-          </v-row>
-        </div>
+<style scoped>
+.grey-container {
+  background-color: #f8f8f8;
+  padding: 4rem;
+}
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 20rem;
+  margin-left: 2rem;
+}
 
-        <v-row>
-          <v-chip class="badge-time">
-            1 580 € H.T
-          </v-chip>
-        </v-row>
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
 
-        <v-row>
-          <v-chip class="chip-download">
-            Télécharger le programme de formation
-          </v-chip>
-        </v-row>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
 
-<script setup></script>
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
 
-<style scoped>
 .centered-row {
   margin: auto;
-  justify-content: center; /* Utilisez ceci si vous utilisez flexbox */
+  justify-content: center;
 }
 .catalog {
   font-family: "Barlow";
@@ -287,23 +228,8 @@
   color: #071b1f;
   margin-bottom: 3rem;
 }
-
-.title {
-  margin-bottom: 3rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  width: 13rem;
-  color: #071b1f;
-}
 .chip-download {
-  width: 70%;
+  width: 31rem;
   background: #e34461;
   color: black;
   background-color: azure;
@@ -320,7 +246,7 @@
 }
 
 .badge-time {
-  width: 70%;
+  width: 31rem;
   background: #e34461;
   color: black;
   background-color: #fff;
@@ -365,7 +291,8 @@
   margin-bottom: 1rem;
   border-radius: 1rem;
   padding-left: 1.5rem;
-  width: 70%;
+  width: 31rem;
+  height: 11rem;
 }
 
 .details-card {
@@ -376,7 +303,8 @@
   line-height: 1rem;
   color: #091d20;
   margin-top: 1rem;
-  width: 21rem;
+  width: 31rem;
+  height: 4rem;
 }
 
 .number-card {
@@ -388,7 +316,6 @@
   margin-right: 1rem;
 }
 
-/** pour title-card : flex avec un espaece between */
 .title-card-container {
   display: flex;
   flex-direction: row;
@@ -397,19 +324,16 @@
   font-family: "Barlow";
   font-style: normal;
   font-weight: 600;
-  font-size: 1.3rem;
+  font-size: 1.2rem;
+  width: 31rem;
   border-bottom: 1px solid #0e2d32;
 }
 
 .logo-img {
-  width: 4rem;
+  width: 10rem;
   height: 3rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
   margin-left: 4rem;
 }
-
-.container {
-  margin-bottom: 3rem;
-}
 </style>

components/Formation/Certification.vue

@@ -1,54 +1,74 @@
 <template>
-  <LayoutContainer>
-    <div class="title-container">
-      <v-icon class="fa-brands fa-react icon-title" />
-      <h6 class="subtitle-certification">
-        DES FORMATIONS CERTIFIFIÉES
-      </h6>
-    </div>
-    <h2 class="title-certification">
-      Certification
-    </h2>
+  <div id="Certification">
+    <LayoutContainer>
+      <div class="title-container mt-12 mb-6">
+        <v-icon size="6" class="fa-solid fa-circle icon-title" />
+        <h4 class="subtitle">DES FORMATIONS CERTIFIFIÉES</h4>
+      </div>
+      <h2 class="title-certification ml-8">Certification</h2>
 
-    <v-row>
-      <v-col cols="4">
-        <h2 class="title-certification">
-          Qualiopi : Marque de certification
-        </h2>
-        <p class="details-certifications">
-          Nos formations sont certifiées Qualiopi - Actions de formation.
-        </p>
+      <v-row class="ml-6 ">
+        <v-col cols="4">
+          <h2 class="title-certification">
+            Qualiopi : Marque de certification
+          </h2>
+          <p class="details-certifications">
+            Nos formations sont certifiées Qualiopi - Actions de formation.
+          </p>
 
-        <p class="details-certifications">
-          La marque « Qualiopi » vise à :
-        </p>
-        <ul class="list-qualiopi">
-          <li>
-            attester de la qualité du processus mis en œuvre par les
-            prestataires d’actions concourant au développement des compétences ;
-          </li>
-          <li>
-            permettre une plus grande lisibilité de l’offre de formation auprès
-            des entreprises et des usagers.
-          </li>
-        </ul>
-      </v-col>
+          <p class="details-certifications">La marque « Qualiopi » vise à :</p>
+          <ul class="list-qualiopi">
+            <li>
+              attester de la qualité du processus mis en œuvre par les
+              prestataires d’actions concourant au développement des compétences
+              ;
+            </li>
+            <li>
+              permettre une plus grande lisibilité de l’offre de formation
+              auprès des entreprises et des usagers.
+            </li>
+          </ul>
+        </v-col>
 
-      <v-col cols="5">
-        <v-img
-          src="/images/formation/qualiopi.jpg"
-          class="qualiopi-img"
-        />
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+        <v-col cols="5">
+          <v-img src="/images/formation/qualiopi.jpg" class="qualiopi-img" />
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 20rem;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  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 {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
 .qualiopi-img {
-  margin-bottom: 3rem;
+  margin-bottom: 5rem;
   bottom: 4rem;
 }
 
@@ -95,16 +115,4 @@
   margin-bottom: 2rem;
   margin-top: 4rem;
 }
-.subtitle-certification {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #071b1f;
-}
 </style>

components/Formation/FAQ.vue

@@ -1,182 +0,0 @@
-<template>
-  <LayoutContainer>
-    <div class="container-img">
-      <v-row>
-        <v-col cols="6">
-          <div class="container-left">
-            <div class="container-title">
-              <v-icon class="fa-brands fa-react icon-title" />
-              <h5 class="subtitle-faq">
-                Vous voulez tirer le meilleur de notre logiciel ?
-              </h5>
-            </div>
-            <h3 class="title-faq">
-              Quelle que soit votre demande, notre équipe est à vos côtés pour
-              vous guider
-            </h3>
-
-            <v-btn class="btn-faq">
-              Consulter notre FAQ
-            </v-btn>
-          </div>
-        </v-col>
-
-        <v-col cols="6">
-          <div class="btn-container">
-            <v-btn class="btn-faq-tuto">
-              <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button" />
-                <p class="text-btn">
-                  De nombreux articles tutoriels accessibles 24h/24
-                </p>
-              </div>
-            </v-btn>
-
-            <v-btn class="btn-faq-tuto">
-              <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button" />
-                <p class="text-btn">
-                  De nombreux articles tutoriels accessibles 24h/24
-                </p>
-              </div>
-            </v-btn>
-          </div>
-        </v-col>
-      </v-row>
-    </div>
-  </LayoutContainer>
-</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;
-}
-.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;
-  font-size: 2rem;
-  margin-right: 1rem;
-  margin-left: 2rem;
-}
-.btn-faq-tuto {
-  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;
-}
-.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;
-  text-transform: none !important;
-  line-height: 1rem;
-}
-.title-faq {
-  font-size: 2rem;
-  font-weight: 500;
-  color: #fff;
-  margin-bottom: 2rem;
-  font-family: "Barlow";
-  margin-left: 3rem;
-  margin-right: 15rem;
-}
-.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 {
-  font-size: 1.5rem;
-  font-weight: 500;
-  color: #fff;
-  margin-bottom: 2rem;
-  margin-top: 5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-.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;
-}
-</style>

components/Formation/MenuScroll.vue

@@ -0,0 +1,132 @@
+<template>
+  <LayoutContainer>
+    <v-row >
+      <v-col
+        cols="12"
+        class="menu-container"
+        :class="{ 'sticky-menu': isSticky }"
+      >
+        <div
+          v-for="menu in menus"
+          :key="menu.label"
+          @click="navigate(menu)"
+        >
+          <v-chip
+            v-if="activeMenu === menu.label"
+            class="active-menu"
+          >
+            {{
+              menu.label
+            }}
+          </v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
+
+const refs = reactive({
+  Presentation: null,
+  Catalogue: null,
+  Financement: null,
+  Certification: null,
+  Inscription: null,
+  Evaluation: null,
+});
+const menus = [
+  { label: 'Présentation' },
+  { label: 'Catalogue' },
+  { label: 'Financement' },
+  { label: 'Certification' },
+  { label: 'Inscription' },
+  { label: 'Evaluation' },
+];
+const isSticky = ref(false);
+
+const handleScroll = () => {
+  const scrollPosition = window.scrollY;
+
+  if (scrollPosition > 800) { 
+    isSticky.value = true;
+  } else {
+    isSticky.value = false;
+  }
+
+  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);
+});
+
+
+const activeMenu = ref(menus[0].label);
+
+const navigate = (menu) => {
+  activeMenu.value = menu.label;
+  const element = document.getElementById(menu.label);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth" });
+  }
+};
+</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: 1;
+  display: flex;
+  justify-content: space-around;
+  background: white;
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.menu-container div:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

components/Formation/OPCA.vue

@@ -1,55 +1,77 @@
 <template>
-  <LayoutContainer>
-    <div class="title">
-      <v-icon class="fa-brands fa-react icon" />
-      <h4>Présentation d'opentalent school</h4>
-    </div>
+  <div id="Financement">
+    <LayoutContainer>
+      <div class="title-container mt-12 mb-6">
+        <v-icon size="6" class="fa-solid fa-circle icon-title" />
+        <h4 class="subtitle">Accessibilité</h4>
+      </div>
 
-    <v-row class="row">
-      <v-col cols="6">
-        <v-img
-          src="/images/formation/programme.jpg"
-          class="opca-img"
-        />
-      </v-col>
+      <v-row class="row">
+        <v-col cols="6">
+          <v-img src="/images/formation/programme.jpg" class="opca-img" />
+        </v-col>
 
-      <v-col
-        cols="6"
-        class="col-opca"
-      >
-        <v-row>
-          <h3 class="title-opca">
-            Des formations éligibles par votre OPCA
-          </h3>
-        </v-row>
+        <v-col cols="6" class="col-opca">
+          <v-row>
+            <h3 class="title-opca">Des formations éligibles par votre OPCA</h3>
+          </v-row>
 
-        <v-row>
-          <div class="details-opca">
-            <p>
-              Les formations dispensées par Opentalent entrent dans le cadre de
-              la formation professionnelle continue et peuvent être pris en
-              charge par votre OPCA (Uniformation, AFDAS, ...). Si votre
-              formation est prise en charge par un organisme accrédité, des
-              documents pourront vous être demandés (convention de
-              formation...). Nous pouvons vous fournir tous les éléments
-              nécessaires mais les démarches restent de votre responsabilité.
-              Afin de réduire le coût,nos formations sont exonérées de TVA.
-            </p>
+          <v-row>
+            <div class="details-opca">
+              <p>
+                Les formations dispensées par Opentalent entrent dans le cadre
+                de la formation professionnelle continue et peuvent être pris en
+                charge par votre OPCA (Uniformation, AFDAS, ...). Si votre
+                formation est prise en charge par un organisme accrédité, des
+                documents pourront vous être demandés (convention de
+                formation...). Nous pouvons vous fournir tous les éléments
+                nécessaires mais les démarches restent de votre responsabilité.
+                Afin de réduire le coût,nos formations sont exonérées de TVA.
+              </p>
 
-            <p>
-              Enregistrée sous le n° 82 74 02696 74. Cet enregistrement ne vaut
-              pas l’agrément de l’état.
-            </p>
-          </div>
-        </v-row>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+              <p>
+                Enregistrée sous le n° 82 74 02696 74. Cet enregistrement ne
+                vaut pas l’agrément de l’état.
+              </p>
+            </div>
+          </v-row>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  width: 20rem;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+  color: white;
+}
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
+
 .row,
 .title {
   margin-left: 5rem;

components/Formation/Participation.vue

@@ -1,54 +1,80 @@
 <template>
-  <LayoutContainer>
-    <div class="container-title">
-      <v-icon class="fa-brands fa-react icon-title" />
-      <h6 class="subtitle-inscription text-center">
-        Inscription
-      </h6>
-    </div>
-    <h2 class="title-participation text-center">
-      Vous souhaitez participer à une formation ?
-    </h2>
-    <v-row>
-      <v-col cols="12">
-        <v-img
-          class="participation-img"
-          src="/images/formation/participation.jpg"
-        />
-      </v-col>
-    </v-row>
+  <div id="Inscription">
+    <LayoutContainer>
+      <div class="title-container mt-12 mb-6">
+        <v-icon size="6" class="fa-solid fa-circle icon-title" />
+        <h4 class="subtitle">Inscriptions</h4>
+      </div>
+      <h2 class="title-participation text-center">
+        Vous souhaitez participer à une formation ?
+      </h2>
+      <v-row class="mb-12">
+        <v-col cols="12">
+          <v-img
+            class="participation-img"
+            src="/images/formation/participation.jpg"
+          />
+        </v-col>
+      </v-row>
 
-    <v-row>
-      <v-col cols="12">
-        <p class="details-participations">
-          Utilisez le menu "Contact" situé en haut et en bas de la page pour
-          plus d'informations. Nous vous répondons sous 48h (hors week-ends).
-          Délais d'accès: Après accord, nous mettons tout en oeuvre pour vous
-          mettre à disposition un formateur sous 1 mois.
-        </p>
+      <v-row class="mb-12">
+        <v-col cols="12">
+          <p class="details-participations">
+            Utilisez le menu "Contact" situé en haut et en bas de la page pour
+            plus d'informations. Nous vous répondons sous 48h (hors week-ends).
+            Délais d'accès: Après accord, nous mettons tout en oeuvre pour vous
+            mettre à disposition un formateur sous 1 mois.
+          </p>
 
-        <p class="details-participations">
-          Nos formations peuvent être accessibles aux personnes en situation de
-          handicap. Chaque situation étant unique, nous vous demandons de
-          préciser à l’inscription votre handicap. Nous pourrons ainsi confirmer
-          l’ensemble des possibilités afin de vous permettre de suivre la
-          formation dans les meilleures conditions en accord avec votre
-          employeur. Pour toutes informations complémentaires, nous vous
-          conseillons les structures suivantes : ONISEP, AGEFIPH et FIPHFP. Pour
-          le bon déroulement de la formation, il est nécessaire de disposer d’un
-          espace de travail calme et équipé d’au moins un ordinateur, connecté à
-          internet, et dont le navigateur (Mozilla Firefox, Google Chrome, ou
-          Apple Safari) est à jour. Nous recommandons d’utiliser un ordinateur
-          par personne. Les participants devront également avoir des ordinateurs
-          équipés de micros et de haut-parleurs, préférablement des
-          micro-casques pour un meilleur confort d’écoute.
-        </p>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
+          <p class="details-participations">
+            Nos formations peuvent être accessibles aux personnes en situation
+            de handicap. Chaque situation étant unique, nous vous demandons de
+            préciser à l’inscription votre handicap. Nous pourrons ainsi
+            confirmer l’ensemble des possibilités afin de vous permettre de
+            suivre la formation dans les meilleures conditions en accord avec
+            votre employeur. Pour toutes informations complémentaires, nous vous
+            conseillons les structures suivantes : ONISEP, AGEFIPH et FIPHFP.
+            Pour le bon déroulement de la formation, il est nécessaire de
+            disposer d’un espace de travail calme et équipé d’au moins un
+            ordinateur, connecté à internet, et dont le navigateur (Mozilla
+            Firefox, Google Chrome, ou Apple Safari) est à jour. Nous
+            recommandons d’utiliser un ordinateur par personne. Les participants
+            devront également avoir des ordinateurs équipés de micros et de
+            haut-parleurs, préférablement des micro-casques pour un meilleur
+            confort d’écoute.
+          </p>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <style scoped>
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-left: 2rem;
+}
+
+.subtitle {
+  color: white;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
 .details-participations {
   font-family: "Barlow";
   font-style: normal;

components/Formation/Presentation.vue

@@ -0,0 +1,142 @@
+<template>
+  <div id="Présentation">
+    <LayoutContainer>
+      <div class="title-container">
+        <v-icon size="6" class="fa-solid fa-circle icon-title" />
+        <h4 class="subtitle">Présentation de nos formations</h4>
+      </div>
+      <v-row class="container-programme">
+        <v-col cols="6">
+          <img class="programme-img1" src="/images/formation/programme2.jpg" />
+        </v-col>
+
+        <v-col cols="6">
+          <h3 class="title-programme">
+            Un programme de formation complet sur nos logiciels
+          </h3>
+          <p class="details-programme">
+            Nous avons défini un programme de formation complet pour
+            l’utilisation de notre logiciel
+            <span class="school"> Opentalent School </span>pour lequel la
+            formation est nécessaire lors de sa mise en place. Au terme de cette
+            formation, votre logiciel sera complètement paramétré et vous serez
+            complètement autonome.
+          </p>
+          <br />
+          <p class="details-programme">
+            Dans le cadre de notre solution
+            <span class="manager">Opentalent Manager</span> , nous pouvons
+            organiser, selon vos besoins, des sessions de formation et
+            initiation (individuel, en groupe, pour des évènements particuliers
+            tels que des congrès, universités d’été, séminaires...
+          </p>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="6">
+          <h3 class="title-programme ml-16">
+            Des formations à la demande et sur-mesure
+          </h3>
+          <p class="details-programme ml-16">
+            Afin de prendre en compte les évolutions de votre structure, nous
+            pouvons enseuite organiser des sessions de formations spécifiques
+            pour répondre à vos besoins : outils complets, mise en route,
+            fonctionnalités spécifiques, utilisation du site web...).
+          </p>
+        </v-col>
+        <v-col cols="6">
+          <img class="programme-img2" src="/images/formation/programme.jpg" />
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.school {
+  color: #64afb7;
+}
+
+.manager {
+  color: #d8050b;
+}
+.title-container {
+  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;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
+.icon-title {
+  margin-right: 0.7rem;
+  color: #64afb7;
+}
+.details-programme {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 20px;
+  color: #091d20;
+  width: 35rem;
+}
+
+.title-programme {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  width: 35rem;
+  margin-bottom: 3rem;
+  margin-top: 4rem;
+}
+
+.container-programme {
+  margin-top: 5%;
+  margin-bottom: 5%;
+}
+
+.programme-img1 {
+  width: 60%;
+  height: 100%;
+  border-radius: 10%;
+  margin-left: 5rem;
+}
+
+.programme-img2 {
+  width: 60%;
+  height: 100%;
+  border-radius: 10%;
+  margin-left: 5rem;
+}
+</style>

components/Formation/Programme.vue

@@ -1,93 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row class="container-programme">
-      <v-col cols="6">
-        <img
-          class="programme-img1"
-          src="/images/formation/programme2.jpg"
-        >
-      </v-col>
-
-      <v-col cols="6">
-        <h3 class="title-programme">
-          Un programme de formation complet sur nos logiciels
-        </h3>
-        <p class="details-programme">
-          Nous avons défini un programme de formation complet pour l’utilisation
-          de notre logiciel Opentalent School pour lequel la formation est
-          nécessaire lors de sa mise en place. Au terme de cette formation,
-          votre logiciel sera complètement paramétré et vous serez complètement
-          autonome. Dans le cadre de notre solution Opentalent Manager, nous
-          pouvons organiser, selon vos besoins, des sessions de formation et
-          initiation (individuel, en groupe, pour des évènements particuliers
-          tels que des congrès, universités d’été, séminaires...
-        </p>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="6">
-        <h3 class="title-programme ml-16">
-          Des formations à la demande et sur-mesure
-        </h3>
-        <p class="details-programme ml-16">
-          Afin de prendre en compte les évolutions de votre structure, nous
-          pouvons enseuite organiser des sessions de formations spécifiques pour
-          répondre à vos besoins : outils complets, mise en route,
-          fonctionnalités spécifiques, utilisation du site web...).
-        </p>
-      </v-col>
-      <v-col cols="6">
-        <img
-          class="programme-img2"
-          src="/images/formation/programme.jpg"
-        >
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.details-programme {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  color: #091d20;
-  width: 35rem;
-}
-
-.title-programme {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  width: 35rem;
-  margin-bottom: 3rem;
-  margin-top: 4rem;
-}
-
-.container-programme {
-  margin-top: 5%;
-  margin-bottom: 5%;
-}
-
-.programme-img1 {
-  width: 60%;
-  height: 100%;
-  border-radius: 10%;
-  margin-left: 5rem;
-}
-
-.programme-img2 {
-  width: 60%;
-  height: 100%;
-  border-radius: 10%;
-  margin-left: 5rem;
-}
-</style>

components/Formation/Reviews.vue

@@ -1,91 +1,79 @@
 <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 class="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 class="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 class="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>
-        </v-col>
-      </v-row>
-    </div>
-  </LayoutContainer>
+  <div id="Evaluation">
+    <LayoutContainer>
+      <div class="container-green">
+        <v-row>
+          <v-col cols="4">
+            <h3 class="reviews-title">Ce sont eux qui en parle le mieux</h3>
+          </v-col>
+
+          <v-col cols="8">
+            <div class="card-container">
+              <v-card class="card">
+                <v-card-item>
+                  <v-card-text class="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 class="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 class="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>
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script></script>
@@ -101,7 +89,7 @@
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
-  color: #e34461;
+  color: white;
 }
 
 .reviewer-status {

components/JoinUs/Banner.vue

@@ -1,39 +1,36 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <v-col
-        cols="12"
-        class="title"
-      >
-        <h1 class="text-center">
-          Nous rejoindre
-        </h1>
+      <v-col cols="12" class="title">
+        <h1 class="text-center">Nous rejoindre</h1>
       </v-col>
     </v-row>
 
     <v-row>
       <v-col cols="12">
         <div class="banner-container">
-          <img
-            src="/images/join/join.jpg"
-            alt="line"
-            class="cover-image"
-          >
+          <img src="/images/join/join.jpg" alt="line" class="cover-image" />
         </div>
       </v-col>
     </v-row>
 
-    <h3 class="text-center join-title">
-      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!
+    <h3 class="text-center join-title bold mt-6">
+      Opentalent, où l'innovation & la passion se rencontre !
     </h3>
+    <h4 class="text-center join-title">
+      Découvrez nos opportunités et rejoignez-nous dans cette aventure
+      passionnante.
+    </h4>
   </LayoutContainer>
 </template>
 
 <script setup></script>
 
 <style scoped>
+
+.bold {
+  font-weight: 600 !important;
+}
 .join-title {
   font-family: "Barlow";
   font-style: normal;
@@ -41,8 +38,6 @@
   font-size: 1.5rem;
   line-height: 2.5rem;
   text-align: center;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
   margin-left: 30rem;
   margin-right: 30rem;
 }

components/JoinUs/Missions.vue

@@ -5,74 +5,53 @@
       :key="jobIndex"
       class="mission-container"
     >
-      <v-row>
-        <v-col cols="2">
-          <v-img
-            class="logo-img"
-            :src="job.image"
-          />
-        </v-col>
-
-        <v-col cols="6">
-          <v-row class="job-details">
-            <h6 class="title-job">
-              {{ job.title }}
-            </h6>
-            <h6 class="contrat-job">
-              {{ job.contractType }}
-            </h6>
-            <h6 class="location-job">
-              {{ job.location }}
-            </h6>
-            <p class="description-job">
-              {{ job.description }}
-            </p>
-          </v-row>
-
-          <v-row>
-            <div class="container-btn">
-              <v-btn
-                class="btn-apply"
-                text
-              >
-                Postuler
-              </v-btn>
-              <v-btn
-                class="btn-more ml-4"
-                text
-              >
-                En savoir plus
-              </v-btn>
-            </div>
-          </v-row>
-        </v-col>
+      <!-- Première ligne -->
+      <v-row class="announcement-title ml-6 mr-6">
+        <div class="title-job">
+          {{ job.title }}
+        </div>
+        <v-btn
+          class="btn-more"
+          text
+        >
+          En savoir plus
+        </v-btn>
+      </v-row>
 
-        <v-col cols="3">
-          <v-chip
-            v-for="(property, propertyIndex) in job.properties"
-            :key="propertyIndex"
-            class="ma-2"
-          >
-            <span class="white--text">{{ property }}</span>
-          </v-chip>
-        </v-col>
+      <!-- Deuxième ligne -->
+      <v-row class="announcement-location ml-6 mr-6">
+        <v-icon
+          class="icon-location"
+        >
+          <i class="fas fa-map-marker"></i>
+        </v-icon>
+        <div class="location">
+          {{ job.location }}
+        </div>
       </v-row>
     </div>
 
-    <v-row class="apply-row">
+    <v-row class="apply-row ml-6 mb-6">
       <h3 class="apply">
         Candidature spontanée
       </h3>
       <p class="apply-now">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
-        quae fugit maxime illo reiciendis excepturi laborum sed dicta impedit
-        minima minus eveniet, ipsam voluptatum beatae asperiores aut accusamus
-        autem magnam.
+        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à déposer votre candidature ci-dessous :
       </p>
-      <v-btn class="btn-apply">
+      <v-btn class="btn-more">
         Envoyer ma candidature
       </v-btn>
     </v-row>
+
+    <!-- <v-row class="apply-row ml-6 mb-6">
+      <h3 class="apply">
+        Candidature spontanée
+      </h3>
+      <p class="apply-now">
+        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à déposer votre candidature ci-dessous :
+      </p>
+      <FormApplicationForm />
+    </v-row> -->
   </LayoutContainer>
 </template>
 
@@ -113,11 +92,44 @@ const jobs = ref([
 </script>
 
 <style scoped>
-.apply-row {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-  margin-left: 4rem;
-  margin-right: 4rem;
+
+.announcement-title {
+  background: #0e2d32;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.title-job{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2.5rem;
+  line-height: 39px;
+  color: #ffffff;
+}
+
+.btn-more {
+  background: #9edbdd;
+  color: white;
+}
+
+.announcement-location {
+  background: #9edbdd;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+
+.icon-location {
+  color: #0e2d32;
+}
+
+.location {
+  margin-left: 10px;
+  font-size: 2rem;
+
 }
 
 .apply {
@@ -149,71 +161,8 @@ const jobs = ref([
   color: #091d20;
 }
 
-.btn-apply {
-  background: #f4aa2a;
-  border-radius: 0.5rem;
-}
-
-.btn-more {
-  background: #ffffff;
-  border: 0.1rem solid #f4aa2a;
-  border-radius: 0.5rem;
-  color: #f4aa2a;
-}
-
-.container-btn {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 2rem;
-}
-
-.location-job {
-  font-weight: 600;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 1.6rem;
-  line-height: 39px;
-  color: #444444;
-}
-
-.contrat-job {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 2rem;
-  line-height: 39px;
-  color: #444444;
-}
-.job-details {
-  display: flex;
-  flex-direction: column;
-}
-
-.title-job {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 36px;
-  line-height: 1rem;
-  margin-bottom: 1rem;
-  color: #0e2d32;
-  margin-top: 2rem;
-}
-
-.logo-img {
-  width: 70%;
-  height: 80%;
-  margin-left: 1rem;
-}
-
 .mission-container {
   margin-top: 5rem;
   margin-bottom: 5%;
 }
-
-.mission-container:nth-child(even) {
-  background: rgba(14, 45, 50, 0.3);
-}
 </style>

components/Layout/FAQ.vue

@@ -181,9 +181,9 @@
 .container-img {
   background-image: url("/images/logiciels/school/faq.jpg");
   background-size: cover;
-  background-position: center;
+  background-position: center 15%;
   background-repeat: no-repeat;
-  height: 35rem;
+  height: 27rem;
   display: flex;
   flex-direction: column;
   justify-content: center;

components/Layout/UI/StickyMenu.vue

@@ -42,6 +42,8 @@ const squares = ref(props.squaresData);
   letter-spacing: 0.2em;
   text-transform: uppercase;
 }
+
+.red-square,
 .yellow-square,
 .blue-square,
 .darkblue-square {
@@ -60,6 +62,10 @@ const squares = ref(props.squaresData);
   color: #0e2d32;
 }
 
+.red-square {
+  background: #d8050b;
+}
+
 .blue-square {
   background: rgba(32, 147, 190);
 }

components/Logiciels/Artist/FAQ.vue

@@ -1,182 +0,0 @@
-<template>
-  <LayoutContainer>
-    <div class="container-img">
-      <v-row>
-        <v-col cols="6">
-          <div class="container-left">
-            <div class="container-title">
-              <v-icon class="fa-brands fa-react icon-title" />
-              <h5 class="subtitle-faq">
-                Vous voulez tirer le meilleur de notre logiciel ?
-              </h5>
-            </div>
-            <h3 class="title-faq">
-              Quelle que soit votre demande, notre équipe est à vos côtés pour
-              vous guider
-            </h3>
-
-            <v-btn class="btn-faq">
-              Consulter notre FAQ
-            </v-btn>
-          </div>
-        </v-col>
-
-        <v-col cols="6">
-          <div class="btn-container">
-            <v-btn class="btn-faq-tuto">
-              <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button" />
-                <p class="text-btn">
-                  De nombreux articles tutoriels accessibles 24h/24
-                </p>
-              </div>
-            </v-btn>
-
-            <v-btn class="btn-faq-tuto">
-              <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button" />
-                <p class="text-btn">
-                  De nombreux articles tutoriels accessibles 24h/24
-                </p>
-              </div>
-            </v-btn>
-          </div>
-        </v-col>
-      </v-row>
-    </div>
-  </LayoutContainer>
-</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;
-}
-.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;
-  font-size: 2rem;
-  margin-right: 1rem;
-  margin-left: 2rem;
-}
-.btn-faq-tuto {
-  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;
-}
-.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;
-  text-transform: none !important;
-  line-height: 1rem;
-}
-.title-faq {
-  font-size: 2rem;
-  font-weight: 500;
-  color: #fff;
-  margin-bottom: 2rem;
-  font-family: "Barlow";
-  margin-left: 3rem;
-  margin-right: 15rem;
-}
-.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 {
-  font-size: 1.5rem;
-  font-weight: 500;
-  color: #fff;
-  margin-bottom: 2rem;
-  margin-top: 5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 15px;
-
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-.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;
-}
-</style>

components/Logiciels/Artist/Presentation.vue

@@ -121,6 +121,40 @@
 <script setup></script>
 
 <style scoped>
+
+
+.title-container {
+  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;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
+}
+
 .row-caracteristiques {
   margin-top: -10rem;
 }
@@ -150,25 +184,7 @@
 .smaller-text {
   font-size: 0.6em;
 }
-.subtitle {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
 
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
 
 .black-circle {
   border-radius: 3rem;
@@ -290,18 +306,6 @@
   height: 14rem;
 }
 
-.title-container {
-  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;
-}
-
 .screen-img {
   width: 20rem;
   height: 15rem;

components/Logiciels/Manager/Accompagnement.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="abonnement">
+  <div id="Formations">
     <LayoutContainer>
       <div class="container-green">
         <div class="container-title">
-          <v-icon class="fa-brands fa-react icon-title" />
+          <v-icon class="fa-solid fa-circle icon-title" size="6" />
           <h4 class="subtitle-accompagnement">
             Nos accompagnements pour aller plus loin
           </h4>
@@ -61,8 +61,8 @@
       <v-row class="card-container">
         <v-col cols="4">
           <div class="card">
-            <h3>30 1500</h3>
-            <p>elèves</p>
+            <h3>XXX</h3>
+            <p>Structures en réseau</p>
           </div>
         </v-col>
 
@@ -71,8 +71,8 @@
           class="d-flex justify-center align-center"
         >
           <div class="card">
-            <h3>30 1500</h3>
-            <p>elèves</p>
+            <h3>XXX</h3>
+            <p>Utilisateurs</p>
           </div>
         </v-col>
 
@@ -81,15 +81,15 @@
           class="d-flex justify-center align-center"
         >
           <div class="card">
-            <h3>30 1500</h3>
-            <p>elèves</p>
+            <h3>12</h3>
+            <p>années de collaboration</p>
           </div>
         </v-col>
       </v-row>
 
-      <h4 class="text-center title-cmf">
+      <!-- <h4 class="text-center title-cmf">
         La plus grande Confédération Musicale de France nous fait confiance
-      </h4>
+      </h4> -->
       <v-img
         src="/images/logiciels/manager/cmf.jpg"
         class="cmf-img"
@@ -132,6 +132,7 @@
   padding-top: 3rem;
   padding-bottom: 3rem;
   color: white;
+  text-align: center;
 }
 .session-btn {
   background: transparent;
@@ -200,17 +201,14 @@
   margin-bottom: 1rem;
 }
 .subtitle-accompagnement {
-  color: #ffffff;
+  color: white;
   font-family: "Barlow";
+  font-size: 1rem;
   font-style: normal;
   font-weight: 600;
-  font-size: 10px;
   line-height: 15px;
-
-  text-align: center;
-  letter-spacing: 0.18em;
+  letter-spacing: 1.8px;
   text-transform: uppercase;
-  width: 13rem;
 }
 .container-title {
   display: flex;
@@ -224,7 +222,9 @@
 .icon-title {
   margin-top: 2rem;
   margin-bottom: 0.5rem;
-  color: #64afb7;
+  /** red*/
+  color: #d8050b;
+  size: .5rem;
 }
 
 .container-green {

components/Logiciels/Manager/Fonctionnalites.vue

@@ -1,138 +1,78 @@
 <template>
-  <div id="Presentation">
+  <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
-        <v-row>
-          <div class="d-flex justify-center align-center">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-title"
-            />
-            <h4 class="subtitle-fontionnalite">
-              Découvrez toutes les foncitonnalités de notre solution
-            </h4>
-          </div>
-        </v-row>
-
-        <v-row>
-          <h2 class="title-fonctionnalite">
+        <div class="title-container mt-6">
+          <v-icon size="6" class="fa-solid fa-circle icon-title mt-6 ml-6" />
+          <h4 class="subtitle mt-6">
+            Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution
+          </h4>
+        </div>
+        <div class="title-container">
+          <h4 class="title mt-6 ml-3">
             Des fonctionnalités adaptées à vos besoins
-          </h2>
-        </v-row>
-
+          </h4>
+        </div>
         <v-row>
-          <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>
-              <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" />
-              <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>
+          <v-col cols="12">
+            <div class="d-flex justify-center align-center">
+            <div class="carousel-button" @click="previousAction">
+              <i class="fas fa-chevron-left" />
             </div>
-          </v-col>
-
-          <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>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
+            <div class="carousel-button" @click="nextAction">
+              <i class="fas fa-chevron-right" />
             </div>
+          </div>
           </v-col>
 
-          <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>
-              <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" />
-              <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" />
-              <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="12">
+            <Carousel
+              ref="functionCarousel"
+              :items-to-show="5"
+              :items-to-scroll="1"
+              class="carousel"
+            >
+              <Slide
+                v-for="(card, index) in cards"
+                :key="index"
+                :class="{
+                  card: true,
+                  'active-card': index === activeCardIndex,
+                }"
+              >
+                <div class="card-container">
+                  <v-card>
+                    <v-card-title>
+                      <h1 class="card-title">{{ card.title }}</h1>
+                    </v-card-title>
+                    <v-card-item>
+                      <v-card-text class="review-description">
+                        <ul>
+                          <li class="list-detail" v-for="item in card.list">
+                            {{ item }}
+                          </li>
+                        </ul>
+                      </v-card-text>
 
-          <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>
-              <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>
+                      <div class="card-footer">
+                        <!-- <v-card-actions class="reviewer-name">
+                          {{ card.name }}
+                        </v-card-actions>
 
-          <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>
-              <ul class="list-details">
-                <li>Accès admin</li>
-                <li>Accès professeurs</li>
-                <li>Accès élèves/familles</li>
-              </ul>
-            </div>
+                        <p class="reviewer-status">
+                          {{ card.status }}
+                        </p> -->
+                        <p class="reviewer-structure">
+                          {{ card.option }}
+                        </p>
+                      </div>
+                    </v-card-item>
+                  </v-card>
+                </div>
+              </Slide>
+            </Carousel>
           </v-col>
         </v-row>
       </div>
@@ -140,63 +80,276 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+
+
+const functionCarousel = ref(null);
+const activeCardIndex = ref(2);
+
+const previousAction = () => {
+  const newIndex = activeCardIndex.value - 1;
+  if (newIndex >= 0) {
+    activeCardIndex.value = newIndex; 
+    functionCarousel.value.prev();
+  }
+};
+
+const nextAction = () => {
+  const newIndex = activeCardIndex.value + 1;
+  if (newIndex < cards.length) {
+    activeCardIndex.value = newIndex; 
+    functionCarousel.value.next();
+  }
+};
+
+const cards = [
+  {
+    title: "ESPACES DÉDIÉS",
+    list: ["Administration", "Membres/Adhérents"],
+  },
+  {
+    title: "RÉPERTOIRE",
+    list: [
+      "Membres",
+      "Personnel administratif ",
+      "Contacts extérieurs, partenaires & donateurs",
+    ],
+  },
+  {
+    title: "AGENDA",
+    list: [
+      "Création et gestion des événements internes et externes",
+      "Invitation aux événements",
+      "Gestion des présences ",
+    ],
+  },
+  {
+    title: "PARC MATÉRIEL ",
+    list: [
+      "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
+      "Locations et prêts de matériel",
+      "Partage de partitions",
+    ],
+  },
+  {
+    title: "COMMUNICATION RESEAU",
+    list: [
+      "Édition et envoi de courriers, de mails ou de SMS*",
+      "Édition et envoi de newsletter au adhérent du réseau",
+      "Création de modèles de courriers, mails ou SMS",
+      "Outil de publipostage intégré pour un envoi personnalisé",
+    ],
+    option: "* en option",
+  },
+  {
+    title: "SITE INTERNET ",
+    list: [
+      "Gestion intégrée au logiciel",
+      "Mise à jour automatique des membres et événements sur votre site",
+      "Possibilité de personnalisé votre template",
+    ],
+  },
+  {
+    title: "STATISTIQUE",
+    list: [
+      "Rapport d'activité complet en fonction de vos activités",
+      "Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement",
+      "Export des données du logiciel pour une analyse complète",
+    ],
+  },
+  {
+    title: "COTISATION CMF ",
+    list: [
+      "Paramètrage des cotisations",
+      "Lancement de la campagne",
+      "Gestion des règlement & envoi de justificatif (adhésion/assurance...)",
+    ],
+  },
+  {
+    title: "FONCTIONNEMENT PYRAMIDAL ",
+    list: [
+      "Publication des événements des structures de votre réseau ",
+      "Référencement des structures de votre réseau sur l'annuaire",
+      "Diffusion des annonces du réseau et des structures de votre réseau",
+    ],
+  },
+];
+</script>
 
 <style scoped>
-.list-details {
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 2.4rem;
+  color: white;
+  width: 35rem;
+}
+.list-detail {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 0.75rem;
-  line-height: 0.9rem;
-  margin-left: 1rem;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
   margin-bottom: 1rem;
-  color: #ffffff;
+  color: #000000;
+  width: 100%;
+}
+.card-title {
+  white-space: pre-wrap;
+}
+.carousel {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.card.active-card {
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
 }
-.title-details {
+.subtitle-avantage {
   font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  margin-bottom: 0.7rem;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: white;
 }
-.icon-details {
-  font-size: 1.5rem;
-  margin-bottom: 0.9rem;
-  color: #d8050b;
+.subtitle {
+  color: white;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
 }
 
 .icon-title {
-  font-size: 0.8rem;
-  margin-bottom: 2rem;
-  color: #d8050b;
+  color: #D8050BE5;
+  margin-right: 0.5rem;
+}
+.card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  transition: transform 0.3s;
+  min-width: 20%;
+  max-width: 20%;
+}
+
+.card.active-card {
+  transform: scale(1.05);
+}
+.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;
 }
 
-.subtitle-fontionnalite {
+.carousel-button i {
+  color: #fff;
+}
+.reviewer-name {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  color: rgba(32, 147, 190);
+}
+
+.reviewer-status {
+  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;
+}
+
+.reviewer-structure {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
   font-size: 0.8rem;
-  margin-left: 1rem;
-  margin-top: -1rem;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
   margin-bottom: 1rem;
-  width: 12rem;
+  color: #071b1f;
+}
+
+.review-description {
+  text-align: left;
+}
+.card-footer {
+  position: absolute;
+  right: 0;
+  margin-right: 2rem;
 }
 
-.title-fonctionnalite {
+.card-text {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 500;
-  font-size: 2rem;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  height: 12rem;
+}
+.reviews-title {
+  color: #fff;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
   margin-left: 1rem;
-  margin-top: -1rem;
-  width: 25rem;
-  margin-bottom: 2rem;
+  width: 10rem;
+}
+
+.card {
+  width: 80rem;
+  min-height: 35rem;
+  max-height: 35rem;
+  border-radius: 1rem;
+}
+
+.v-card {
+  border-radius: 1rem;
+  min-height: 20rem;
+  max-height: 20rem;
+  min-width: 20rem;
+  max-width: 20rem;
+}
+
+.card-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 3rem;
+  margin-right: 2rem;
 }
 
 .container-green {
   background-color: #0e2d32;
-  padding: 5rem;
-  color: #eff9fb;
 }
 </style>

components/Logiciels/Manager/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,17 +27,62 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
+
+const refs = reactive({
+  Presentation: null,
+  Avantages: null,
+  Comparatif: null,
+  Fonctionnatités: null,
+  Abonnement: null,
+  Temoignages: null,
+  Formations: null
+});
+
+const isSticky = ref(false);
+
+const handleScroll = () => {
+  const scrollPosition = window.scrollY;
+
+  if (scrollPosition > 800) { 
+    isSticky.value = true;
+  } else {
+    isSticky.value = false;
+  }
+
+  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);
+});
 
 const menus = [
   { label: "Presentation" },
   { label: "Avantages" },
   { label: "Comparatif" },
-  { label: "détails" },
-  { label: "abonnement" },
-  { label: "témoignages" },
-  { label: "formations" },
-  { label: "solutions" },
+  { label: "Fonctionnatités" },
+  { label: "Abonnement" },
+  { label: "Temoignages" },
+  { label: "Formations" },
 ];
 
 const activeMenu = ref(menus[0].label);
@@ -51,15 +97,24 @@ 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: 1;
   display: flex;
   justify-content: space-around;
-  padding: 1rem 10rem;
   background: white;
-  color: #bbb8b8;
+  color: #071b1f;
   font-family: "Barlow";
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 1rem;
+  line-height: 19px;
   display: flex;
   align-items: center;
   text-align: center;

components/Logiciels/Manager/Outil.vue → components/Logiciels/Manager/Presentation.vue

@@ -3,12 +3,9 @@
     <LayoutContainer>
       <v-row class="outil-row">
         <v-col cols="4">
-          <div class="title-presentation">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-title"
-            />
-            <h4>Présentation d'opentalent manager</h4>
+          <div class="title-container">
+            <v-icon size="6" class="fa-solid fa-circle icon-title" />
+            <h4 class="subtitle">Présentation d'opentalent Manager</h4>
           </div>
           <v-img
             src="/images/logiciels/school/screen.jpg"
@@ -50,36 +47,6 @@
           </ul>
         </v-col>
 
-        <v-col cols="3">
-          <div class="container-square">
-            <v-row>
-              <div class="red-square">
-                <v-icon class="fa-regular fa-comments icon" />
-                <p class="text-square">
-                  Nous contacter
-                </p>
-              </div>
-            </v-row>
-
-            <v-row>
-              <div class="red-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-col cols="4" />
 
@@ -151,35 +118,6 @@
           <v-col cols="2" />
         </v-row>
       </v-row>
-
-      <v-row class="container-green">
-        <v-row>
-          <v-col
-            cols="6"
-            class="citation-school"
-          >
-            “ Pour les petits comme pour les grands établissements
-            d’enseignement artistique.“
-          </v-col>
-        </v-row>
-
-        <v-col cols="6">
-          <div class="title-logiciel-group">
-            <v-icon
-              size="10"
-              class="fa-solid fa-circle icon-logiciel"
-            />
-            <h6 class="subtitle-logiciel">
-              Logiciel Opentalent
-            </h6>
-          </div>
-
-          <v-img
-            src="/images/logiciels/school/screen2.png"
-            class="screen2-img"
-          />
-        </v-col>
-      </v-row>
     </LayoutContainer>
   </div>
 </template>
@@ -187,7 +125,8 @@
 <script setup></script>
 
 <style scoped>
-.title-presentation {
+
+.title-container {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -197,7 +136,26 @@
   color: #091d20;
   width: 25rem;
   margin-left: 2rem;
-  line-height: 1.5rem;
+}
+
+.subtitle {
+  color: #071b1f;
+  font-family: "Barlow";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.title {
+  font-family: "Barlow";
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-bottom: 4rem;
 }
 
 .title-logiciel-group {

components/Logiciels/Manager/Pyramide.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="détails">
     <LayoutContainer>
-      <v-row>
-        <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon-title" />
+      <v-row class="mt-12">
+        <div class="d-flex justify-center align-center ">
+          <v-icon class="fa-solid fa-circle icon-title" />
           <h4 class="subtitle-pyramide">
             Un réseau pyramidal
           </h4>
@@ -31,42 +31,6 @@
         </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" />
-          </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" />
-          </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" />
-          </div>
-          <p class="d-flex justify-center align-center">
-            Paiement Sécurisé
-          </p>
-        </v-col>
-      </v-row>
     </LayoutContainer>
   </div>
 </template>
@@ -110,19 +74,17 @@
 .icon-title {
   color: #d8050b;
   margin-right: 1rem;
-  font-size: 1rem;
+  font-size: .5rem;
   margin-left: 2rem;
 }
 
 .subtitle-pyramide {
   font-family: "Barlow";
+  font-size: 1rem;
   font-style: normal;
-  font-weight: 500;
-  font-size: 0.9rem;
-  color: #091d20;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  letter-spacing: 0.1em;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 1.8px;
   text-transform: uppercase;
 }
 </style>

components/Logiciels/Manager/Reviews.vue

@@ -5,7 +5,7 @@
         <v-row>
           <v-col cols="4">
             <h3 class="reviews-title">
-              C'est eux qui en parlent le mieux
+              Ce sont eux qui en parle le mieux
             </h3>
             <div class="d-flex justify-center align-center">
               <div

pages/formations.vue

@@ -1,14 +1,15 @@
 <template>
   <LayoutNavigation />
   <FormationBanner />
-  <FormationProgramme />
+  <FormationMenuScroll />
+  <FormationPresentation />
   <FormationCatalogue />
   <FormationOPCA />
   <FormationCertification />
   <FormationParticipation />
   <FormationReviews />
-  <FormationFAQ />
-  <FormationSolutions />
+  <LayoutFAQ />
+  <LayoutUISolutionsFooter />
   <LayoutFooter />
 </template>
 

pages/opentalent_manager.vue

@@ -2,7 +2,15 @@
   <LayoutNavigation />
   <LogicielsManagerBanner />
   <LogicielsManagerMenuScroll />
-  <LogicielsManagerOutil />
+
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+
+<LayoutUIStickyMenu
+  :shouldShowStickyMenu="shouldShowStickyMenu"
+  :squaresData="squaresData"
+/>
+</div>
+  <LogicielsManagerPresentation />
   <LogicielsManagerAvantages />
   <LogicielsManagerFonctionnalites />
   <LogicielsManagerPyramide />
@@ -13,6 +21,59 @@
   <LayoutFooter />
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from "vue";
+
+const shouldShowStickyMenu = ref(true);
+
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "red-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+  },
+  {
+    id: 2,
+    bgColor: "red-square",
+    iconClass: "fa-brands fa-readme icon",
+    text: "Brochure",
+  },
+  {
+    id: 3,
+    bgColor: "darkblue-square",
+    iconClass: "fa-solid fa-phone icon",
+    text: "Nous appeler",
+  }
+];
+
+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>
+#sticky-menu {
+  position: sticky;
+  top: 10rem;
+  z-index: 10;
+  right: 0;
+  margin-bottom: -30rem;
+  margin-left: 13rem;
+}
+</style>
+
 
-<style scoped></style>

pages/qui-sommes-nous.vue

@@ -1,6 +1,7 @@
 <template>
   <LayoutNavigation />
   <AboutBanner />
+  <AboutMenuScroll />
   <AboutHistoire />
   <AboutValeurs />
   <AboutLogiciels />