test push cd

.gitlab-ci.yml

@@ -1,20 +1,24 @@
-image: node:14
-
 stages:
   - qa
-  # - deploy_test
+  - deploy_test
+
+before_script:
+  - apt-get install
+  - curl -fsSL https://deb.nodesource.com/setup_14.x | bash -
+  - apt-get install -y nodejs
+  - npm install yarn --force
+  - yarn generate
 
-test:
+qa:
   stage: qa
   script:
-    - yarn install
     - yarn lint 
 
-# deploy_test:
-#   stage: deploy_test
-#   script:
-#     - apt-get update -qq && apt-get install -y -qq sshpass
-#     - export SSHPASS=$DEPLOY_PASS
-#     - sshpass -e ssh $DEPLOY_USER@$DEPLOY_SERVER "cd /var/opentalent/git/portail_v2 && git pull && echo 'Deploy successful' "
-#   only:
-#     - home
+deploy_test:
+  stage: deploy_test
+  script:
+    # - apt-get update -qq && apt-get install -y -qq sshpass
+    # - ssh exploitation@test5 "cd /var/opentalent/git/portail_v2 && nvm exec yarn deploy && echo 'Deploy successful' "
+    - ssh exploitation@test3 'ls /tmp'
+  only:
+    - home

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "name": "mon-projet",
+  "name": "frames",
   "version": "1.0.0",
   "prettier": {
     "tabWidth": 2,

components/About/Agenda.vue

@@ -2,22 +2,35 @@
   <LayoutContainer :overflow="false">
     <v-row>
       <v-col cols="4">
-        <h2 class="title">L'agenda Opentalent</h2>
+        <h2 class="title">
+          L'agenda Opentalent
+        </h2>
       </v-col>
 
       <v-col cols="4">
         <div class="d-flex justify-center align-center">
-          <div class="carousel-button" @click="goPrevious">
-            <i class="fas fa-chevron-left"></i>
+          <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"></i>
+          <div
+            class="carousel-button"
+            @click="goNext"
+          >
+            <i class="fas fa-chevron-right" />
           </div>
         </div>
       </v-col>
 
       <v-col cols="4">
-        <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
+        <v-btn
+          class="btn-news"
+          text
+        >
+          VOIR TOUTES LES ACTUALITÉS
+        </v-btn>
       </v-col>
     </v-row>
 
@@ -28,29 +41,39 @@
     <v-row>
       <v-col cols="12">
         <Carousel
-          :itemsToShow="3"
-          :itemsToScroll="2"
-          v-slot="{ carousel: _carousel }"
           ref="carousel"
+          :items-to-show="3"
+          :items-to-scroll="2"
         >
           <Slide
-            class="slide-card"
             v-for="(event, index) in events"
             :key="index"
+            class="slide-card"
           >
             <div class="card">
-              <img class="card-img-top" :src="event.img" alt="Card image cap" />
+              <img
+                class="card-img-top"
+                :src="event.img"
+                alt="Card image cap"
+              >
               <div class="card-body">
                 <small class="card-rdv">{{ event.rdv }}</small>
-                <h5 class="card-title">{{ event.title }}</h5>
-                <p class="card-localisation">{{ event.localisation }}</p>
+                <h5 class="card-title">
+                  {{ event.title }}
+                </h5>
+                <p class="card-localisation">
+                  {{ event.localisation }}
+                </p>
               </div>
 
               <div class="card-footer">
-                <v-chip-group active-class="primary--text" column>
+                <v-chip-group
+                  active-class="primary--text"
+                  column
+                >
                   <v-chip
-                    v-for="(tag, index) in event.tags"
-                    :key="index"
+                    v-for="(tag, indexTag) in event.tags"
+                    :key="indexTag"
                     class="ma-2 chip-custom"
                     :color="tagColor(tag)"
                     label

components/About/Banner.vue

@@ -1,8 +1,13 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <v-col cols="12" class="title">
-        <h1 class="text-center">Qui sommes nous ?</h1>
+      <v-col
+        cols="12"
+        class="title"
+      >
+        <h1 class="text-center">
+          Qui sommes nous ?
+        </h1>
       </v-col>
     </v-row>
 
@@ -13,17 +18,28 @@
             src="/images/solutions/school.jpg"
             alt="line"
             class="cover-image"
-          />
+          >
         </div>
       </v-col>
     </v-row>
 
     <v-row>
-      <v-col cols="12" class="menu-container">
-        <div v-for="menu in menus" :key="menu.label">
-          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{
-            menu.label
-          }}</v-chip>
+      <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>
@@ -32,6 +48,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 const state = ref({
   activeMenu: "Qui sommes-nous",
 });
@@ -39,7 +56,7 @@ const state = ref({
 const menus = [
   { label: "Qui sommes-nous" },
   { label: "nos logiciels" },
-  { label: "l\’agenda opentalent" },
+  { label: "l’agenda opentalent" },
   { label: "notre histoire" },
   { label: "notre équipe" },
 ];

components/About/Histoire.vue

@@ -2,7 +2,9 @@
   <LayoutContainer>
     <v-row>
       <v-col cols="3">
-        <h5 class="title">Qui sommes-nous</h5>
+        <h5 class="title">
+          Qui sommes-nous
+        </h5>
       </v-col>
 
       <v-col cols="9">
@@ -16,11 +18,16 @@
 
     <v-row>
       <v-col cols="6">
-        <v-img class="passion-img" src="/images/about/passion.jpg"> </v-img>
+        <v-img
+          class="passion-img"
+          src="/images/about/passion.jpg"
+        />
       </v-col>
 
       <v-col cols="6">
-        <h2 class="passion-title">Une histoire de passionnés</h2>
+        <h2 class="passion-title">
+          Une histoire de passionnés
+        </h2>
         <p class="passion-details">
           En 2005, Guillaume Corcoba, musicien depuis toujours et à ce moment là
           président d'un orchestre d'harmonie, mais également membre du conseil

components/About/Logiciels.vue

@@ -1,15 +1,24 @@
 <template>
   <LayoutContainer :overflow="false">
     <div class="container-title">
-      <p class="solution-subtitle">ce qui nous anime</p>
-      <h3 class="title">Nos Logiciels</h3>
+      <p class="solution-subtitle">
+        ce qui nous anime
+      </p>
+      <h3 class="title">
+        Nos Logiciels
+      </h3>
     </div>
 
     <v-row>
-      <v-col cols="3" class="col-info">
+      <v-col
+        cols="3"
+        class="col-info"
+      >
         <small class="opentalent-small">Opentalent</small>
-        <h2 class="logiciel-name">Artist</h2>
-        <hr class="bar" />
+        <h2 class="logiciel-name">
+          Artist
+        </h2>
+        <hr class="bar">
         <p class="description-logiciel">
           Orchestre, chorales, compagnies de danse, théâtre et cirque
         </p>
@@ -19,36 +28,56 @@
             <v-img
               src="/images/OpenTalent_LogoNoir_Jaune_white.png"
               class="logo"
-            >
-            </v-img>
+            />
           </div>
         </v-row>
 
         <v-row>
           <v-col cols="6">
             <ul class="list-solutions">
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
             </ul>
           </v-col>
 
           <v-col cols="6">
             <ul>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
             </ul>
           </v-col>
         </v-row>
       </v-col>
 
-      <v-col cols="3" class="col-info">
+      <v-col
+        cols="3"
+        class="col-info"
+      >
         <small class="opentalent-small">Opentalent</small>
-        <h2 class="logiciel-name">Manager</h2>
-        <hr class="bar" />
+        <h2 class="logiciel-name">
+          Manager
+        </h2>
+        <hr class="bar">
         <p class="description-logiciel">
           Fédérations, confédérations et collectivités
         </p>
@@ -59,10 +88,11 @@
               <v-img
                 src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
                 class="logo"
-              >
-              </v-img>
+              />
               <div class="overlay">
-                <button class="discover-button">Découvrir</button>
+                <button class="discover-button">
+                  Découvrir
+                </button>
               </div>
             </div>
           </v-row>
@@ -71,28 +101,49 @@
         <v-row>
           <v-col cols="6">
             <ul class="list-solutions">
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
             </ul>
           </v-col>
 
           <v-col cols="6">
             <ul>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
             </ul>
           </v-col>
         </v-row>
       </v-col>
 
-      <v-col cols="3" class="col-info">
+      <v-col
+        cols="3"
+        class="col-info"
+      >
         <small class="opentalent-small">Opentalent</small>
-        <h2 class="logiciel-name">School</h2>
-        <hr class="bar" />
+        <h2 class="logiciel-name">
+          School
+        </h2>
+        <hr class="bar">
         <p class="description-logiciel">
           Petits et grands établissements d'enseignement artistique
         </p>
@@ -100,7 +151,10 @@
         <v-row>
           <v-row>
             <div class="school-image">
-              <v-img src="/images/logo_school_white.png" class="logo"> </v-img>
+              <v-img
+                src="/images/logo_school_white.png"
+                class="logo"
+              />
             </div>
           </v-row>
         </v-row>
@@ -108,19 +162,35 @@
         <v-row>
           <v-col cols="6">
             <ul class="list-solutions">
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
             </ul>
           </v-col>
 
           <v-col cols="6">
             <ul>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
-              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
+              <li class="details-solution">
+                Gestion des membres
+              </li>
             </ul>
           </v-col>
         </v-row>

components/About/Valeurs.vue

@@ -2,20 +2,31 @@
   <LayoutContainer>
     <v-row>
       <v-col cols="5">
-        <h3 class="title-valeur">Les valeurs qui nous portent</h3>
+        <h3 class="title-valeur">
+          Les valeurs qui nous portent
+        </h3>
 
         <div class="container-img">
-          <img class="image-ronde top-img" src="/images/about/valeur1.jpg" />
+          <img
+            class="image-ronde top-img"
+            src="/images/about/valeur1.jpg"
+          >
 
           <v-row>
-            <img class="image-ronde left-img" src="/images/about/valeur2.jpg" />
+            <img
+              class="image-ronde left-img"
+              src="/images/about/valeur2.jpg"
+            >
             <img
               class="image-ronde right-img"
               src="/images/about/valeur3.jpg"
-            />
+            >
           </v-row>
 
-          <img class="image-ronde bottom-img" src="/images/about/valeur4.jpg" />
+          <img
+            class="image-ronde bottom-img"
+            src="/images/about/valeur4.jpg"
+          >
         </div>
       </v-col>
 
@@ -23,8 +34,10 @@
         <div class="valeur-container">
           <v-row class="row">
             <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon"></v-icon>
-              <h6 class="title-valeurs">Management social</h6>
+              <v-icon class="fa-brands fa-react icon" />
+              <h6 class="title-valeurs">
+                Management social
+              </h6>
               <p>
                 Guillaume et Michel sont sur la même longueur d’onde et donnent
                 le « La » à un management social et solidaire où plus que de
@@ -37,8 +50,10 @@
             </v-col>
 
             <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon"></v-icon>
-              <h6 class="title-valeurs">Management social</h6>
+              <v-icon class="fa-brands fa-react icon" />
+              <h6 class="title-valeurs">
+                Management social
+              </h6>
               <p>
                 Guillaume et Michel sont sur la même longueur d’onde et donnent
                 le « La » à un management social et solidaire où plus que de
@@ -52,8 +67,10 @@
           </v-row>
           <v-row class="row">
             <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon"></v-icon>
-              <h6 class="title-valeurs">Management social</h6>
+              <v-icon class="fa-brands fa-react icon" />
+              <h6 class="title-valeurs">
+                Management social
+              </h6>
               <p>
                 Guillaume et Michel sont sur la même longueur d’onde et donnent
                 le « La » à un management social et solidaire où plus que de
@@ -66,8 +83,10 @@
             </v-col>
 
             <v-col cols="6">
-              <v-icon class="fa-brands fa-react icon"></v-icon>
-              <h6 class="title-valeurs">Management social</h6>
+              <v-icon class="fa-brands fa-react icon" />
+              <h6 class="title-valeurs">
+                Management social
+              </h6>
               <p>
                 Guillaume et Michel sont sur la même longueur d’onde et donnent
                 le « La » à un management social et solidaire où plus que de

components/Formation/Banner.vue

@@ -2,7 +2,9 @@
   <LayoutContainer>
     <div class="container-title">
       <v-col cols="12">
-        <h1 class="formation">Formation</h1>
+        <h1 class="formation">
+          Formation
+        </h1>
         <h4 class="subtitle-formation">
           Prise en main ou piqûre de rappel, on est toujours à vos côtés.
         </h4>
@@ -15,16 +17,27 @@
           src="/images/formation/banner.jpg"
           alt="line"
           class="cover-image"
-        />
+        >
       </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>
+      <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>
@@ -33,6 +46,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 const state = ref({
   activeMenu: "Présentation",
 });

components/Formation/Catalogue.vue

@@ -1,23 +1,35 @@
 <template>
   <LayoutContainer>
-    <h4 class="title">Découvrez notre catalogue de formation</h4>
+    <h4 class="title">
+      Découvrez notre catalogue de formation
+    </h4>
 
     <v-row>
       <v-col cols="12">
-        <h4 class="catalog">Catalogue</h4>
+        <h4 class="catalog">
+          Catalogue
+        </h4>
       </v-col>
     </v-row>
 
-    <v-row no-gutters class="centered-row">
-      <v-col cols="4" class="col-card">
+    <v-row
+      no-gutters
+      class="centered-row"
+    >
+      <v-col
+        cols="4"
+        class="col-card"
+      >
         <v-row>
           <div class="title-card-container">
             <span class="number-card">03</span>
-            <h4 class="card-title">Formation initiale</h4>
+            <h4 class="card-title">
+              Formation initiale
+            </h4>
             <v-img
               class="logo-img"
               src="/images/opentalent_school_black.jpg"
-            ></v-img>
+            />
           </div>
 
           <p class="details-card">
@@ -28,7 +40,9 @@
 
         <v-row>
           <div class="container-blue">
-            <h6 class="title-obj">Objectifs pédagogiques</h6>
+            <h6 class="title-obj">
+              Objectifs pédagogiques
+            </h6>
             <ul class="list-obj">
               <li>Ajuster la configuration du logiciel</li>
               <li>Ajuster la configuration du logiciel</li>
@@ -40,11 +54,15 @@
         </v-row>
 
         <v-row>
-          <v-chip class="badge-time">Durée : 14h</v-chip>
+          <v-chip class="badge-time">
+            Durée : 14h
+          </v-chip>
         </v-row>
 
         <div class="container-blue">
-          <h6 class="title-obj">Objectifs pédagogiques</h6>
+          <h6 class="title-obj">
+            Objectifs pédagogiques
+          </h6>
 
           <v-row>
             <v-col cols="6">
@@ -70,25 +88,32 @@
         </div>
 
         <v-row>
-          <v-chip class="badge-time">1 580 € H.T</v-chip>
+          <v-chip class="badge-time">
+            1 580 € H.T
+          </v-chip>
         </v-row>
 
         <v-row>
-          <v-chip class="chip-download"
-            >Télécharger le programme de formation</v-chip
-          >
+          <v-chip class="chip-download">
+            Télécharger le programme de formation
+          </v-chip>
         </v-row>
       </v-col>
 
-      <v-col cols="4" class="col-card">
+      <v-col
+        cols="4"
+        class="col-card"
+      >
         <v-row>
           <div class="title-card-container">
             <span class="number-card">03</span>
-            <h4 class="card-title">Formation initiale</h4>
+            <h4 class="card-title">
+              Formation initiale
+            </h4>
             <v-img
               class="logo-img"
               src="/images/opentalent_school_black.jpg"
-            ></v-img>
+            />
           </div>
 
           <p class="details-card">
@@ -99,7 +124,9 @@
 
         <v-row>
           <div class="container-blue">
-            <h6 class="title-obj">Objectifs pédagogiques</h6>
+            <h6 class="title-obj">
+              Objectifs pédagogiques
+            </h6>
             <ul class="list-obj">
               <li>Ajuster la configuration du logiciel</li>
               <li>Ajuster la configuration du logiciel</li>
@@ -111,11 +138,15 @@
         </v-row>
 
         <v-row>
-          <v-chip class="badge-time">Durée : 14h</v-chip>
+          <v-chip class="badge-time">
+            Durée : 14h
+          </v-chip>
         </v-row>
 
         <div class="container-blue">
-          <h6 class="title-obj">Objectifs pédagogiques</h6>
+          <h6 class="title-obj">
+            Objectifs pédagogiques
+          </h6>
 
           <v-row>
             <v-col cols="6">
@@ -141,25 +172,32 @@
         </div>
 
         <v-row>
-          <v-chip class="badge-time">1 580 € H.T</v-chip>
+          <v-chip class="badge-time">
+            1 580 € H.T
+          </v-chip>
         </v-row>
 
         <v-row>
-          <v-chip class="chip-download"
-            >Télécharger le programme de formation</v-chip
-          >
+          <v-chip class="chip-download">
+            Télécharger le programme de formation
+          </v-chip>
         </v-row>
       </v-col>
 
-      <v-col cols="4" class="col-card">
+      <v-col
+        cols="4"
+        class="col-card"
+      >
         <v-row>
           <div class="title-card-container">
             <span class="number-card">03</span>
-            <h4 class="card-title">Formation initiale</h4>
+            <h4 class="card-title">
+              Formation initiale
+            </h4>
             <v-img
               class="logo-img"
               src="/images/opentalent_school_black.jpg"
-            ></v-img>
+            />
           </div>
 
           <p class="details-card">
@@ -170,7 +208,9 @@
 
         <v-row>
           <div class="container-blue">
-            <h6 class="title-obj">Objectifs pédagogiques</h6>
+            <h6 class="title-obj">
+              Objectifs pédagogiques
+            </h6>
             <ul class="list-obj">
               <li>Ajuster la configuration du logiciel</li>
               <li>Ajuster la configuration du logiciel</li>
@@ -182,11 +222,15 @@
         </v-row>
 
         <v-row>
-          <v-chip class="badge-time">Durée : 14h</v-chip>
+          <v-chip class="badge-time">
+            Durée : 14h
+          </v-chip>
         </v-row>
 
         <div class="container-blue">
-          <h6 class="title-obj">Objectifs pédagogiques</h6>
+          <h6 class="title-obj">
+            Objectifs pédagogiques
+          </h6>
 
           <v-row>
             <v-col cols="6">
@@ -212,13 +256,15 @@
         </div>
 
         <v-row>
-          <v-chip class="badge-time">1 580 € H.T</v-chip>
+          <v-chip class="badge-time">
+            1 580 € H.T
+          </v-chip>
         </v-row>
 
         <v-row>
-          <v-chip class="chip-download"
-            >Télécharger le programme de formation</v-chip
-          >
+          <v-chip class="chip-download">
+            Télécharger le programme de formation
+          </v-chip>
         </v-row>
       </v-col>
     </v-row>

components/Formation/Certification.vue

@@ -1,19 +1,27 @@
 <template>
   <LayoutContainer>
     <div class="title-container">
-      <v-icon class="fa-brands fa-react icon-title"></v-icon>
-      <h6 class="subtitle-certification">DES FORMATIONS CERTIFIFIÉES</h6>
+      <v-icon class="fa-brands fa-react icon-title" />
+      <h6 class="subtitle-certification">
+        DES FORMATIONS CERTIFIFIÉES
+      </h6>
     </div>
-    <h2 class="title-certification">Certification</h2>
+    <h2 class="title-certification">
+      Certification
+    </h2>
 
     <v-row>
       <v-col cols="4">
-        <h2 class="title-certification">Qualiopi : Marque de certification</h2>
+        <h2 class="title-certification">
+          Qualiopi : Marque de certification
+        </h2>
         <p class="details-certifications">
           Nos formations sont certifiées Qualiopi - Actions de formation.
         </p>
 
-        <p class="details-certifications">La marque « Qualiopi » vise à :</p>
+        <p class="details-certifications">
+          La marque « Qualiopi » vise à :
+        </p>
         <ul class="list-qualiopi">
           <li>
             attester de la qualité du processus mis en œuvre par les
@@ -30,7 +38,7 @@
         <v-img
           src="/images/formation/qualiopi.jpg"
           class="qualiopi-img"
-        ></v-img>
+        />
       </v-col>
     </v-row>
   </LayoutContainer>

components/Formation/FAQ.vue

@@ -5,7 +5,7 @@
         <v-col cols="6">
           <div class="container-left">
             <div class="container-title">
-              <v-icon class="fa-brands fa-react icon-title"></v-icon>
+              <v-icon class="fa-brands fa-react icon-title" />
               <h5 class="subtitle-faq">
                 Vous voulez tirer le meilleur de notre logiciel ?
               </h5>
@@ -15,7 +15,9 @@
               vous guider
             </h3>
 
-            <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+            <v-btn class="btn-faq">
+              Consulter notre FAQ
+            </v-btn>
           </div>
         </v-col>
 
@@ -23,7 +25,7 @@
           <div class="btn-container">
             <v-btn class="btn-faq-tuto">
               <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                <v-icon class="fa-brands fa-react icon-button" />
                 <p class="text-btn">
                   De nombreux articles tutoriels accessibles 24h/24
                 </p>
@@ -32,7 +34,7 @@
 
             <v-btn class="btn-faq-tuto">
               <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                <v-icon class="fa-brands fa-react icon-button" />
                 <p class="text-btn">
                   De nombreux articles tutoriels accessibles 24h/24
                 </p>

components/Formation/OPCA.vue

@@ -1,18 +1,26 @@
 <template>
   <LayoutContainer>
     <div class="title">
-      <v-icon class="fa-brands fa-react icon"></v-icon>
+      <v-icon class="fa-brands fa-react icon" />
       <h4>Présentation d'opentalent school</h4>
     </div>
 
     <v-row class="row">
       <v-col cols="6">
-        <v-img src="/images/formation/programme.jpg" class="opca-img"></v-img>
+        <v-img
+          src="/images/formation/programme.jpg"
+          class="opca-img"
+        />
       </v-col>
 
-      <v-col cols="6" class="col-opca">
+      <v-col
+        cols="6"
+        class="col-opca"
+      >
         <v-row>
-          <h3 class="title-opca">Des formations éligibles par votre OPCA</h3>
+          <h3 class="title-opca">
+            Des formations éligibles par votre OPCA
+          </h3>
         </v-row>
 
         <v-row>

components/Formation/Participation.vue

@@ -1,8 +1,10 @@
 <template>
   <LayoutContainer>
     <div class="container-title">
-      <v-icon class="fa-brands fa-react icon-title"></v-icon>
-      <h6 class="subtitle-inscription text-center">Inscription</h6>
+      <v-icon class="fa-brands fa-react icon-title" />
+      <h6 class="subtitle-inscription text-center">
+        Inscription
+      </h6>
     </div>
     <h2 class="title-participation text-center">
       Vous souhaitez participer à une formation ?
@@ -12,7 +14,7 @@
         <v-img
           class="participation-img"
           src="/images/formation/participation.jpg"
-        ></v-img>
+        />
       </v-col>
     </v-row>
 

components/Formation/Programme.vue

@@ -2,7 +2,10 @@
   <LayoutContainer>
     <v-row class="container-programme">
       <v-col cols="6">
-        <img class="programme-img1" src="/images/formation/programme2.jpg" />
+        <img
+          class="programme-img1"
+          src="/images/formation/programme2.jpg"
+        >
       </v-col>
 
       <v-col cols="6">
@@ -35,7 +38,10 @@
         </p>
       </v-col>
       <v-col cols="6">
-        <img class="programme-img2" src="/images/formation/programme.jpg" />
+        <img
+          class="programme-img2"
+          src="/images/formation/programme.jpg"
+        >
       </v-col>
     </v-row>
   </LayoutContainer>

components/Formation/Reviews.vue

@@ -3,7 +3,9 @@
     <div class="container-green">
       <v-row>
         <v-col cols="4">
-          <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
+          <h3 class="reviews-title">
+            C'est eux qui en parlent le mieux
+          </h3>
         </v-col>
 
         <v-col cols="8">
@@ -22,8 +24,12 @@
                     Laurent Lebon
                   </v-card-actions>
 
-                  <p class="reviewer-status">Chef d'orchestre</p>
-                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                  <p class="reviewer-status">
+                    Chef d'orchestre
+                  </p>
+                  <p class="reviewer-structure">
+                    Conservatoire de Lyon
+                  </p>
                 </div>
               </v-card-item>
             </v-card>
@@ -42,8 +48,12 @@
                     Laurent Lebon
                   </v-card-actions>
 
-                  <p class="reviewer-status">Chef d'orchestre</p>
-                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                  <p class="reviewer-status">
+                    Chef d'orchestre
+                  </p>
+                  <p class="reviewer-structure">
+                    Conservatoire de Lyon
+                  </p>
                 </div>
               </v-card-item>
             </v-card>
@@ -62,8 +72,12 @@
                     Laurent Lebon
                   </v-card-actions>
 
-                  <p class="reviewer-status">Chef d'orchestre</p>
-                  <p class="reviewer-structure">Conservatoire de Lyon</p>
+                  <p class="reviewer-status">
+                    Chef d'orchestre
+                  </p>
+                  <p class="reviewer-structure">
+                    Conservatoire de Lyon
+                  </p>
                 </div>
               </v-card-item>
             </v-card>

components/Formation/Solutions.vue

@@ -10,29 +10,52 @@
 
     <v-row class="row-artist">
       <v-col cols="3">
-        <v-img src="/images/opentalent_artist_black.png" class="logo"> </v-img>
+        <v-img
+          src="/images/opentalent_artist_black.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" label>
+        <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>
+          <v-chip
+            class="ma-2"
+            label
+          >
             <span>Facturation</span>
           </v-chip>
-          <v-chip class="ma-2 chip" label>
+          <v-chip
+            class="ma-2 chip"
+            label
+          >
             <span>Comptabilité</span>
           </v-chip>
-          <v-chip class="ma-2 chip" label>
+          <v-chip
+            class="ma-2 chip"
+            label
+          >
             <span>Communication</span>
           </v-chip>
-          <v-chip class="ma-2 chip" label>
+          <v-chip
+            class="ma-2 chip"
+            label
+          >
             <span>Site internet</span>
           </v-chip>
         </v-chip-group>
@@ -41,29 +64,57 @@
 
     <v-row class="row-artist">
       <v-col cols="3">
-        <v-img src="/images/opentalent_manager_black.jpg" class="logo"> </v-img>
+        <v-img
+          src="/images/opentalent_manager_black.jpg"
+          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" color="primary" label>
+        <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>
+          <v-chip
+            class="ma-2 chip"
+            color="primary"
+            label
+          >
             <span>Facturation</span>
           </v-chip>
-          <v-chip class="ma-2 chip" color="primary" label>
+          <v-chip
+            class="ma-2 chip"
+            color="primary"
+            label
+          >
             <span>Comptabilité</span>
           </v-chip>
-          <v-chip class="ma-2 chip" color="primary" label>
+          <v-chip
+            class="ma-2 chip"
+            color="primary"
+            label
+          >
             <span>Communication</span>
           </v-chip>
-          <v-chip class="ma-2 chip" color="primary" label>
+          <v-chip
+            class="ma-2 chip"
+            color="primary"
+            label
+          >
             <span>Site internet</span>
           </v-chip>
         </v-chip-group>

components/Home/Besoin.vue

@@ -6,12 +6,13 @@
           <v-img
             src="/images/eventAgenda/logiciel.png"
             :class="smAndDown ? 'screen-img-sm' : 'screen-img'"
-          >
-          </v-img>
+          />
         </v-col>
         <div :class="smAndDown ? 'circle-sm' : 'circle'">
-          <v-icon class="fa-brands fa-react icon"></v-icon>
-          <div class="circle-text">Réponse aux besoins</div>
+          <v-icon class="fa-brands fa-react icon" />
+          <div class="circle-text">
+            Réponse aux besoins
+          </div>
         </div>
         <v-col cols="6">
           <h3
@@ -37,7 +38,7 @@
 
 <script setup>
 import { useDisplay } from "vuetify";
-const { lgAndUp, smAndDown, mdAndDown } = useDisplay();
+const {  smAndDown } = useDisplay();
 </script>
 
 <style scoped>

components/Home/Caroussel.vue

@@ -1,6 +1,9 @@
 <template>
   <LayoutContainer>
-    <h1 v-if="smAndDown" class="title-page">
+    <h1
+      v-if="smAndDown"
+      class="title-page"
+    >
       Une <span class="color-solution">solution</span> adapatée à chaque
       structure culturelle
     </h1>
@@ -15,7 +18,10 @@
       :touch="true"
       :cycle="smAndDown ? true : false"
     >
-      <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
+      <v-carousel-item
+        v-for="(item, index) in carouselItems"
+        :key="index"
+      >
         <v-row>
           <v-col :cols="smAndDown ? 12 : 6">
             <v-row :class="!smAndDown ? 'align-start' : ''">
@@ -23,7 +29,7 @@
                 v-if="!smAndDown"
                 class="logo-school"
                 :src="item.logo"
-              ></v-img>
+              />
             </v-row>
 
             <v-row class="align-start">
@@ -34,7 +40,9 @@
 
             <v-row class="align-start">
               <nuxt-link :to="item.link">
-                <v-btn :class="item.buttonClass">En savoir plus</v-btn>
+                <v-btn :class="item.buttonClass">
+                  En savoir plus
+                </v-btn>
               </nuxt-link>
             </v-row>
           </v-col>
@@ -46,26 +54,36 @@
                   smAndDown ? 'background-rectangle-sm' : 'background-rectangle'
                 "
                 :style="{ backgroundColor: item.color }"
-              ></div>
-              <v-card v-if="!smAndDown" class="card" elevation="5">
+              />
+              <v-card
+                v-if="!smAndDown"
+                class="card"
+                elevation="5"
+              >
                 <v-img
                   class="profile-image"
                   :src="item.avatar"
                   alt="Profile Image"
                   contain
                   rounded
-                ></v-img>
+                />
                 <v-card-text>
-                  <v-card-title class="name">{{ item.name }}</v-card-title>
-                  <p class="school">{{ item.school }}</p>
-                  <p class="status">{{ item.status }}</p>
+                  <v-card-title class="name">
+                    {{ item.name }}
+                  </v-card-title>
+                  <p class="school">
+                    {{ item.school }}
+                  </p>
+                  <p class="status">
+                    {{ item.status }}
+                  </p>
                 </v-card-text>
               </v-card>
 
               <v-img
                 :src="item.image"
                 :class="smAndDown ? 'image-sm' : 'image'"
-              ></v-img>
+              />
             </v-row>
           </v-col>
         </v-row>
@@ -77,15 +95,16 @@
           :key="index"
           :class="{ 'active-control': index === activeIndex }"
           @click="changeSlide(index)"
-        ></div>
+        />
       </div>
     </v-carousel>
   </LayoutContainer>
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { useDisplay } from "vuetify";
-const { lgAndUp, smAndDown } = useDisplay();
+const { smAndDown } = useDisplay();
 
 let activeIndex = ref(0);
 

components/Home/EventAgenda.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer :overflow="false"  >
+  <LayoutContainer :overflow="false">
     <div class="title-container">
       <h2 class="title">
         Retrouvez tous vos évènements dans l'agenda et référencez vous dans
@@ -8,30 +8,41 @@
     </div>
 
     <v-row>
-      <v-col cols="12" :class="lgAndUp ? 'btn-container' : ''">
-        <v-col md="12" :cols="smAndDown ? 12 : 6" class="d-flex justify-center">
-
-          <v-btn :class="smAndDown ? 'btn-event-sm' : 'btn-event'"
-            >Découvrir les évènements
-            <v-icon class="fa-solid fa-arrow-right icon-arrow"></v-icon>
+      <v-col
+        cols="12"
+        :class="lgAndUp ? 'btn-container' : ''"
+      >
+        <v-col
+          md="12"
+          :cols="smAndDown ? 12 : 6"
+          class="d-flex justify-center"
+        >
+          <v-btn :class="smAndDown ? 'btn-event-sm' : 'btn-event'">
+            Découvrir les évènements
+            <v-icon class="fa-solid fa-arrow-right icon-arrow" />
           </v-btn>
         </v-col>
 
-        <v-col md="12" col="6">
-          <v-btn v-if="lgAndUp"  class="btn-event"
-            >Découvrir l’ANNUAIRE
-            <v-icon class="fa-solid fa-arrow-right icon-arrow"></v-icon>
+        <v-col
+          md="12"
+          col="6"
+        >
+          <v-btn
+            v-if="lgAndUp"
+            class="btn-event"
+          >
+            Découvrir l’ANNUAIRE
+            <v-icon class="fa-solid fa-arrow-right icon-arrow" />
           </v-btn>
         </v-col>
       </v-col>
     </v-row>
-
   </LayoutContainer>
 </template>
 
 <script setup>
 import { useDisplay } from "vuetify";
-const { lgAndUp, smAndDown, mdAndDown } = useDisplay();
+const { lgAndUp, smAndDown } = useDisplay();
 </script>
 
 <style scoped>

components/Home/Help.vue

@@ -6,7 +6,7 @@
           <v-img
             :class="smAndDown ? 'help-img-sm' : 'help-img'"
             src="/images/help/Help.png"
-          ></v-img>
+          />
         </v-col>
 
         <v-col :cols="smAndDown ? 12 : 4">
@@ -15,7 +15,7 @@
           </h4>
 
           <p class="need-help">
-            Besoin d’aide ? <br />
+            Besoin d’aide ? <br>
             Vous souhaitez en savoir plus sur nos solutions ou vous avez besoin
             d'assistance sur l'utilisation de l'un de nos logiciels ?
           </p>
@@ -25,7 +25,9 @@
               <li class="detail-item">
                 Ouvert du lundi au vendredi de 8h15 à 17h45
               </li>
-              <li class="detail-item">Support joignable par mail</li>
+              <li class="detail-item">
+                Support joignable par mail
+              </li>
               <li class="detail-item">
                 De nombreux articles tutoriels accessibles 24h/24
               </li>
@@ -33,7 +35,9 @@
           </v-row>
 
           <v-row class="row-faq">
-            <v-btn class="button-faq"> consulter la FAQ </v-btn>
+            <v-btn class="button-faq">
+              consulter la FAQ
+            </v-btn>
           </v-row>
         </v-col>
       </v-row>
@@ -41,10 +45,9 @@
   </LayoutContainer>
 </template>
 <script setup>
-import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
-const { mdAndDown, smAndDown } = useDisplay();
+const { smAndDown } = useDisplay();
 </script>
 
 <style scoped>

components/Home/News.vue

@@ -3,48 +3,81 @@
     <v-row>
       <v-col cols="6">
         <div class="container-title">
-          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <v-icon
+            size="10"
+            class="fa-solid fa-circle icon-title"
+          />
 
-          <h6 class="small-title">Découvrez nos dernières actualités</h6>
+          <h6 class="small-title">
+            Découvrez nos dernières actualités
+          </h6>
         </div>
-        <h2 class="title">Quoi de neuf ?</h2>
+        <h2 class="title">
+          Quoi de neuf ?
+        </h2>
       </v-col>
 
       <v-col cols="6">
-        <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
+        <v-btn
+          class="btn-news"
+          text
+        >
+          VOIR TOUTES LES ACTUALITÉS
+        </v-btn>
       </v-col>
     </v-row>
 
     <v-row>
       <v-col cols="2">
         <div class="d-flex justify-center align-center">
-          <div class="carousel-button" @click="goPrevious">
-            <i class="fas fa-chevron-left"></i>
+          <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"></i>
+          <div
+            class="carousel-button"
+            @click="goNext"
+          >
+            <i class="fas fa-chevron-right" />
           </div>
         </div>
       </v-col>
 
       <v-col cols="10">
         <Carousel
-          :itemsToShow="3.5"
-          :itemsToScroll="1"
-          v-slot="{ carousel: _carousel }"
           ref="carousel"
+          :items-to-show="3.5"
+          :items-to-scroll="1"
         >
-          <Slide class="slide-card" v-for="(actu, index) in actus" :key="index">
+          <Slide
+            v-for="(actu, index) in actus"
+            :key="index"
+            class="slide-card"
+          >
             <div class="card">
-              <img class="card-img-top" :src="actu.img" alt="Card image cap" />
+              <img
+                class="card-img-top"
+                :src="actu.img"
+                alt="Card image cap"
+              >
               <div class="card-body">
-                <h5 class="card-title">{{ actu.title }}</h5>
-                <p class="card-text">{{ actu.content }}</p>
+                <h5 class="card-title">
+                  {{ actu.title }}
+                </h5>
+                <p class="card-text">
+                  {{ actu.content }}
+                </p>
               </div>
 
               <div class="card-footer">
-                <p class="card-date">{{ actu.date }}</p>
-                <button class="card-button">+</button>
+                <p class="card-date">
+                  {{ actu.date }}
+                </p>
+                <button class="card-button">
+                  +
+                </button>
               </div>
             </div>
           </Slide>
@@ -55,6 +88,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 

components/Home/Promotion.vue

@@ -1,9 +1,17 @@
 <template>
   <LayoutContainer>
-    <v-col col="12" class="col-gestion">
+    <v-col
+      col="12"
+      class="col-gestion"
+    >
       <div class="d-flex justify-center align-center flex-column">
-        <v-icon size="8" class="fa-solid fa-circle icon-title"></v-icon>
-        <h5 class="subtitle">GESTION ET PROMOTION</h5>
+        <v-icon
+          size="8"
+          class="fa-solid fa-circle icon-title"
+        />
+        <h5 class="subtitle">
+          GESTION ET PROMOTION
+        </h5>
       </div>
       <v-row>
         <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
@@ -12,24 +20,21 @@
             <v-img
               src="/images/promotion/piano.jpg"
               :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            >
-            </v-img>
+            />
           </span>
           tout en un pour la gestion et la promotion
           <span class="d-inline-flex">
             <v-img
               src="/images/promotion/danse.jpg"
               :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            >
-            </v-img>
+            />
           </span>
           , de votre structure culturelle.
           <span class="d-inline-flex">
             <v-img
               src="/images/promotion/cirque.jpg"
               :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            >
-            </v-img>
+            />
           </span>
         </p>
       </v-row>
@@ -44,37 +49,48 @@
           ]"
           @mouseover="zoomIn"
           @mouseleave="zoomOut"
-        ></v-img>
+        />
       </v-col>
     </v-row>
 
     <div class="outil">
       <h3 class="text-center text-outil">
-        Un outil complet et intuitif <br />
+        Un outil complet et intuitif <br>
         pour chaque structure
       </h3>
 
       <div v-if="smAndDown">
         <v-row>
-          <div class="horizontal-line"></div>
+          <div class="horizontal-line" />
           <div class="picto-group">
-            <v-img src="/images/pictoHome/picto1.svg" class="picto-sm"></v-img>
+            <v-img
+              src="/images/pictoHome/picto1.svg"
+              class="picto-sm"
+            />
             <p class="text-outil-sm">
               Logiciel de Gestion et communication en ligne
             </p>
           </div>
         </v-row>
         <v-row>
-          <div class="horizontal-line"></div>
+          <div class="horizontal-line" />
           <div class="picto-group">
-            <v-img src="/images/pictoHome/picto2.svg" class="picto-sm"></v-img>
-            <p class="text-outil-sm">Site Web intégré et simple d’usage</p>
+            <v-img
+              src="/images/pictoHome/picto2.svg"
+              class="picto-sm"
+            />
+            <p class="text-outil-sm">
+              Site Web intégré et simple d’usage
+            </p>
           </div>
         </v-row>
         <v-row>
-          <div class="horizontal-line"></div>
+          <div class="horizontal-line" />
           <div class="picto-group">
-            <v-img src="/images/pictoHome/picto3.svg" class="picto-sm"></v-img>
+            <v-img
+              src="/images/pictoHome/picto3.svg"
+              class="picto-sm"
+            />
             <p class="text-outil-sm">
               Boostez votre visibilité et votre communication avec l’agenda
               culturel
@@ -82,10 +98,15 @@
           </div>
         </v-row>
         <v-row>
-          <div class="horizontal-line"></div>
+          <div class="horizontal-line" />
           <div class="picto-group mb-12">
-            <v-img src="/images/pictoHome/picto4.svg" class="picto-sm"></v-img>
-            <p class="text-outil-sm">Communiquez en réseau</p>
+            <v-img
+              src="/images/pictoHome/picto4.svg"
+              class="picto-sm"
+            />
+            <p class="text-outil-sm">
+              Communiquez en réseau
+            </p>
           </div>
         </v-row>
       </div>
@@ -93,38 +114,52 @@
       <div v-if="!smAndDown">
         <v-row>
           <v-col cols="6">
-            <div class="horizontal-line"></div>
+            <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img src="/images/pictoHome/picto1.svg" class="picto" />
+              <img
+                src="/images/pictoHome/picto1.svg"
+                class="picto"
+              >
               <p class="text-outil-details">
                 Logiciel de Gestion et communication en ligne
               </p>
             </v-row>
-            <div class="horizontal-line"></div>
+            <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img src="/images/pictoHome/picto2.svg" class="picto" />
+              <img
+                src="/images/pictoHome/picto2.svg"
+                class="picto"
+              >
               <p class="text-outil-details">
                 Site Web intégré et simple d’usage
               </p>
             </v-row>
-            <div class="horizontal-line"></div>
+            <div class="horizontal-line" />
           </v-col>
 
           <v-col cols="6">
-            <div class="horizontal-line"></div>
+            <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img src="/images/pictoHome/picto3.svg" class="picto" />
+              <img
+                src="/images/pictoHome/picto3.svg"
+                class="picto"
+              >
               <p class="text-outil-details">
                 Boostez votre visibilité et votre communication avec l’agenda
                 culturel
               </p>
             </v-row>
-            <div class="horizontal-line"></div>
+            <div class="horizontal-line" />
             <v-row class="picto-container">
-              <img src="/images/pictoHome/picto4.svg" class="picto" />
-              <p class="text-outil-details">Communiquez en réseau</p>
+              <img
+                src="/images/pictoHome/picto4.svg"
+                class="picto"
+              >
+              <p class="text-outil-details">
+                Communiquez en réseau
+              </p>
             </v-row>
-            <div class="horizontal-line"></div>
+            <div class="horizontal-line" />
           </v-col>
         </v-row>
       </div>
@@ -133,8 +168,9 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { useDisplay } from "vuetify";
-const { mdAndDown, smAndDown } = useDisplay();
+const { smAndDown } = useDisplay();
 const isZoomed = ref(false);
 
 const zoomIn = () => {

components/Home/Reviews.vue

@@ -2,23 +2,38 @@
   <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"></v-icon>
-        <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
-          :itemsToScroll="1"
           ref="carousel"
+          :items-to-scroll="1"
           :autoplay="4000" 
-          :itemsToShow="2" :wrapAround="true" :transition="500"
+          :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-img :src="review.avatar"></v-img>
+                <v-avatar
+                  size="80"
+                  class="profile-img"
+                >
+                  <v-img :src="review.avatar" />
                 </v-avatar>
                 <v-card-title>
                   <span class="review-name">{{ review.name }}</span>
@@ -39,13 +54,23 @@
       </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-img src="/images/reviews/photo1.jpg"></v-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>
@@ -63,16 +88,21 @@
             <!-- card footer-->
             <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
 
-            <small class="structure"
-              >Conservatoire Musique & Danse Sens (78)</small
-            >
+            <small class="structure">Conservatoire Musique & Danse 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-img src="/images/reviews/photo1.jpg"></v-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>
@@ -90,19 +120,24 @@
             <!-- card footer-->
             <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
 
-            <small class="structure"
-              >Conservatoire Musique & Danse Sens (78)</small
-            >
+            <small class="structure">Conservatoire Musique & Danse Sens (78)</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-img src="/images/reviews/photo1.jpg"></v-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>
@@ -120,16 +155,21 @@
             <!-- card footer-->
             <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
 
-            <small class="structure"
-              >Conservatoire Musique & Danse Sens (78)</small
-            >
+            <small class="structure">Conservatoire Musique & Danse 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-img src="/images/reviews/photo1.jpg"></v-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>
@@ -147,9 +187,7 @@
             <!-- card footer-->
             <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
 
-            <small class="structure"
-              >Conservatoire Musique & Danse Sens (78)</small
-            >
+            <small class="structure">Conservatoire Musique & Danse Sens (78)</small>
           </v-card>
         </v-col>
       </v-row>
@@ -161,11 +199,17 @@
               Plus de 5 000 structures nous font confiance
             </h2>
             <div class="d-flex justify-center align-center">
-              <div class="carousel-button" @click="goPrevious">
-                <i class="fas fa-chevron-left"></i>
+              <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"></i>
+              <div
+                class="carousel-button"
+                @click="goNext"
+              >
+                <i class="fas fa-chevron-right" />
               </div>
             </div>
           </div>
@@ -173,14 +217,21 @@
       </v-row>
 
       <Carousel
-        class="carousel elevation-6"
-        :itemsToShow="4"
-        :itemsToScroll="2"
         ref="carousel"
+        class="carousel elevation-6"
+        :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>
@@ -194,11 +245,17 @@
               Plus de 5 000 structures nous font confiance
             </h2>
             <div class="d-flex justify-center align-center">
-              <div class="carousel-button-sm" @click="goPrevious">
-                <i class="fas fa-chevron-left"></i>
+              <div
+                class="carousel-button-sm"
+                @click="goPrevious"
+              >
+                <i class="fas fa-chevron-left" />
               </div>
-              <div class="carousel-button-sm" @click="goNext">
-                <i class="fas fa-chevron-right"></i>
+              <div
+                class="carousel-button-sm"
+                @click="goNext"
+              >
+                <i class="fas fa-chevron-right" />
               </div>
             </div>
           </div>
@@ -206,12 +263,15 @@
       </v-row>
 
       <Carousel
-        class="carousel-sm"
-        :itemsToShow="1"
-        :itemsToScroll="1"
         ref="carousel"
+        class="carousel-sm"
+        :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"
@@ -226,10 +286,11 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
-const { mdAndDown, smAndDown } = useDisplay();
+const { smAndDown } = useDisplay();
 const carousel = ref(null);
 
 const goPrevious = () => {

components/Home/Solution.vue

@@ -1,34 +1,46 @@
 <template>
   <LayoutContainer :overflow="false">
     <div class="d-flex justify-center align-center flex-column">
-      <v-icon size="8" class="fa-solid fa-circle icon-title"></v-icon>
-      <p class="text-center solution-subtitle">3 solutions</p>
+      <v-icon
+        size="8"
+        class="fa-solid fa-circle icon-title"
+      />
+      <p class="text-center solution-subtitle">
+        3 solutions
+      </p>
     </div>
     <h3
       class="text-center title"
       :style="smAndDown ? '' : 'margin-bottom: 3rem'"
     >
-      Trouvez la solution <br />
+      Trouvez la solution <br>
       faite pour vous
     </h3>
 
     <v-row v-if="!smAndDown">
       <v-col
-        cols="4"
-        class="col-info"
         v-for="(solution, index) in solutions"
         :key="index"
+        cols="4"
+        class="col-info"
       >
         <div class="opentalent-container">
           <small class="opentalent-small">Opentalent</small>
-          <h2 class="logiciel-name">{{ solution.name }}</h2>
-          <hr class="bar" />
-          <p class="description-logiciel">{{ solution.description }}</p>
+          <h2 class="logiciel-name">
+            {{ solution.name }}
+          </h2>
+          <hr class="bar">
+          <p class="description-logiciel">
+            {{ solution.description }}
+          </p>
 
           <nuxt-link :to="solution.link">
             <v-row>
               <div :class="solution.class">
-                <v-img :src="solution.image" class="logo"></v-img>
+                <v-img
+                  :src="solution.image"
+                  class="logo"
+                />
               </div>
             </v-row>
           </nuxt-link>
@@ -37,9 +49,9 @@
             <v-col cols="6">
               <ul class="list-solutions">
                 <li
-                  class="details-solution"
                   v-for="(sol, i) in solution.solutions.slice(0, 4)"
                   :key="'sol-' + i"
+                  class="details-solution"
                 >
                   {{ sol }}
                 </li>
@@ -48,9 +60,9 @@
             <v-col cols="6">
               <ul class="list-solutions">
                 <li
-                  class="details-solution"
                   v-for="(sol, i) in solution.solutions.slice(4)"
                   :key="'sol-' + i"
+                  class="details-solution"
                 >
                   {{ sol }}
                 </li>
@@ -63,26 +75,39 @@
 
     <div v-if="smAndDown">
       <div class="d-flex justify-center align-center">
-        <div class="carousel-button" @click="goPrevious">
-          <i class="fas fa-chevron-left"></i>
+        <div
+          class="carousel-button"
+          @click="goPrevious"
+        >
+          <i class="fas fa-chevron-left" />
         </div>
-        <div class="carousel-button ml-6" @click="goNext">
-          <i class="fas fa-chevron-right"></i>
+        <div
+          class="carousel-button ml-6"
+          @click="goNext"
+        >
+          <i class="fas fa-chevron-right" />
         </div>
       </div>
       <Carousel
-        :itemsToShow="1.5"
-        :itemsToScroll="1"
-        v-slot="{ carousel: _carousel }"
         ref="carousel"
+        :items-to-show="1.5"
+        :items-to-scroll="1"
       >
-        <Slide v-for="(solution, index) in solutions" :key="index">
-          <v-col cols="12" class="col-info-sm">
+        <Slide
+          v-for="(solution, index) in solutions"
+          :key="index"
+        >
+          <v-col
+            cols="12"
+            class="col-info-sm"
+          >
             <div class="opentalent-container">
               <small class="opentalent-small-sm">Opentalent</small>
 
-              <h2 class="logiciel-name-sm">{{ solution.name }}</h2>
-              <hr class="bar-sm" />
+              <h2 class="logiciel-name-sm">
+                {{ solution.name }}
+              </h2>
+              <hr class="bar-sm">
               <p class="description-logiciel-sm">
                 {{ solution.description }}
               </p>
@@ -90,7 +115,10 @@
               <nuxt-link :to="solution.link">
                 <v-row>
                   <div :class="solution.class">
-                    <v-img :src="solution.image" class="logo-sm"></v-img>
+                    <v-img
+                      :src="solution.image"
+                      class="logo-sm"
+                    />
                   </div>
                 </v-row>
               </nuxt-link>
@@ -98,20 +126,23 @@
                 <v-col cols="6">
                   <ul class="list-solutions-sm">
                     <li
-                      class="details-solution-sm"
                       v-for="(sol, i) in solution.solutions.slice(0, 4)"
                       :key="'sol-' + i"
+                      class="details-solution-sm"
                     >
                       {{ sol }}
                     </li>
                   </ul>
                 </v-col>
-                <v-col cols="6" class="solution-column">
+                <v-col
+                  cols="6"
+                  class="solution-column"
+                >
                   <ul class="list-solutions-sm">
                     <li
-                      class="details-solution-sm"
                       v-for="(sol, i) in solution.solutions.slice(4)"
                       :key="'sol-' + i"
+                      class="details-solution-sm"
                     >
                       {{ sol }}
                     </li>
@@ -127,10 +158,11 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
-const { lgAndUp, smAndDown } = useDisplay();
+const { smAndDown } = useDisplay();
 
 const carousel = ref(null);
 

components/JoinUs/Banner.vue

@@ -1,15 +1,24 @@
 <template>
   <LayoutContainer>
     <v-row>
-      <v-col cols="12" class="title">
-        <h1 class="text-center">Nous rejoindre</h1>
+      <v-col
+        cols="12"
+        class="title"
+      >
+        <h1 class="text-center">
+          Nous rejoindre
+        </h1>
       </v-col>
     </v-row>
 
     <v-row>
       <v-col cols="12">
         <div class="banner-container">
-          <img src="/images/join/join.jpg" alt="line" class="cover-image" />
+          <img
+            src="/images/join/join.jpg"
+            alt="line"
+            class="cover-image"
+          >
         </div>
       </v-col>
     </v-row>

components/JoinUs/Missions.vue

@@ -1,32 +1,57 @@
 <template>
   <LayoutContainer>
-    <div class="mission-container" v-for="(job, index) in jobs" :key="index">
+    <div
+      v-for="(job, jobIndex) in jobs"
+      :key="jobIndex"
+      class="mission-container"
+    >
       <v-row>
         <v-col cols="2">
-          <v-img class="logo-img" :src="job.image"></v-img>
+          <v-img
+            class="logo-img"
+            :src="job.image"
+          />
         </v-col>
 
         <v-col cols="6">
           <v-row class="job-details">
-            <h6 class="title-job">{{ job.title }}</h6>
-            <h6 class="contrat-job">{{ job.contractType }}</h6>
-            <h6 class="location-job">{{ job.location }}</h6>
-            <p class="description-job">{{ job.description }}</p>
+            <h6 class="title-job">
+              {{ job.title }}
+            </h6>
+            <h6 class="contrat-job">
+              {{ job.contractType }}
+            </h6>
+            <h6 class="location-job">
+              {{ job.location }}
+            </h6>
+            <p class="description-job">
+              {{ job.description }}
+            </p>
           </v-row>
 
           <v-row>
             <div class="container-btn">
-              <v-btn class="btn-apply" text> Postuler </v-btn>
-              <v-btn class="btn-more ml-4" text> En savoir plus </v-btn>
+              <v-btn
+                class="btn-apply"
+                text
+              >
+                Postuler
+              </v-btn>
+              <v-btn
+                class="btn-more ml-4"
+                text
+              >
+                En savoir plus
+              </v-btn>
             </div>
           </v-row>
         </v-col>
 
         <v-col cols="3">
           <v-chip
+            v-for="(property, propertyIndex) in job.properties"
+            :key="propertyIndex"
             class="ma-2"
-            v-for="(property, index) in job.properties"
-            :key="index"
           >
             <span class="white--text">{{ property }}</span>
           </v-chip>
@@ -35,19 +60,24 @@
     </div>
 
     <v-row class="apply-row">
-      <h3 class="apply">Candidature spontanée</h3>
+      <h3 class="apply">
+        Candidature spontanée
+      </h3>
       <p class="apply-now">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
         quae fugit maxime illo reiciendis excepturi laborum sed dicta impedit
         minima minus eveniet, ipsam voluptatum beatae asperiores aut accusamus
         autem magnam.
       </p>
-      <v-btn class="btn-apply"> Envoyer ma candidature </v-btn>
+      <v-btn class="btn-apply">
+        Envoyer ma candidature
+      </v-btn>
     </v-row>
   </LayoutContainer>
 </template>
 
 <script setup>
+import { ref } from "vue";
 const jobs = ref([
   {
     id: 1,

components/Layout/Container.vue

@@ -1,7 +1,17 @@
 <template>
-  <v-container class="container" :style="overflow ? 'overflow: hidden;' : ''">
-    <v-row justify="center" align="center">
-      <v-col cols="12" sm="12" md="12">
+  <v-container
+    class="container"
+    :style="overflow ? 'overflow: hidden;' : ''"
+  >
+    <v-row
+      justify="center"
+      align="center"
+    >
+      <v-col
+        cols="12"
+        sm="12"
+        md="12"
+      >
         <slot />
       </v-col>
     </v-row>

components/Layout/FAQ.vue

@@ -2,12 +2,12 @@
   <div id="Aide">
     <LayoutContainer>
       <div class="container-img">
-        <div class="overlay"></div>
+        <div class="overlay" />
         <v-row>
           <v-col cols="6">
             <div class="container-left">
               <div class="container-title">
-                <v-icon class="fa-brands fa-react icon-title"></v-icon>
+                <v-icon class="fa-brands fa-react icon-title" />
                 <h5 class="subtitle-faq">
                   Vous voulez tirer le meilleur de notre logiciel ?
                 </h5>
@@ -17,7 +17,9 @@
                 vous guider
               </h3>
 
-              <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+              <v-btn class="btn-faq">
+                Consulter notre FAQ
+              </v-btn>
             </div>
           </v-col>
 
@@ -25,7 +27,7 @@
             <div class="btn-container">
               <v-btn class="btn-faq-tuto">
                 <div class="container-button">
-                  <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                  <v-icon class="fa-brands fa-react icon-button" />
                   <p class="text-btn">
                     De nombreux articles tutoriels accessibles 24h/24
                   </p>
@@ -34,7 +36,7 @@
 
               <v-btn class="btn-faq-tuto">
                 <div class="container-button">
-                  <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                  <v-icon class="fa-brands fa-react icon-button" />
                   <p class="text-btn">
                     De nombreux articles tutoriels accessibles 24h/24
                   </p>

components/Layout/Footer.vue

@@ -1,35 +1,33 @@
 <template>
   <LayoutContainer>
-    <div v-if="lgAndUp" class="activities">
+    <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"
-          ></v-img>
+          />
           <small class="text-logo-jaune">
-            Orchestres, chorales, danse, théatre, cirque</small
-          >
+            Orchestres, chorales, danse, théatre, cirque</small>
         </v-col>
 
         <v-col cols="3">
           <v-img
             class="logo logo-rouge"
             src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
-          ></v-img>
-          <small class="text-logo-rouge"
-            >Fédérations, confédérations, collectivités</small
-          >
+          />
+          <small class="text-logo-rouge">Fédérations, confédérations, collectivités</small>
         </v-col>
 
         <v-col cols="4">
           <v-img
             class="logo logo-bleu"
             src="/images/logo_school_white.png"
-          ></v-img>
-          <small class="text-logo-bleu"
-            >Tous les établissements d'enseignement artistique</small
-          >
+          />
+          <small class="text-logo-bleu">Tous les établissements d'enseignement artistique</small>
         </v-col>
       </v-row>
     </div>
@@ -46,13 +44,16 @@
               src="/images/Logo-blanc.png"
               width="294px"
               height="49px"
-            ></v-img>
+            />
           </v-col>
 
-          <v-col :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : ''">
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'"
-              >Liens Rapides</v-row
-            >
+          <v-col
+            :cols="smAndDown ? 6 : 2"
+            :class="smAndDown ? 'link-sm' : ''"
+          >
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+              Liens Rapides
+            </v-row>
             <v-row>
               <small class="small-link">A propos</small>
             </v-row>
@@ -64,10 +65,13 @@
             </v-row>
           </v-col>
 
-          <v-col :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : ''">
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'"
-              >Informations</v-row
-            >
+          <v-col
+            :cols="smAndDown ? 6 : 2"
+            :class="smAndDown ? 'link-sm' : ''"
+          >
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+              Informations
+            </v-row>
             <v-row>
               <small class="small-link">FAQ</small>
             </v-row>
@@ -82,10 +86,13 @@
             </v-row>
           </v-col>
 
-          <v-col :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : ''">
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'"
-              >Espace client</v-row
-            >
+          <v-col
+            :cols="smAndDown ? 6 : 2"
+            :class="smAndDown ? 'link-sm' : ''"
+          >
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+              Espace client
+            </v-row>
             <v-row>
               <small class="small-link">Mon compte</small>
             </v-row>
@@ -94,22 +101,25 @@
             </v-row>
           </v-col>
 
-          <v-col :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : ''">
-            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'"
-              >Liens Rapides</v-row
-            >
+          <v-col
+            :cols="smAndDown ? 6 : 2"
+            :class="smAndDown ? 'link-sm' : ''"
+          >
+            <v-row :class="smAndDown ? 'title-link-sm' : 'title-link'">
+              Liens Rapides
+            </v-row>
 
             <v-row>
               <v-col :cols="smAndDown ? 4 : 2">
-                <v-icon class="fab fa-facebook"></v-icon>
+                <v-icon class="fab fa-facebook" />
               </v-col>
 
               <v-col :cols="smAndDown ? 4 : 2">
-                <v-icon class="fab fa-linkedin"></v-icon>
+                <v-icon class="fab fa-linkedin" />
               </v-col>
 
               <v-col :cols="smAndDown ? 4 : 2">
-                <v-icon class="fab fa-youtube"></v-icon>
+                <v-icon class="fab fa-youtube" />
               </v-col>
             </v-row>
           </v-col>
@@ -121,7 +131,7 @@
 
 <script setup>
 import { useDisplay } from "vuetify";
-const { mdAndDown, smAndDown, lgAndUp } = useDisplay();
+const { smAndDown, lgAndUp } = useDisplay();
 </script>
 
 <style scoped>

components/Layout/Navigation.vue

@@ -4,43 +4,91 @@
       justify="space-between"
       :class="mdAndDown ? 'menu-bar' : ' menu-bar custom-row'"
     >
-      <v-col :cols="mdAndDown ? 8 : 6" sm="8" md="2">
+      <v-col
+        :cols="mdAndDown ? 8 : 6"
+        sm="8"
+        md="2"
+      >
         <nuxt-link to="/">
-          <v-img class="logo" src="/images/Opentalent.png"></v-img>
+          <v-img
+            class="logo"
+            src="/images/Opentalent.png"
+          />
         </nuxt-link>
       </v-col>
 
-      <v-col v-if="mdAndDown" cols="3">
-        <div class="colored-square"></div>
+      <v-col
+        v-if="mdAndDown"
+        cols="3"
+      >
+        <div class="colored-square" />
       </v-col>
 
-      <v-col v-if="!mdAndDown" cols="12" sm="7" md="5">
-        <nuxt-link class="common-styles menu-link" to="/about"
-          >A propos</nuxt-link
+      <v-col
+        v-if="!mdAndDown"
+        cols="12"
+        sm="7"
+        md="5"
+      >
+        <nuxt-link
+          class="common-styles menu-link"
+          to="/about"
         >
-        <nuxt-link class="common-styles menu-link" to="/software"
-          >Nos logiciels</nuxt-link
+          A propos
+        </nuxt-link>
+        <nuxt-link
+          class="common-styles menu-link"
+          to="/software"
         >
-        <nuxt-link class="common-styles menu-link" to="/directory"
-          >Annuaire</nuxt-link
+          Nos logiciels
+        </nuxt-link>
+        <nuxt-link
+          class="common-styles menu-link"
+          to="/directory"
         >
-        <nuxt-link class="common-styles menu-link" to="/news"
-          >Actualités</nuxt-link
+          Annuaire
+        </nuxt-link>
+        <nuxt-link
+          class="common-styles menu-link"
+          to="/news"
         >
+          Actualités
+        </nuxt-link>
       </v-col>
 
-      <v-col v-if="!mdAndDown" cols="12" sm="12" md="5" class="buttons-col">
-        <v-btn class="btn btn-common common-styles btn-login" text>
-          <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter
+      <v-col
+        v-if="!mdAndDown"
+        cols="12"
+        sm="12"
+        md="5"
+        class="buttons-col"
+      >
+        <v-btn
+          class="btn btn-common common-styles btn-login"
+          text
+        >
+          <v-icon
+            left
+            class="fas fa-user mr-4"
+          /> Se connecter
         </v-btn>
-        <v-btn class="btn btn-common common-styles btn-subscribe ml-4" text>
-          <v-icon left class="fas fa-bell mr-4"></v-icon>Vous abonner
+        <v-btn
+          class="btn btn-common common-styles btn-subscribe ml-4"
+          text
+        >
+          <v-icon
+            left
+            class="fas fa-bell mr-4"
+          />Vous abonner
         </v-btn>
 
-        <div class="vertical-bar"></div>
+        <div class="vertical-bar" />
 
-        <nuxt-link class="common-styles btn-contact" to="/contact">
-          <v-icon class="fas fa-comment-dots mr-2"></v-icon>Nous contacter
+        <nuxt-link
+          class="common-styles btn-contact"
+          to="/contact"
+        >
+          <v-icon class="fas fa-comment-dots mr-2" />Nous contacter
         </nuxt-link>
       </v-col>
     </v-row>
@@ -49,7 +97,7 @@
 
 <script setup>
 import { useDisplay } from "vuetify";
-const { mdAndDown, smAndDown } = useDisplay();
+const { mdAndDown } = useDisplay();
 </script>
 
 <style scoped>

components/Logiciels/Artist/Accompagnement.vue

@@ -4,8 +4,13 @@
       <div class="container-green">
         <v-row>
           <div class="d-flex justify-center align-center mt-6">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-            <h5 class="subtitle">pour aller plus loin</h5>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
+            <h5 class="subtitle">
+              pour aller plus loin
+            </h5>
           </div>
         </v-row>
 
@@ -14,7 +19,7 @@
             <v-img
               src="/images/logiciels/school/reunion.jpg"
               class="reunion-img"
-            ></v-img>
+            />
           </v-col>
 
           <v-col cols="6">
@@ -26,7 +31,9 @@
               eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
 
-            <v-btn class="formation-btn">S’incrire à une session</v-btn>
+            <v-btn class="formation-btn">
+              S’incrire à une session
+            </v-btn>
           </v-col>
         </v-row>
       </div>
@@ -37,21 +44,33 @@
           class="d-flex justify-center align-center small-padding"
         >
           <div class="card">
-            <h3 class="chiffre">XXX</h3>
+            <h3 class="chiffre">
+              XXX
+            </h3>
             <p>utilisateurs</p>
           </div>
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
           <div class="card">
-            <h3 class="chiffre">XXX</h3>
+            <h3 class="chiffre">
+              XXX
+            </h3>
             <p>utilisateurs</p>
           </div>
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
           <div class="card">
-            <h3 class="chiffre">XXX</h3>
+            <h3 class="chiffre">
+              XXX
+            </h3>
             <p>utilisateurs</p>
           </div>
         </v-col>
@@ -61,7 +80,7 @@
         <LogicielsSchoolCaroussel />
       </v-row>
 
-      <v-row> </v-row>
+      <v-row />
     </LayoutContainer>
   </div>
 </template>

components/Logiciels/Artist/Avantages.vue

@@ -3,24 +3,31 @@
     <LayoutContainer>
       <v-row>
         <div class="d-flex justify-center align-center">
-          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <v-icon
+            size="10"
+            class="fa-solid fa-circle icon-title"
+          />
           <h5 class="subtitle-avantage">
             Découvrez les avantages de la solution
           </h5>
         </div>
       </v-row>
       <v-row>
-        <h3 class="title">Des avantages concrets</h3>
+        <h3 class="title">
+          Des avantages concrets
+        </h3>
       </v-row>
 
       <v-row class="row">
         <v-col cols="4">
           <div class="title-card">
-            <h4 class="description-card">Une gestion collaborative</h4>
+            <h4 class="description-card">
+              Une gestion collaborative
+            </h4>
             <span class="number-card">03</span>
           </div>
 
-          <hr />
+          <hr>
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.
@@ -32,20 +39,24 @@
             <span class="number-card">03</span>
           </div>
 
-          <hr />
+          <hr>
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.
           </p>
-          <p><v-chip class="chip-card">Membre cmf</v-chip></p>
-          <v-img src="/images/logiciels/school/screen3.png"></v-img>
+          <p>
+            <v-chip class="chip-card">
+              Membre cmf
+            </v-chip>
+          </p>
+          <v-img src="/images/logiciels/school/screen3.png" />
         </v-col>
         <v-col cols="4">
           <div class="title-card">
             <h4>Une gestion collaborative</h4>
             <span class="number-card">03</span>
           </div>
-          <hr />
+          <hr>
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.

components/Logiciels/Artist/Banner.vue

@@ -2,13 +2,22 @@
   <LayoutContainer>
     <v-row>
       <div class="container-title">
-        <v-col cols="4" class="text-left">
+        <v-col
+          cols="4"
+          class="text-left"
+        >
           <h1>Manager</h1>
         </v-col>
-        <v-col cols="4" class="logiciel">
+        <v-col
+          cols="4"
+          class="logiciel"
+        >
           <h1>Opentalent Artist</h1>
         </v-col>
-        <v-col cols="4" class="text-right">
+        <v-col
+          cols="4"
+          class="text-right"
+        >
           <h1>School</h1>
         </v-col>
       </div>
@@ -21,11 +30,14 @@
             src="/images/logiciels/artist/banner.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"></v-icon>
+                <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
@@ -39,7 +51,7 @@
               src="/images/opentalent_artist_black.png"
               alt="Logo"
               class="logo-image"
-            />
+            >
           </div>
         </div>
       </v-col>

components/Logiciels/Artist/FAQ.vue

@@ -5,7 +5,7 @@
         <v-col cols="6">
           <div class="container-left">
             <div class="container-title">
-              <v-icon class="fa-brands fa-react icon-title"></v-icon>
+              <v-icon class="fa-brands fa-react icon-title" />
               <h5 class="subtitle-faq">
                 Vous voulez tirer le meilleur de notre logiciel ?
               </h5>
@@ -15,7 +15,9 @@
               vous guider
             </h3>
 
-            <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+            <v-btn class="btn-faq">
+              Consulter notre FAQ
+            </v-btn>
           </div>
         </v-col>
 
@@ -23,7 +25,7 @@
           <div class="btn-container">
             <v-btn class="btn-faq-tuto">
               <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                <v-icon class="fa-brands fa-react icon-button" />
                 <p class="text-btn">
                   De nombreux articles tutoriels accessibles 24h/24
                 </p>
@@ -32,7 +34,7 @@
 
             <v-btn class="btn-faq-tuto">
               <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                <v-icon class="fa-brands fa-react icon-button" />
                 <p class="text-btn">
                   De nombreux articles tutoriels accessibles 24h/24
                 </p>

components/Logiciels/Artist/Fonctionnalites.vue

@@ -4,7 +4,7 @@
       <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 class="fa-brands fa-react icon-title" />
             <h4 class="subtitle-fontionnalite">
               Découvrez toutes les foncitonnalités de notre solution
             </h4>
@@ -20,7 +20,7 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -34,7 +34,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -48,7 +48,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -62,7 +62,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -78,7 +78,7 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -92,7 +92,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -106,7 +106,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -120,7 +120,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -136,7 +136,7 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -150,7 +150,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -164,7 +164,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -178,7 +178,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>

components/Logiciels/Artist/MenuScroll.vue

@@ -2,11 +2,23 @@
   <div id="Presentation">
     <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>
+        <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>

components/Logiciels/Artist/Outil.vue

@@ -4,11 +4,16 @@
       <v-row class="outil-row">
         <v-col cols="4">
           <div class="title">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
             <h4>Présentation d'opentalent artist</h4>
           </div>
-          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
-          </v-img>
+          <v-img
+            src="/images/logiciels/school/screen.jpg"
+            class="screen-img"
+          />
 
           <div class="rectangle-4">
             <div class="black-circle">
@@ -16,16 +21,19 @@
                 <v-img
                   src="/images/OpenTalent_LogoNoir_Jaune_white.png"
                   class="logo-artist"
-                >
-                </v-img>
-                <p class="devis">Sur devis</p>
+                />
+                <p class="devis">
+                  Sur devis
+                </p>
               </div>
             </div>
           </div>
         </v-col>
 
         <v-col cols="5">
-          <h2 class="outil-title">Un outil complet en ligne</h2>
+          <h2 class="outil-title">
+            Un outil complet en ligne
+          </h2>
           <ul class="outil-ul">
             <li class="outil-list">
               Logiciel de gestion et communication en ligne
@@ -37,7 +45,9 @@
               Gestion quotidienne et en temps réel (suivi pédagogique,
               facturation, encaissement…)
             </li>
-            <li class="outil-list">Pilotage complet de votre structure</li>
+            <li class="outil-list">
+              Pilotage complet de votre structure
+            </li>
           </ul>
         </v-col>
 
@@ -45,21 +55,25 @@
           <div class="container-square">
             <v-row>
               <div class="yellow-square">
-                <v-icon class="fa-regular fa-comments icon"></v-icon>
-                <p class="text-square">Nous contacter</p>
+                <v-icon class="fa-regular fa-comments icon" />
+                <p class="text-square">
+                  Nous contacter
+                </p>
               </div>
             </v-row>
 
             <v-row>
               <div class="yellow-square">
-                <v-icon class="fa-regular fa-circle-info icon"></v-icon>
-                <p class="text-square">Demander une demo</p>
+                <v-icon class="fa-regular fa-circle-info icon" />
+                <p class="text-square">
+                  Demander une demo
+                </p>
               </div>
             </v-row>
           </div>
         </v-col>
         <v-row>
-          <v-col cols="4"> </v-col>
+          <v-col cols="4" />
 
           <v-col cols="5">
             <h2>Des caractéristiques uniques & dédiées</h2>
@@ -68,7 +82,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/artist/picto1.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Logiciel de gestion & communication full web
                 </p>
@@ -78,7 +92,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/artist/picto2.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Boostez votre visibilité & votre communication
                 </p>
@@ -88,7 +102,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/artist/picto3.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Boostez votre visibilité & votre communication
                 </p>
@@ -98,13 +112,15 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/artist/picto4.png"
-                ></v-img>
-                <p class="picto-text">Communiquez en réseau</p>
+                />
+                <p class="picto-text">
+                  Communiquez en réseau
+                </p>
               </div>
             </div>
           </v-col>
 
-          <v-col cols="2"> </v-col>
+          <v-col cols="2" />
         </v-row>
       </v-row>
 
@@ -119,9 +135,13 @@
         </v-row>
 
         <v-col cols="6">
-          <h6 class="subtitle-logiciel">Logiciel Opentalent</h6>
-          <v-img src="/images/logiciels/school/screen2.png" class="screen2-img">
-          </v-img>
+          <h6 class="subtitle-logiciel">
+            Logiciel Opentalent
+          </h6>
+          <v-img
+            src="/images/logiciels/school/screen2.png"
+            class="screen2-img"
+          />
         </v-col>
       </v-row>
     </LayoutContainer>

components/Logiciels/Artist/Premium.vue

@@ -3,51 +3,82 @@
     <LayoutContainer>
       <v-row>
         <div class="d-flex justify-center align-center">
-          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-          <h5 class="subtitle">Comparatif de nos solutions</h5>
+          <v-icon
+            size="10"
+            class="fa-solid fa-circle icon-title"
+          />
+          <h5 class="subtitle">
+            Comparatif de nos solutions
+          </h5>
         </div>
       </v-row>
       <v-row>
-        <h3 class="title">Et si vous passiez à la version Premium</h3>
+        <h3 class="title">
+          Et si vous passiez à la version Premium
+        </h3>
       </v-row>
 
       <table class="table-comparatif">
         <thead>
           <tr>
-            <th class="thead"></th>
-            <th class="thead"></th>
+            <th class="thead" />
+            <th class="thead" />
             <th class="thead">
-              <p class="standard">Standard</p>
-              <p class="from">A partir de</p>
-              <p class="price">11 <span class="ttc">ttc</span></p>
-              <p class="month">/mois</p>
+              <p class="standard">
+                Standard
+              </p>
+              <p class="from">
+                A partir de
+              </p>
+              <p class="price">
+                11 <span class="ttc">ttc</span>
+              </p>
+              <p class="month">
+                /mois
+              </p>
             </th>
             <th class="thead premium-column">
-              <p class="standard">Premium</p>
-              <p class="from">A partir de</p>
-              <p class="price">18 <span class="ttc">ttc</span></p>
-              <p class="month">/mois</p>
+              <p class="standard">
+                Premium
+              </p>
+              <p class="from">
+                A partir de
+              </p>
+              <p class="price">
+                18 <span class="ttc">ttc</span>
+              </p>
+              <p class="month">
+                /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 table-data-left">{{ row.column1 }}</td>
-            <td class="table-data">{{ row.column2 }}</td>
+          <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-if="row.column3 == 'check'"
-              ></v-icon>
+              />
               <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-if="row.column4 == 'check'"
-              ></v-icon>
+              />
               <span v-else>{{ row.column4 }}</span>
             </td>
           </tr>

components/Logiciels/Artist/Projet.vue

@@ -4,8 +4,13 @@
       <v-row>
         <v-col cols="3">
           <div class="d-flex justify-center align-center">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-            <h5 class="subtitle-abo">S'abonner dès maintenant</h5>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
+            <h5 class="subtitle-abo">
+              S'abonner dès maintenant
+            </h5>
           </div>
         </v-col>
 
@@ -30,7 +35,7 @@
           <v-img
             class="logo-cmf"
             src="/images/logiciels/school/cmf_logo_orange.png"
-          ></v-img>
+          />
         </v-col>
         <v-col cols="10">
           <div class="cmf-container">
@@ -48,26 +53,44 @@
       </v-row>
 
       <v-row>
-        <v-col cols="4" class="border-col">
+        <v-col
+          cols="4"
+          class="border-col"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
+            <v-icon
+              size="35"
+              class="fa-brands fa-react icon"
+            />
           </div>
           <p class="d-flex justify-center align-center details">
             Paiement Sécurisé
           </p>
         </v-col>
-        <v-col cols="4" class="border-col">
+        <v-col
+          cols="4"
+          class="border-col"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
+            <v-icon
+              size="35"
+              class="fa-brands fa-react icon"
+            />
           </div>
           <p class="d-flex justify-center align-center details">
             Service clef en main
           </p>
         </v-col>
 
-        <v-col cols="4" class="border-col">
+        <v-col
+          cols="4"
+          class="border-col"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
+            <v-icon
+              size="35"
+              class="fa-brands fa-react icon"
+            />
           </div>
           <p class="d-flex justify-center align-center details">
             Soutien pour votre activité

components/Logiciels/Artist/Reviews.vue

@@ -4,25 +4,36 @@
       <div class="container-green">
         <v-row>
           <v-col cols="4">
-            <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
+            <h3 class="reviews-title">
+              C'est eux qui en parlent le mieux
+            </h3>
             <div class="d-flex justify-center align-center">
-              <div class="carousel-button" @click="goPrevious">
-                <i class="fas fa-chevron-left"></i>
+              <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"></i>
+              <div
+                class="carousel-button"
+                @click="goNext"
+              >
+                <i class="fas fa-chevron-right" />
               </div>
             </div>
           </v-col>
 
           <v-col cols="8">
             <Carousel
-              :itemsToShow="3"
-              :itemsToScroll="1"
-              v-slot="{ carousel: _carousel }"
               ref="carousel"
+              :items-to-show="3"
+              :items-to-scroll="1"
             >
-              <Slide class="card" v-for="(card, index) in cards" :key="index">
+              <Slide
+                v-for="(card, index) in cards"
+                :key="index"
+                class="card"
+              >
                 <div class="card-container">
                   <v-card>
                     <v-card-item>
@@ -35,8 +46,12 @@
                           {{ card.name }}
                         </v-card-actions>
 
-                        <p class="reviewer-status">{{ card.status }}</p>
-                        <p class="reviewer-structure">{{ card.structure }}</p>
+                        <p class="reviewer-status">
+                          {{ card.status }}
+                        </p>
+                        <p class="reviewer-structure">
+                          {{ card.structure }}
+                        </p>
                       </div>
                     </v-card-item>
                   </v-card>
@@ -51,6 +66,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 

components/Logiciels/Artist/Solutions.vue

@@ -10,29 +10,52 @@
 
     <v-row class="row-artist">
       <v-col cols="3">
-        <v-img src="/images/opentalent_artist_black.png" class="logo"> </v-img>
+        <v-img
+          src="/images/opentalent_artist_black.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>
@@ -41,29 +64,57 @@
 
     <v-row class="row-artist">
       <v-col cols="3">
-        <v-img src="/images/opentalent_manager_black.jpg" class="logo"> </v-img>
+        <v-img
+          src="/images/opentalent_manager_black.jpg"
+          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>

components/Logiciels/Manager/Accompagnement.vue

@@ -3,7 +3,7 @@
     <LayoutContainer>
       <div class="container-green">
         <div class="container-title">
-          <v-icon class="fa-brands fa-react icon-title"></v-icon>
+          <v-icon class="fa-brands fa-react icon-title" />
           <h4 class="subtitle-accompagnement">
             Nos accompagnements pour aller plus loin
           </h4>
@@ -16,7 +16,7 @@
                 <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">
@@ -27,9 +27,9 @@
                   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
-                >
+                <v-btn class="session-btn left">
+                  S’incrire à une formation
+                </v-btn>
               </div>
             </v-col>
 
@@ -38,7 +38,7 @@
                 <v-img
                   src="/images/logiciels/manager/Webinaire.png"
                   class="accompagnement-img"
-                ></v-img>
+                />
 
                 <small class="session">X sessions disponibles</small>
                 <h5 class="session-name">
@@ -49,7 +49,9 @@
                   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>
+                <v-btn class="session-btn">
+                  S’incrire à une formation
+                </v-btn>
               </div>
             </v-col>
           </v-row>
@@ -64,14 +66,20 @@
           </div>
         </v-col>
 
-        <v-col cols="4" class="d-flex justify-center align-center">
+        <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">
+        <v-col
+          cols="4"
+          class="d-flex justify-center align-center"
+        >
           <div class="card">
             <h3>30 1500</h3>
             <p>elèves</p>
@@ -82,7 +90,10 @@
       <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>
+      <v-img
+        src="/images/logiciels/manager/cmf.jpg"
+        class="cmf-img"
+      />
     </LayoutContainer>
   </div>
 </template>

components/Logiciels/Manager/Agenda.vue

@@ -5,7 +5,7 @@
         <h3>L'agenda Opentalent</h3>
       </v-col>
 
-      <v-col cols="4"> </v-col>
+      <v-col cols="4" />
 
       <v-col cols="4">
         <v-btn>Tous les évèvenements</v-btn>
@@ -20,7 +20,9 @@
             src="/images/logiciels/school/enseignement.jpg"
             class="enseignement"
           >
-            <v-card-title class="title">Enseignement</v-card-title>
+            <v-card-title class="title">
+              Enseignement
+            </v-card-title>
           </v-img>
         </v-card>
       </v-col>
@@ -31,7 +33,9 @@
             src="/images/logiciels/school/enseignement.jpg"
             class="enseignement"
           >
-            <v-card-title class="title">Enseignement</v-card-title>
+            <v-card-title class="title">
+              Enseignement
+            </v-card-title>
           </v-img>
         </v-card>
       </v-col>
@@ -42,7 +46,9 @@
             src="/images/logiciels/school/enseignement.jpg"
             class="enseignement"
           >
-            <v-card-title class="title">Enseignement</v-card-title>
+            <v-card-title class="title">
+              Enseignement
+            </v-card-title>
           </v-img>
         </v-card>
       </v-col>

components/Logiciels/Manager/Avantages.vue

@@ -3,24 +3,31 @@
     <LayoutContainer>
       <v-row>
         <div class="d-flex justify-center align-center">
-          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <v-icon
+            size="10"
+            class="fa-solid fa-circle icon-title"
+          />
           <h5 class="subtitle-avantage">
             Découvrez les avantages de la solution
           </h5>
         </div>
       </v-row>
       <v-row>
-        <h3 class="title">Des avantages concrets</h3>
+        <h3 class="title">
+          Des avantages concrets
+        </h3>
       </v-row>
 
       <v-row class="row">
         <v-col cols="4">
           <div class="title-card">
-            <h4 class="description-card">Une gestion collaborative</h4>
+            <h4 class="description-card">
+              Une gestion collaborative
+            </h4>
             <span class="number-card">03</span>
           </div>
 
-          <hr />
+          <hr>
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.
@@ -32,20 +39,24 @@
             <span class="number-card">03</span>
           </div>
 
-          <hr />
+          <hr>
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.
           </p>
-          <p><v-chip class="chip-card">Membre cmf</v-chip></p>
-          <v-img src="/images/logiciels/school/screen3.png"></v-img>
+          <p>
+            <v-chip class="chip-card">
+              Membre cmf
+            </v-chip>
+          </p>
+          <v-img src="/images/logiciels/school/screen3.png" />
         </v-col>
         <v-col cols="4">
           <div class="title-card">
             <h4>Une gestion collaborative</h4>
             <span class="number-card">03</span>
           </div>
-          <hr />
+          <hr>
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.

components/Logiciels/Manager/Banner.vue

@@ -2,13 +2,22 @@
   <LayoutContainer>
     <v-row>
       <div class="container-title">
-        <v-col cols="4" class="text-left">
+        <v-col
+          cols="4"
+          class="text-left"
+        >
           <h1>School</h1>
         </v-col>
-        <v-col cols="4" class="logiciel">
+        <v-col
+          cols="4"
+          class="logiciel"
+        >
           <h1>Opentalent Manager</h1>
         </v-col>
-        <v-col cols="4" class="text-right">
+        <v-col
+          cols="4"
+          class="text-right"
+        >
           <h1>Artist</h1>
         </v-col>
       </div>
@@ -21,11 +30,14 @@
             src="/images/logiciels/manager/banner-manager.png"
             alt="line"
             class="cover-image"
-          />
+          >
           <div class="red-square">
             <v-row>
               <div class="content-row">
-                <v-icon size="50" class="fa-brands fa-react icon"></v-icon>
+                <v-icon
+                  size="50"
+                  class="fa-brands fa-react icon"
+                />
                 <p class="description-square">
                   Fédérations, confédérations et collectivités
                 </p>
@@ -38,7 +50,7 @@
               src="/images/opentalent_manager_black.jpg"
               alt="Logo"
               class="logo-image"
-            />
+            >
           </div>
         </div>
       </v-col>
@@ -47,9 +59,6 @@
 </template>
 
 <script setup>
-const state = ref({
-  activeMenu: "Présentation",
-});
 </script>
 
 <style scoped>

components/Logiciels/Manager/FAQ.vue

@@ -5,7 +5,7 @@
         <v-col cols="6">
           <div class="container-left">
             <div class="container-title">
-              <v-icon class="fa-brands fa-react icon-title"></v-icon>
+              <v-icon class="fa-brands fa-react icon-title" />
               <h5 class="subtitle-faq">
                 Vous voulez tirer le meilleur de notre logiciel ?
               </h5>
@@ -15,7 +15,9 @@
               vous guider
             </h3>
 
-            <v-btn class="btn-faq"> Consulter notre FAQ </v-btn>
+            <v-btn class="btn-faq">
+              Consulter notre FAQ
+            </v-btn>
           </div>
         </v-col>
 
@@ -23,7 +25,7 @@
           <div class="btn-container">
             <v-btn class="btn-faq-tuto">
               <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                <v-icon class="fa-brands fa-react icon-button" />
                 <p class="text-btn">
                   De nombreux articles tutoriels accessibles 24h/24
                 </p>
@@ -32,7 +34,7 @@
 
             <v-btn class="btn-faq-tuto">
               <div class="container-button">
-                <v-icon class="fa-brands fa-react icon-button"></v-icon>
+                <v-icon class="fa-brands fa-react icon-button" />
                 <p class="text-btn">
                   De nombreux articles tutoriels accessibles 24h/24
                 </p>

components/Logiciels/Manager/Fonctionnalites.vue

@@ -4,7 +4,10 @@
       <div class="container-green">
         <v-row>
           <div class="d-flex justify-center align-center">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
             <h4 class="subtitle-fontionnalite">
               Découvrez toutes les foncitonnalités de notre solution
             </h4>
@@ -20,7 +23,7 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -34,7 +37,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -48,7 +51,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -62,7 +65,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -78,7 +81,7 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -92,7 +95,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -106,7 +109,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -120,7 +123,7 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>

components/Logiciels/Manager/MenuScroll.vue

@@ -1,11 +1,23 @@
 <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>
+      <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>

components/Logiciels/Manager/Outil.vue

@@ -4,11 +4,16 @@
       <v-row class="outil-row">
         <v-col cols="4">
           <div class="title-presentation">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
             <h4>Présentation d'opentalent manager</h4>
           </div>
-          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
-          </v-img>
+          <v-img
+            src="/images/logiciels/school/screen.jpg"
+            class="screen-img"
+          />
 
           <div class="rectangle-4">
             <div class="black-circle">
@@ -16,9 +21,10 @@
                 <v-img
                   src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
                   class="logo-manager"
-                >
-                </v-img>
-                <p class="devis">Sur devis</p>
+                />
+                <p class="devis">
+                  Sur devis
+                </p>
               </div>
             </div>
           </div>
@@ -35,7 +41,9 @@
             <li class="outil-list">
               Répond aux besoin globaux des réseaux culturels
             </li>
-            <li class="outil-list">Gestion collaborative</li>
+            <li class="outil-list">
+              Gestion collaborative
+            </li>
             <li class="outil-list">
               Mise en valeur des activités des membres du réseau
             </li>
@@ -46,28 +54,34 @@
           <div class="container-square">
             <v-row>
               <div class="red-square">
-                <v-icon class="fa-regular fa-comments icon"></v-icon>
-                <p class="text-square">Nous contacter</p>
+                <v-icon class="fa-regular fa-comments icon" />
+                <p class="text-square">
+                  Nous contacter
+                </p>
               </div>
             </v-row>
 
             <v-row>
               <div class="red-square">
-                <v-icon class="fa-brands fa-readme icon"></v-icon>
-                <p class="text-square">Brochure</p>
+                <v-icon class="fa-brands fa-readme icon" />
+                <p class="text-square">
+                  Brochure
+                </p>
               </div>
             </v-row>
 
             <v-row>
               <div class="darkblue-square">
-                <v-icon class="fa-solid fa-phone icon"></v-icon>
-                <p class="text-square">Nous Appeler</p>
+                <v-icon class="fa-solid fa-phone icon" />
+                <p class="text-square">
+                  Nous Appeler
+                </p>
               </div>
             </v-row>
           </div>
         </v-col>
         <v-row>
-          <v-col cols="4"> </v-col>
+          <v-col cols="4" />
 
           <v-col cols="5">
             <h2>Des caractéristiques uniques & dédiées</h2>
@@ -76,7 +90,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/manager/picto1.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Logiciel de gestion & communication full web
                 </p>
@@ -86,7 +100,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/manager/picto2.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Boostez votre visibilité & votre communication
                 </p>
@@ -96,7 +110,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/manager/picto3.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Boostez votre visibilité & votre communication
                 </p>
@@ -106,48 +120,64 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/manager/picto4.png"
-                ></v-img>
-                <p class="picto-text">Communiquez en réseau</p>
+                />
+                <p class="picto-text">
+                  Communiquez en réseau
+                </p>
               </div>
 
               <div class="picto-group">
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/manager/picto5.png"
-                ></v-img>
-                <p class="picto-text">Sur-Mesure</p>
+                />
+                <p class="picto-text">
+                  Sur-Mesure
+                </p>
               </div>
 
               <div class="picto-group">
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/manager/picto6.png"
-                ></v-img>
-                <p class="picto-text">Pour tout réseau de type pyramidal</p>
+                />
+                <p class="picto-text">
+                  Pour tout réseau de type pyramidal
+                </p>
               </div>
             </div>
           </v-col>
 
-          <v-col cols="2"> </v-col>
+          <v-col cols="2" />
         </v-row>
       </v-row>
 
       <v-row class="container-green">
         <v-row>
-          <v-col cols="6" class="citation-school">
-            “ Pour les petits comme pour les grands établissements
-            d’enseignement artistique.“</v-col
+          <v-col
+            cols="6"
+            class="citation-school"
           >
+            “ Pour les petits comme pour les grands établissements
+            d’enseignement artistique.“
+          </v-col>
         </v-row>
 
         <v-col cols="6">
           <div class="title-logiciel-group">
-            <v-icon size="10" class="fa-solid fa-circle icon-logiciel"></v-icon>
-            <h6 class="subtitle-logiciel">Logiciel Opentalent</h6>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-logiciel"
+            />
+            <h6 class="subtitle-logiciel">
+              Logiciel Opentalent
+            </h6>
           </div>
 
-          <v-img src="/images/logiciels/school/screen2.png" class="screen2-img">
-          </v-img>
+          <v-img
+            src="/images/logiciels/school/screen2.png"
+            class="screen2-img"
+          />
         </v-col>
       </v-row>
     </LayoutContainer>

components/Logiciels/Manager/Projet.vue

@@ -6,8 +6,7 @@
         <v-img
           src="/images/logiciels/school/femme-casque.jpg"
           class="femme-casque"
-        >
-        </v-img>
+        />
       </v-col>
       <v-col cols="8">
         <h5>Vous avez un projet ?</h5>
@@ -27,7 +26,7 @@
 
     <v-row>
       <v-col cols="2">
-        <v-img src="/images/logiciels/school/cmf_logo_orange.png"></v-img>
+        <v-img src="/images/logiciels/school/cmf_logo_orange.png" />
       </v-col>
       <v-col cols="10">
         <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
@@ -43,24 +42,39 @@
     </v-row>
 
     <v-row>
-      <v-col cols="4" class="border">
+      <v-col
+        cols="4"
+        class="border"
+      >
         <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon"></v-icon>
+          <v-icon class="fa-brands fa-react icon" />
         </div>
-        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+        <p class="d-flex justify-center align-center">
+          Paiement Sécurisé
+        </p>
       </v-col>
-      <v-col cols="4" class="border">
+      <v-col
+        cols="4"
+        class="border"
+      >
         <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon"></v-icon>
+          <v-icon class="fa-brands fa-react icon" />
         </div>
-        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+        <p class="d-flex justify-center align-center">
+          Paiement Sécurisé
+        </p>
       </v-col>
 
-      <v-col cols="4" class="border">
+      <v-col
+        cols="4"
+        class="border"
+      >
         <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon"></v-icon>
+          <v-icon class="fa-brands fa-react icon" />
         </div>
-        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+        <p class="d-flex justify-center align-center">
+          Paiement Sécurisé
+        </p>
       </v-col>
     </v-row>
   </LayoutContainer>

components/Logiciels/Manager/Pyramide.vue

@@ -3,8 +3,10 @@
     <LayoutContainer>
       <v-row>
         <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon-title"></v-icon>
-          <h4 class="subtitle-pyramide">Un réseau pyramidal</h4>
+          <v-icon class="fa-brands fa-react icon-title" />
+          <h4 class="subtitle-pyramide">
+            Un réseau pyramidal
+          </h4>
         </div>
       </v-row>
 
@@ -25,30 +27,44 @@
           <v-img
             src="/images/logiciels/manager/schema_manager.png"
             class="schema-manager"
-          >
-          </v-img>
+          />
         </v-col>
       </v-row>
 
       <v-row>
-        <v-col cols="4" class="border">
+        <v-col
+          cols="4"
+          class="border"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon class="fa-brands fa-react icon"></v-icon>
+            <v-icon class="fa-brands fa-react icon" />
           </div>
-          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+          <p class="d-flex justify-center align-center">
+            Paiement Sécurisé
+          </p>
         </v-col>
-        <v-col cols="4" class="border">
+        <v-col
+          cols="4"
+          class="border"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon class="fa-brands fa-react icon"></v-icon>
+            <v-icon class="fa-brands fa-react icon" />
           </div>
-          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+          <p class="d-flex justify-center align-center">
+            Paiement Sécurisé
+          </p>
         </v-col>
 
-        <v-col cols="4" class="border">
+        <v-col
+          cols="4"
+          class="border"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon class="fa-brands fa-react icon"></v-icon>
+            <v-icon class="fa-brands fa-react icon" />
           </div>
-          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+          <p class="d-flex justify-center align-center">
+            Paiement Sécurisé
+          </p>
         </v-col>
       </v-row>
     </LayoutContainer>

components/Logiciels/Manager/Reviews.vue

@@ -4,25 +4,36 @@
       <div class="container-green">
         <v-row>
           <v-col cols="4">
-            <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
+            <h3 class="reviews-title">
+              C'est eux qui en parlent le mieux
+            </h3>
             <div class="d-flex justify-center align-center">
-              <div class="carousel-button" @click="goPrevious">
-                <i class="fas fa-chevron-left"></i>
+              <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"></i>
+              <div
+                class="carousel-button"
+                @click="goNext"
+              >
+                <i class="fas fa-chevron-right" />
               </div>
             </div>
           </v-col>
 
           <v-col cols="8">
             <Carousel
-              :itemsToShow="3"
-              :itemsToScroll="1"
-              v-slot="{ carousel: _carousel }"
               ref="carousel"
+              :items-to-show="3"
+              :items-to-scroll="1"
             >
-              <Slide class="card" v-for="(card, index) in cards" :key="index">
+              <Slide
+                v-for="(card, index) in cards"
+                :key="index"
+                class="card"
+              >
                 <div class="card-container">
                   <v-card>
                     <v-card-item>
@@ -35,8 +46,12 @@
                           {{ card.name }}
                         </v-card-actions>
 
-                        <p class="reviewer-status">{{ card.status }}</p>
-                        <p class="reviewer-structure">{{ card.structure }}</p>
+                        <p class="reviewer-status">
+                          {{ card.status }}
+                        </p>
+                        <p class="reviewer-structure">
+                          {{ card.structure }}
+                        </p>
                       </div>
                     </v-card-item>
                   </v-card>
@@ -51,6 +66,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 

components/Logiciels/Manager/Solutions.vue

@@ -11,30 +11,52 @@
 
       <v-row class="row-artist">
         <v-col cols="3">
-          <v-img src="/images/opentalent_artist_black.png" class="logo">
-          </v-img>
+          <v-img
+            src="/images/opentalent_artist_black.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>
@@ -43,30 +65,57 @@
 
       <v-row class="row-artist">
         <v-col cols="3">
-          <v-img src="/images/opentalent_manager_black.jpg" class="logo">
-          </v-img>
+          <v-img
+            src="/images/opentalent_manager_black.jpg"
+            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>

components/Logiciels/School/Accompagnement.vue

@@ -4,8 +4,13 @@
       <div class="container-green">
         <v-row>
           <div class="d-flex justify-center align-center mt-6">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-            <h5 class="subtitle">Accompagnement</h5>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
+            <h5 class="subtitle">
+              Accompagnement
+            </h5>
           </div>
         </v-row>
 
@@ -14,7 +19,7 @@
             <v-img
               src="/images/logiciels/school/reunion.jpg"
               class="reunion-img"
-            ></v-img>
+            />
           </v-col>
 
           <v-col cols="6">
@@ -25,7 +30,7 @@
               Parce qu’on sait qu’appréhender un nouvel outil peut-être
               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
@@ -38,7 +43,9 @@
               structure.
             </p>
 
-            <v-btn class="formation-btn">S’incrire à une formation</v-btn>
+            <v-btn class="formation-btn">
+              S’incrire à une formation
+            </v-btn>
           </v-col>
         </v-row>
       </div>
@@ -49,28 +56,45 @@
           class="d-flex justify-center align-center small-padding"
         >
           <div class="card">
-            <h3 class="chiffre">1500</h3>
+            <h3 class="chiffre">
+              1500
+            </h3>
             <p>elèves</p>
           </div>
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
           <div class="card">
-            <h3 class="chiffre">234</h3>
+            <h3 class="chiffre">
+              234
+            </h3>
             <p>utilisateurs</p>
           </div>
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
           <div class="card">
-            <h3 class="chiffre">20304</h3>
+            <h3 class="chiffre">
+              20304
+            </h3>
             <p>clients</p>
           </div>
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
           <div class="card">
-            <h3 class="chiffre">13</h3>
+            <h3 class="chiffre">
+              13
+            </h3>
             <p>années d’expériences</p>
           </div>
         </v-col>
@@ -80,7 +104,7 @@
         <LogicielsSchoolCaroussel />
       </v-row>
 
-      <v-row> </v-row>
+      <v-row />
     </LayoutContainer>
   </div>
 </template>

components/Logiciels/School/Agenda.vue

@@ -2,22 +2,35 @@
   <LayoutContainer :overflow="false">
     <v-row>
       <v-col cols="4">
-        <h2 class="title">L'agenda Opentalent</h2>
+        <h2 class="title">
+          L'agenda Opentalent
+        </h2>
       </v-col>
 
       <v-col cols="4">
         <div class="d-flex justify-center align-center">
-          <div class="carousel-button" @click="goPrevious">
-            <i class="fas fa-chevron-left"></i>
+          <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"></i>
+          <div
+            class="carousel-button"
+            @click="goNext"
+          >
+            <i class="fas fa-chevron-right" />
           </div>
         </div>
       </v-col>
 
       <v-col cols="4">
-        <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
+        <v-btn
+          class="btn-news"
+          text
+        >
+          VOIR TOUTES LES ACTUALITÉS
+        </v-btn>
       </v-col>
     </v-row>
 
@@ -28,29 +41,39 @@
     <v-row>
       <v-col cols="12">
         <Carousel
-          :itemsToShow="3"
-          :itemsToScroll="2"
-          v-slot="{ carousel: _carousel }"
           ref="carousel"
+          :items-to-show="3"
+          :items-to-scroll="2"
         >
           <Slide
+            v-for="(event, eventIndex) in events"
+            :key="eventIndex"
             class="slide-card"
-            v-for="(event, index) in events"
-            :key="index"
           >
             <div class="card">
-              <img class="card-img-top" :src="event.img" alt="Card image cap" />
+              <img
+                class="card-img-top"
+                :src="event.img"
+                alt="Card image cap"
+              >
               <div class="card-body">
                 <small class="card-rdv">{{ event.rdv }}</small>
-                <h5 class="card-title">{{ event.title }}</h5>
-                <p class="card-localisation">{{ event.localisation }}</p>
+                <h5 class="card-title">
+                  {{ event.title }}
+                </h5>
+                <p class="card-localisation">
+                  {{ event.localisation }}
+                </p>
               </div>
 
               <div class="card-footer">
-                <v-chip-group active-class="primary--text" column>
+                <v-chip-group
+                  active-class="primary--text"
+                  column
+                >
                   <v-chip
-                    v-for="(tag, index) in event.tags"
-                    :key="index"
+                    v-for="(tag, tagIndex) in event.tags"
+                    :key="tagIndex"
                     class="ma-2 chip-custom"
                     :color="tagColor(tag)"
                     label

components/Logiciels/School/Avantages.vue

@@ -3,38 +3,51 @@
     <LayoutContainer>
       <v-row>
         <div class="d-flex justify-center align-center">
-          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <v-icon
+            size="10"
+            class="fa-solid fa-circle icon-title"
+          />
           <h5 class="subtitle-avantage">
             Découvrez les avantages de la solution
           </h5>
         </div>
       </v-row>
       <v-row>
-        <h3 class="title">Des avantages concrets</h3>
+        <h3 class="title">
+          Des avantages concrets
+        </h3>
       </v-row>
 
       <v-row class="row">
         <v-col cols="4">
           <div class="title-card">
-            <h4 class="description-card">Un gain de temps</h4>
+            <h4 class="description-card">
+              Un gain de temps
+            </h4>
             <span class="number-card">01</span>
           </div>
 
-          <hr />
+          <hr>
           <p class="details-card">
             Centralisez toutes vos informations sur un seul et même outil et ne
             perdez plus de temps avec des fichiers sur diverses applications.
           </p>
-          <p><v-chip class="chip-card">Membre cmf</v-chip></p>
-          <v-img src="/images/logiciels/school/screen3.png"></v-img>
+          <p>
+            <v-chip class="chip-card">
+              Membre cmf
+            </v-chip>
+          </p>
+          <v-img src="/images/logiciels/school/screen3.png" />
         </v-col>
         <v-col cols="4">
           <div class="title-card">
-            <h4 class="description-card">Une activité structurée</h4>
+            <h4 class="description-card">
+              Une activité structurée
+            </h4>
             <span class="number-card">02</span>
           </div>
 
-          <hr />
+          <hr>
           <p class="details-card">
             Des espaces dédiés et des outils spécifiques à vos besoins pour une
             gestion optimisée et une lecture simplifiée.
@@ -42,10 +55,12 @@
         </v-col>
         <v-col cols="4">
           <div class="title-card">
-            <h4 class="description-card">Une gestion collaborative</h4>
+            <h4 class="description-card">
+              Une gestion collaborative
+            </h4>
             <span class="number-card">03</span>
           </div>
-          <hr />
+          <hr>
           <p class="details-card">
             Grâce à des comptes dédiés, personnalisés et autonomes, permettez à
             vos membres de mettre à jour leurs informations et d'interagir dans

components/Logiciels/School/Banner.vue

@@ -2,13 +2,22 @@
   <LayoutContainer>
     <v-row>
       <div class="container-title">
-        <v-col cols="4" class="text-left">
+        <v-col
+          cols="4"
+          class="text-left"
+        >
           <h1>Artist</h1>
         </v-col>
-        <v-col cols="4" class="logiciel">
+        <v-col
+          cols="4"
+          class="logiciel"
+        >
           <h1>Opentalent School</h1>
         </v-col>
-        <v-col cols="4" class="text-right">
+        <v-col
+          cols="4"
+          class="text-right"
+        >
           <h1>Manager</h1>
         </v-col>
       </div>
@@ -21,11 +30,14 @@
             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"></v-icon>
+                <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
@@ -39,7 +51,7 @@
               src="/images/logo_school_white.png"
               alt="Logo"
               class="logo-image"
-            />
+            >
           </div>
         </div>
       </v-col>

components/Logiciels/School/Caroussel.vue

@@ -1,27 +1,41 @@
 <template>
   <LayoutContainer :overflow="false">
     <v-row justify="center">
-      <h2 class="title">Plus de 5 000 structures nous font confiance</h2>
+      <h2 class="title">
+        Plus de 5 000 structures nous font confiance
+      </h2>
       <div class="d-flex justify-center align-center">
-        <div class="carousel-button" @click="goPrevious">
-          <i class="fas fa-chevron-left"></i>
+        <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"></i>
+        <div
+          class="carousel-button"
+          @click="goNext"
+        >
+          <i class="fas fa-chevron-right" />
         </div>
       </div>
     </v-row>
 
     <Carousel
-      class="carrousel elevation-6"
-      :itemsToShow="4"
-      :itemsToScroll="2"
-      v-slot="{ carousel: _carousel }"
       ref="carousel"
+      class="carrousel elevation-6"
+      :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>
@@ -29,6 +43,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 const carousel = ref(null);
 

components/Logiciels/School/Fonctionnalites.vue

@@ -4,7 +4,10 @@
       <div class="container-green">
         <v-row>
           <div class="d-flex justify-center align-center">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
             <h4 class="subtitle-fontionnalite">
               Découvrez toutes les foncitonnalités de notre solution
             </h4>
@@ -20,7 +23,7 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
+              <v-icon class="fa-brands fa-react icon-details" />
               <h6 class="title-details">
                 Bénéficiez d’un espace dédié pour chacun
               </h6>
@@ -34,8 +37,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Gérez les personnes</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Gérez les personnes
+              </h6>
               <ul class="list-details">
                 <li>Gestion des élèves, parents/tuteurs</li>
                 <li>Gestion des professeurs et personnel administratif</li>
@@ -48,8 +53,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Facilitez l'inscription en ligne</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Facilitez l'inscription en ligne
+              </h6>
               <ul class="list-details">
                 <li>Paramétrage des formulaires</li>
                 <li>Lancement automatisé des réinscriptions</li>
@@ -63,8 +70,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Administrez votre propre site</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Administrez votre propre site
+              </h6>
               <ul class="list-details">
                 <li>Accès admin</li>
                 <li>Accès professeurs</li>
@@ -77,8 +86,10 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Planifiez vos évènements</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Planifiez vos évènements
+              </h6>
               <ul class="list-details">
                 <li>Gestion intégrée au logiciel</li>
                 <li>Simplicité d'utilisation</li>
@@ -91,8 +102,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Gérez votre matériel</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Gérez votre matériel
+              </h6>
               <ul class="list-details">
                 <li>Accès admin</li>
                 <li>Accès professeurs</li>
@@ -103,8 +116,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Assurez le suivi pédagogique</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Assurez le suivi pédagogique
+              </h6>
               <ul class="list-details">
                 <li>Accès admin</li>
                 <li>Accès professeurs</li>
@@ -115,8 +130,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Facturez en tout simplicité</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Facturez en tout simplicité
+              </h6>
               <ul class="list-details">
                 <li>Accès admin</li>
                 <li>Accès professeurs</li>
@@ -128,8 +145,10 @@
         <v-row>
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Planifiez vos évènements</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Planifiez vos évènements
+              </h6>
               <ul class="list-details">
                 <li>Gestion intégrée au logiciel</li>
                 <li>Simplicité d'utilisation</li>
@@ -142,8 +161,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Gérez votre matériel</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Gérez votre matériel
+              </h6>
               <ul class="list-details">
                 <li>Accès admin</li>
                 <li>Accès professeurs</li>
@@ -154,8 +175,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Assurez le suivi pédagogique</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Assurez le suivi pédagogique
+              </h6>
               <ul class="list-details">
                 <li>Accès admin</li>
                 <li>Accès professeurs</li>
@@ -166,8 +189,10 @@
 
           <v-col cols="3">
             <div class="details-container">
-              <v-icon class="fa-brands fa-react icon-details"></v-icon>
-              <h6 class="title-details">Facturez en tout simplicité</h6>
+              <v-icon class="fa-brands fa-react icon-details" />
+              <h6 class="title-details">
+                Facturez en tout simplicité
+              </h6>
               <ul class="list-details">
                 <li>Accès admin</li>
                 <li>Accès professeurs</li>

components/Logiciels/School/MenuScroll.vue

@@ -1,11 +1,23 @@
 <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>
+      <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>

components/Logiciels/School/Outil.vue

@@ -4,23 +4,36 @@
       <v-row class="outil-row">
         <v-col cols="4">
           <div class="title">
-            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-            <h4 class="presentation-title">Présentation d'opentalent school</h4>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-title"
+            />
+            <h4 class="presentation-title">
+              Présentation d'opentalent school
+            </h4>
           </div>
-          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
-          </v-img>
+          <v-img
+            src="/images/logiciels/school/screen.jpg"
+            class="screen-img"
+          />
 
           <div class="rectangle-4">
             <div class="black-circle">
               <div class="content-flex">
-                <v-img src="/images/logo_school_white.png" class="logo-manager">
-                </v-img>
+                <v-img
+                  src="/images/logo_school_white.png"
+                  class="logo-manager"
+                />
                 <div class="pricing-details">
-                  <p class="pricing-small-text">à partir de</p>
+                  <p class="pricing-small-text">
+                    à partir de
+                  </p>
                   <p class="pricing-big-text">
                     20€ <span class="smaller-text">/mois</span>
                   </p>
-                  <p class="pricing-small-text">payable annuellement</p>
+                  <p class="pricing-small-text">
+                    payable annuellement
+                  </p>
                 </div>
               </div>
             </div>
@@ -28,7 +41,9 @@
         </v-col>
 
         <v-col cols="5">
-          <h2 class="outil-title">Un outil complet en ligne</h2>
+          <h2 class="outil-title">
+            Un outil complet en ligne
+          </h2>
           <ul class="outil-ul">
             <li class="outil-list">
               Logiciel de gestion et communication en ligne
@@ -40,7 +55,9 @@
               Gestion quotidienne et en temps réel (suivi pédagogique,
               facturation, encaissement…)
             </li>
-            <li class="outil-list">Pilotage complet de votre structure</li>
+            <li class="outil-list">
+              Pilotage complet de votre structure
+            </li>
           </ul>
         </v-col>
 
@@ -48,35 +65,43 @@
           <div class="container-square">
             <v-row>
               <div class="blue-square">
-                <v-icon class="fa-regular fa-comments icon"></v-icon>
-                <p class="text-square">Nous contacter</p>
+                <v-icon class="fa-regular fa-comments icon" />
+                <p class="text-square">
+                  Nous contacter
+                </p>
               </div>
             </v-row>
 
             <v-row>
               <div class="blue-square">
-                <v-icon class="fa-regular fa-circle-info icon"></v-icon>
-                <p class="text-square">Demander une demo</p>
+                <v-icon class="fa-regular fa-circle-info icon" />
+                <p class="text-square">
+                  Demander une demo
+                </p>
               </div>
             </v-row>
 
             <v-row>
               <div class="blue-square">
-                <v-icon class="fa-brands fa-readme icon"></v-icon>
-                <p class="text-square">Brochure</p>
+                <v-icon class="fa-brands fa-readme icon" />
+                <p class="text-square">
+                  Brochure
+                </p>
               </div>
             </v-row>
 
             <v-row>
               <div class="darkblue-square">
-                <v-icon class="fa-solid fa-phone icon"></v-icon>
-                <p class="text-square">Nous Appeler</p>
+                <v-icon class="fa-solid fa-phone icon" />
+                <p class="text-square">
+                  Nous Appeler
+                </p>
               </div>
             </v-row>
           </div>
         </v-col>
         <v-row>
-          <v-col cols="4"> </v-col>
+          <v-col cols="4" />
 
           <v-col cols="5">
             <h2>Des caractéristiques uniques & dédiées</h2>
@@ -85,7 +110,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/school/picto1.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Logiciel de gestion & communication full web
                 </p>
@@ -95,7 +120,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/school/picto2.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Boostez votre visibilité & votre communication
                 </p>
@@ -105,7 +130,7 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/school/picto3.png"
-                ></v-img>
+                />
                 <p class="picto-text">
                   Boostez votre visibilité & votre communication
                 </p>
@@ -115,13 +140,15 @@
                 <v-img
                   class="picto-img"
                   src="/images/logiciels/school/picto4.png"
-                ></v-img>
-                <p class="picto-text">Communiquez en réseau</p>
+                />
+                <p class="picto-text">
+                  Communiquez en réseau
+                </p>
               </div>
             </div>
           </v-col>
 
-          <v-col cols="2"> </v-col>
+          <v-col cols="2" />
         </v-row>
       </v-row>
 
@@ -137,12 +164,17 @@
 
         <v-col cols="6">
           <div class="subtitle-logiciel">
-            <v-icon size="10" class="fa-solid fa-circle icon-logiciel"></v-icon>
+            <v-icon
+              size="10"
+              class="fa-solid fa-circle icon-logiciel"
+            />
             <h6>Logiciel Opentalent</h6>
           </div>
 
-          <v-img src="/images/logiciels/school/screen2.png" class="screen2-img">
-          </v-img>
+          <v-img
+            src="/images/logiciels/school/screen2.png"
+            class="screen2-img"
+          />
         </v-col>
       </v-row>
     </LayoutContainer>

components/Logiciels/School/Premium.vue

@@ -3,51 +3,82 @@
     <LayoutContainer>
       <v-row>
         <div class="d-flex justify-center align-center">
-          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-          <h5 class="subtitle">Comparatif de nos solutions</h5>
+          <v-icon
+            size="10"
+            class="fa-solid fa-circle icon-title"
+          />
+          <h5 class="subtitle">
+            Comparatif de nos solutions
+          </h5>
         </div>
       </v-row>
       <v-row>
-        <h3 class="title">Et si vous passiez à la version Premium</h3>
+        <h3 class="title">
+          Et si vous passiez à la version Premium
+        </h3>
       </v-row>
 
       <table class="table-comparatif">
         <thead>
           <tr>
-            <th class="thead"></th>
-            <th class="thead"></th>
+            <th class="thead" />
+            <th class="thead" />
             <th class="thead">
-              <p class="standard">Standard</p>
-              <p class="from">A partir de</p>
-              <p class="price">44,10 <span class="ttc">ttc</span></p>
-              <p class="month">/mois</p>
+              <p class="standard">
+                Standard
+              </p>
+              <p class="from">
+                A partir de
+              </p>
+              <p class="price">
+                44,10 <span class="ttc">ttc</span>
+              </p>
+              <p class="month">
+                /mois
+              </p>
             </th>
             <th class="thead premium-column">
-              <p class="standard">Premium</p>
-              <p class="from">A partir de</p>
-              <p class="price">60,20 <span class="ttc">ttc</span></p>
-              <p class="month">/mois</p>
+              <p class="standard">
+                Premium
+              </p>
+              <p class="from">
+                A partir de
+              </p>
+              <p class="price">
+                60,20 <span class="ttc">ttc</span>
+              </p>
+              <p class="month">
+                /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 table-data-left">{{ row.column1 }}</td>
-            <td class="table-data">{{ row.column2 }}</td>
+          <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-if="row.column3 == 'check'"
-              ></v-icon>
+              />
               <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-if="row.column4 == 'check'"
-              ></v-icon>
+              />
               <span v-else>{{ row.column4 }}</span>
             </td>
           </tr>

components/Logiciels/School/Projet.vue

@@ -2,24 +2,32 @@
   <div id="Contact">
     <LayoutContainer>
       <v-row>
-        <div class="project-container"></div>
+        <div class="project-container" />
         <v-col cols="4">
           <div class="contact-container">
             <div class="d-flex justify-center align-center">
-              <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
-              <h5 class="contact">Contactez-nous</h5>
+              <v-icon
+                size="10"
+                class="fa-solid fa-circle icon-title"
+              />
+              <h5 class="contact">
+                Contactez-nous
+              </h5>
             </div>
             <v-img
               src="/images/logiciels/school/femme-casque.jpg"
               class="femme-casque"
-            >
-            </v-img>
+            />
           </div>
         </v-col>
         <v-col cols="6">
           <div class="project-container">
-            <h5 class="title">Vous avez un projet ?</h5>
-            <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+            <h5 class="title">
+              Vous avez un projet ?
+            </h5>
+            <h6 class="subtitle">
+              N'attendez plus, appelez-nous
+            </h6>
             <p class="contact-details">
               Vous avez une identité, des besoins, des projets... On est là pour
               vous écouter et vous offrir une offre personnalisée ! Que vous
@@ -28,7 +36,9 @@
               logiciel varie en fonction du nombre d'élèves, tout en conservant
               l'intégralité des fonctionnalités.
             </p>
-            <v-btn class="btn-contact"> Nous contacter</v-btn>
+            <v-btn class="btn-contact">
+              Nous contacter
+            </v-btn>
           </div>
         </v-col>
       </v-row>
@@ -38,7 +48,7 @@
           <v-img
             class="logo-cmf"
             src="/images/logiciels/school/cmf_logo_orange.png"
-          ></v-img>
+          />
         </v-col>
         <v-col cols="10">
           <div class="cmf-container">
@@ -56,26 +66,44 @@
       </v-row>
 
       <v-row>
-        <v-col cols="4" class="border-col">
+        <v-col
+          cols="4"
+          class="border-col"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
+            <v-icon
+              size="35"
+              class="fa-brands fa-react icon"
+            />
           </div>
           <p class="d-flex justify-center align-center details">
             Paiement Sécurisé
           </p>
         </v-col>
-        <v-col cols="4" class="border-col">
+        <v-col
+          cols="4"
+          class="border-col"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
+            <v-icon
+              size="35"
+              class="fa-brands fa-react icon"
+            />
           </div>
           <p class="d-flex justify-center align-center details">
             Service clef en main
           </p>
         </v-col>
 
-        <v-col cols="4" class="border-col">
+        <v-col
+          cols="4"
+          class="border-col"
+        >
           <div class="d-flex justify-center align-center">
-            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
+            <v-icon
+              size="35"
+              class="fa-brands fa-react icon"
+            />
           </div>
           <p class="d-flex justify-center align-center details">
             Soutien pour votre activité

components/Logiciels/School/Reviews.vue

@@ -4,25 +4,36 @@
       <div class="container-green">
         <v-row>
           <v-col cols="4">
-            <h3 class="reviews-title">C'est eux qui en parlent le mieux</h3>
+            <h3 class="reviews-title">
+              C'est eux qui en parlent le mieux
+            </h3>
             <div class="d-flex justify-center align-center">
-              <div class="carousel-button" @click="goPrevious">
-                <i class="fas fa-chevron-left"></i>
+              <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"></i>
+              <div
+                class="carousel-button"
+                @click="goNext"
+              >
+                <i class="fas fa-chevron-right" />
               </div>
             </div>
           </v-col>
 
           <v-col cols="8">
             <Carousel
-              :itemsToShow="3"
-              :itemsToScroll="1"
-              v-slot="{ carousel: _carousel }"
               ref="carousel"
+              :items-to-show="3"
+              :items-to-scroll="1"
             >
-              <Slide class="card" v-for="(card, index) in cards" :key="index">
+              <Slide
+                v-for="(card, index) in cards"
+                :key="index"
+                class="card"
+              >
                 <div class="card-container">
                   <v-card>
                     <v-card-item>
@@ -35,8 +46,12 @@
                           {{ card.name }}
                         </v-card-actions>
 
-                        <p class="reviewer-status">{{ card.status }}</p>
-                        <p class="reviewer-structure">{{ card.structure }}</p>
+                        <p class="reviewer-status">
+                          {{ card.status }}
+                        </p>
+                        <p class="reviewer-structure">
+                          {{ card.structure }}
+                        </p>
                       </div>
                     </v-card-item>
                   </v-card>
@@ -51,6 +66,7 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 

components/Logiciels/School/Solutions.vue

@@ -10,29 +10,52 @@
 
     <v-row class="row-artist">
       <v-col cols="3">
-        <v-img src="/images/opentalent_artist_black.png" class="logo"> </v-img>
+        <v-img
+          src="/images/opentalent_artist_black.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>
@@ -41,29 +64,57 @@
 
     <v-row class="row-artist">
       <v-col cols="3">
-        <v-img src="/images/opentalent_manager_black.jpg" class="logo"> </v-img>
+        <v-img
+          src="/images/opentalent_manager_black.jpg"
+          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>

eslintrc.js

@@ -1,45 +0,0 @@
-module.exports = {
-  parser: 'vue-eslint-parser',
-  extends: [
-    'plugin:vue/base',
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended', 
-    'plugin:vue/essential',
-    'plugin:@typescript-eslint/recommended',     // caused by this line
-    'plugin:prettier/recommended',
-    'eslint-config-prettier'
-],
-  rules: {
-    'no-console': 'off', 
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 
-    'no-unused-vars': 'warn', 
-
-    'vue/attribute-hyphenation': 'error', // enforce attribute naming style on custom components in template
-    'vue/component-definition-name-casing': ['error', 'PascalCase'], 
-    'vue/html-closing-bracket-newline': ['error', {
-      'singleline': 'never', 
-      'multiline': 'always' 
-    }],
-    'vue/html-closing-bracket-spacing': ['error', { // require or disallow a space before tag closing brackets
-      'startTag': 'never', 
-      'endTag': 'never', 
-      'selfClosingTag': 'always' 
-    }],
-    'vue/html-indent': ['error', 2, { // enforce consistent indentation in <template>
-      'attribute': 1, 
-      'baseIndent': 1, 
-      'closeBracket': 0, 
-      'alignAttributesVertically': true
-    }],
-    'vue/max-attributes-per-line': ['error', { // enforce the maximum number of attributes per line
-      'singleline': 3, 
-      'multiline': {
-        'max': 1,
-        'allowFirstLine': false 
-      }
-    }],
-    'vue/no-v-html': 'off', // disallow use of v-html to prevent XSS attack
-    'vue/require-default-prop': 'off', 
-    'vue/singleline-html-element-content-newline': 'off',
-  }
-};

package.json

@@ -11,7 +11,7 @@
     "build": "nuxt build",
     "build:local": "yarn build --dotenv .env.local",
     "build:prod": "yarn build --dotenv .env.prod",
-    "deploy": "git pull && yarn install && yarn build",
+    "deploy": "git pull && yarn install && yarn generate",
     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
     "lint": "yarn lint:js",
     "test": "jest"

pages/actu.vue

@@ -1,301 +0,0 @@
-<template>
-  <LayoutContainer :overflow="false">
-    <v-row>
-      <v-col cols="4">
-        <h2 class="title">L'agenda Opentalent</h2>
-      </v-col>
-
-      <v-col cols="4">
-        <div class="d-flex justify-center align-center">
-          <div class="carousel-button" @click="goPrevious">
-            <i class="fas fa-chevron-left"></i>
-          </div>
-          <div class="carousel-button" @click="goNext">
-            <i class="fas fa-chevron-right"></i>
-          </div>
-        </div>
-      </v-col>
-
-      <v-col cols="4">
-        <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
-      </v-col>
-    </v-row>
-
-    <p class="agenda-details">
-      Retrouvez tous les évènements culturels autour de chez vous.
-    </p>
-
-    <v-row>
-      <v-col cols="12">
-        <Carousel
-          :itemsToShow="3"
-          :itemsToScroll="2"
-          v-slot="{ carousel: _carousel }"
-          ref="carousel"
-        >
-          <Slide
-            class="slide-card"
-            v-for="(event, index) in events"
-            :key="index"
-          >
-            <div class="card">
-              <img class="card-img-top" :src="event.img" alt="Card image cap" />
-              <div class="card-body">
-                <small class="card-rdv">{{ event.rdv }}</small>
-                <h5 class="card-title">{{ event.title }}</h5>
-                <p class="card-localisation">{{ event.localisation }}</p>
-              </div>
-
-              <div class="card-footer">
-                <v-chip-group active-class="primary--text" column>
-                  <v-chip
-                    v-for="(tag, index) in event.tags"
-                    :key="index"
-                    class="ma-2 chip-custom"
-                    :color="tagColor(tag)"
-                    label
-                  >
-                    <span :class="tagTextColor(tag)">{{ tag }}</span>
-                  </v-chip>
-                </v-chip-group>
-              </div>
-            </div>
-          </Slide>
-        </Carousel>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-const tagColor = (tag) => {
-  switch (tag) {
-    case "Payant":
-      return "red";
-    case "Gratuit":
-      return "green";
-    default:
-      return "primary";
-  }
-};
-
-const tagTextColor = (tag) => {
-  switch (tag) {
-    case "Payant":
-      return "red--text";
-    case "Gratuit":
-      return "green--text";
-    default:
-      return "black--text";
-  }
-};
-const events = ref([
-  {
-    rdv: "20h00",
-    title: "LA NUIT DES RÊVES  ",
-    localisation: "FESTIVALDE musique - LONGCHAMP",
-    date: "21/06/2023",
-    img: "/images/agenda/agenda2.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-  {
-    rdv: "20h00",
-    title: "LE LAC DES CYGNES",
-    localisation: "SPECTACLE DE DANSE - PARIS 1",
-    date: "22/06/2023",
-    img: "/images/agenda/agenda3.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Gratuit"],
-  },
-  {
-    rdv: "20h00",
-    title: "SOLIDAYS 2023  : 23 > 25 juin",
-    localisation: "ORCHESTRE DE PARIS - PARIS 12",
-    date: "23/06/2023",
-    img: "/images/agenda/agenda4.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-  {
-    rdv: "20h00",
-    title: "LE LAC DES CYGNES",
-    localisation: "FESTIVALDE musique - LONGCHAMP",
-    date: "24/06/2023",
-    img: "/images/agenda/agenda5.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-  {
-    rdv: "20h00",
-    title: "SOLIDAYS 2023  : 23 > 25 juin ",
-    localisation: "SPECTACLE DE DANSE - PARIS 1",
-    date: "20/06/2023",
-    img: "/images/agenda/agenda1.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-]);
-
-let carousel;
-
-const goPrevious = () => carousel.prev();
-const goNext = () => carousel.next();
-</script>
-
-<style scoped>
-.green--text {
-  color: green;
-}
-
-.red--text {
-  color: red;
-}
-.black--text {
-  color: black;
-}
-.btn-news {
-  color: #9edbdd;
-  border-radius: 2rem;
-  font-family: "Barlow";
-  background: transparent;
-  border: 1px solid #9edbdd;
-  border-radius: 6px;
-  font-style: normal;
-  font-weight: 600;
-  text-transform: uppercase;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 25px;
-  font-size: 10px;
-  line-height: 15px;
-}
-.chip-detail {
-  color: #000000;
-}
-.chip-custom {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  text-transform: uppercase;
-  font-family: "Barlow";
-  font-style: normal;
-  display: flex;
-  align-items: center;
-  text-align: center;
-}
-
-.card-localisation {
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  font-size: 10px;
-  color: #112528;
-}
-.card {
-  border-radius: 15px 15px 0 0;
-  margin-bottom: 2rem;
-  width: 90%;
-}
-
-.icon-title {
-  color: #64afb7;
-  margin-top: 4.5rem;
-}
-.container-title {
-  display: flex;
-  align-items: center;
-  margin-left: 2rem;
-  margin-top: 4.5rem;
-}
-
-.carousel-button i {
-  color: #000000;
-}
-.card-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 18px;
-  margin-bottom: 1rem;
-  color: #091d20;
-}
-.card-title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-.card-date {
-  font-size: 0.8em;
-  color: #888;
-  margin-left: 1rem;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-body {
-  text-align: left;
-  margin-bottom: 1rem;
-  margin-left: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-  color: #112528;
-}
-
-.card-img-top {
-  border-radius: 9px 9px 0 0;
-  width: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-
-.title,
-.carousel-button,
-.btn-news {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-.agenda-details {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  margin-left: 2rem;
-  color: #091d20;
-  margin-bottom: 3rem;
-  width: 15rem;
-}
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 2rem;
-  color: #071b1f;
-}
-
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid #000000;
-  cursor: pointer;
-  margin-right: 1rem;
-}
-</style>

pages/test.vue

@@ -1,361 +0,0 @@
-<template>
-  <div class="d-flex justify-center align-center flex-column">
-    <v-icon size="8" class="fa-solid fa-circle icon-title"></v-icon>
-    <p class="text-center solution-subtitle">3 solutions</p>
-  </div>
-  <h3 class="text-center title ">
-    Trouvez la solution <br />
-    faite pour vous
-  </h3>
-
-
-
-  <div v-if="smAndDown">
-    <div class="d-flex justify-center align-center mb-6">
-          <div class="carousel-button" @click="goPrevious">
-            <i class="fas fa-chevron-left"></i>
-          </div>
-          <div class="carousel-button" @click="goNext">
-            <i class="fas fa-chevron-right"></i>
-          </div>
-        </div>
-    <Carousel
-      :itemsToShow="1.1"
-      :itemsToScroll="1"
-      v-slot="{ carousel: _carousel }"
-      ref="carousel"
-    >
-      <Slide
-        v-for="(solution, index) in solutions"
-        :key="index"
-      >
-        <v-col cols="12" class="col-info-sm">
-          <div class="opentalent-container">
-            <small class="opentalent-small-sm">Opentalent</small>
-
-            <h2 class="logiciel-name-sm">{{ solution.name }}</h2>
-            <hr class="bar-sm" />
-            <p class="description-logiciel-sm">
-              {{ solution.description }}
-            </p>
-
-            <nuxt-link :to="solution.link">
-              <v-row>
-                <div :class="solution.class">
-                  <v-img :src="solution.image" class="logo-sm"></v-img>
-                </div>
-              </v-row>
-            </nuxt-link>
-            <v-row>
-              <v-col cols="6">
-                <ul class="list-solutions-sm">
-                  <li
-                    class="details-solution-sm"
-                    v-for="(sol, i) in solution.solutions.slice(0, 4)"
-                    :key="'sol-' + i"
-                  >
-                    {{ sol }}
-                  </li>
-                </ul>
-              </v-col>
-              <v-col cols="6" class="solution-column">
-                <ul class="list-solutions-sm" >
-                  <li
-                    class="details-solution-sm"
-                    v-for="(sol, i) in solution.solutions.slice(4)"
-                    :key="'sol-' + i"
-                  >
-                    {{ sol }}
-                  </li>
-                </ul>
-              </v-col>
-            </v-row>
-          </div>
-        </v-col>
-      </Slide>
-    </Carousel>
-  </div>
-</template>
-
-<script setup>
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-import { useDisplay } from "vuetify";
-const { smAndDown } = useDisplay();
-const carousel = ref(null);
-
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
-
-const solutions = [
-  {
-    name: "Artist",
-    description: "Orchestre, chorales, compagnies de danse, théâtre et cirque",
-    image: "/images/OpenTalent_LogoNoir_Jaune_white.png",
-    class: "artist-image-sm",
-    solutions: [
-      "Gestion des membres",
-      "Agenda",
-      "Matériel & médiathèque",
-      "Export de données",
-      "Communication",
-      "Statistiques",
-      "Site internet",
-      "Partage de données en réseau",
-    ],
-  },
-  {
-    name: "School",
-    description: "Petits et grands établissements d'enseignement artistique",
-    image: "/images/logo_school_white.png",
-    link: "/logiciels/school",
-    class: "school-image-sm",
-    solutions: [
-      "Gestion des personnes",
-      "Préinscription en ligne*",
-      "Agenda",
-      "Suivi pédagogique",
-      "Règlements",
-      "Communication",
-      "Site internet",
-      "Statistiques",
-    ],
-  },
-  {
-    name: "Manager",
-    description: "Fédérations, confédérations et collectivités",
-    image: "/images/OpenTalent_LogoNoir_rouge_manager_white.png",
-    link: "/logiciels/manager",
-    class: "manager-image-sm",
-    solutions: [
-      "Gestion des personnes",
-      "Agenda",
-      "Suivi pédagogique",
-      "Règlements",
-      "Communication",
-      "Site internet",
-      "Statistiques",
-    ],
-  },
-];
-</script>
-
-<style scoped>
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid #000000;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 4rem;
-}
-
-.carousel-button i {
-  color: #000000;
-}
-.solution-column {
-  margin-left: -3rem;
-}
-.logo-sm {
-  width: 8rem;
-  height: 4rem;
-  margin-top: 15rem;
-  margin-left: .5rem;
-}
-
-.list-solutions {
-  margin-top: 0.9rem;
-  font-size: 0.5rem;
-}
-
-.list-solutions-sm {
-  margin-top: 1rem;
-  font-size: 1rem;
-  
-}
-
-.details-solution-sm {
-  font-size: .9rem;
-  margin-top: .2rem;
-  width: 9rem;
-  margin-left: 1rem;
-  font-family: "Barlow";
-  font-style: normal;
-  line-height: 18px;
-  color: #091d20;
-}
-
-.bar-sm {
-  color: #c3e5e7;
-  width: 20rem;
-}
-.artist-image-sm {
-  position: relative;
-  background: url(/images/solutions/artist.jpg);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 20rem;
-  margin-top: 4rem;
-  margin-left: 1rem;
-}
-
-.artist-image::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
-  border-radius: 0px 0px 10px 10px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.artist-image:hover::before {
-  opacity: 1;
-  cursor: pointer;
-}
-.manager-image-sm {
-  position: relative;
-  background: url(/images/solutions/manager.png);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 20rem;
-  margin-top: 4rem;
-  margin-left: 1rem;
-}
-
-.manager-image::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
-  border-radius: 0px 0px 10px 10px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid #000000;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 4rem;
-}
-
-.carousel-button i {
-  color: #000000;
-}
-.manager-image:hover::before {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.school-image-sm {
-  position: relative;
-  background: url(/images/solutions/school.jpg);
-  background-size: cover;
-  background-position: center;
-  border-radius: 0px 0px 10px 10px;
-  width: 19rem;
-  height: 20rem;
-  margin-top: 4rem;
-  margin-left: 1rem;
-}
-
-.school-image::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
-  border-radius: 0px 0px 10px 10px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.school-image:hover::before {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.col-info:first-child {
-  margin-left: 9rem;
-}
-
-.col-info {
-  width: 4rem;
-  margin-left: 2rem;
-}
-
-.solution-img {
-  width: 15rem;
-  height: 15rem;
-  object-fit: cover;
-  margin-top: 2rem;
-}
-
-.description-logiciel {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 0.9rem;
-  line-height: 0.9rem;
-  margin-top: 1rem;
-  color: #eff9fb;
-}
-
-.description-logiciel-sm {
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 0.9rem;
-  line-height: 0.9rem;
-  margin-top: 1rem;
-  width: 13rem;
-  margin-right: auto;
-  text-align: left;
-}
-
-.logiciel-name-sm {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 30px;
-  line-height: 2rem;
-  color: #c3e5e7;
-  margin-bottom: 1rem;
-  margin-right: auto;
-  text-align: left;
-}
-
-.opentalent-small-sm {
-  margin-right: auto;
-  text-align: left;
-}
-
-.opentalent-container {
-  text-align: left;
-}
-</style>