ajout composant comparatif logiciel

components/Home/Reviews.vue

@@ -1,19 +1,23 @@
 <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 class="container-green">
+    <div v-if="!smAndDown" class="container-green">
       <v-row justify="center">
-        <div class="content"></div>
-        <v-col cols="4" >
-          <v-card class="review-card left mx-auto">
+        <!-- v-card with client review -->
+        <div class="content">
+          
+        </div>
+        <v-col cols="5" class='col-review'>
+          <v-card class="review-card left mx-auto ">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
@@ -30,6 +34,7 @@
               </p>
             </v-card-text>
 
+            <!-- card footer-->
             <small class="status">Directeur pédagogique</small>
 
             <small class="structure"
@@ -38,7 +43,7 @@
           </v-card>
         </v-col>
 
-        <v-col cols="4" >
+        <v-col cols="5" class='col-review'>
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -56,6 +61,7 @@
               </p>
             </v-card-text>
 
+            <!-- card footer-->
             <small class="status">Directeur pédagogique</small>
 
             <small class="structure">
@@ -66,7 +72,8 @@
       </v-row>
 
       <v-row justify="center">
-        <v-col cols="4" >
+        <!-- v-card with client review -->
+        <v-col cols="5" class='col-review'>
           <v-card class="review-card left mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -87,12 +94,13 @@
             <!-- 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="4">
+
+        <v-col cols="5" class='col-review'>
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -103,18 +111,15 @@
 
             <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>
@@ -151,6 +156,7 @@
         </Slide>
       </Carousel>
     </div>
+
   </LayoutContainer>
 </template>
 
@@ -159,7 +165,7 @@ import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
-const { smAndDown, mdAndDown } = useDisplay();
+const { smAndDown } = useDisplay();
 const carousel = ref(null);
 
 const goPrevious = () => {
@@ -230,15 +236,25 @@ 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;
@@ -257,7 +273,7 @@ const items = ref([
   color: #ffffff;
 }
 
-.carousel-button {
+.carousel-button{
   display: flex;
   justify-content: center;
   align-items: center;
@@ -279,6 +295,7 @@ const items = ref([
   display: block;
 }
 
+
 .carousel {
   background-color: white;
   margin-top: 2rem;

components/Home/Solution.vue

@@ -73,7 +73,7 @@
       </v-col>
     </v-row>
 
-    <div v-if="smAndDown">
+    <!-- <div v-if="smAndDown">
       <div class="d-flex justify-center align-center">
         <div
           class="carousel-button"
@@ -153,7 +153,7 @@
           </v-col>
         </Slide>
       </Carousel>
-    </div>
+    </div> -->
   </LayoutContainer>
 </template>
 
@@ -161,73 +161,73 @@
 import { ref, onMounted } from "vue";
 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: "Orchestres, chorales, compagnies de danse, théâtre et cirque",
-//     image: "/images/OpenTalent_LogoNoir_Jaune_white.png",
-//     link: "/logiciels/artist",
-//     class: "artist-image",
-//     solutions: [
-//       "Gestion des membres",
-//       "Agenda de la structure",
-//       "Matériel & médiathèque",
-//       "Export de données",
-//       "Communication",
-//       "Statistiques",
-//       "Site internet intégré",
-//       "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",
-//     solutions: [
-//       "Gestion des membres",
-//       "Préinscription en ligne*",
-//       "Agenda de la structure",
-//       "Suivi pédagogique",
-//       "Gestion administrative et financière",
-//       "Communication",
-//       "Site internet intégré",
-//       "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",
-//     solutions: [
-//       "Gestion des personnes",
-//       "Agenda",
-//       "Suivi pédagogique",
-//       "Règlements",
-//       "Communication",
-//       "Site internet intégré",
-//       "Statistiques du réseau",
-//     ],
-//   },
-// ];
-// onMounted(() => {
-//   setTimeout(() => goNext(), 0);
-// });
+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: "Orchestres, chorales, compagnies de danse, théâtre et cirque",
+    image: "/images/OpenTalent_LogoNoir_Jaune_white.png",
+    link: "/logiciels/artist",
+    class: "artist-image",
+    solutions: [
+      "Gestion des membres",
+      "Agenda de la structure",
+      "Matériel & médiathèque",
+      "Export de données",
+      "Communication",
+      "Statistiques",
+      "Site internet intégré",
+      "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",
+    solutions: [
+      "Gestion des membres",
+      "Préinscription en ligne*",
+      "Agenda de la structure",
+      "Suivi pédagogique",
+      "Gestion administrative et financière",
+      "Communication",
+      "Site internet intégré",
+      "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",
+    solutions: [
+      "Gestion des personnes",
+      "Agenda",
+      "Suivi pédagogique",
+      "Règlements",
+      "Communication",
+      "Site internet intégré",
+      "Statistiques du réseau",
+    ],
+  },
+];
+onMounted(() => {
+  setTimeout(() => goNext(), 0);
+});
 </script>
 
 <style scoped>
@@ -451,8 +451,7 @@ import "vue3-carousel/dist/carousel.css";
 }
 
 .details-solution {
-  font-size: 1.3rem;
-  margin-bottom: 0.9rem;
+  font-size: .9rem;
   width: 10rem;
   margin-left: 1rem;
   font-family: "Barlow";

pages/index.vue

@@ -9,7 +9,7 @@
   <HomeCaroussel />
   
   <HomePromotion />
-  <!-- <HomeSolution /> -->
+  <HomeSolution />
   <HomeEventAgenda />
   <HomeBesoin />
   <HomeReviews />