team composant refacto

assets/css/main.css

@@ -1,4 +1,4 @@
-h1, h2, h3, h4, h5, h6, p, .btn-contact, td{
+h1, h2, h3, h4, h5, h6, p, .btn-contact, td, .button-faq {
   font-family: "Barlow";
   font-style: normal;
 }

components/Home/Help.vue

@@ -1,47 +1,44 @@
 <template>
   <LayoutContainer>
-    <div class="container">
       <v-row>
-        <v-col :cols="smAndDown ? 12 : 8">
-          <v-img
-            class="help-img"
-            src="/images/help/Help.png"
-          />
-        </v-col>
+        <v-container class="container">
 
-        <v-col :cols="smAndDown ? 12 : 4">
-          <h4 class="subtitle-team">
-            Notre équipe est à vos côtés pour vous guider
-          </h4>
+        <div class="help-container">
+          <v-col cols="6">
+            <v-img class="help-img" src="/images/help/Help.png" />
+          </v-col>
 
-          <p class="need-help">
-            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>
+          <v-col cols="6">
+            <h4 class="subtitle-team">
+              Notre équipe est à vos côtés pour vous guider
+            </h4>
 
-          <v-row>
-            <ul class="details">
-              <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">
-                De nombreux articles tutoriels accessibles 24h/24
-              </li>
-            </ul>
-          </v-row>
+            <p class="need-help">
+              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>
+
+            <v-row>
+              <ul class="details">
+                <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">
+                  De nombreux articles tutoriels accessibles 24h/24
+                </li>
+              </ul>
+            </v-row>
+
+            <v-row class="row-faq">
+              <v-btn class="button-faq"> consulter la FAQ </v-btn>
+            </v-row>
+          </v-col>
+        </div>
+      </v-container>
 
-          <v-row class="row-faq">
-            <v-btn class="button-faq">
-              consulter la FAQ
-            </v-btn>
-          </v-row>
-        </v-col>
       </v-row>
-    </div>
   </LayoutContainer>
 </template>
 <script setup>
@@ -51,6 +48,17 @@ const { smAndDown } = useDisplay();
 </script>
 
 <style scoped>
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  width: auto;
+}
+.help-container{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
 .button-faq {
   width: 195px;
   height: 53px;
@@ -59,15 +67,11 @@ const { smAndDown } = useDisplay();
   color: white;
   padding: 19px 28px;
   gap: 9px;
-  font-family: "Barlow";
 }
 
-.row-faq {
-  margin-top: 2rem;
-}
 
 .details {
-  margin-top: 50px;
+  margin-top: 20px;
   width: 19rem;
   font-family: "Barlow";
   font-style: normal;
@@ -80,26 +84,22 @@ const { smAndDown } = useDisplay();
 .detail-item {
   margin-left: 28px;
   margin-bottom: 15px;
-  width: 286px;
-  left: 933px;
-  font-family: "Barlow";
-  font-style: normal;
   color: #0e2d32;
+  font-size: 1.1rem;
 }
 
 .need-help {
-  width: 25rem;
+  width: 40rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 300;
-  font-size: 1.4rem;
+  font-size: 1.1rem;
   line-height: 1.4rem;
   color: #0e2d32;
 }
 
 .help-img {
-  margin-left: 5rem;
-  margin-right: 3rem;
+  width: 50rem;
   border-radius: 3rem;
 }
 
@@ -109,8 +109,7 @@ const { smAndDown } = useDisplay();
 }
 
 .subtitle-team {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-bottom: .7rem;
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;

components/Home/Reviews.vue

@@ -1,23 +1,19 @@
 <template>
   <LayoutContainer :overflow="false">
-    <div :class="smAndDown ? '' : 'container-color'">
+    <div :class="smAndDown ? '' : 'container-color'" >
       <div class="d-flex justify-center align-center flex-column">
         <v-icon size="8" class="fa-solid fa-circle icon-title" />
         <h6 class="small-title">Avis Clients</h6>
       </div>
 
       <h1 class="title-review">C'est vous qui le dites</h1>
-
     </div>
 
-    <div v-if="!smAndDown" class="container-green">
+    <div class="container-green">
       <v-row justify="center">
-        <!-- v-card with client review -->
-        <div class="content">
-          
-        </div>
-        <v-col cols="5" class='col-review'>
-          <v-card class="review-card left mx-auto ">
+        <div class="content"></div>
+        <v-col cols="4" >
+          <v-card class="review-card left mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
@@ -34,7 +30,6 @@
               </p>
             </v-card-text>
 
-            <!-- card footer-->
             <small class="status">Directeur pédagogique</small>
 
             <small class="structure"
@@ -43,7 +38,7 @@
           </v-card>
         </v-col>
 
-        <v-col cols="5" class='col-review'>
+        <v-col cols="4" >
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -61,7 +56,6 @@
               </p>
             </v-card-text>
 
-            <!-- card footer-->
             <small class="status">Directeur pédagogique</small>
 
             <small class="structure">
@@ -72,8 +66,7 @@
       </v-row>
 
       <v-row justify="center">
-        <!-- v-card with client review -->
-        <v-col cols="5" class='col-review'>
+        <v-col cols="4" >
           <v-card class="review-card left mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -94,13 +87,12 @@
             <!-- card footer-->
             <small class="status">DIRECTEUR PÉDAGOGIQUE</small>
 
-            <small class="structure"
-              > École de Musique EPIC Musique en 4 Rivières (74)</small
+            <small class="structure">
+              École de Musique EPIC Musique en 4 Rivières (74)</small
             >
           </v-card>
         </v-col>
-
-        <v-col cols="5" class='col-review'>
+        <v-col cols="4">
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -111,15 +103,18 @@
 
             <v-card-text>
               <p class="description-review">
-                C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable. 
+                C'est un logiciel très bien conçu et efficace avec une équipe
+                ouverte, dynamique et à l'écoute. L’assistance est très
+                réactive, j'ai toujours eu une réponse rapide à mes besoins, ce
+                qui est fort appréciable.
               </p>
             </v-card-text>
 
             <!-- card footer-->
             <small class="status">Personnel administratif</small>
 
-            <small class="structure"
-              > École d'Arts de Saint-Michel-sur-Orge (91)</small
+            <small class="structure">
+              École d'Arts de Saint-Michel-sur-Orge (91)</small
             >
           </v-card>
         </v-col>
@@ -156,7 +151,6 @@
         </Slide>
       </Carousel>
     </div>
-
   </LayoutContainer>
 </template>
 
@@ -165,7 +159,7 @@ import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
-const { smAndDown } = useDisplay();
+const { smAndDown, mdAndDown } = useDisplay();
 const carousel = ref(null);
 
 const goPrevious = () => {
@@ -236,25 +230,15 @@ const items = ref([
 </script>
 
 <style scoped>
-
-.col-review{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  justify-content: normal;
-
-}
-
 .left {
   bottom: 12rem;
 }
 
 .right {
   bottom: 7rem;
-
 }
 
-.title{
+.title {
   font-size: 2rem;
   line-height: 42px;
   text-align: center;
@@ -273,7 +257,7 @@ const items = ref([
   color: #ffffff;
 }
 
-.carousel-button{
+.carousel-button {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -295,7 +279,6 @@ const items = ref([
   display: block;
 }
 
-
 .carousel {
   background-color: white;
   margin-top: 2rem;

components/Layout/Carousel/Fonctionnalite.vue

@@ -196,21 +196,23 @@ const previousAction = () => {
 }
 
 .card {
-  width: 80rem;
+  box-sizing: border-box; /* Assurez-vous que padding et border sont inclus dans la largeur de 80rem */
+}
+
+.card {
   min-height: 35rem;
   max-height: 35rem;
   border-radius: 1rem;
+  transition: transform 0.3s;
 }
 
 .v-card {
   border-radius: 1rem;
-  min-height: 25rem;
-  max-height: 25rem;
-  min-width: 90%;
-  max-width: 90%;
-  
+  min-height: 25rem; /* Hauteur minimale pour la carte interne */
+  /* Assurez-vous que toutes les propriétés de padding et margin qui pourraient affecter la taille sont réglées ici */
 }
 
+
 .card-container {
   display: flex;
   justify-content: center;

components/Layout/UI/AvantageCard.vue

@@ -7,10 +7,10 @@
       </div>
 
       <hr />
-      <p class="details-card">
+      <p class="details-card ml-2 mr-4">
         {{ description }}
       </p>
-      <ul class="dynamic-list ml-2">
+      <ul class="dynamic-list ml-4 mr-4">
         <li v-for="(item, index) in listItems" :key="index">{{ item }}</li>
       </ul>
       <div class="image-container">

components/Logiciels/Artist/Fonctionnalites.vue

@@ -46,7 +46,7 @@ const cards = [
   {
     logo:"images/logiciels/school/fonctionnalites/Agenda.png",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration", "Membres / Adhérents"],
+    list: ["Administration / Membres / Adhérents"],
   },
   {
     logo: "images/logiciels/school/fonctionnalites/Répertoire.png",

components/Logiciels/Manager/Fonctionnalites.vue

@@ -1,116 +1,35 @@
 <template>
   <div id="Fonctionnalites">
     <LayoutContainer>
-      <div class="container-green">
-        <div class="title-container mt-6">
-          <v-icon size="6" class="fa-solid fa-circle icon-title mt-6 ml-6" />
-          <h4 class="subtitle mt-6">
-            Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution
-          </h4>
-        </div>
-        <div class="title-container">
-          <h4 class="title mt-6 ml-3">
-            Des fonctionnalités adaptées à vos besoins
-          </h4>
-        </div>
         <v-row>
           <v-col cols="12">
-            <div class="d-flex justify-center align-center">
-            <div class="carousel-button" @click="previousAction">
-              <i class="fas fa-chevron-left" />
-            </div>
-            <div class="carousel-button" @click="nextAction">
-              <i class="fas fa-chevron-right" />
-            </div>
-          </div>
-          </v-col>
-
-        </v-row>
-        <v-row>
-          <v-col cols="12">
-            <Carousel
-              ref="functionCarousel"
-              :items-to-show="5"
-              :items-to-scroll="1"
-              class="carousel"
-            >
-              <Slide
-                v-for="(card, index) in cards"
-                :key="index"
-                :class="{
-                  card: true,
-                  'active-card': index === activeCardIndex,
-                }"
-              >
-                <div class="card-container">
-                  <v-card>
-                    <v-card-title>
-                      <h1 class="card-title">{{ card.title }}</h1>
-                    </v-card-title>
-                    <v-card-item>
-                      <v-card-text class="review-description">
-                        <ul>
-                          <li class="list-detail" v-for="item in card.list">
-                            {{ item }}
-                          </li>
-                        </ul>
-                      </v-card-text>
-
-                      <div class="card-footer">
-                        <!-- <v-card-actions class="reviewer-name">
-                          {{ card.name }}
-                        </v-card-actions>
-
-                        <p class="reviewer-status">
-                          {{ card.status }}
-                        </p> -->
-                        <p class="reviewer-structure">
-                          {{ card.option }}
-                        </p>
-                      </div>
-                    </v-card-item>
-                  </v-card>
-                </div>
-              </Slide>
-            </Carousel>
+            <LayoutCarouselFonctionnalite
+              :cards="cards"
+              :functionCarousel="functionCarousel"
+              :itemsToShow="itemsToShow"
+            />
           </v-col>
         </v-row>
-      </div>
+ 
     </LayoutContainer>
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 
 
 const functionCarousel = ref(null);
-const activeCardIndex = ref(2);
-
-const previousAction = () => {
-  const newIndex = activeCardIndex.value - 1;
-  if (newIndex >= 0) {
-    activeCardIndex.value = newIndex; 
-    functionCarousel.value.prev();
-  }
-};
-
-const nextAction = () => {
-  const newIndex = activeCardIndex.value + 1;
-  if (newIndex < cards.length) {
-    activeCardIndex.value = newIndex; 
-    functionCarousel.value.next();
-  }
-};
 
 const cards = [
   {
     title: "ESPACES DÉDIÉS",
-    list: ["Administration", "Membres/Adhérents"],
+    list: ["Administration / Membres  / Adhérents"],
   },
   {
+    logo: "images/logiciels/school/fonctionnalites/Répertoire.png",
+
     title: "RÉPERTOIRE",
     list: [
       "Membres",
@@ -180,173 +99,6 @@ const cards = [
 </script>
 
 <style scoped>
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 2.4rem;
-  color: white;
-  width: 35rem;
-}
-.list-detail {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1.2rem;
-  line-height: 1.2rem;
-  margin-bottom: 1rem;
-  color: #000000;
-  width: 100%;
-}
-.card-title {
-  white-space: pre-wrap;
-}
-.carousel {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.card.active-card {
-}
-
-.title-container {
-  display: flex;
-  align-items: center;
-}
-.subtitle-avantage {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: white;
-}
-.subtitle {
-  color: white;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.icon-title {
-  color: #D8050BE5;
-  margin-right: 0.5rem;
-}
-.card {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  transition: transform 0.3s;
-  min-width: 20%;
-  max-width: 20%;
-}
-
-.card.active-card {
-  transform: scale(1.05);
-}
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid #fff;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 4rem;
-}
-
-.carousel-button i {
-  color: #fff;
-}
-.reviewer-name {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 24px;
-  color: rgba(32, 147, 190);
-}
-
-.reviewer-status {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.reviewer-structure {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 0.8rem;
-  line-height: 14px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: #071b1f;
-}
-
-.review-description {
-  text-align: left;
-}
-.card-footer {
-  position: absolute;
-  right: 0;
-  margin-right: 2rem;
-}
-
-.card-text {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1rem;
-  height: 12rem;
-}
-.reviews-title {
-  color: #fff;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-  margin-left: 1rem;
-  width: 10rem;
-}
-
-.card {
-  width: 80rem;
-  min-height: 35rem;
-  max-height: 35rem;
-  border-radius: 1rem;
-}
-
-.v-card {
-  border-radius: 1rem;
-  min-height: 25rem;
-  max-height: 25rem;
-}
-
-.card-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
-}
-
 .container-green {
   background-color: #0e2d32;
 }

components/Logiciels/Manager/Presentation.vue

@@ -16,7 +16,7 @@
             <div class="black-circle">
               <div class="content-flex">
                 <v-img
-                  src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
+                  src="/images/logo/logiciels/Manager-Blanc.png"
                   class="logo-manager"
                 />
                 <p class="devis">
@@ -169,7 +169,6 @@
   font-weight: 500;
   font-size: 1rem;
   margin-left: 9rem;
-  margin-top: -1rem;
   width: 7rem;
 }
 .black-circle {
@@ -180,7 +179,7 @@
 }
 
 .logo-manager {
-  top: 1rem;
+  top: 2rem;
   margin-left: 0.3rem;
   margin-right: 0.5rem;
   z-index: 1;

components/Logiciels/School/Fonctionnalites.vue

@@ -39,7 +39,7 @@ const cards = [
   {
     logo: "images/logiciels/school/fonctionnalites/Agenda.png",
     title: "ESPACES DÉDIÉS",
-    list: ["Administration", "Professeurs", "Élèves/Familles"],
+    list: ["Administration / Professeurs / Élèves / Familles"],
   },
   {
     logo: "images/logiciels/school/fonctionnalites/Répertoire.png",