correction logiciels artist

components/Logiciels/Artist/MenuScroll.vue

@@ -1,4 +1,5 @@
 <template>
+  <div id="Presentation">
   <LayoutContainer>
     <v-row>
       <v-col cols="12" class="menu-container">
@@ -11,6 +12,7 @@
       </v-col>
     </v-row>
   </LayoutContainer>
+</div>
 </template>
 
 <script setup>

components/Logiciels/Manager/Accompagnement.vue

@@ -1,87 +1,96 @@
 <template>
-  <LayoutContainer>
-    <div class="container-green">
-
-
+  <div id="abonnement">
+    <LayoutContainer>
+      <div class="container-green">
         <div class="container-title">
-        <v-icon class="fa-brands fa-react icon-title"></v-icon>
-      <h4 class="subtitle-accompagnement">Nos accompagnements pour aller plus loin</h4>
-      </div>
+          <v-icon class="fa-brands fa-react icon-title"></v-icon>
+          <h4 class="subtitle-accompagnement">
+            Nos accompagnements pour aller plus loin
+          </h4>
+        </div>
 
-      <div class="image-container"> 
-          <v-row >
+        <div class="image-container">
+          <v-row>
             <v-col cols="6">
               <div class="session-description">
-              <v-img
-              src="/images/logiciels/manager/Webinaire.png"
-              class="accompagnement-img left-img"
-              ></v-img>
-              
+                <v-img
+                  src="/images/logiciels/manager/Webinaire.png"
+                  class="accompagnement-img left-img"
+                ></v-img>
+
                 <small class="session left">X sessions disponibles</small>
-              <h5 class="session-name left">Formation prise en main du logiciel</h5>
-              <p class="session-details left">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="session-btn left">S’incrire à une formation</v-btn>
+                <h5 class="session-name left">
+                  Formation prise en main du logiciel
+                </h5>
+                <p class="session-details left">
+                  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="session-btn left"
+                  >S’incrire à une formation</v-btn
+                >
               </div>
-
             </v-col>
 
             <v-col cols="6">
               <div class="session-description">
-              <v-img
-              src="/images/logiciels/manager/Webinaire.png"
-              class="accompagnement-img"
-              ></v-img>
-              
+                <v-img
+                  src="/images/logiciels/manager/Webinaire.png"
+                  class="accompagnement-img"
+                ></v-img>
+
                 <small class="session">X sessions disponibles</small>
-              <h5 class="session-name">Formation prise en main du logiciel</h5>
-              <p class="session-details">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="session-btn">S’incrire à une formation</v-btn>
+                <h5 class="session-name">
+                  Formation prise en main du logiciel
+                </h5>
+                <p class="session-details">
+                  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="session-btn">S’incrire à une formation</v-btn>
               </div>
             </v-col>
           </v-row>
         </div>
-        
-
-    </div>
-
-    <v-row class="card-container">
-  <v-col cols="4" >
-    <div class="card">
-      <h3>30 1500</h3>
-      <p>elèves</p>
-    </div>
-  </v-col>
-
-  <v-col cols="4" class="d-flex justify-center align-center">
-    <div class="card">
-      <h3>30 1500</h3>
-      <p>elèves</p>
-    </div>
-  </v-col>
-
-  <v-col cols="4" class="d-flex justify-center align-center">
-    <div class="card">
-      <h3>30 1500</h3>
-      <p>elèves</p>
-    </div>
-  </v-col>
-
-</v-row>
-
-  <h4 class="text-center title-cmf">La plus grande Confédération Musicale de France nous fait confiance</h4>
-  <v-img
-  src="/images/logiciels/manager/cmf.jpg"
-  class="cmf-img"
-  ></v-img>
-
-  </LayoutContainer>
+      </div>
+
+      <v-row class="card-container">
+        <v-col cols="4">
+          <div class="card">
+            <h3>30 1500</h3>
+            <p>elèves</p>
+          </div>
+        </v-col>
+
+        <v-col cols="4" class="d-flex justify-center align-center">
+          <div class="card">
+            <h3>30 1500</h3>
+            <p>elèves</p>
+          </div>
+        </v-col>
+
+        <v-col cols="4" class="d-flex justify-center align-center">
+          <div class="card">
+            <h3>30 1500</h3>
+            <p>elèves</p>
+          </div>
+        </v-col>
+      </v-row>
+
+      <h4 class="text-center title-cmf">
+        La plus grande Confédération Musicale de France nous fait confiance
+      </h4>
+      <v-img src="/images/logiciels/manager/cmf.jpg" class="cmf-img"></v-img>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-
-.cmf-img{
+.cmf-img {
   width: 30%;
   margin-left: 35rem;
   height: 50%;
@@ -89,110 +98,110 @@
   margin-bottom: 4rem;
 }
 
-.title-cmf{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 500;
-font-size: 2.5rem;
-line-height: 2.5rem;
-text-align: center;
-margin-left: 25rem;
-margin-right: 25rem;
+.title-cmf {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 2.5rem;
+  line-height: 2.5rem;
+  text-align: center;
+  margin-left: 25rem;
+  margin-right: 25rem;
 }
 .card-container {
-  transform: translateY(-40%); 
+  transform: translateY(-40%);
   margin-left: 25rem;
-  margin-right:25rem;
+  margin-right: 25rem;
 }
 .card {
-  background: #D8050B;
+  background: #d8050b;
   border-radius: 10px;
-  padding-left: 5rem; 
+  padding-left: 5rem;
   padding-right: 5rem;
   padding-top: 3rem;
   padding-bottom: 3rem;
   color: white;
 }
-.session-btn{
+.session-btn {
   background: transparent;
   border-radius: 1rem;
-  border: 1px solid #C1EFF0;
-  color: #091D20;
-  font-family: 'Barlow';
-  color: #C1EFF0 ;
+  border: 1px solid #c1eff0;
+  color: #091d20;
+  font-family: "Barlow";
+  color: #c1eff0;
   margin-bottom: 10rem;
 }
 
-.session-name{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 600;
-font-size: 1.5rem;
-width: 15rem;
-color: #FFFFFF;
+.session-name {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.5rem;
+  width: 15rem;
+  color: #ffffff;
 }
 
-.session-details{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: normal;
-font-size: 0.8rem;
-width: 17rem;
-color: #EFF9FB;
-margin-bottom: 2rem;
+.session-details {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 0.8rem;
+  width: 17rem;
+  color: #eff9fb;
+  margin-bottom: 2rem;
 }
-.left{
+.left {
   margin-left: 24rem;
 }
 
-.session{
-  color: #C1EFF0;
+.session {
+  color: #c1eff0;
 }
 
-.session-description{
+.session-description {
   margin-left: 2rem;
   margin-right: 2rem;
 }
 .accompagnement-img::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0, 0, 255, 0.1);  
-    pointer-events: none;
-}
-
-.left-img{
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 255, 0.1);
+  pointer-events: none;
+}
+
+.left-img {
   margin-left: 24rem;
 }
 .image-container {
   display: flex;
-  justify-content: space-around; 
+  justify-content: space-around;
 }
 
-.accompagnement-img{
+.accompagnement-img {
   width: 50%;
   height: 90%;
   border-radius: 2rem;
   margin-bottom: 1rem;
 }
-.subtitle-accompagnement{
-  color: #FFFFFF;
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 600;
-font-size: 10px;
-line-height: 15px;
+.subtitle-accompagnement {
+  color: #ffffff;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
 
-text-align: center;
-letter-spacing: 0.18em;
-text-transform: uppercase;
-width: 13rem;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  width: 13rem;
 }
-.container-title{
+.container-title {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -201,14 +210,13 @@ width: 13rem;
   margin-bottom: 2rem;
 }
 
-.icon-title{
+.icon-title {
   margin-top: 2rem;
   margin-bottom: 0.5rem;
-  color: #64AFB7;
+  color: #64afb7;
 }
 
-.container-green{
-  background: #0E2D32;
+.container-green {
+  background: #0e2d32;
 }
-
 </style>

components/Logiciels/Manager/Avantages.vue

@@ -1,8 +1,9 @@
 <template>
+  <div id="Avantages">
   <LayoutContainer>
     <v-row>
       <div class="d-flex justify-center align-center">
-        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+        <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
         <h5 class="subtitle-avantage">Découvrez les avantages de la solution</h5>
 
       </div>
@@ -49,6 +50,7 @@
     </v-row>
 
   </LayoutContainer>
+</div>
 </template>
 
 <script setup></script>

components/Logiciels/Manager/Banner.vue

@@ -44,14 +44,6 @@
       </v-col>
     </v-row>
 
-    <v-row>
-      <v-col cols="12" class="menu-container">
-        <div v-for="menu in menus" :key="menu.label">
-          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{ menu.label }}</v-chip>
-          <span v-else>{{ menu.label }}</span>
-        </div>
-      </v-col>
-    </v-row>
   </LayoutContainer>
 </template>
 
@@ -60,18 +52,6 @@ const state = ref({
   activeMenu: "Présentation",
 })
 
-const menus = [
-  { label: 'Présentation' },
-  { label: 'Avantages' },
-  { label: 'Comparatif' },
-  { label: 'Détails' },
-  { label: 'Abonnement' },
-  { label: 'Accompagnement' },
-  { label: 'Témoignages' },
-  { label: 'Formations' },
-  { label: 'Solutions associées' }
-
-];
 </script>
 
 <style scoped >

components/Logiciels/Manager/Fonctionnalites.vue

@@ -1,9 +1,10 @@
 <template>
+  <div id="Presentation">
   <LayoutContainer>
     <div class="container-green">
     <v-row>
       <div class="d-flex justify-center align-center">
-        <v-icon class="fa-brands fa-react icon-title"></v-icon>
+        <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
       <h4 class="subtitle-fontionnalite">Découvrez toutes les foncitonnalités de notre solution</h4>
       </div>
     </v-row>
@@ -121,7 +122,7 @@
     </v-row>
   </div>
   </LayoutContainer>
-
+</div>
 </template>
 
 <script setup>
@@ -149,13 +150,13 @@ color: #FFFFFF;
 .icon-details {
   font-size: 1.5rem;
   margin-bottom: 0.9rem;
-  color: #FAC20A;
+  color: #D8050B;
 }
 
 .icon-title{
   font-size: 0.8rem;
   margin-bottom: 2rem;
-  color: #FAC20A;
+  color: #D8050B;
 }
 
 .subtitle-fontionnalite {

components/Logiciels/Manager/MenuScroll.vue

@@ -0,0 +1,70 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <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 } from "vue";
+
+const menus = [
+  { label: 'Presentation' },
+  { label: 'Avantages' },
+  { label: 'Comparatif' },
+  { label: 'détails' },
+  { label: 'abonnement' },
+  { label: 'témoignages' },
+  { label: 'formations' },
+  { label: 'solutions' }
+];
+
+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>
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.menu-container div:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+
+</style>

components/Logiciels/Manager/Outil.vue

@@ -1,10 +1,11 @@
 <template>
+  <div id="Presentation">
   <LayoutContainer>
     <v-row class="outil-row">
       <v-col cols="4">
-        <div class="title">
-          <v-icon class="fa-brands fa-react icon-subtitle"></v-icon>
-          <h4 class="outil-subtitle">Présentation d'opentalent Manager</h4>
+        <div class="title-presentation">
+          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <h4>Présentation d'opentalent manager</h4>
         </div>
         <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
         </v-img>
@@ -141,7 +142,7 @@
 
       <v-col cols="6">
         <div class="title-logiciel-group">
-          <v-icon class="fa-brands fa-react icon-logiciel"></v-icon>
+          <v-icon size="10" class="fa-solid fa-circle icon-logiciel"></v-icon>
         <h6 class="subtitle-logiciel">Logiciel Opentalent</h6>
         </div>
 
@@ -150,12 +151,26 @@
       </v-col>
     </v-row>
   </LayoutContainer>
+</div>
 </template>
 
 <script setup></script>
 
 <style scoped>
 
+.title-presentation{
+  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;
+  line-height: 1.5rem;
+}
+
 .title-logiciel-group{
   display: flex;
   flex-direction: row;
@@ -275,6 +290,11 @@
   margin-left: 5rem;
   margin-top: 4rem;
 }
+
+.icon-title {
+  margin-right: 1.5rem;
+  color:#D8050B;
+}
 .subtitle-logiciel {
   font-family: "Barlow";
   font-style: normal;

components/Logiciels/Manager/Premium.vue

@@ -1,160 +0,0 @@
-<template>
-  <LayoutContainer>
-    <h6 class="subtitle">Comparatif de nos solutions</h6>
-    <h3 class="title">Et si vous passiez à la version Premium</h3>
-    <table class="table-comparatif">
-      <thead>
-        <tr>
-          <th class="thead"></th>
-          <th class="thead"></th>
-          <th class="thead">
-            <p>Standard</p>
-            <p>A partir de 44,10 ttc /mois</p>
-          </th>
-          <th class="thead">
-            <p>Premium</p>
-            <p>A partir de 60,20 ttc /mois</p>
-          </th>        </tr>
-      </thead>
-      <tbody class="table-body">
-        <tr v-for="row in tableData" :key="row.id" class="table-row">
-          <td class="table-data">{{ row.column1 }}</td>
-          <td>{{ row.column2 }}</td>
-          <td>{{ row.column3 }}</td>
-          <td>{{ row.column4 }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </LayoutContainer>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [
-        {
-          id: 1,
-          column1: "Donnée 1",
-          column2: "Donnée 2",
-          column3: "Donnée 3",
-          column4: "Donnée 4",
-        },
-        {
-          id: 2,
-          column1: "Donnée 5",
-          column2: "Donnée 6",
-          column3: "Donnée 7",
-          column4: "Donnée 8",
-        },
-        {
-          id: 3,
-          column1: "Donnée 9",
-          column2: "Donnée 10",
-          column3: "Donnée 11",
-          column4: "Donnée 12",
-        },
-        {
-          id: 4,
-          column1: "Donnée 13",
-          column2: "Donnée 14",
-          column3: "Donnée 15",
-          column4: "Donnée 16",
-        },
-        {
-          id: 5,
-          column1: "Donnée 17",
-          column2: "Donnée 18",
-          column3: "Donnée 19",
-          column4: "Donnée 20",
-        },
-        {
-          id: 6,
-          column1: "Donnée 21",
-          column2: "Donnée 22",
-          column3: "Donnée 23",
-          column4: "Donnée 24",
-        },
-        {
-          id: 7,
-          column1: "Donnée 25",
-          column2: "Donnée 26",
-          column3: "Donnée 27",
-          column4: "Donnée 28",
-        },
-        {
-          id: 8,
-          column1: "Donnée 29",
-          column2: "Donnée 30",
-          column3: "Donnée 31",
-          column4: "Donnée 32",
-        },
-        {
-          id: 9,
-          column1: "Donnée 33",
-          column2: "Donnée 34",
-          column3: "Donnée 35",
-          column4: "Donnée 36",
-        },
-        {
-          id: 10,
-          column1: "Donnée 37",
-          column2: "Donnée 38",
-          column3: "Donnée 39",
-          column4: "Donnée 40",
-        },
-        {
-          id: 11,
-          column1: "Donnée 41",
-          column2: "Donnée 42",
-          column3: "Donnée 43",
-          column4: "Donnée 44",
-        },
-      ],
-    };
-  },
-};
-</script>
-
-<style scoped>
-
-.subtitle {
-  font-size: 1.5rem;
-  font-weight: 400;
-  margin-left: 9rem;
-}
-
-.title{
-  font-size: 1.5rem;
-  font-weight: 400;
-  margin-left: 9rem;
-}
-
-.thead {
-  background-color: #fff;
-  height: 8rem;
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 400;
-font-size: 30px;
-line-height: 34px;
-}
-.table-comparatif {
-  width: 74rem;
-  margin-top: 1rem;
-  margin-left: 15rem;
-  margin-right: 5rem;
-  border: none;
-  border-collapse: collapse;
-}
-.table-row{
-  background-color: white;
-  text-align: center;
-  height: 3rem;
-}
-
-.table-body .table-row:nth-child(even) {
-  background-color: rgba(32, 147, 190, 0.2);
-}
-
-</style>

components/Logiciels/Manager/Pyramide.vue

@@ -1,4 +1,5 @@
 <template>
+  <div id="détails">
   <LayoutContainer>
     <v-row>
       <div class="d-flex justify-center align-center">
@@ -51,6 +52,7 @@
       </v-col>
     </v-row>
   </LayoutContainer>
+</div>
 </template>
 
 <script setup></script>

components/Logiciels/Manager/Reviews.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Temoignages">
+  <div id="témoignages">
     <LayoutContainer>
       <div class="container-green">
         <v-row>

components/Logiciels/Manager/Solutions.vue

@@ -1,177 +1,126 @@
 <template>
-<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 class="row-artist">
-    <v-col cols="3">
-      <v-img
-      src="/images/opentalent_artist_black.png"
-      class="logo"
-      >
-      </v-img>
-    </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"
-        label
-        >
-          <span>Agenda</span>
-        </v-chip>
-        <v-chip
-        class="ma-2"
-        label
-        >
-          <span>Facturation</span>
-        </v-chip>
-        <v-chip
-        class="ma-2 chip"
-        label
-        >
-          <span>Comptabilité</span>
-        </v-chip>
-        <v-chip
-        class="ma-2 chip"
-        label
-        >
-          <span>Communication</span>
-        </v-chip>
-        <v-chip
-        class="ma-2 chip"
-        label
-        >
-          <span>Site internet</span>
-        </v-chip>
-    </v-chip-group>
-    </v-col>
-
-  </v-row>
-
-  <v-row class="row-artist">
-    <v-col cols="3">
-      <v-img
-      src="/images/opentalent_manager_black.jpg"
-      class="logo"
-
-      >
-      </v-img>
-    </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"
-        color="primary"
-        label
-        >
-          <span>Agenda</span>
-        </v-chip>
-        <v-chip
-        class="ma-2 chip"
-        color="primary"
-        label
-        >
-          <span>Facturation</span>
-        </v-chip>
-        <v-chip
-        class="ma-2 chip"
-        color="primary"
-        label
-        >
-          <span>Comptabilité</span>
-        </v-chip>
-        <v-chip
-        class="ma-2 chip"
-        color="primary"
-        label
-        >
-          <span>Communication</span>
-        </v-chip>
-        <v-chip
-        class="ma-2 chip"
-        color="primary"
-        label
-        >
-          <span>Site internet</span>
-        </v-chip>
-    </v-chip-group>
-    </v-col>
-
-  </v-row>
-</LayoutContainer>
-
+  <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 class="row-artist">
+        <v-col cols="3">
+          <v-img src="/images/opentalent_artist_black.png" class="logo">
+          </v-img>
+        </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>
+
+      <v-row class="row-artist">
+        <v-col cols="3">
+          <v-img src="/images/opentalent_manager_black.jpg" class="logo">
+          </v-img>
+        </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">Agenda</span>
+            </v-chip>
+            <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>
+              <span class="chip-detail">Comptabilité</span>
+            </v-chip>
+            <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>
+              <span class="chip-detail">Site internet</span>
+            </v-chip>
+          </v-chip-group>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
 <style scoped>
-
-.chip {
-  /* position: inherit; */
-  color: black;
-  border: 1px solid #0E2D32;
-  border-radius: 3rem; 
+.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;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
 
-/* identical to box height, or 114% */
-display: flex;
-align-items: center;
-text-align: center;
-letter-spacing: 0.2em;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.2em;
 }
 
-.row-artist{
-  border-top: 1px solid #D1CDC7;
+.row-artist {
+  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;
-
-
+.solution-name {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  color: #0e2d32;
 }
 
-.row-artist{
+.row-artist {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.solution-title{
+.solution-title {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 500;
@@ -181,13 +130,12 @@ color: #0E2D32;
   margin-top: 2rem;
   margin-bottom: 2rem;
   text-align: center;
-
 }
 
-.logo{
+.logo {
   width: 10rem;
   height: 10rem;
   margin-left: 2rem;
   margin-right: 2rem;
 }
-</style>
+</style>

components/Logiciels/School/Accompagnement.vue

@@ -2,13 +2,11 @@
   <div id="Accompagnement">
     <LayoutContainer>
       <div class="container-green">
-        <v-row >
+        <v-row>
           <div class="d-flex justify-center align-center mt-6">
-          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-          <h5 class="subtitle">
-            Accompagnement
-          </h5>
-        </div>
+            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <h5 class="subtitle">Accompagnement</h5>
+          </div>
         </v-row>
 
         <v-row>
@@ -20,18 +18,19 @@
           </v-col>
 
           <v-col cols="6">
-            <h3 class="formation-title">Formation prise en main du logiciel - En ligne</h3>
+            <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,... 
+              fastidieux et que vous n’avez pas de temps à perdre,...
             </p>
-            <br>
+            <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,
+              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
@@ -65,7 +64,7 @@
         <v-col cols="3" class="d-flex justify-center align-center">
           <div class="card">
             <h3 class="chiffre">20304</h3>
-            <p>clients </p>
+            <p>clients</p>
           </div>
         </v-col>
 
@@ -79,24 +78,18 @@
 
       <v-row>
         <LogicielsSchoolCaroussel />
-
       </v-row>
 
-      <v-row>
-   
-      </v-row>
+      <v-row> </v-row>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup>
-
-
-</script>
+<script setup></script>
 
 <style scoped>
 .carousel-button i {
-  color:black;
+  color: black;
 }
 
 .carousel-button {
@@ -111,63 +104,61 @@
   margin-right: 1rem;
   margin-top: 1rem;
 }
-.title{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 600;
-font-size: 42px;
-line-height: 42px;
-text-align: center;
-color: #0E2D32;
-width: 30rem;
-margin-left: auto;
-margin-right: auto;
-margin-bottom: 2rem;
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  text-align: center;
+  color: #0e2d32;
+  width: 30rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2rem;
 }
-.chiffre{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 600;
-font-size: 60px;
-line-height: 68px;
-text-align: center;
-color: #091D20;
-margin-bottom: .5rem;
+.chiffre {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 60px;
+  line-height: 68px;
+  text-align: center;
+  color: #091d20;
+  margin-bottom: 0.5rem;
 }
-.formation-btn{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 500;
-font-size: 1rem;
-line-height: 18px;
-background: transparent;
-color: #EFF9FB;
-border: 1px solid #EFF9FB;
-border-radius: .5rem;
-margin-left: 7rem;
-
+.formation-btn {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 18px;
+  background: transparent;
+  color: #eff9fb;
+  border: 1px solid #eff9fb;
+  border-radius: 0.5rem;
+  margin-left: 7rem;
 }
-.formation-details{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 300;
-font-size: 1rem;
-line-height: 1.5rem;
-color: #EFF9FB;
-margin-left: 7rem;
-
+.formation-details {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: #eff9fb;
+  margin-left: 7rem;
 }
-.formation-title{
-  font-family: 'Barlow';
-font-style: normal;
-font-weight: 500;
-font-size: 1.8rem;
-line-height: 26px;
-color: #FFFFFF;
-margin-left: 7rem;
-margin-bottom: 3rem;
+.formation-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.8rem;
+  line-height: 26px;
+  color: #ffffff;
+  margin-left: 7rem;
+  margin-bottom: 3rem;
 }
-.reunion-img{
+.reunion-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -179,19 +170,18 @@ margin-bottom: 3rem;
   font-weight: 500;
   font-size: 0.9rem;
   line-height: 1.2rem;
-font-weight: 600;
-line-height: 16px;
-display: flex;
-align-items: center;
-letter-spacing: 0.18em;
-text-transform: uppercase;
-
+  font-weight: 600;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
 }
 
 .icon-title {
   color: rgba(32, 147, 190, 0.6);
   font-size: 1.5rem;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   margin-left: 5rem;
 }
 .container-green {

components/Logiciels/School/MenuScroll.vue

@@ -21,9 +21,10 @@ const menus = [
   { label: "Avantages" },
   { label: "Fonctionnalites" },
   { label: "Comparatif" },
-  { label: "Contact" },
-  { label: "Accompagnement" },
+  { label: "détails" },
+  { label: "abonnement" },
   { label: "Temoignages" },
+  { label: "formations" },
   { label: "Aide" },
 ];
 

pages/logiciels/manager.vue

@@ -1,15 +1,13 @@
 <template>
   <LayoutNavigation /> 
   <LogicielsManagerBanner />
+  <LogicielsManagerMenuScroll />
   <LogicielsManagerOutil />
   <LogicielsManagerAvantages />
   <LogicielsManagerFonctionnalites />
-  <!-- <LogicielsManagerPremium /> -->
   <LogicielsManagerPyramide />
-  <!-- <LogicielsManagerProjet/> -->
   <LogicielsManagerAccompagnement/>
   <LogicielsManagerReviews/>
-  <!-- <LogicielsManagerAgenda/> -->
   <LayoutFAQ/>
   <LogicielsManagerSolutions/>
   <LayoutFooter />