correction

components/Home/Caroussel.vue

@@ -22,7 +22,9 @@
             </v-row>
 
             <v-row class="align-start">
-              <v-btn :class="item.buttonClass">En savoir plus</v-btn>
+              <nuxt-link :to="item.link">
+                <v-btn :class="item.buttonClass">En savoir plus</v-btn>
+              </nuxt-link>
             </v-row>
           </v-col>
 
@@ -67,9 +69,9 @@
 
 <script setup>
 import { useDisplay } from "vuetify";
-const {lgAndUp } = useDisplay();
+const { lgAndUp } = useDisplay();
 
-let activeIndex = ref(0); 
+let activeIndex = ref(0);
 
 const changeSlide = (index) => {
   activeIndex.value = index;
@@ -83,6 +85,7 @@ const carouselItems = ref([
     buttonClass: "btn-school",
     image: "/images/carousel/school/Fille_School.png",
     color: "rgba(32, 147, 190, 0.4)",
+    link: "/logiciels/school"
   },
   {
     logo: "/images/carousel/artist/artist.png",
@@ -91,6 +94,7 @@ const carouselItems = ref([
     buttonClass: "btn-artist",
     image: "/images/carousel/artist/musician.png",
     color: "rgba(250, 194, 10, 0.4)",
+    link: "/logiciels/artist"
   },
   {
     logo: "/images/carousel/manager/manager.png",
@@ -99,6 +103,7 @@ const carouselItems = ref([
     buttonClass: "btn-manager",
     image: "/images/carousel/manager/fédération.png",
     color: "rgba(216, 5, 11, 0.4)",
+    link: "/logiciels/manager"
   },
 ]);
 </script>
@@ -162,7 +167,6 @@ const carouselItems = ref([
   margin-top: 10vh;
 }
 
-
 .description {
   text-align: left;
   width: 30%;

components/Home/EventAgenda.vue

@@ -1,32 +1,38 @@
 <template>
   <LayoutContainer :overflow="false">
+    <div class="title-container">
       <h2 class="title">
         Retrouvez tous vos évènements dans l'agenda et référencez vous dans
         l'annuaire
       </h2>
+    </div>
 
-      <v-row>
+    <v-row>
+      <div class="btn-container">
         <v-col col="6">
-          <v-btn class="btn-event">Découvrir l'évènement </v-btn>
+          <v-btn class="btn-event">Découvrir les évènements </v-btn>
         </v-col>
 
         <v-col col="6">
-          <v-btn class="btn-event">Découvrir l'évènement </v-btn>
+          <v-btn class="btn-event">Découvrir l’ANNUAIRE </v-btn>
         </v-col>
-      </v-row>
+      </div>
+    </v-row>
 
     <div class="white-container">
       <v-row>
         <v-col cols="6">
-          <v-img 
-          src="/images/eventAgenda/logiciel.png"
-          class="screen-img"
-          
-          > </v-img>
+          <v-img src="/images/eventAgenda/logiciel.png" class="screen-img">
+          </v-img>
         </v-col>
-
+        <div class="circle">
+          <v-icon class="fa-brands fa-react icon"></v-icon>
+          <div class="circle-text">Réponse aux besoins</div>
+        </div>
         <v-col cols="6">
-          <h3 class="title-event">Une solution évolutive pour vous donner entière satisfaction</h3>
+          <h3 class="title-event">
+            Une solution évolutive pour vous donner entière satisfaction
+          </h3>
 
           <p class="details">
             La satisfaction de nos clients est notre première motivation et nous
@@ -42,13 +48,41 @@
 </template>
 
 <style scoped>
+.circle {
+  position: absolute;
+  left: 35%;
+  margin-top: 2rem;
+  width: 300px;
+  height: 300px;
+  background: #eff9fb;
+  border-radius: 50%;
+}
 
-* {
+.icon {
+  font-size: 3rem;
+  font-weight: bold;
+  color: #0e2d32;
+  margin-top: 6rem;
+  margin-left: 8rem;
+}
+.circle-text {
+  font-style: normal;
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 26px;
+  text-align: center;
+  color: #0e2d32;
   font-family: "Barlow";
   font-style: normal;
+  margin-top: 2rem;
 }
-
-.details{
+.btn-container {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 10rem;
+  margin-right: 10rem;
+}
+.details {
   font-weight: 400;
   font-size: 1rem;
   margin-top: 3rem;
@@ -56,19 +90,25 @@
   color: #091d20;
   width: 16rem;
   margin-left: 10rem;
+  font-family: "Barlow";
+  font-style: normal;
 }
 
 .title-event {
+  font-family: "Barlow";
+  font-style: normal;
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 38px;
-  margin-top: 3rem;
+  margin-top: 1rem;
   margin-left: 2rem;
   color: #091d20;
   width: 16rem;
   margin-left: 10rem;
 }
 .btn-event {
+  font-family: "Barlow";
+  font-style: normal;
   border-radius: 0.5rem;
   margin-left: 7vw;
   gap: 9px;
@@ -77,37 +117,49 @@
   line-height: 15px;
   width: 15rem;
   height: 3rem;
-  margin-left:15rem;
-  margin-top:2rem;
+  margin-left: 15rem;
+  margin-top: 2rem;
 }
 .title {
+  font-family: "Barlow";
+  font-style: normal;
   height: 114px;
   font-weight: 400;
-  font-size:2rem;
+  font-size: 2rem;
   line-height: 38px;
   text-align: center;
-  margin-left: 25rem;
-  margin-right: 25rem;
-  margin-top: 3rem;
+  margin-bottom: 2rem;
+  margin-top: 4rem;
   color: #ffffff;
+  width: 30rem;
+}
+
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .container {
-  height: 20rem;
+  height: 30rem;
   margin-bottom: 30rem;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-              linear-gradient(180deg, rgba(14, 45, 50, 0.04) 0%, rgba(14, 45, 50, 0.2) 100%),
-              linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
-              url("/images/eventAgenda/eventAgenda.jpg") no-repeat center center;
+    linear-gradient(
+      180deg,
+      rgba(14, 45, 50, 0.04) 0%,
+      rgba(14, 45, 50, 0.2) 100%
+    ),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+    url("/images/eventAgenda/eventAgenda.jpg") no-repeat center center;
   background-size: cover;
 }
 
 .white-container {
-  margin-top: 5rem;
+  margin-top: 15rem;
   background-color: #ffffff;
 }
 
-.screen-img{
+.screen-img {
   margin-left: 8rem;
   width: 70%;
   height: 90%;

components/Home/News.vue

@@ -5,8 +5,8 @@
         <div class="container-title">
           <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
 
-        <h6 class="small-title">Découvrez nos dernières actualités</h6>
-      </div>
+          <h6 class="small-title">Découvrez nos dernières actualités</h6>
+        </div>
         <h2 class="title">Quoi de neuf ?</h2>
       </v-col>
 
@@ -16,77 +16,118 @@
     </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>
-        <div class="carousel-button" @click="goNext">
-          <i class="fas fa-chevron-right"></i>
-        </div>
+      <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>
-
+          <div class="carousel-button" @click="goNext">
+            <i class="fas fa-chevron-right"></i>
+          </div>
+        </div>
       </v-col>
 
       <v-col cols="10">
-        <Carousel  :itemsToShow="3.5" :itemsToScroll="1" v-slot="{ carousel: _carousel }" ref="carousel">
-        <Slide class="slide-card" v-for="(actu, index) in actus" :key="index">
-          <div class="card ">
-            <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>
-            </div>
-            
-            <div class="card-footer">
-              <p class="card-date">{{ actu.date }}</p>
-              <button class="card-button">+</button>
+        <Carousel
+          :itemsToShow="3.5"
+          :itemsToScroll="1"
+          v-slot="{ carousel: _carousel }"
+          ref="carousel"
+        >
+          <Slide class="slide-card" v-for="(actu, index) in actus" :key="index">
+            <div class="card">
+              <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>
+              </div>
+
+              <div class="card-footer">
+                <p class="card-date">{{ actu.date }}</p>
+                <button class="card-button">+</button>
+              </div>
             </div>
-          </div>
-        </Slide>
-      </Carousel>
+          </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';
+import { ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
 
 const actus = ref([
-  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '20/06/2023', img: '/images/actu/actu1.jpg' },
-  { title: 'AMÉLIORATION DU RÉPERTOIRE', content: 'Sed laeditur hic coetuum magnificus', date: '21/06/2023', img: '/images/actu/actu2.jpg' },
-  { title: 'fOIRE AUX QUESTIONS', content: 'Sed laeditur hic coetuum magnificus', date: '22/06/2023', img: '/images/actu/actu3.jpg' },
-  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '23/06/2023', img: '/images/actu/actu4.jpg' },
-  { title: 'Actu 1', content: 'Sed laeditur hic coetuum magnificus gegr', date: '24/06/2023', img: '/images/actu/actu5.jpg' },
-  { title: 'Actu 2', content: 'Sed laeditur hic coetuum magnificus', date: '25/06/2023', img: '/images/actu/actu6.jpg' },
-  { title: 'Actu 3', content: 'Sed laeditur hic coetuum magnificus', date: '26/06/2023', img: '/images/actu/actu1.jpg' },
-  { title: 'Suivi Pédagogique', content: 'Sed laeditur hic coetuum magnificus', date: '27/06/2023', img: '/images/actu/actu2.jpg' }
+  {
+    title: "Suivi Pédagogique",
+    content: "Sed laeditur hic coetuum magnificus",
+    date: "20/06/2023",
+    img: "/images/actu/actu1.jpg",
+  },
+  {
+    title: "AMÉLIORATION DU RÉPERTOIRE",
+    content: "Sed laeditur hic coetuum magnificus",
+    date: "21/06/2023",
+    img: "/images/actu/actu2.jpg",
+  },
+  {
+    title: "fOIRE AUX QUESTIONS",
+    content: "Sed laeditur hic coetuum magnificus",
+    date: "22/06/2023",
+    img: "/images/actu/actu3.jpg",
+  },
+  {
+    title: "Suivi Pédagogique",
+    content: "Sed laeditur hic coetuum magnificus",
+    date: "23/06/2023",
+    img: "/images/actu/actu4.jpg",
+  },
+  {
+    title: "Actu 1",
+    content: "Sed laeditur hic coetuum magnificus gegr",
+    date: "24/06/2023",
+    img: "/images/actu/actu5.jpg",
+  },
+  {
+    title: "Actu 2",
+    content: "Sed laeditur hic coetuum magnificus",
+    date: "25/06/2023",
+    img: "/images/actu/actu6.jpg",
+  },
+  {
+    title: "Actu 3",
+    content: "Sed laeditur hic coetuum magnificus",
+    date: "26/06/2023",
+    img: "/images/actu/actu1.jpg",
+  },
+  {
+    title: "Suivi Pédagogique",
+    content: "Sed laeditur hic coetuum magnificus",
+    date: "27/06/2023",
+    img: "/images/actu/actu2.jpg",
+  },
 ]);
 
 let carousel;
 
 const goPrevious = () => carousel.prev();
 const goNext = () => carousel.next();
-
 </script>
 
 <style scoped>
-
 .card {
-  border: 0.5px solid #C4C4C4;
+  border: 0.5px solid #c4c4c4;
   border-radius: 15px 15px 0 0;
   margin-bottom: 2rem;
 }
 
-.icon-title{
-  color: #64AFB7;
+.icon-title {
+  color: #64afb7;
   margin-top: 4.5rem;
-
 }
-.container-title{
+.container-title {
   display: flex;
   align-items: center;
   margin-left: 2rem;
@@ -108,27 +149,27 @@ const goNext = () => carousel.next();
 .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: 600;
-font-size: 12px;
-line-height: 16px;
-display: flex;
-align-items: center;
-letter-spacing: 0.18em;
-text-transform: uppercase;
-margin-top: 1rem;
-margin-bottom: 1rem;
+.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: 600;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .card-date {
   font-size: 0.8em;
@@ -142,14 +183,12 @@ margin-bottom: 1rem;
   align-items: center;
 }
 
-
 .card-body {
   text-align: left;
-  margin-bottom:1rem ;
+  margin-bottom: 1rem;
   margin-left: 1rem;
 }
 
-
 .card-button {
   background-color: transparent;
   border: none;
@@ -157,23 +196,22 @@ margin-bottom: 1rem;
   font-size: 1.5em;
   text-align: right;
   color: #ffffff;
-  background-color: #64AFB7;;
+  background-color: #64afb7;
   border: none;
   text-align: center;
-  
 }
-.slide-card{
+.slide-card {
   margin-left: 1rem;
   margin-right: 1rem;
-
+  height: 100%;
 }
 
 .card-img-top {
   border-radius: 15px 15px 0 0;
   width: 100%;
-  height: 90%;
+  height: 100%;
   object-fit: cover;
-  object-position: center; 
+  object-position: center;
 }
 .small-title {
   font-family: "Barlow";
@@ -220,4 +258,4 @@ margin-bottom: 1rem;
   font-size: 10px;
   line-height: 15px;
 }
-</style>
+</style>

components/Home/Reviews.vue

@@ -1,4 +1,4 @@
-<template >
+<template>
   <LayoutContainer :overflow="false">
     <div class="container-color">
       <h6 class="small-title">Avis Clients</h6>
@@ -119,20 +119,25 @@
             >
           </v-card>
         </v-col>
-        
+
         <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>
-        <div class="carousel-button" @click="goNext">
-          <i class="fas fa-chevron-right"></i>
-        </div>
+          <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-row>
-      
-      <Carousel class="carrousel elevation-6" :itemsToShow="4" :itemsToScroll="2" v-slot="{ carousel: _carousel }" ref="carousel">
+
+      <Carousel
+        class="carrousel elevation-6"
+        :itemsToShow="4"
+        :itemsToScroll="2"
+        v-slot="{ carousel: _carousel }"
+        ref="carousel"
+      >
         <Slide v-for="(item, index) in items" :key="index">
           <div class="card">
             <v-img class="card-img" :src="item.src" alt="Card image cap" />
@@ -144,9 +149,9 @@
 </template>
 
 <script setup>
-import { Carousel, Slide } from 'vue3-carousel';
+import { Carousel, Slide } from "vue3-carousel";
 const items = ref([
-{ src: "/images/reviews/review1.png" },
+  { src: "/images/reviews/review1.png" },
   { src: "/images/reviews/review2.png" },
   { src: "/images/reviews/review3.png" },
   { src: "/images/reviews/review4.png" },
@@ -175,14 +180,13 @@ const goNext = () => carousel.next();
   margin-right: 1rem;
   margin-top: 1rem;
 }
-.card-img{
+.card-img {
   height: 10rem;
   width: 10rem;
   margin-left: auto;
   margin-right: auto;
   margin-top: 2rem;
   margin-bottom: 2rem;
-  
 }
 .carousel {
   background-color: white;
@@ -192,7 +196,7 @@ const goNext = () => carousel.next();
   width: 60rem;
   margin-left: auto;
   margin-right: auto;
-  box-shadow: #071b1f ;
+  box-shadow: #071b1f;
 }
 .container-green {
   background-color: #0e2d32;

components/Home/Solution.vue

@@ -15,7 +15,8 @@
           Orchestre, chorales, compagnies de danse, théâtre et cirque
         </p>
 
-        <v-row>
+        <nuxt-link to="/logiciels/artist">
+          <v-row>
           <div class="artist-image">
             <v-img
               src="/images/OpenTalent_LogoNoir_Jaune_white.png"
@@ -24,6 +25,8 @@
             </v-img>
           </div>
         </v-row>
+        </nuxt-link>
+
 
         <v-row>
           <v-col cols="6">
@@ -55,6 +58,7 @@
         </p>
 
         <v-row>
+          <nuxt-link to="/logiciels/manager">
           <v-row>
             <div class="manager-image">
               <v-img
@@ -67,6 +71,7 @@
               </div>
             </div>
           </v-row>
+        </nuxt-link>
         </v-row>
 
         <v-row>
@@ -99,11 +104,13 @@
         </p>
 
         <v-row>
+          <nuxt-link to="/logiciels/school">
           <v-row>
             <div class="school-image">
               <v-img src="/images/logo_school_white.png" class="logo"> </v-img>
             </div>
           </v-row>
+        </nuxt-link>
         </v-row>
 
         <v-row>
@@ -197,6 +204,7 @@
 
 .artist-image:hover::before {
   opacity: 1;
+  cursor: pointer;
 }
 .manager-image {
   position: relative;
@@ -225,6 +233,7 @@
 
 .manager-image:hover::before {
   opacity: 1;
+  cursor: pointer;
 }
 
 .school-image {
@@ -254,6 +263,7 @@
 
 .school-image:hover::before {
   opacity: 1;
+  cursor: pointer;
 }
 
 .col-info:first-child {

components/Logiciels/School/FAQ.vue → components/Layout/FAQ.vue

@@ -2,6 +2,7 @@
   <div id="Aide">
     <LayoutContainer>
       <div class="container-img">
+        <div class="overlay"></div>
         <v-row>
           <v-col cols="6">
             <div class="container-left">
@@ -52,6 +53,7 @@
 <style scoped>
 .container-left {
   margin-left: 6rem;
+  
 }
 
 .text-btn {
@@ -63,6 +65,7 @@
   color: #f0e8e4;
   white-space: normal !important;
   text-align: left;
+  
 }
 .btn-container {
   display: flex;
@@ -86,8 +89,12 @@
   font-size: 2rem;
   margin-right: 0.7rem;
   margin-left: 2rem;
+  z-index: 2;
+
 }
 .btn-faq-tuto {
+  z-index: 2;
+
   width: 20rem;
   height: 5.5rem;
   margin-left: 3rem;
@@ -117,6 +124,8 @@
   margin-right: 25rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
+  z-index: 2;
+
 }
 .btn-faq {
   width: 14rem;
@@ -128,6 +137,8 @@
   font-style: normal;
   font-weight: 500;
   font-size: 0.8rem;
+  z-index: 2;
+
   text-transform: none !important;
   line-height: 1rem;
 }
@@ -140,12 +151,14 @@
   margin-right: 15rem;
   width: 28rem;
   margin-bottom: 3rem;
+
 }
 .container-title {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
   margin-left: 3rem;
+  
 }
 
 .icon-title {
@@ -153,6 +166,8 @@
   color: #64afb7;
   margin-right: 0.5rem;
   margin-top: 3rem;
+
+
 }
 .subtitle-faq {
   color: #fff;
@@ -160,6 +175,7 @@
   font-family: "Barlow";
   width: 15rem;
   margin-right: 15rem;
+
 }
 .container-img {
   background-image: url("/images/logiciels/school/faq.jpg");
@@ -171,6 +187,22 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
+.container-img::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6); 
+  z-index: 1;
+}
+
+.v-row {
+  position: relative;
+  z-index: 2;
+}
 </style>

components/Layout/Navigation.vue

@@ -2,13 +2,16 @@
   <LayoutContainer>
     <v-row class="menu-bar custom-row">
       <v-col cols="6" sm="4" md="2">
-        <v-img
-          class="logo"
-          src="/images/Opentalent.png"
-          width="294px"
-          height="49px"
-        ></v-img>
-      </v-col>
+  <nuxt-link to="/">
+    <v-img
+      class="logo"
+      src="/images/Opentalent.png"
+      width="294px"
+      height="49px"
+    ></v-img>
+  </nuxt-link>
+</v-col>
+
 
       <v-col cols="12" sm="7" md="5">
         <nuxt-link class="common-styles menu-link" to="/about">A propos</nuxt-link>

components/Logiciels/School/Accompagnement.vue

@@ -2,8 +2,13 @@
   <div id="Accompagnement">
     <LayoutContainer>
       <div class="container-green">
-        <v-row>
-          <h6>Accompagnement</h6>
+        <v-row >
+          <div class="d-flex justify-center align-center mt-6">
+          <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
+          <h5 class="subtitle">
+            Accompagnement
+          </h5>
+        </div>
         </v-row>
 
         <v-row>
@@ -15,10 +20,14 @@
           </v-col>
 
           <v-col cols="6">
-            <h3>Formation prise en main du logiciel - En ligne</h3>
-            <p>
+            <h3 class="formation-title">Formation prise en main du logiciel - En ligne</h3>
+            <p class="formation-details">
               Parce qu’on sait qu’appréhender un nouvel outil peut-être
-              fastidieux et que vous n’avez pas de temps à perdre,... Lors de
+              fastidieux et que vous n’avez pas de temps à perdre,... 
+            </p>
+            <br>
+            <p class="formation-details mb-6">
+              Lors de
               votre souscription, nous vous invitons à choisir des dates de
               formation qui se déroulera sous 2 jours non consécutifs. En effet,
               ce sont des journées riches d’informations et nous mettons un
@@ -30,7 +39,7 @@
               structure.
             </p>
 
-            <v-btn>S’incrire à une formation</v-btn>
+            <v-btn class="formation-btn">S’incrire à une formation</v-btn>
           </v-col>
         </v-row>
       </div>
@@ -41,52 +50,150 @@
           class="d-flex justify-center align-center small-padding"
         >
           <div class="card">
-            <h3>30 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">
           <div class="card">
-            <h3>30 1500</h3>
-            <p>elèves</p>
+            <h3 class="chiffre">234</h3>
+            <p>utilisateurs</p>
           </div>
         </v-col>
 
         <v-col cols="3" class="d-flex justify-center align-center">
           <div class="card">
-            <h3>30 1500</h3>
-            <p>elèves</p>
+            <h3 class="chiffre">20304</h3>
+            <p>clients </p>
           </div>
         </v-col>
 
         <v-col cols="3" class="d-flex justify-center align-center">
           <div class="card">
-            <h3>30 1500</h3>
-            <p>elèves</p>
+            <h3 class="chiffre">13</h3>
+            <p>années d’expériences</p>
           </div>
         </v-col>
       </v-row>
 
       <v-row>
-        <!-- Caroussel-->
-        <v-carousel>
-          <v-carousel-item
-            v-for="(item, i) in items"
-            :key="i"
-            :src="item.src"
-            reverse-transition="fade-transition"
-            transition="fade-transition"
-          ></v-carousel-item>
-        </v-carousel>
+        <LogicielsSchoolCaroussel />
+
+      </v-row>
+
+      <v-row>
+   
       </v-row>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+
+
+</script>
 
 <style scoped>
+.carousel-button i {
+  color:black;
+}
+
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid black;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
+.title{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 42px;
+line-height: 42px;
+text-align: center;
+color: #0E2D32;
+width: 30rem;
+margin-left: auto;
+margin-right: auto;
+margin-bottom: 2rem;
+}
+.chiffre{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 60px;
+line-height: 68px;
+text-align: center;
+color: #091D20;
+margin-bottom: .5rem;
+}
+.formation-btn{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 15px;
+line-height: 18px;
+background: transparent;
+color: #EFF9FB;
+border: 1px solid #EFF9FB;
+border-radius: 2rem;
+margin-left: 7rem;
+
+}
+.formation-details{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 300;
+font-size: 14px;
+line-height: 18px;
+color: #EFF9FB;
+margin-left: 7rem;
+
+}
+.formation-title{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 22px;
+line-height: 26px;
+color: #FFFFFF;
+margin-left: 7rem;
+margin-bottom: 3rem;
+}
+.reunion-img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 20%;
+  margin-left: 5rem;
+}
+.subtitle {
+  font-family: "Barlow";
+  font-weight: 500;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+font-weight: 600;
+line-height: 16px;
+display: flex;
+align-items: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+
+}
+
+.icon-title {
+  color: rgba(32, 147, 190, 0.6);
+  font-size: 1.5rem;
+  margin-right: .5rem;
+  margin-left: 5rem;
+}
 .container-green {
   background-color: #0e2d32;
   padding: 20px;
@@ -97,8 +204,8 @@
 .card-container {
   margin-top: 20px;
   margin-bottom: 20px;
-  margin-left: 20rem;
-  margin-right: 20rem;
+  margin-left: 5rem;
+  margin-right: 5rem;
 }
 .card {
   background: #c3e5e7;
@@ -107,5 +214,12 @@
   padding-right: 5rem;
   padding-top: 3rem;
   padding-bottom: 3rem;
+  width: 36rem;
+  height: 15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 </style>

components/Logiciels/School/Agenda.vue

@@ -1,55 +1,301 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer :overflow="false">
     <v-row>
       <v-col cols="4">
-        <h3>L'agenda Opentalent</h3>
+        <h2 class="title">L'agenda Opentalent</h2>
       </v-col>
 
-      <v-col cols="4"> </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>Tous les évèvenements</v-btn>
+        <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>
-      <!-- slide card-->
-      <v-col cols="4">
-        <v-card>
-          <v-img
-            src="/images/logiciels/school/enseignement.jpg"
-            class="enseignement"
+      <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"
           >
-            <v-card-title class="title">Enseignement</v-card-title>
-          </v-img>
-        </v-card>
-      </v-col>
-      
-      <v-col cols="4">
-        <v-card>
-          <v-img
-            src="/images/logiciels/school/enseignement.jpg"
-            class="enseignement"
-          >
-            <v-card-title class="title">Enseignement</v-card-title>
-          </v-img>
-        </v-card>
-      </v-col>
+            <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>
 
-      <v-col cols="4">
-        <v-card>
-          <v-img
-            src="/images/logiciels/school/enseignement.jpg"
-            class="enseignement"
-          >
-            <v-card-title class="title">Enseignement</v-card-title>
-          </v-img>
-        </v-card>
+              <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></script>
+<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;
+}
 
-<style scoped></style>
+.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>

components/Logiciels/School/Caroussel.vue

@@ -0,0 +1,98 @@
+<template>
+  <LayoutContainer :overflow="false">
+    <v-row justify="center">
+      <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>
+        <div class="carousel-button" @click="goNext">
+          <i class="fas fa-chevron-right"></i>
+        </div>
+      </div>
+    </v-row>
+
+    <Carousel
+      class="carrousel elevation-6"
+      :itemsToShow="4"
+      :itemsToScroll="2"
+      v-slot="{ carousel: _carousel }"
+      ref="carousel"
+    >
+      <Slide v-for="(item, index) in items" :key="index">
+        <div class="card">
+          <v-img class="card-img" :src="item.src" alt="Card image cap" />
+        </div>
+      </Slide>
+    </Carousel>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { Carousel, Slide } from "vue3-carousel";
+const items = ref([
+  { src: "/images/reviews/review1.png" },
+  { src: "/images/reviews/review2.png" },
+  { src: "/images/reviews/review3.png" },
+  { src: "/images/reviews/review4.png" },
+  { src: "/images/reviews/review5.png" },
+]);
+let carousel;
+
+const goPrevious = () => carousel.prev();
+const goNext = () => carousel.next();
+</script>
+
+<style scoped>
+.carousel-button i {
+  color: black;
+}
+
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid black;
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
+.card-img {
+  height: 10rem;
+  width: 10rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.carousel {
+  background-color: white;
+  margin-top: 2rem;
+  border-radius: 20px;
+  height: 13em;
+  width: 60rem;
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: #071b1f;
+}
+
+.title {
+  font-family: "Barlow";
+  margin-bottom: 2rem;
+  font-style: normal;
+  text-align: center;
+  color: black;
+  margin-left: 30rem;
+  margin-right: 30rem;
+font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 42px;
+line-height: 42px;
+text-align: center;
+color: #0E2D32;
+}
+</style>

components/Logiciels/School/Projet.vue

@@ -1,109 +1,107 @@
 <template>
   <div id="Contact">
-  <LayoutContainer>
-    <v-row>
-      <div class="project-container">
-        
-      </div>
-      <v-col cols="4">
-        <div class="contact-container">
-          <h5 class="contact">Contactez-nous</h5>
+    <LayoutContainer>
+      <v-row>
+        <div class="project-container"></div>
+        <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>
+            </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>
+            <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
+              soyez une petite ou une structure plus conséquente, notre offre
+              s'adapte à toutes les tailles : le prix de l’abonnement au
+              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>
+          </div>
+        </v-col>
+      </v-row>
+
+      <v-row class="border-row">
+        <v-col cols="2">
           <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>
-          <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 soyez
-            une petite ou une structure plus conséquente, notre offre s'adapte à
-            toutes les tailles : le prix de l’abonnement au 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>
-
-        </div>
-
-      </v-col>
-    </v-row>
-
-    <v-row class="border-row">
-      <v-col cols="2">
-        <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">
-          <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
-          <p>
-            Si votre établissement d’enseignement artistique est adhérent à la
-            Confédération Musicale de France (CMF), vous bénéficiez
-            gratuitement, dans le cadre de votre adhésion, de la version
-            Opentalent Artist standard et de conditions priviliégiés pour la
-            version Opentalent School. Contactez nous direcetement ou contactez
-            votre fédération pour obtenir vos codes d’accès.
-          </p>
-        </div>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="4" class="border-col">
-        <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon"></v-icon>
-        </div>
-        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
-      </v-col>
-      <v-col cols="4" class="border-col">
-        <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon"></v-icon>
-        </div>
-        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
-      </v-col>
-
-      <v-col cols="4" class="border-col">
-        <div class="d-flex justify-center align-center">
-          <v-icon class="fa-brands fa-react icon"></v-icon>
-        </div>
-        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</div>
+            class="logo-cmf"
+            src="/images/logiciels/school/cmf_logo_orange.png"
+          ></v-img>
+        </v-col>
+        <v-col cols="10">
+          <div class="cmf-container">
+            <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
+            <p>
+              Si votre établissement d’enseignement artistique est adhérent à la
+              Confédération Musicale de France (CMF), vous bénéficiez
+              gratuitement, dans le cadre de votre adhésion, de la version
+              Opentalent Artist standard et de conditions priviliégiés pour la
+              version Opentalent School. Contactez nous direcetement ou
+              contactez votre fédération pour obtenir vos codes d’accès.
+            </p>
+          </div>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="4" class="border-col">
+          <div class="d-flex justify-center align-center">
+            <v-icon class="fa-brands fa-react icon"></v-icon>
+          </div>
+          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+        </v-col>
+        <v-col cols="4" class="border-col">
+          <div class="d-flex justify-center align-center">
+            <v-icon class="fa-brands fa-react icon"></v-icon>
+          </div>
+          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+        </v-col>
+
+        <v-col cols="4" class="border-col">
+          <div class="d-flex justify-center align-center">
+            <v-icon class="fa-brands fa-react icon"></v-icon>
+          </div>
+          <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
 <script setup></script>
 
 <style scoped>
-
-.border-col{
-  border-top: 1px solid #E5E5E5;
-  border-right: 1px solid #E5E5E5;
+.border-col {
+  border-top: 1px solid #e5e5e5;
+  border-right: 1px solid #e5e5e5;
   height: 8rem;
 }
-.border-row{
-  border: 1px solid #E5E5E5;
+.border-row {
+  border: 1px solid #e5e5e5;
   margin-left: 10rem;
   margin-right: 28rem;
   margin-bottom: 3rem;
 }
-.cmf-container{
+.cmf-container {
   margin-left: 3rem;
   margin-top: 4rem;
   margin-bottom: 4rem;
   width: 30rem;
 }
 
-.logo-cmf{
+.logo-cmf {
   width: 10rem;
   height: 10rem;
   margin-top: 3rem;
@@ -111,19 +109,14 @@
   margin-left: 3rem;
 }
 
-.project-container{
+.project-container {
   margin-top: 4rem;
   margin-bottom: 4rem;
 }
 
-*{
-  font-family: 'Barlow';
-  font-style: normal;
-
-}
 .btn-contact {
-  background: #F4AA2A;
-border-radius: 6px;
+  background: #f4aa2a;
+  border-radius: 6px;
   color: #fff;
 
   font-weight: 600;
@@ -133,48 +126,62 @@ border-radius: 6px;
   text-transform: uppercase;
   margin-top: 2rem;
   margin-bottom: 3rem;
+  font-family: "Barlow";
+  font-style: normal;
 }
 
-.contact-details{
-font-weight: 300;
-font-size: 16px;
-line-height: 20px;
-color: #091D20;
-width: 20rem;
+.contact-details {
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  width: 20rem;
+  font-family: "Barlow";
+  font-style: normal;
 }
-.contact{
+.contact {
   margin-top: 2rem;
   margin-bottom: 3rem;
+  margin-right: 10rem;
+}
+
+.icon-title {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+  color: rgba(32, 147, 190, 0.6);
 }
-.title{
+.title {
   margin-top: 2rem;
   margin-bottom: 1rem;
-font-weight: 600;
-font-size: 42px;
-line-height: 42px;
-color: #071B1F;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  font-family: "Barlow";
+  font-style: normal;
 }
 
-.subtitle{
-font-weight: 400;
-font-size: 34px;
-line-height: 38px;
-color: #071B1F;
-margin-bottom: 2rem;
+.subtitle {
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 38px;
+  color: #071b1f;
+  margin-bottom: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
 }
 
-.contact-container{
+.contact-container {
   margin-left: 10rem;
-font-weight: 600;
-font-size: 12px;
-line-height: 16px;
-letter-spacing: 0.18em;
-text-transform: uppercase;
-margin-top: 4rem;
-margin-bottom: 2rem;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  margin-top: 4rem;
+  margin-bottom: 2rem;
 }
 
-
 .icon {
   margin-top: 2rem;
   font-size: 3rem;

components/Logiciels/School/Solutions.vue

@@ -26,34 +26,34 @@
         column
         >
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           label
           >
-            <span>Agenda</span>
+            <span class="chip-detail">Agenda</span>
           </v-chip>
           <v-chip
-          class="ma-2"
+          class="ma-2 chip-custom"
           label
           >
-            <span>Facturation</span>
+            <span class="chip-detail">Facturation</span>
           </v-chip>
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           label
           >
-            <span>Comptabilité</span>
+            <span class="chip-detail">Comptabilité</span>
           </v-chip>
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           label
           >
-            <span>Communication</span>
+            <span class="chip-detail">Communication</span>
           </v-chip>
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           label
           >
-            <span>Site internet</span>
+            <span class="chip-detail">Site internet</span>
           </v-chip>
       </v-chip-group>
       </v-col>
@@ -81,39 +81,39 @@
         column
         >
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           color="primary"
           label
           >
-            <span>Agenda</span>
+            <span class="chip-detail">Agenda</span>
           </v-chip>
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           color="primary"
           label
           >
-            <span>Facturation</span>
+            <span class="chip-detail">Facturation</span>
           </v-chip>
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           color="primary"
           label
           >
-            <span>Comptabilité</span>
+            <span class="chip-detail">Comptabilité</span>
           </v-chip>
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           color="primary"
           label
           >
-            <span>Communication</span>
+            <span class="chip-detail">Communication</span>
           </v-chip>
           <v-chip
-          class="ma-2 chip"
+          class="ma-2 chip-custom"
           color="primary"
           label
           >
-            <span>Site internet</span>
+            <span class="chip-detail">Site internet</span>
           </v-chip>
       </v-chip-group>
       </v-col>
@@ -128,9 +128,11 @@
   
   <style scoped>
   
-  .chip {
-    /* position: inherit; */
-    color: black;
+  .chip-detail{
+    color: #000000;
+  }
+  .chip-custom {
+    color:white;
     border: 1px solid #0E2D32;
     border-radius: 3rem; 
     text-transform: uppercase;
@@ -141,7 +143,6 @@
   font-size: 14px;
   line-height: 16px;
   
-  /* identical to box height, or 114% */
   display: flex;
   align-items: center;
   text-align: center;

pages/actu.vue

@@ -1,88 +1,301 @@
 <template>
-  <div class="row">
-    <div class="col-2">
-      <button @click="goPrevious">Précédent</button>
-      <button @click="goNext">Suivant</button>
-    </div>
-    <div class="col-8">
-      <Carousel class="carrousel" :itemsToShow="3.5" :itemsToScroll="1" v-slot="{ carousel }">
-        <Slide v-for="(actu, index) in actus" :key="index">
-          <div class="card">
-            <img class="card-img-top" :src="'https://picsum.photos/300/300?random='+index" alt="Card image cap">
-            <div class="card-body">
-              <h5 class="card-title">{{ actu.title }}</h5>
-              <p class="card-text">{{ actu.content }}</p>
-              <p class="card-date">{{ actu.date }}</p>
-            </div>
-            <div class="card-footer">
-              <button class="card-button">+</button>
-            </div>
+  <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>
-        </Slide>
-      </Carousel>
-    </div>
-  </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 actus = ref([
-  { title: 'Actu 1', content: 'Contenu 1', date: '20/06/2023' },
-  { title: 'Actu 2', content: 'Contenu 2', date: '21/06/2023' },
-  { title: 'Actu 3', content: 'Contenu 3', date: '22/06/2023' },
-  { title: 'fenihfze', content: 'bjkeffbezk', date: '23/06/2023' },
-  { title: 'Actu 1', content: 'Contenu 1', date: '24/06/2023' },
-  { title: 'Actu 2', content: 'Contenu 2', date: '25/06/2023' },
-  { title: 'Actu 3', content: 'Contenu 3', date: '26/06/2023' },
-  { title: 'fenihfze', content: 'bjkeffbezk', date: '27/06/2023' }
-]);
+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";
+  }
+};
 
-let carouselInstance;
+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"],
+  },
+]);
 
-const goNext = () => carouselInstance.value.advance(1);
-const goPrevious = () => carouselInstance.value.advance(-1);
+let carousel;
 
+const goPrevious = () => carousel.prev();
+const goNext = () => carousel.next();
 </script>
 
 <style scoped>
-.row {
-  display: flex;
+.green--text {
+  color: green;
 }
 
-.col-4,
-.col-8 {
-  flex: 1 1 0;
+.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;
-  border: 1px solid #ccc;
-  width: auto;
-  height: auto;
+  margin-bottom: 2rem;
+  width: 90%;
 }
 
-.card-img-top {
-  border-radius: 15px 15px 0 0;
-  width: 100%;
-  height: auto;
+.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 {
-  text-align: right;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.card-button {
-  background-color: transparent;
-  border: none;
-  font-size: 1.5em;
-  color: #888;
+.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/logiciels/artist.vue

@@ -9,7 +9,7 @@
   <LogicielsArtistAccompagnement/>
   <LogicielsArtistReviews/>
   <LogicielsArtistAgenda/>
-  <LogicielsArtistFAQ/>
+  <LayoutFAQ/>
   <LogicielsArtistSolutions/>
   <LayoutFooter />
 </template>

pages/logiciels/manager.vue

@@ -10,7 +10,7 @@
   <LogicielsManagerAccompagnement/>
   <LogicielsManagerReviews/>
   <!-- <LogicielsManagerAgenda/> -->
-  <LogicielsManagerFAQ/>
+  <LayoutFAQ/>
   <LogicielsManagerSolutions/>
   <LayoutFooter />
 </template>

pages/logiciels/school.vue

@@ -10,7 +10,7 @@
   <LogicielsSchoolAccompagnement/>
   <LogicielsSchoolReviews/>
   <LogicielsSchoolAgenda/>
-  <LogicielsSchoolFAQ/>
+  <LayoutFAQ/>
   <LogicielsSchoolSolutions/>
   <LayoutFooter />
 </template>