modif accueil et school + gros refacto

components/Home/Caroussel.vue

@@ -19,7 +19,8 @@
       :hide-delimiter-background="true"
       :show-delimiters="false"
       :touch="true"
-      :cycle="smAndDown ? true : false"
+      :cycle= true
+      :interval= 5000
     >
       <v-carousel-item
         v-for="(item, index) in carouselItems"

components/Home/Help.vue

@@ -71,10 +71,9 @@ const { smAndDown } = useDisplay();
   width: 19rem;
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 300;
+  font-weight: 500;
   color: #0e2d32;
-
-  font-size: 1.5rem;
+  font-size: 1.2rem;
   line-height: 1.6rem;
 }
 
@@ -85,7 +84,6 @@ const { smAndDown } = useDisplay();
   left: 933px;
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 300;
   color: #0e2d32;
 }
 
@@ -94,8 +92,8 @@ const { smAndDown } = useDisplay();
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 1.7rem;
-  line-height: 2rem;
+  font-size: 1.4rem;
+  line-height: 1.4rem;
   color: #0e2d32;
 }
 
@@ -116,7 +114,7 @@ const { smAndDown } = useDisplay();
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;
-  font-size: 2.5rem;
+  font-size: 2rem;
   line-height: 34px;
   width: 25rem;
 }

components/Home/Reviews.vue

@@ -2,37 +2,24 @@
   <LayoutContainer :overflow="false">
     <div :class="smAndDown ? '' : 'container-color'">
       <div class="d-flex justify-center align-center flex-column">
-        <v-icon
-          size="8"
-          class="fa-solid fa-circle icon-title"
-        />
-        <h6 class="small-title">
-          Avis Clients
-        </h6>
+        <v-icon size="8" class="fa-solid fa-circle icon-title" />
+        <h6 class="small-title">Avis Clients</h6>
       </div>
 
-      <h1 class="title-review">
-        C'est vous qui le dites
-      </h1>
+      <h1 class="title-review">C'est vous qui le dites</h1>
       <div v-if="smAndDown">
         <Carousel
           ref="carousel"
           :items-to-scroll="1"
-          :autoplay="4000" 
+          :autoplay="4000"
           :items-to-show="2"
           :wrap-around="true"
           :transition="500"
         >
-          <Slide
-            v-for="(review, index) in reviews"
-            :key="index"
-          >
+          <Slide v-for="(review, index) in reviews" :key="index">
             <v-col cols="12">
               <v-card class="review-card-sm">
-                <v-avatar
-                  size="80"
-                  class="profile-img"
-                >
+                <v-avatar size="80" class="profile-img">
                   <v-img :src="review.avatar" />
                 </v-avatar>
                 <v-card-title>
@@ -54,26 +41,16 @@
       </div>
     </div>
 
-    <div
-      v-if="!smAndDown"
-      class="container-green"
-    >
+    <div v-if="!smAndDown" class="container-green">
       <v-row justify="center">
         <!-- v-card with client review -->
-        <v-col
-          cols="12"
-          md="6"
-          lg="4"
-        >
+        <v-col cols="12" md="6" lg="4">
           <v-card class="review-card left mx-auto">
-            <v-avatar
-              size="80"
-              class="profile-img"
-            >
+            <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
             <v-card-title>
-              <span class="review-name">John Doe </span>
+              <span class="review-name">Patrice CATHELIN</span>
             </v-card-title>
 
             <v-card-text>
@@ -86,26 +63,21 @@
             </v-card-text>
 
             <!-- card footer-->
-            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+            <small class="status">Directeur pédagogique</small>
 
-            <small class="structure">Conservatoire Musique & Danse Sens (78)</small>
+            <small class="structure"
+              >Conservatoire de Musique & de Danse de Sens (78)</small
+            >
           </v-card>
         </v-col>
 
-        <v-col
-          cols="12"
-          md="6"
-          lg="4"
-        >
+        <v-col cols="12" md="6" lg="4">
           <v-card class="review-card right mx-auto">
-            <v-avatar
-              size="80"
-              class="profile-img"
-            >
+            <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
             <v-card-title>
-              <span class="review-name">John Doe</span>
+              <span class="review-name">Karine GIRAUD </span>
             </v-card-title>
 
             <v-card-text>
@@ -118,29 +90,24 @@
             </v-card-text>
 
             <!-- card footer-->
-            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+            <small class="status">Directeur pédagogique</small>
 
-            <small class="structure">Conservatoire Musique & Danse Sens (78)</small>
+            <small class="structure">
+              Association Musicale Sainte Cécile de Lagord (17)</small
+            >
           </v-card>
         </v-col>
       </v-row>
 
       <v-row justify="center">
         <!-- v-card with client review -->
-        <v-col
-          cols="12"
-          md="6"
-          lg="4"
-        >
+        <v-col cols="12" md="6" lg="4">
           <v-card class="review-card left mx-auto">
-            <v-avatar
-              size="80"
-              class="profile-img"
-            >
+            <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
             <v-card-title>
-              <span class="review-name">John Doe </span>
+              <span class="review-name">Laurent BEL</span>
             </v-card-title>
 
             <v-card-text>
@@ -155,39 +122,33 @@
             <!-- card footer-->
             <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
 
-            <small class="structure">Conservatoire Musique & Danse Sens (78)</small>
+            <small class="structure"
+              > École de Musique EPIC Musique en 4 Rivières (74)</small
+            >
           </v-card>
         </v-col>
 
-        <v-col
-          cols="12"
-          md="6"
-          lg="4"
-        >
+        <v-col cols="12" md="6" lg="4">
           <v-card class="review-card right mx-auto">
-            <v-avatar
-              size="80"
-              class="profile-img"
-            >
+            <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
             <v-card-title>
-              <span class="review-name">John Doe</span>
+              <span class="review-name">Philippe BORY</span>
             </v-card-title>
 
             <v-card-text>
               <p class="description-review">
-                C'est un logiciel très bien conçu et efficace avec une équipe
-                ouverte, dynamique et à l'écoute. L’assistance est très
-                réactive, j'ai toujours eu une réponse rapide à mes besoins, ce
-                qui est fort appréciable.
+                C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable. 
               </p>
             </v-card-text>
 
             <!-- card footer-->
-            <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
+            <small class="status">Personnel administratif</small>
 
-            <small class="structure">Conservatoire Musique & Danse Sens (78)</small>
+            <small class="structure"
+              > École d'Arts de Saint-Michel-sur-Orge (91)</small
+            >
           </v-card>
         </v-col>
       </v-row>
@@ -199,16 +160,10 @@
               Plus de 5 000 structures nous font confiance
             </h2>
             <div class="d-flex justify-center align-center">
-              <div
-                class="carousel-button"
-                @click="goPrevious"
-              >
+              <div class="carousel-button" @click="goPrevious">
                 <i class="fas fa-chevron-left" />
               </div>
-              <div
-                class="carousel-button"
-                @click="goNext"
-              >
+              <div class="carousel-button" @click="goNext">
                 <i class="fas fa-chevron-right" />
               </div>
             </div>
@@ -222,16 +177,9 @@
         :items-to-show="4"
         :items-to-scroll="2"
       >
-        <Slide
-          v-for="(item, index) in items"
-          :key="index"
-        >
+        <Slide v-for="(item, index) in items" :key="index">
           <div class="card">
-            <v-img
-              class="card-img"
-              :src="item.src"
-              alt="Card image cap"
-            />
+            <v-img class="card-img" :src="item.src" alt="Card image cap" />
           </div>
         </Slide>
       </Carousel>
@@ -245,16 +193,10 @@
               Plus de 5 000 structures nous font confiance
             </h2>
             <div class="d-flex justify-center align-center">
-              <div
-                class="carousel-button-sm"
-                @click="goPrevious"
-              >
+              <div class="carousel-button-sm" @click="goPrevious">
                 <i class="fas fa-chevron-left" />
               </div>
-              <div
-                class="carousel-button-sm"
-                @click="goNext"
-              >
+              <div class="carousel-button-sm" @click="goNext">
                 <i class="fas fa-chevron-right" />
               </div>
             </div>
@@ -268,10 +210,7 @@
         :items-to-show="1"
         :items-to-scroll="1"
       >
-        <Slide
-          v-for="(item, index) in items"
-          :key="index"
-        >
+        <Slide v-for="(item, index) in items" :key="index">
           <v-img
             class="card-img-sm"
             :src="item.src"

components/Layout/Container.vue

@@ -33,6 +33,6 @@ const overflow = ref(props.overflow);
 
 <style scoped>
 .container {
-  max-width: 1800px;
+  max-width: 1900px;
 }
 </style>

components/Layout/Footer.vue

@@ -1,39 +1,6 @@
 <template>
   <footer ref="footerElement">
     <LayoutContainer>
-      <!-- <div
-      v-if="lgAndUp"
-      class="activities"
-    >
-      <v-row>
-        <v-col cols="4">
-          <v-img
-            class="logo logo-jaune"
-            src="/images/OpenTalent_LogoNoir_Jaune_white.png"
-          />
-          <small class="text-logo-jaune">
-            Orchestres, chorales, danse, théatre, cirque</small>
-        </v-col>
-        <div class="vertical-bar" />
-
-        <v-col cols="3">
-          <v-img
-            class="logo logo-rouge"
-            src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
-          />
-          <small class="text-logo-rouge">Fédérations, confédérations, collectivités</small>
-        </v-col>
-        <div class="vertical-bar" />
-        <v-col cols="4">
-          <v-img
-            class="logo logo-bleu"
-            src="/images/logo_school_white.png"
-          />
-          <small class="text-logo-bleu">Tous les établissements d'enseignement artistique</small>
-        </v-col>
-      </v-row>
-    </div> -->
-
       <div class="footer">
         <div class="content-footer">
           <v-row>
@@ -43,7 +10,7 @@
             >
               <v-img
                 class="logo"
-                src="/images/Logo-blanc.png"
+                src="/images/logo/footer-logo.png"
                 width="294px"
                 height="65px"
               />
@@ -72,7 +39,6 @@
                 <small class="small-link ml-12">Annonces</small>
               </v-row>
             </v-col>
-            
 
             <v-col
               :cols="smAndDown ? 6 : 2"
@@ -92,8 +58,6 @@
               </v-row>
             </v-col>
 
-
-
             <v-col
               :cols="smAndDown ? 6 : 2"
               :class="smAndDown ? 'link-sm' : 'details-footer'"
@@ -123,16 +87,25 @@
                 <small class="small-link ml-12">Mentions légales</small>
               </v-row>
               <v-row>
-                <small class="small-link ml-12">Conditions Générales d'Utilisation</small>
+                <small class="small-link ml-12"
+                  >Conditions Générales d'Utilisation</small
+                >
               </v-row>
               <v-row>
-                <small class="small-link ml-12">Conditions Générales de Ventes</small>
+                <small class="small-link ml-12"
+                  >Conditions Générales de Ventes</small
+                >
               </v-row>
               <v-row>
-                <small class="small-link ml-12">Politique de confidentialite & protection des données personnelles</small>
+                <small class="small-link ml-12"
+                  >Politique de confidentialite & protection des données
+                  personnelles</small
+                >
               </v-row>
               <v-row>
-                <small class="small-link ml-12">Politique d'utilisation des cookies</small>
+                <small class="small-link ml-12"
+                  >Politique d'utilisation des cookies</small
+                >
               </v-row>
             </v-col>
 
@@ -157,7 +130,6 @@
                   <v-icon class="fab fa-youtube" />
                 </v-col>
               </v-row>
-
             </v-col>
           </v-row>
         </div>
@@ -177,7 +149,6 @@ const { smAndDown, lgAndUp } = useDisplay();
 </script>
 
 <style scoped>
-
 .flex-container {
   display: flex;
   flex-direction: column;
@@ -186,7 +157,7 @@ const { smAndDown, lgAndUp } = useDisplay();
 
 .vertical-bar {
   height: 4rem;
-  border: 0.1rem solid #ECFBFC;
+  border: 0.1rem solid #ecfbfc;
   margin-left: 10px;
   margin-top: 3rem;
 }

components/Layout/Navigation.vue

@@ -1,13 +1,13 @@
 <template>
   <LayoutContainer>
     <v-row
-      justify="space-between"
-      :class="mdAndDown ? 'menu-bar' : 'menu-bar custom-row'"
+      class="menu"
+      v-if="!mdAndDown"
     >
       <!-- Logo Column -->
-      <v-col :cols="mdAndDown ? 8 : 6" sm="8" md="2">
+      <v-col cols="2">
         <nuxt-link to="/">
-          <v-img class="logo" src="/images/Opentalent.png" />
+          <v-img class="logo" src="/images/logo/navigation-logo.png" />
         </nuxt-link>
       </v-col>
 
@@ -16,12 +16,15 @@
         <div class="colored-square"></div>
       </v-col>
 
+      <div justify="space-between">
+
+      </div>
       <!-- Menu Links -->
-      <v-col v-if="!mdAndDown" cols="12" sm="7" md="5">
+      <v-col v-if="!mdAndDown" cols="5">
         <!-- Menu déroulant logiciels -->
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="common-styles" to="/software"
+            <nuxt-link v-bind="props" class="link-style" to="/software"
               >Nos logiciels
             </nuxt-link>
           </template>
@@ -43,7 +46,7 @@
         <!-- Menu déroulant services -->
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="common-styles" to="/software"
+            <nuxt-link v-bind="props" class="link-style" to="/software"
               >Nos services
             </nuxt-link>
           </template>
@@ -65,7 +68,7 @@
         <!-- Menu déroulant à propos -->
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="common-styles" to="/software"
+            <nuxt-link v-bind="props" class="link-style" to="/software"
               >A propos</nuxt-link
             >
           </template>
@@ -84,11 +87,11 @@
           </v-list>
         </v-menu>
 
-        <nuxt-link class="common-styles" to="/news">Actualités</nuxt-link>
+        <nuxt-link class="link-style" to="/news">Actualités</nuxt-link>
       </v-col>
 
       <!-- Buttons Column -->
-      <v-col v-if="!mdAndDown" cols="12" sm="12" md="5" class="buttons-col">
+      <!-- <v-col v-if="!mdAndDown" cols="3" class="buttons-col" >
         <v-btn class="btn btn-common btn-login" text>
           <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter
         </v-btn>
@@ -96,6 +99,20 @@
         <v-btn class="btn btn-common btn-subscribe ml-4" text>
           <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
         </v-btn>
+      </v-col> -->
+
+      <v-col cols="4" class="buttons-col">
+        <nuxt-link to="https://admin.opentalent.fr/#/login/">
+          <v-btn class="btn btn-common btn-login" text>
+            <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter<br />aux
+            logiciels
+          </v-btn>
+        </nuxt-link>
+
+        <div class="vertical-bar" />
+        <v-btn class="btn btn-common btn-subscribe ml-4" text>
+          <v-icon left class="fas fa-calendar mr-4"></v-icon> Agenda Culturel
+        </v-btn>
       </v-col>
     </v-row>
   </LayoutContainer>
@@ -126,6 +143,12 @@ const aboutLinks = ref([
 <style scoped>
 /* =============== Base Styles =============== */
 
+.menu {
+  display: flex;
+  align-items: center;
+  background-color: #ffffff;
+}
+
 .v-list-item-title {
   font-family: "Barlow";
   font-style: normal;
@@ -139,15 +162,25 @@ const aboutLinks = ref([
   font-family: "Barlow";
   font-style: normal;
   font-size: 1.1rem;
-  padding: 0.8rem;
-  font-weight: 500;
+  padding: 0.1rem;
+  font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #0e2d32;
-  margin-right: 20px;
   text-decoration: none !important;
 }
+.link-style {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 1.1rem;
+  margin-right: 20px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #0e2d32;
+  text-decoration: none !important;
 
+}
 .link-styles {
   font-family: "Barlow";
   font-style: normal;
@@ -178,7 +211,7 @@ const aboutLinks = ref([
 /* =============== Logo Styles =============== */
 
 .logo {
-  height: 4.5rem;
+  height: 5.5rem;
 }
 
 /* =============== Menu Link Styles =============== */

components/Layout/Prefooter.vue

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

components/Layout/UI/Banner.vue

@@ -0,0 +1,145 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="12">
+        <div class="banner-container">
+          <img
+            :src="imageSrc"
+            :alt="imageAlt"
+            class="cover-image"
+          />
+          <div class="black-square" :style="{ backgroundColor: squareColor }">
+            <v-row>
+              <div class="content-row">
+                <v-icon size="50" class="fa-brands fa-react icon" />
+                <p class="description-square" :style="{ color: textColor }">
+                  {{ squareText }}
+                </p>
+              </div>
+            </v-row>
+          </div>
+
+          <div class="blue-square" :style="{ backgroundColor: blueSquareColor }">
+            <img
+              :src="logoSrc"
+              :alt="logoAlt"
+              class="logo-image"
+            />
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  imageSrc: {
+    type: String,
+    required: true
+  },
+  imageAlt: {
+    type: String,
+    default: ""
+  },
+  squareColor: {
+    type: String,
+    default: "#9edbdd" 
+  },
+  textColor: {
+    type: String,
+    default: "#091d20" 
+  },
+  squareText: {
+    type: String,
+    default: "École de musique, d'art, de danse, de cirque, conservatoires et MJC"
+  },
+  blueSquareColor: {
+    type: String,
+    default: "#0e2d32"
+  },
+  logoSrc: {
+    type: String,
+    required: true
+  },
+  logoAlt: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<style scoped>
+
+.black-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 0;
+  width: 13rem;
+  height: 10rem;
+  background-color: black;
+  background: #9edbdd;
+}
+
+.blue-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 13rem;
+  width: 13rem;
+  height: 10rem;
+  background: #0e2d32;
+}
+
+.description-square {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.8rem;
+  text-align: center;
+  color: #091d20;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-bottom: 1rem;
+}
+
+.content-row {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+}
+
+.icon {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.logo-image {
+  width: 90%;
+  height: auto;
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
+}
+
+.banner-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 29rem;
+  object-fit: cover;
+  transition: transform 0.2s;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+</style>

components/Layout/UI/BannerTitle.vue

@@ -0,0 +1,73 @@
+
+<template>
+  <LayoutContainer>
+  <div class="container-title">
+    <v-col cols="4" class="text-left">
+      <h1>{{ leftText }}</h1>
+    </v-col>
+    <v-col cols="4" class="logiciel">
+      <h1>{{ centerText }}</h1>
+    </v-col>
+    <v-col cols="4" class="text-right">
+      <h1>{{ rightText }}</h1>
+    </v-col>
+  </div>
+</LayoutContainer>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  leftText: String,
+  centerText: String,
+  rightText: String,
+});
+</script>
+
+<style scoped>
+.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: 2rem; 
+}
+.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: 2rem; 
+}
+
+.logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+}
+</style>

components/Layout/UI/SolutionsFooter.vue

@@ -0,0 +1,178 @@
+<template>
+  <div id="solutions">
+    <LayoutContainer>
+      <v-row>
+        <v-col cols="12">
+          <h4 class="solution-title text-center">
+            Ces solutions peuvent vous intéresser
+          </h4>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="!hideArtistRow"  class="row-artist">
+        <v-col cols="3">
+          <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
+        </v-col>
+
+        <v-col cols="2">
+          <h5 class="solution-name">Opentalent Artist</h5>
+        </v-col>
+
+        <v-col cols="7">
+          <!-- list v-chip-->
+          <v-chip-group active-class="primary--text" column>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Orchestres</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Chorales</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Compagnies de danse</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Compagnies de théatre</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Compagnie de Cirque</span>
+            </v-chip>
+          </v-chip-group>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="!hideManagerRow" class="row-manager">
+        <v-col cols="3">
+          <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
+        </v-col>
+
+        <v-col cols="2">
+          <h5 class="solution-name">Opentalent Manager</h5>
+        </v-col>
+
+        <v-col cols="7">
+          <!-- list v-chip-->
+          <v-chip-group active-class="primary--text" column>
+            <v-chip class="ma-2 chip-custom" color="primary" label>
+              <span class="chip-detail">Fédérations</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" color="primary" label>
+              <span class="chip-detail">Confédérations</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" color="primary" label>
+              <span class="chip-detail">Collectivités</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" color="primary" label>
+              <span class="chip-detail">Réseaux</span>
+            </v-chip>
+          </v-chip-group>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="!hideSchoolRow" class="row-school">
+        <v-col cols="3">
+          <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
+        </v-col>
+
+        <v-col cols="2">
+          <h5 class="solution-name">Opentalent Artist</h5>
+        </v-col>
+
+        <v-col cols="7">
+          <!-- list v-chip-->
+          <v-chip-group active-class="primary--text" column>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Agenda</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Facturation</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Comptabilité</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Communication</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Site internet</span>
+            </v-chip>
+          </v-chip-group>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+// Check the URL and set variables to determine which rows to hide
+const hideManagerRow = route.path.includes("opentalent_manager");
+const hideArtistRow = route.path.includes("opentalent_artist");
+const hideSchoolRow = route.path.includes("opentalent_school");
+</script>
+
+<style scoped>
+.chip-detail {
+  color: #000000;
+}
+.chip-custom {
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+  text-transform: uppercase;
+
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.2em;
+}
+
+.row-artist,
+.row-school,
+.row-manager {
+  border-top: 1px solid #d1cdc7;
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.solution-name {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  color: #0e2d32;
+}
+
+.row-artist, .row-school, .row-manager {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.solution-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  color: #000000;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.logo {
+  width: 17rem;
+  height: 10rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+</style>

components/Layout/UI/StickyMenu.vue

@@ -0,0 +1,90 @@
+<template>
+  <div :class="stickyClass" >
+    <v-row class="outil-row" justify="end">
+      <v-col cols="3">
+        <div class="container-square">
+          <v-row v-for="square in squares" :key="square.id" :class="square.bgColor">
+            <div>
+              <v-icon :class="square.iconClass" />
+              <p class="text-square">{{ square.text }}</p>
+            </div>
+          </v-row>
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineProps } from "vue";
+
+const props = defineProps({
+  shouldShowStickyMenu: Boolean,
+  squaresData: Array,
+});
+
+const stickyClass = ref("sticky-scroll");
+
+const squares = ref(props.squaresData);
+
+</script>
+
+<style scoped>
+.container-square {
+  display: flex;
+  flex-direction: column;
+  justify-content: space between;
+  color: white;
+  font-weight: 500;
+  font-size: 0.7rem;
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.blue-square,
+.darkblue-square {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Barlow";
+  width: 10rem;
+  height: 7rem;
+  margin-left: 14rem;
+  padding: 1rem;
+}
+
+.blue-square {
+  background: rgba(32, 147, 190);
+}
+
+.darkblue-square {
+  background: #0e2d32;
+}
+
+.text-square {
+  margin: 0.5rem 2rem;
+}
+
+.icon {
+  margin-right: 1rem;
+}
+
+.icon-logiciel {
+  color: rgba(32, 147, 190);
+  margin-right: 1rem;
+}
+
+.outil-row {
+  margin: 5rem 0;
+}
+
+#sticky-menu {
+  position: sticky;
+  top: 10rem;
+  z-index: 10;
+  right: 0;
+  margin-bottom: -40rem;
+}
+</style>

components/Logiciels/Manager/Solutions.vue

@@ -9,113 +9,93 @@
         </v-col>
       </v-row>
 
-      <v-row class="row-artist">
+      <v-row v-if="!hideArtistRow"  class="row-artist">
         <v-col cols="3">
-          <v-img
-            src="/images/opentalent_artist_black.png"
-            class="logo"
-          />
+          <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
         </v-col>
 
         <v-col cols="2">
-          <h5 class="solution-name">
-            Opentalent Artist
-          </h5>
+          <h5 class="solution-name">Opentalent Artist</h5>
         </v-col>
 
         <v-col cols="7">
           <!-- list v-chip-->
-          <v-chip-group
-            active-class="primary--text"
-            column
-          >
-            <v-chip
-              class="ma-2 chip-custom"
-              label
-            >
+          <v-chip-group active-class="primary--text" column>
+            <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Agenda</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Facturation</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Comptabilité</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Communication</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Site internet</span>
             </v-chip>
           </v-chip-group>
         </v-col>
       </v-row>
 
-      <v-row class="row-artist">
+      <v-row v-if="!hideManagerRow" class="row-manager">
         <v-col cols="3">
-          <v-img
-            src="/images/opentalent_manager_black.jpg"
-            class="logo"
-          />
+          <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
         </v-col>
 
         <v-col cols="2">
-          <h5 class="solution-name">
-            Opentalent Manager
-          </h5>
+          <h5 class="solution-name">Opentalent Manager</h5>
         </v-col>
 
         <v-col cols="7">
           <!-- list v-chip-->
-          <v-chip-group
-            active-class="primary--text"
-            column
-          >
-            <v-chip
-              class="ma-2 chip-custom"
-              color="primary"
-              label
-            >
+          <v-chip-group active-class="primary--text" column>
+            <v-chip class="ma-2 chip-custom" color="primary" label>
               <span class="chip-detail">Agenda</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              color="primary"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" color="primary" label>
               <span class="chip-detail">Facturation</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              color="primary"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" color="primary" label>
               <span class="chip-detail">Comptabilité</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              color="primary"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" color="primary" label>
               <span class="chip-detail">Communication</span>
             </v-chip>
-            <v-chip
-              class="ma-2 chip-custom"
-              color="primary"
-              label
-            >
+            <v-chip class="ma-2 chip-custom" color="primary" label>
+              <span class="chip-detail">Site internet</span>
+            </v-chip>
+          </v-chip-group>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="!hideSchoolRow" class="row-school">
+        <v-col cols="3">
+          <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
+        </v-col>
+
+        <v-col cols="2">
+          <h5 class="solution-name">Opentalent Artist</h5>
+        </v-col>
+
+        <v-col cols="7">
+          <!-- list v-chip-->
+          <v-chip-group active-class="primary--text" column>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Agenda</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Facturation</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Comptabilité</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
+              <span class="chip-detail">Communication</span>
+            </v-chip>
+            <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Site internet</span>
             </v-chip>
           </v-chip-group>
@@ -125,7 +105,16 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+// Check the URL and set variables to determine which rows to hide
+const hideManagerRow = route.path.includes("opentalent_manager");
+const hideArtistRow = route.path.includes("opentalent_artist");
+const hideSchoolRow = route.path.includes("opentalent_school");
+</script>
 
 <style scoped>
 .chip-detail {
@@ -149,7 +138,9 @@
   letter-spacing: 0.2em;
 }
 
-.row-artist {
+.row-artist,
+.row-school,
+.row-manager {
   border-top: 1px solid #d1cdc7;
   margin-left: 2rem;
   margin-right: 2rem;
@@ -164,7 +155,7 @@
   color: #0e2d32;
 }
 
-.row-artist {
+.row-artist, .row-school, .row-manager {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -182,7 +173,7 @@
 }
 
 .logo {
-  width: 10rem;
+  width: 17rem;
   height: 10rem;
   margin-left: 2rem;
   margin-right: 2rem;

components/Logiciels/School/Accompagnement.vue

@@ -9,40 +9,6 @@
           </div>
         </v-row>
 
-        <!-- <v-row>
-          <v-col cols="3">
-            <v-img
-              src="/images/logiciels/school/reunion.jpg"
-              class="reunion-img"
-            />
-          </v-col>
-
-          <v-col cols="6">
-            <h3 class="formation-title">
-              Formation prise en main du logiciel - En ligne
-            </h3>
-            <p class="formation-details">
-              Parce qu’on sait qu’appréhender un nouvel outil peut-être
-              fastidieux et que vous n’avez pas de temps à perdre,...
-            </p>
-            <br>
-            <p class="formation-details mb-6">
-              Lors de votre souscription, nous vous invitons à choisir des dates
-              de formation qui se déroulera sous 2 jours non consécutifs. En
-              effet, ce sont des journées riches d’informations et nous mettons
-              un point d’honneur à vous laisser digérer cette première journée,
-              vous familiariser davantage avec vos nouvelles connaissances avant
-              de passer à la seconde. Destinée aux nouveaux utilisateurs, elle
-              est obligatoire lors de l'acquisition du logiciel. Elle est
-              également utile lors d'un changement de personnel dans la
-              structure.
-            </p>
-
-            <v-btn class="formation-btn">
-              S’incrire à une formation
-            </v-btn>
-          </v-col>
-        </v-row> -->
         <v-row>
           <v-col cols="6">
             <div class="image-wrapper">
@@ -76,7 +42,7 @@
                 fastidieux et que vous n’avez pas de temps à perdre,...
               </p>
               <br />
-              <p class="formation-details mb-6">
+              <!-- <p class="formation-details mb-6">
                 Lors de votre souscription, nous vous invitons à choisir des
                 dates de formation qui se déroulera sous 2 jours non
                 consécutifs. En effet, ce sont des journées riches
@@ -86,7 +52,7 @@
                 Destinée aux nouveaux utilisateurs, elle est obligatoire lors de
                 l'acquisition du logiciel. Elle est également utile lors d'un
                 changement de personnel dans la structure.
-              </p>
+              </p> -->
             </div>
 
             <v-btn class="formation-btn"> S’incrire à une formation </v-btn>
@@ -103,7 +69,7 @@
                 Opentalent School, c'est possible pour aller encore plus loin...
               </p>
               <br />
-              <p class="formation-details mb-6">
+              <!-- <p class="formation-details mb-6">
                 Lors de votre souscription, nous vous invitons à choisir des
                 dates de formation qui se déroulera sous 2 jours non
                 consécutifs. En effet, ce sont des journées riches
@@ -113,7 +79,7 @@
                 Destinée aux nouveaux utilisateurs, elle est obligatoire lors de
                 l'acquisition du logiciel. Elle est également utile lors d'un
                 changement de personnel dans la structure.
-              </p>
+              </p> -->
             </div>
             <v-btn class="formation-btn"> S'inscrire au webinaire</v-btn>
           </v-col>
@@ -209,7 +175,7 @@
   left: 0;
   width: 80%;
   height: 100%;
-  background-color: rgba(32, 147, 190, 0.2);
+  background-color: rgba(32, 147, 190, 0.17);
   margin-left: 5rem;
 }
 .carousel-button i {
@@ -270,7 +236,7 @@
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 1rem;
+  font-size: 1.2rem;
   line-height: 1.5rem;
   color: #eff9fb;
   margin-left: 7rem;
@@ -308,7 +274,7 @@
   left: 0;
   width: 80%;
   height: 100%;
-  background-color: rgba(32, 147, 190, 0.2);
+  background-color: rgba(32, 147, 190, 0.17);
   width: 80%;
   margin-left: 5rem;
   height: 100%;
@@ -335,6 +301,7 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
   margin-left: 5rem;
+  margin-bottom: 1rem;
 }
 .container-green {
   background-color: #0e2d32;

components/Logiciels/School/Avantages.vue

@@ -32,12 +32,12 @@
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.
           </p>
-          <p>
-            <v-chip class="chip-card">
-              Membre cmf
-            </v-chip>
-          </p>
+          <div class="image-container">
           <v-img src="/images/logiciels/school/screen3.png" />
+          <v-chip class="chip-card" >
+           <p class="cmf">Membre CMF</p> 
+          </v-chip>
+        </div>
         </v-col>
         <v-col cols="4">
           <div class="title-card">
@@ -52,6 +52,10 @@
             Des espaces dédiés et des outils spécifiques à vos besoins pour une
             gestion optimisée et une lecture simplifiée.
           </p>
+          <div class="image-container">
+          <v-img src="/images/logiciels/school/screen3.png" />
+        </div>
+          
         </v-col>
         <v-col cols="4">
           <div class="title-card">
@@ -66,6 +70,12 @@
             vos membres de mettre à jour leurs informations et d'interagir dans
             leur agenda.
           </p>
+          <div class="image-container">
+          <v-img src="/images/logiciels/school/screen3.png" />
+          <v-chip class="chip-card" >
+           <p class="cmf">Membre CMF</p> 
+          </v-chip>
+        </div>
         </v-col>
       </v-row>
     </LayoutContainer>
@@ -97,6 +107,7 @@
   font-size: 1rem;
   color: #091d20;
   margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .number-card {
   font-family: "Barlow";
@@ -153,4 +164,31 @@ text-transform: uppercase;
   font-size: 1.5rem;
   margin-left: 2rem;
 }
+
+.image-container {
+  position: relative;
+}
+
+.chip-card {
+  color: #000000;
+  position: absolute;
+  margin-left: 2rem;
+  top: 0;
+  left: 0;
+  z-index: 1;
+    color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 16px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.9);
+}
+
+.cmf {
+  color: #000000;
+}
 </style>

components/Logiciels/School/Banner.vue

@@ -1,59 +1,21 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <div class="container-title">
-        <v-col
-          cols="4"
-          class="text-left"
-        >
-          <h1>Artist</h1>
-        </v-col>
-        <v-col
-          cols="4"
-          class="logiciel"
-        >
-          <h1>Opentalent School</h1>
-        </v-col>
-        <v-col
-          cols="4"
-          class="text-right"
-        >
-          <h1>Manager</h1>
-        </v-col>
-      </div>
+      <LayoutUIBannerTitle
+        :leftText="'Artist'"
+        :centerText="'Opentalent School'"
+        :rightText="'Manager'"
+      />
     </v-row>
 
     <v-row>
       <v-col cols="12">
-        <div class="banner-container">
-          <img
-            src="/images/solutions/school.jpg"
-            alt="line"
-            class="cover-image"
-          >
-          <div class="black-square">
-            <v-row>
-              <div class="content-row">
-                <v-icon
-                  size="50"
-                  class="fa-brands fa-react icon"
-                />
-                <p class="description-square">
-                  École de musique, d'art, de danse, de cirque, conservatoires
-                  et MJC
-                </p>
-              </div>
-            </v-row>
-          </div>
-
-          <div class="blue-square">
-            <img
-              src="/images/logo_school_white.png"
-              alt="Logo"
-              class="logo-image"
-            >
-          </div>
-        </div>
+        <LayoutUIBanner
+          :imageSrc="'/images/solutions/school.jpg'"
+          imageAlt="'line'"
+          :squareText="'École de musique, d\'art, de danse, de cirque, conservatoireset MJC'"
+          :logoSrc="'/images/logo_school_white.png'"
+        />
       </v-col>
     </v-row>
   </LayoutContainer>
@@ -62,6 +24,7 @@
 <script setup></script>
 
 <style scoped>
+
 .container-title {
   display: flex;
   justify-content: space-around;
@@ -73,16 +36,6 @@
   border-bottom: 0.1rem solid #eaeaea;
 }
 
-.logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 3rem;
-  line-height: 85px;
-  text-align: center;
-  color: #000000;
-  margin-left: 6rem;
-  margin-right: 4rem;
-}
 .text-left {
   font-family: "Barlow";
   font-style: normal;
@@ -108,74 +61,16 @@
   margin-right: 5rem;
 }
 
-/** banner et cadre pour logo et description de logiciel */
-.black-square {
-  position: absolute;
-  bottom: 0.4rem;
-  right: 0;
-  width: 13rem;
-  height: 10rem;
-  background-color: black;
-  background: #9edbdd;
-}
-
-.blue-square {
-  position: absolute;
-  bottom: 0.4rem;
-  right: 13rem;
-  width: 13rem;
-  height: 10rem;
-  background: #0e2d32;
-}
 
-.description-square {
+.logiciel {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 300;
-  font-size: 0.8rem;
-  text-align: center;
-  color: #091d20;
-  display: flex;
-  align-items: center;
+  font-size: 3rem;
+  line-height: 85px;
   text-align: center;
-  margin-top: 0.5rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-bottom: 1rem;
-}
-
-.content-row {
-  margin-top: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-}
-
-.icon {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.logo-image {
-  width: 90%;
-  height: auto;
-  margin-top: 1.5rem;
-  margin-left: 0.5rem;
-}
-
-.banner-container {
-  position: relative;
-  overflow: hidden;
+  color: #000000;
+  margin-left: 6rem;
+  margin-right: 4rem;
 }
 
-.cover-image {
-  width: 100%;
-  height: 25rem;
-  object-fit: cover;
-  transition: transform 0.2s;
-  margin: 0 auto;
-  transform: scaleX(-1);
-}
 </style>

components/Logiciels/School/Fonctionnalites.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div id="Fonctionnalites">
     <LayoutContainer>
       <div class="container-green">
@@ -243,4 +243,347 @@
   padding: 4rem;
   color: #eff9fb;
 }
+</style> -->
+
+<template>
+  <div id="Fonctionnalites">
+    <LayoutContainer>
+      <div class="container-green">
+        <v-row>
+          <v-col cols="12">
+            <h3 class="reviews-title">
+              Découvrez toutes les fonctionnalités de notre solution
+            </h3>
+            <div class="d-flex justify-center align-center">
+              <div class="carousel-button" @click="previousAction">
+                <i class="fas fa-chevron-left" />
+              </div>
+              <div class="carousel-button" @click="nextAction">
+                <i class="fas fa-chevron-right" />
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <Carousel
+              ref="functionCarousel"
+              :items-to-show="5"
+              :items-to-scroll="1"
+              class="carousel"
+              :center-mode="true"
+              :center-on-init="true"
+            >
+              <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>
+
+                      <div class="card-footer">
+                        <!-- <v-card-actions class="reviewer-name">
+                          {{ card.name }}
+                        </v-card-actions>
+
+                        <p class="reviewer-status">
+                          {{ card.status }}
+                        </p> -->
+                        <p class="reviewer-structure">
+                          {{ card.option  }}
+                        </p>
+                      </div>
+                    </v-card-item>
+                  </v-card>
+                </div>
+              </Slide>
+            </Carousel>
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+  </div>
+</template>
+
+<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();
+    functionCarousel.value.goTo(activeCardIndex.value); 
+  }
+};
+
+const nextAction = () => {
+  const newIndex = activeCardIndex.value + 1;
+  if (newIndex < cards.length) {
+    activeCardIndex.value = newIndex;
+    functionCarousel.value.next();
+    functionCarousel.value.goTo(activeCardIndex.value); 
+  }
+};
+
+const cards = [
+  {
+    title: "ESPACES DÉDIÉS",
+    list: ["Administration", "Professeurs", "Élèves/Familles"],
+  },
+  {
+    title: "RÉPERTOIRE",
+    list: [
+      "Élèves et responsable légaux",
+      "Personnel administratif et professeurs",
+      "Contacts extérieurs, partenaires & donateurs",
+    ],
+  },
+  {
+    title: "PRÉINSCRIPTION EN LIGNE",
+    list: [
+      "Parametrage personnalisé des formulaires & mails automatiques",
+      "Gestion des réinscriptions et des nouvelles inscriptionse",
+      "Gestion des quotas et du suivi des préinscription en ligne",
+    ],
+  },
+  {
+    title: "AGENDA",
+    list: [
+      "Création et gestion des cours, examens, événements et prestations pédagogiques",
+      "Planning interactif avec un contrôle de cohérence",
+      "Gestion des présences et absences",
+    ],
+  },
+  {
+    title: "PARC MATÉRIEL ",
+    list: [
+      "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
+      "Planning interactif avec un contrôle de cohérence",
+      "Gestion des présences et absences",
+    ],
+  },
+  {
+    title: "SUIVI PÉDAGOGIQUE",
+    list: [
+      "Gestion du cursus pédagogique (critères personnalisables)",
+      "Création des examens et envoi des convocations",
+      "Édition des bulletins de notes",
+    ],
+  },
+  {
+    title: "FACTURATION",
+    list: [
+      "Facturation automatisée selon différents critères",
+      "Suivi des règlements et gestion des relances",
+      "n options : de nombreux moyens de paiement",
+    ],
+  },
+  {
+    title: "COMMUNICATION",
+    list: [
+      "Édition et envoi de courriers, de mails ou de SMS*",
+      "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: "RÉSEAU CMF ",
+    list: [
+      "Accès au répertoire du réseau",
+      "Renouvellement de votre adhésion fédérale",
+      "Gestion de l'assurance CMF",
+    ],
+  },
+  {
+    title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
+    list: [
+      "Sur votre site internet intégré",
+      "Sur l'agenda de la CMF",
+      "Sur l'Agenda culturel Opentalent ",
+    ],
+  },
+];
+</script>
+
+<style scoped>
+.list-detail {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+  margin-bottom: 1rem;
+  color: #000000;
+  width: 100%;
+}
+.card-title {
+  white-space: pre-wrap;
+}
+.carousel {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.card.active-card {
+}
+
+.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.15); 
+}
+.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;
+}
+
+.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-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;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  color: #071b1f;
+}
+
+.review-description {
+  text-align: left;
+}
+.card-footer {
+  /** coller à droite */
+  position: absolute;  
+  right: 0;
+  margin-right: 2rem;
+}
+
+.card-text {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  height: 12rem;
+}
+.reviews-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 3rem;
+  margin-right: 3rem;
+  margin-top: 5rem;
+  text-align: center;
+}
+
+.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;
+}
 </style>

components/Logiciels/School/MenuScroll.vue

@@ -77,9 +77,9 @@ onMounted(() => {
   window.addEventListener('scroll', handleScroll);
 });
 
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll);
-});
+// onUnmounted(() => {
+//   window.removeEventListener('scroll', handleScroll);
+// });
 const menus = [
   { label: "Presentation" },
   { label: "Avantages" },
@@ -113,15 +113,14 @@ const navigate = (menu) => {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
 .menu-container {
-  z-index: 1000;
+  z-index: 1;
   display: flex;
   justify-content: space-around;
-  padding: 1rem 10rem;
   background: white;
   color: #bbb8b8;
   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/School/Premium.vue

@@ -21,7 +21,6 @@
       <table class="table-comparatif">
         <thead>
           <tr>
-            <th class="thead" />
             <th class="thead" />
             <th class="thead">
               <p class="standard">
@@ -38,7 +37,7 @@
               </p>
             </th>
             <th class="thead premium-column">
-              <p class="standard">
+              <p class="standard ">
                 Premium
               </p>
               <p class="from">
@@ -54,47 +53,46 @@
           </tr>
         </thead>
         <tbody class="table-body">
-          <tr
-            v-for="row in tableData"
-            :key="row.id"
-            class="table-row"
-          >
-            <td class="table-data table-data-left">
-              {{ row.column1 }}
-            </td>
-            <td class="table-data">
-              {{ row.column2 }}
-            </td>
-            <td class="table-data-second">
-              <v-icon
-                v-if="row.column3 == 'check'"
-                size="15"
-                class="far fa-check-circle"
-              />
-              <v-icon
-                v-else-if="row.column3 == 'cross'"
-                size="15"
-                class="far fa-times-circle"
-                color="red"
-              />
-              <span v-else>{{ row.column3 }}</span>
-            </td>
-            <td class="table-data-second">
-              <v-icon
-                v-if="row.column4 == 'check'"
-                size="15"
-                class="far fa-check-circle"
-              />
-              <v-icon
-                v-else-if="row.column3 == 'cross'"
-                size="15"
-                class="far fa-times-circle"
-                color="red"
-              />
-              <span v-else>{{ row.column4 }}</span>
-            </td>
-          </tr>
-        </tbody>
+    <tr
+      v-for="row in tableData"
+      :key="row.id"
+      class="table-row"
+    >
+      <td class="table-data">
+        {{ row.column1 }}
+      </td>
+      <td class="table-data-second">
+        <v-icon
+          v-if="row.column2 === 'check'"
+          size="15"
+          class="far fa-check-circle"
+          color="green"
+        />
+        <v-icon
+          v-else-if="row.column2 === 'cross'"
+          size="15"
+          class="far fa-times-circle"
+          color="red"
+        />
+        <span v-else>{{ row.column2 }}</span>
+      </td>
+      <td class="table-data-second">
+        <v-icon
+          v-if="row.column3 === 'check'"
+          size="15"
+          class="far fa-check-circle"
+          color="green"
+        />
+        <v-icon
+          v-else-if="row.column3 === 'cross'"
+          size="15"
+          class="far fa-times-circle"
+          color="red"
+        />
+        <span v-else>{{ row.column3 }}</span>
+      </td>
+    </tr>
+  </tbody>
       </table>
     </LayoutContainer>
   </div>
@@ -104,108 +102,105 @@
 const tableData = [
   {
     id: 1,
-    column1: "Espace mémoire",
-    column2: "Stockage disponible",
-    column3: "1 Go",
-    column4: "2 Go",
+    column1: "GESTION DU RÉPERTOIRE",
+    column2: "check",
+    column3: "check",
   },
   {
     id: 2,
-    column1: "Administration",
-    column2: "Compte Internet avec gestion des droits",
-    column3: "150",
-    column4: "300",
+    column1: "AGENDA",
+    column2: "check",
+    column3: "check",
   },
   {
     id: 3,
-    column1: "",
-    column2: "Gestion des rôles",
+    column1: "SUIVI PÉDAGOGIQUE",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 4,
-    column1: "",
-    column2: "Gestion du bureau et du CA",
+    column1: "GESTION DU PARC MATÉRIEL",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 5,
-    column1: "",
-    column2: "Gestion des commissions",
-    column3: "check",
-    column4: "check",
-  },
-  {
-    id: 6,
-    column1: "",
-    column2: "Gestion des préinscription en ligne",
-    column3: "cross",
-    column4: "check",
-  },
-  {
-    id: 6,
-    column1: "",
-    column2: "Rapport d'activité détaillé automatique",
-    column3: "check",
-    column4: "check",
-  },
-  {
-    id: 6,
-    column1: "gestion des membres",
-    column2: "Fiches adhérents/élèves",
+    column1: "COMMUNICATION",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 6,
-    column1: "",
-    column2: "Personnel administratif",
+    column1: "SMS",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 6,
-    column1: "",
-    column2: "Professeurs",
+    column1: "NOM DE DOMAINE",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 7,
-    column1: "",
-    column2: "Responsables légaux ",
+    column1: "SITE INTERNET",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 8,
-    column1: "gestion des élèves",
-    column2: "Nombre d’élève maximum",
+    column1: "STATISTIQUES",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 9,
-    column1: "",
-    column2: "Fiche élève avec gestion des tuteurs",
+    column1: "FONCTIONNALITÉ DU RÉSEAU CMF",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 10,
-    column1: "",
-    column2: "Corus suivi",
+    column1: "SAUVEGARDE",
+    column2: "check",
     column3: "check",
-    column4: "check",
   },
   {
     id: 11,
-    column1: "",
-    column2: "Suivi pédagogique",
-    column3: "check",
-    column4: "check",
+    column1: "EXTRANET UTILISATEURS",
+    column2: "cross",
+    column3: "Option",
+  },
+  {
+    id: 12,
+    column1: "PRÉINSCRIPTION EN LIGNE",
+    column2: "cross",
+    column3: "Option",
+  },
+  {
+    id: 13,
+    column1: "GRILLES D'ÉVALUATION",
+    column2: "check",
+    column3: "Option",
+  },
+  {
+    id: 14,
+    column1: "GESTION DES RÈGLEMENTS",
+    column2: "Option",
+    column3: "Option",
+  },
+  {
+    id: 15,
+    column1: "ESPACE DE STOCKAGE",
+    column2: "500 Mo",
+    column3: "1 Go",
+  },
+  {
+    id: 16,
+    column1: "PAGE DU SITE INTERNET",
+    column2: "restreint",
+    column3: "illimités",
   },
 ];
 </script>
@@ -314,7 +309,7 @@ text-transform: uppercase;
   line-height: 34px;
 }
 .table-comparatif {
-  width: 80%;
+  width: 70%;
   margin-top: 1rem;
   margin-right: auto;
   margin-left: auto;
@@ -330,4 +325,5 @@ text-transform: uppercase;
 .table-body .table-row:nth-child(odd) {
   background-color: rgba(32, 147, 190, 0.2);
 }
+
 </style>

components/Logiciels/School/StickyMenu.vue

@@ -94,9 +94,9 @@
 #sticky-menu {
   position: sticky;
   top: 10rem;
-  z-index: 10;  
-  margin-left: 90rem;
-  margin-bottom: -40rem; 
+  z-index: 10;
+  left: 0; 
+  margin-bottom: -40rem;
 }
 
 </style>

package.json

@@ -45,6 +45,7 @@
     "pinia-orm": "^1.5.1",
     "sass": "^1.59.3",
     "scss": "^0.2.4",
+    "three": "^0.157.0",
     "typeface-barlow": "^1.1.13",
     "vite-plugin-vuetify": "^1.0.2",
     "vue-social-sharing": "^3.0.9",

pages/actualites/[id].vue

@@ -33,10 +33,11 @@
       </v-row>
 
       <v-row>
-        <p class="description-actu">
-          {{ actu.bodyText }}
-        </p>
-      </v-row>
+    <p class="description-actu">
+        {{ plainText }}
+    </p>
+</v-row>
+
 
       <v-row class="d-flex justify-center align-center">
         <v-btn class="btn mb-12" text>
@@ -158,6 +159,10 @@ const getImageUrl = (attachment: string) => {
   console.log("pas d'image");
   return "/images/actu/image.png";
 };
+const plainText = computed(() => {
+    let doc = new DOMParser().parseFromString(actu.value?.bodyText, 'text/html');
+    return doc.body.textContent || "";
+});
 
 const tagColor = (tag) => {
   switch (tag) {

pages/actualites/index.vue

@@ -15,7 +15,7 @@
             <i class="fa-solid fa-arrow-left" />
           </div>
           <nuxt-link to="/actualites" class="ml-2 back-button mt-6">
-            Retour aux actualités
+            Retour à l'accueil
           </nuxt-link>
         </div>
       </v-col>

pages/index.vue

@@ -1,17 +1,80 @@
 <template>
   <LayoutNavigation />
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
   <HomeCaroussel />
+  
   <HomePromotion />
   <HomeSolution />
   <HomeEventAgenda />
   <HomeBesoin />
   <HomeReviews />
   <!-- <HomeNews /> -->
-  <HomeHelp />
-  <LayoutPrefooter />
-  <LayoutFooter/>
+  <HomeHelp id="layout-footer"/>
+  <LayoutPrefooter id="layout-footer"/>
+  <LayoutFooter id="layout-footer"/>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 
+const shouldShowStickyMenu = ref(true);
+
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "blue-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+  },
+  {
+    id: 2,
+    bgColor: "blue-square",
+    iconClass: "fa-solid fa-circle-info icon",
+    text: "Demander une demo",
+  },
+  {
+    id: 3,
+    bgColor: "blue-square",
+    iconClass: "fa-brands fa-readme icon",
+    text: "Brochure",
+  },
+  {
+    id: 4,
+    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: 25rem;
+  z-index: 10;
+  margin-bottom: -40rem;
+  margin-left: 12rem;
+}
+</style>

pages/logiciels/school.vue

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

pages/logiciels/artist.vue → pages/opentalent_artist.vue

@@ -10,7 +10,7 @@
   <LogicielsArtistAccompagnement />
   <LogicielsArtistReviews />
   <LayoutFAQ />
-  <LogicielsArtistSolutions />
+  <LayoutUISolutionsFooter id="layout-footer" />
   <LayoutFooter />
 </template>
 

pages/logiciels/manager.vue → pages/opentalent_manager.vue

@@ -9,7 +9,7 @@
   <LogicielsManagerAccompagnement />
   <LogicielsManagerReviews />
   <LayoutFAQ />
-  <LogicielsManagerSolutions />
+  <LayoutUISolutionsFooter id="layout-footer" />
   <LayoutFooter />
 </template>
 

pages/opentalent_school.vue

@@ -0,0 +1,82 @@
+<template>
+  <LayoutNavigation />
+  <LogicielsSchoolBanner />
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <LogicielsSchoolMenuScroll class="sticky-scroll" />
+    <LayoutUIStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
+  <LogicielsSchoolOutil />
+  <LogicielsSchoolAvantages />
+  <LogicielsSchoolFonctionnalites />
+  <LogicielsSchoolPremium />
+  <LogicielsSchoolProjet />
+  <LogicielsSchoolAccompagnement />
+  <LogicielsSchoolReviews />
+  <LayoutFAQ id="layout-footer" />
+  <LayoutUISolutionsFooter id="layout-footer" />
+  <LayoutFooter id="layout-footer" />
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const shouldShowStickyMenu = ref(true);
+
+const squaresData = [
+  {
+    id: 1,
+    bgColor: "blue-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+  },
+  {
+    id: 2,
+    bgColor: "blue-square",
+    iconClass: "fa-solid fa-circle-info icon",
+    text: "Demander une demo",
+  },
+  {
+    id: 3,
+    bgColor: "blue-square",
+    iconClass: "fa-brands fa-readme icon",
+    text: "Brochure",
+  },
+  {
+    id: 4,
+    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: -40rem;
+  margin-left: 13rem;
+}
+</style>

pages/poc.vue

@@ -0,0 +1,343 @@
+<template>
+  <div id="Temoignages">
+    <LayoutContainer>
+      <div class="container-green">
+        <v-row>
+          <v-col cols="12">
+            <h3 class="reviews-title">
+              Découvrez toutes les fonctionnalités de notre solution
+            </h3>
+            <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>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <Carousel
+              ref="carousel"
+              :items-to-show="5"
+              :items-to-scroll="1"
+              class="carousel"
+              :center-mode="true"
+              :center-on-init="true"
+            >
+              <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>
+
+                      <!-- <div class="card-footer">
+                        <v-card-actions class="reviewer-name">
+                          {{ card.name }}
+                        </v-card-actions>
+
+                        <p class="reviewer-status">
+                          {{ card.status }}
+                        </p>
+                        <p class="reviewer-structure">
+                          {{ card.structure }}
+                        </p>
+                      </div> -->
+                    </v-card-item>
+                  </v-card>
+                </div>
+              </Slide>
+            </Carousel>
+          </v-col>
+        </v-row>
+      </div>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+
+const carousel = ref(null);
+const activeCardIndex = ref(2);
+
+const goPrevious = () => {
+  const newIndex = activeCardIndex.value - 1;
+  if (newIndex >= 0) {
+    activeCardIndex.value = newIndex;
+    carousel.value.prev();
+    carousel.value.goTo(activeCardIndex.value); // Centre la nouvelle carte active
+  }
+};
+
+const goNext = () => {
+  const newIndex = activeCardIndex.value + 1;
+  if (newIndex < cards.length) {
+    activeCardIndex.value = newIndex;
+    carousel.value.next();
+    carousel.value.goTo(activeCardIndex.value); // Centre la nouvelle carte active
+  }
+};
+
+const cards = [
+  {
+    title: "ESPACES DÉDIÉS",
+    list: ["Espace élève", "Espace professeur", "Espace administrateur"],
+  },
+  {
+    title: "RÉPERTOIRE",
+    list: [
+      "Élèves et responsable légaux",
+      "Personnel administratif et professeurs",
+      "Contacts extérieurs, partenaires & donateurs",
+    ],
+  },
+  {
+    title: "PRÉINSCRIPTION EN LIGNE",
+    list: [
+      "Parametrage personnalisé des formulaires & mails automatiques",
+      "Gestion des réinscriptions et des nouvelles inscriptionse",
+      "Gestion des quotas et du suivi des préinscription en ligne",
+    ],
+  },
+  {
+    title: "AGENDA",
+    list: [
+      "Création et gestion des cours, examens, événements et prestations pédagogiques",
+      "Planning interactif avec un contrôle de cohérence",
+      "Gestion des présences et absences",
+    ],
+  },
+  {
+    title: "PARC MATÉRIEL ",
+    list: [
+      "Gestion de votre parc matériel (instruments, costumes, accessoires..)",
+      "Planning interactif avec un contrôle de cohérence",
+      "Gestion des présences et absences",
+    ],
+  },
+  {
+    title: "SUIVI PÉDAGOGIQUE",
+    list: [
+      "Gestion du cursus pédagogique (critères personnalisables)",
+      "Création des examens et envoi des convocations",
+      "Édition des bulletins de notes",
+    ],
+  },
+  {
+    title: "FACTURATION",
+    list: [
+      "Facturation automatisée selon différents critères",
+      "Suivi des règlements et gestion des relances",
+      "n options : de nombreux moyens de paiement",
+    ],
+  },
+  {
+    title: "COMMUNICATION",
+    list: [
+      "Édition et envoi de courriers, de mails ou de SMS*(*en option)",
+      "Création de modèles de courriers, mails ou SMS",
+      "Outil de publipostage intégré pour un envoi personnalisé",
+    ],
+  },
+  {
+    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: "RÉSEAU CMF ",
+    list: ["Espace élève", "Espace professeur", "Espace administrateur"],
+  },
+  {
+    title: "PROMOTION DE VOTRE STRUCTURE & VOS ÉVÉNEMENTS ",
+    list: [
+      "Sur votre site internet intégré",
+      "Sur l'agenda de la CMF",
+      "Sur l'Agenda culturel Opentalent ",
+    ],
+  },
+];
+</script>
+
+<style scoped>
+.list-detail {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+  margin-bottom: 1rem;
+  color: #000000;
+  width: 100%;
+}
+.card-title {
+  white-space: pre-wrap;
+}
+.carousel {
+  margin-left: 2rem;
+  margin-right: 2rem;
+
+}
+
+.card.active-card {
+  /* Supprimez les anciennes propriétés width et border */
+}
+
+.card {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  /* Les styles de carte par défaut */
+  transition: transform 0.3s; /* Ajoutez une transition pour un effet de zoom fluide */
+  min-width: 20%;
+  max-width: 20%;
+}
+
+.card.active-card {
+  transform: scale(1.15); /* Agrandit la carte active de 10% */
+}
+.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;
+}
+
+.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-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;
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  color: #071b1f;
+}
+
+.review-description {
+  text-align: left;
+}
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 5.5rem;
+  margin-top: 3rem;
+}
+
+.card-text {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+  height: 12rem;
+}
+.reviews-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 3rem;
+  margin-right: 3rem;
+  margin-top: 5rem;
+  text-align: center;
+}
+
+.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;
+}
+</style>

yarn.lock

@@ -10190,6 +10190,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+three@^0.157.0:
+  version "0.157.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.157.0.tgz#5baac531941fc8c4ca62d45ee4265652e03318d0"
+  integrity sha512-CeAwQrf4x3z0/e+MC4F+nXLW5t0gh3pw+L6CCBqpHvOq3bGYIgRYub7Pv0j/9wR+d++OiEglyZzWyuSYbwWGOA==
+
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"