correction v3

assets/css/main.css

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap');
 
-h1, h2, h3, h4, h5, h6, p, small, .btn-event, .btn-contact, td, .button-faq, li, .btn-school, .btn-artist, .btn-manager, .name, .school, .view-button,
+h1, h2, h3, h4, h5, h6, p, small, .btn-event, .btn-contact, .formation-btn, td, .button-faq, li, .btn-school, .btn-artist, .btn-manager, .name, .school, .view-button,
 .presentation-title, .subtitle
 .status {
   font-family: "Barlow";

components/About/Agenda.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="L'agenda opentalent">
     <LayoutContainer>
-      <v-row class="custom-row">
+      <v-row class="custom-row align-center">
         <v-col cols="4">
           <h2 class="title">L'agenda Opentalent</h2>
         </v-col>
@@ -29,28 +29,26 @@
       </v-row>
 
       <v-row class="custom-row">
-        <v-col cols="12">
-          <Carousel ref="carousel" :items-to-show="3" :items-to-scroll="2">
+        <v-col cols="12" lg="12" md="12">
+          <Carousel ref="carousel" :items-to-show="3.2" :items-to-scroll="2">
             <Slide
               v-for="(event, eventIndex) in events"
               :key="eventIndex"
               class="slide-card"
             >
-              <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-card>
+                <div
+                  class="card-img"
+                  :style="{ backgroundImage: 'url(' + event.img + ')' }"
+                ></div>
+
+                <v-card-title>
+                  {{ event.title }}
+                </v-card-title>
+
+                <v-card-text>
+                  {{ event.localisation }}
+                </v-card-text>
 
                 <div class="card-footer">
                   <v-chip-group active-class="primary--text" column>
@@ -65,7 +63,7 @@
                     </v-chip>
                   </v-chip-group>
                 </div>
-              </div>
+              </v-card>
             </Slide>
           </Carousel>
         </v-col>
@@ -149,6 +147,24 @@ const goNext = () => carousel.next();
 </script>
 
 <style scoped>
+
+.card-footer{
+  text-align: left !important;
+}
+.v-card {
+  box-shadow: none !important;
+  margin-right: 1rem;
+  text-align: left;
+}
+.card-img {
+  width: 100%;
+  height: 300px;
+  background-size: cover;
+  background-position: center;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+}
+
 .green--text {
   color: green;
 }
@@ -180,67 +196,20 @@ const goNext = () => carousel.next();
   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 {
-  mily: "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;
@@ -249,30 +218,6 @@ const goNext = () => carousel.next();
 
 .card-footer {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-left: 4rem;
-}
-
-.card-body {
-  text-align: left;
-  margin-bottom: 1rem;
-  margin-left: 5rem;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-  color: #112528;
-}
-
-.card-img-top {
-  border-radius: 9px 9px 0 0;
-  max-width: 400px;
-  min-width: 400px;
-  min-height: 300px;
-  max-height: 300px;
-  object-fit: cover;
-  object-position: center;
 }
 
 .title,

components/About/Chronologie.vue

@@ -195,7 +195,7 @@ const slides = [
 
 .active-slide {
   opacity: 1;
-  transform: scale(1.1); /* Zoom effect */
+  transform: scale(1.1);
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 
@@ -310,9 +310,4 @@ const slides = [
   border-bottom-left-radius: 20%;
 }
 
-/* @media (max-width: 768px) {
-  .carousel-row {
-    flex-direction: column;
-  }
-} */
 </style>

components/About/Histoire.vue

@@ -1,15 +1,16 @@
 <template>
   <LayoutContainer>
     <div id="Qui sommes-nous">
+
       <v-row class="mt-12 custom-row">
-        <v-col cols="3">
+        <v-col cols="4">
           <LayoutUISubTitle
             :titleText="'Qui sommes-nous ?'"
             />
         </v-col>
 
-        <v-col cols="9">
-          <h3 class="italic-title">
+        <v-col cols="8">
+          <h3 class="italic-title mr-8">
             “Imaginé par des musiciens pour des musiciens, Opentalent se veut
             être la référence pour la gestion et la promotion du spectacle
             vivant sur les territoires.”
@@ -17,9 +18,10 @@
         </v-col>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row style="width: 80%; margin-left: auto; margin-right: auto;">
         <v-col cols="6">
-          <v-img class="passion-img" src="/images/about/passion.jpg" />
+          <div class="passion-img"></div>
+          <!-- <v-img class="passion-img" src="/images/about/passion.jpg" /> -->
         </v-col>
 
         <v-col cols="6">
@@ -112,10 +114,13 @@
 }
 
 .passion-img {
-  width: 60%;
+  background-image: url(/images/about/passion.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  width: 400px;
   height: 100%;
-  margin-left: 5rem;
-  border-radius: 4rem;
+  border-radius: 20px;
 }
 
 .italic-title {
@@ -125,8 +130,8 @@
   font-size: 34px;
   line-height: 40px;
   color: #091d20;
-  width: 50rem;
-  margin-left: 14rem;
-  margin-bottom: 3rem;
+  width: 80%;
+  margin-left: auto;
+  margin-bottom: auto;
 }
 </style>

components/About/Valeurs.vue

@@ -1,29 +1,13 @@
 <template>
   <LayoutContainer>
     <div id="Nos valeurs">
-      <v-row class="mt-6 custom-row">
-        <v-col cols="5">
-          <LayoutUISubTitle :titleText="'Les valeurs qui nous portent'" />
+      <div class="v-row custom-row">
+        <LayoutUISubTitle :titleText="'Les valeurs qui nous portent'" />
+      </div>
 
-          <div class="container-img">
-            <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 right-img"
-                src="/images/about/valeur3.jpg"
-              />
-            </v-row>
-
-            <img
-              class="image-ronde bottom-img"
-              src="/images/about/valeur4.jpg"
-            />
-          </div>
+      <v-row class="mt-6 custom-row align-center">
+        <v-col cols="6">
+          <div class="valeur-img"></div>
         </v-col>
 
         <v-col cols="6">
@@ -85,6 +69,14 @@ const values = [
 ];
 </script>
 <style scoped>
+.valeur-img {
+  background-image: url(/images/about/valeurs/valeur.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  height: 400px;
+  width: 450px;
+}
 .custom-row {
   width: 90%;
   margin-left: auto;

components/Formation/OPCA.vue

@@ -1,82 +1,88 @@
 <template>
   <div id="Financement">
-    <LayoutContainer>
+    <LayoutContainer >
       <v-row class="custom-row">
-      >
         <LayoutUISubTitle
           :iconSize="6"
           :iconClasses="iconClasses"
-          :titleText="'Découvrez notre catalogue de formation'"
+          :titleText="'Financement des formations'"
           :title-color="'#ffffff'"
         />
-
       </v-row>
 
-        <v-container>
-          <v-row >
-        <v-col cols="6">
-          <v-img src="/images/formation/programme.jpg" class="opca-img" />
-        </v-col>
-
-        <v-col cols="6" class="col-opca">
-          <v-row>
-            <h3 class="title-opca">Des formations éligibles par votre OPCA</h3>
-          </v-row>
+      <v-container>
+        <v-row class="align-center custom-row">
+          <v-col cols="6">
+            <div class="opca-img"></div>
+          </v-col>
 
-          <v-row>
-            <div class="details-opca">
-              <p>
-                Les formations dispensées par Opentalent entrent dans le cadre
-                de la formation professionnelle continue et peuvent être pris en
-                charge par votre OPCA (Uniformation, AFDAS, ...). Si votre
-                formation est prise en charge par un organisme accrédité, des
-                documents pourront vous être demandés (convention de
-                formation...). Nous pouvons vous fournir tous les éléments
-                nécessaires mais les démarches restent de votre responsabilité.
-                Afin de réduire le coût,nos formations sont exonérées de TVA.
-              </p>
+          <v-col cols="12" md="6" lg="6">
+            <v-row>
+              <h3 class="title-opca mt-6 mb-6 mr-6">
+                Des formations éligibles par votre OPCA
+              </h3>
+            </v-row>
 
-              <p>
-                Enregistrée sous le n° 82 74 02696 74. Cet enregistrement ne
-                vaut pas l’agrément de l’état.
-              </p>
-            </div>
-          </v-row>
-        </v-col>
-      </v-row>
-        </v-container>
+            <v-row>
+              <div class="details-opca mr-6">
+                <p>
+                  Les formations dispensées par Opentalent entrent dans le cadre
+                  de la formation professionnelle continue et peuvent être pris
+                  en charge par votre OPCA (Uniformation, AFDAS, ...). Si votre
+                  formation est prise en charge par un organisme accrédité, des
+                  documents pourront vous être demandés (convention de
+                  formation...). Nous pouvons vous fournir tous les éléments
+                  nécessaires mais les démarches restent de votre
+                  responsabilité. Afin de réduire le coût,nos formations sont
+                  exonérées de TVA.
+                </p>
 
+                <p>
+                  Enregistrée sous le n° 82 74 02696 74. Cet enregistrement ne
+                  vaut pas l’agrément de l’état.
+                </p>
+              </div>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+</script>
 
 <style scoped>
-
+@media (min-width: 1200px) {
+  .custom-row {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
 .custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
 
-.details-opca{
-  text-align: justify;
-}
 .opca-img {
-  width: 100%;
-  border-radius: 2rem;
+  background-image: url("/images/formation/programme.jpg");
+  background-size: cover;
+  background-position: center;
+  height: 400px;
+  width: 450px;
+  border-radius: 10%;
 }
 
 .details-opca {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
   font-size: 16px;
   line-height: 20px;
   margin-top: 2rem;
   color: #ffffff;
-  margin-left: 5rem;
+  width: 100%;
+  margin: auto;
+  text-align: justify;
 
 }
 
@@ -85,9 +91,7 @@
   font-size: 42px;
   line-height: 42px;
   color: #ffffff;
-  margin-top: .6rem;
-  margin-left: 5rem;
-
+  margin-top: 0.6rem;
 }
 
 .container {

components/Formation/Participation.vue

@@ -8,7 +8,6 @@
             :iconClasses="iconClasses"
             :titleText="'Accessibilité'"
             :title-color="'#ffffff'"
-            class="subtitle"
           />
         </v-col>
       </v-row>
@@ -27,34 +26,33 @@
         </v-col>
       </v-row>
 
-      <v-row class="mb-12 custom-row" >
+      <v-row class="mb-12 custom-row">
         <v-col cols="12">
           <div class="details-participations">
-            <p  class="mb-6" >
-            Nous vous répondons sous 48h (hors week-ends). Délais d'accès: Après
-            accord, nous mettons tout en oeuvre pour vous mettre à disposition
-            un formateur sous 1 mois."
-          </p>
-          
-          <p >
-            Nos formations peuvent être accessibles aux personnes en situation
-            de handicap. Chaque situation étant unique, nous vous demandons de
-            préciser à l’inscription votre handicap. Nous pourrons ainsi
-            confirmer l’ensemble des possibilités afin de vous permettre de
-            suivre la formation dans les meilleures conditions en accord avec
-            votre employeur. Pour toutes informations complémentaires, nous vous
-            conseillons les structures suivantes : ONISEP, AGEFIPH et FIPHFP.
-            Pour le bon déroulement de la formation, il est nécessaire de
-            disposer d’un espace de travail calme et équipé d’au moins un
-            ordinateur, connecté à internet, et dont le navigateur (Mozilla
-            Firefox, Google Chrome, ou Apple Safari) est à jour. Nous
-            recommandons d’utiliser un ordinateur par personne. Les participants
-            devront également avoir des ordinateurs équipés de micros et de
-            haut-parleurs, préférablement des micro-casques pour un meilleur
-            confort d’écoute.
-          </p>
-          </div>
+            <p class="mb-6">
+              Nous vous répondons sous 48h (hors week-ends). Délais d'accès:
+              Après accord, nous mettons tout en oeuvre pour vous mettre à
+              disposition un formateur sous 1 mois."
+            </p>
 
+            <p>
+              Nos formations peuvent être accessibles aux personnes en situation
+              de handicap. Chaque situation étant unique, nous vous demandons de
+              préciser à l’inscription votre handicap. Nous pourrons ainsi
+              confirmer l’ensemble des possibilités afin de vous permettre de
+              suivre la formation dans les meilleures conditions en accord avec
+              votre employeur. Pour toutes informations complémentaires, nous
+              vous conseillons les structures suivantes : ONISEP, AGEFIPH et
+              FIPHFP. Pour le bon déroulement de la formation, il est nécessaire
+              de disposer d’un espace de travail calme et équipé d’au moins un
+              ordinateur, connecté à internet, et dont le navigateur (Mozilla
+              Firefox, Google Chrome, ou Apple Safari) est à jour. Nous
+              recommandons d’utiliser un ordinateur par personne. Les
+              participants devront également avoir des ordinateurs équipés de
+              micros et de haut-parleurs, préférablement des micro-casques pour
+              un meilleur confort d’écoute.
+            </p>
+          </div>
         </v-col>
       </v-row>
     </LayoutContainer>
@@ -62,6 +60,14 @@
 </template>
 
 <style scoped>
+@media (min-width: 1200px) {
+  .custom-row {
+    min-width: 100%;
+    max-width: 100;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
 .custom-row {
   width: 90%;
   margin-left: auto;
@@ -84,13 +90,15 @@
   line-height: 20px;
   margin-top: 1rem;
   display: flex;
-  margin-left: 23rem;
-  margin-right: 23rem;
+  width: 800px;
+  margin: auto;
+  color: #ffffff;
 }
 
 .participation-img {
+  position: relative;
   background-image: url("/images/formation/participation.jpg");
-  width: 900px;
+  width: 700px;
   height: 550px;
   background-position: center;
   background-size: cover;

components/Formation/Presentation.vue

@@ -9,13 +9,13 @@
         />
       </v-row>
 
-      <v-row class="container-programme custom-row">
+      <v-row class=" custom-row mb-12">
         <v-col cols="6">
           <img class="programme-img1" src="/images/formation/programme2.jpg" />
         </v-col>
 
         <v-col cols="6">
-          <h3 class="title-programme">
+          <h3 class="title-programme mb-6">
             Un programme de formation complet sur nos logiciels
           </h3>
           <p class="details-programme">
@@ -31,7 +31,7 @@
             Dans le cadre de notre solution
             <span class="manager">Opentalent Manager</span> , nous pouvons
             organiser, selon vos besoins, des sessions de formation et
-            initiation (individuel, en groupe, pour des évènements particuliers
+            initiation individuel, en groupe, pour des évènements particuliers
             tels que des congrès, universités d’été, séminaires...
           </p>
         </v-col>
@@ -39,10 +39,10 @@
 
       <v-row class="custom-row">
         <v-col cols="6">
-          <h3 class="title-programme ml-16">
+          <h3 class="title-programme mb-6 mt-4 ">
             Des formations à la demande et sur-mesure
           </h3>
-          <p class="details-programme ml-16">
+          <p class="details-programme ">
             Afin de prendre en compte les évolutions de votre structure, nous
             pouvons enseuite organiser des sessions de formations spécifiques
             pour répondre à vos besoins : outils complets, mise en route,
@@ -60,6 +60,13 @@
 <script setup></script>
 
 <style scoped>
+
+@media (max-width: 1800px) {
+  .custom-row {
+  margin-left: auto;
+  margin-right: auto;
+}
+}
 .custom-row {
   width: 90%;
   margin-left: auto;
@@ -72,42 +79,8 @@
 .manager {
   color: #d8050b;
 }
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
-  color: #091d20;
-  width: 25rem;
-  margin-left: 2rem;
-}
-
-.subtitle {
-  color: #071b1f;
-  font-family: "Barlow";
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
 
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: #091d20;
-  margin-bottom: 4rem;
-}
 
-.icon-title {
-  margin-right: 0.7rem;
-  color: #64afb7;
-}
 .details-programme {
   font-family: "Barlow";
   font-style: normal;
@@ -127,26 +100,18 @@
   line-height: 42px;
   color: #071b1f;
   width: 35rem;
-  margin-bottom: 3rem;
-  margin-top: 4rem;
 }
 
-.container-programme {
-  margin-top: 5%;
-  margin-bottom: 5%;
-}
 
 .programme-img1 {
   width: 80%;
   height: 100%;
   border-radius: 10%;
-  margin-left: 5rem;
 }
 
 .programme-img2 {
-  width: 60%;
+  width: 80%;
   height: 100%;
   border-radius: 10%;
-  margin-left: 5rem;
 }
 </style>

components/Home/Caroussel.vue

@@ -194,6 +194,7 @@ const carouselItems = ref([
   font-weight: normal !important;
   font-size: 0.8rem !important;
   margin-top: 0.2px;
+  line-height: 1rem !important;
 }
 
 .status {

components/Layout/Carousel/Fonctionnalite.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="Fonctionnalites">
-    <LayoutContainer>
+    <LayoutContainer v-if="!mdAndDown">
       <div class="container-green">
         <v-row class="custom-row">
           <v-col cols="6">
@@ -17,7 +17,7 @@
             />
           </v-col>
 
-          <v-col cols="6">
+          <v-col cols="12" md="6" lg="6">
             <div class="d-flex align-center">
               <div class="carousel-button" @click="previousAction">
                 <i class="fas fa-chevron-left"></i>
@@ -29,14 +29,11 @@
           </v-col>
         </v-row>
 
-        <v-row >
-          <v-col cols="12"> </v-col>
-        </v-row >
         <v-row class="custom-row">
-          <v-col cols="12">
+          <v-col cols="12" lg="12" md="12">
             <Carousel
               ref="functionCarousel"
-              :items-to-show="5"
+              :items-to-show="4"
               :items-to-scroll="1"
               class="carousel"
               :wrap-around="true"
@@ -45,7 +42,7 @@
                 v-for="(card, index) in cards"
                 :key="index"
                 :class="{
-                  card: true
+                  card: true,
                 }"
               >
                 <div class="card-container">
@@ -59,24 +56,24 @@
                       <h5 class="card-title">{{ card.title }}</h5>
                     </v-card-title>
                     <v-card-item>
-                      <v-card-text  class="review-description">
+                      <v-card-text class="review-description">
                         <ul>
                           <li
                             class="list-detail"
                             v-for="item in card.list"
                             :key="item"
                           >
-                          <p v-html="item"></p>
+                            <p v-html="item"></p>
                           </li>
                         </ul>
                       </v-card-text>
                       <div class="card-footer">
-                          <p
-                            class="reviewer-structure"
-                            v-for="option in card.options"
-                            :key="option"
-                          >
-                            {{ option }}
+                        <p
+                          class="reviewer-structure"
+                          v-for="option in card.options"
+                          :key="option"
+                        >
+                          {{ option }}
                         </p>
                       </div>
                     </v-card-item>
@@ -92,10 +89,11 @@
 </template>
 
 <script setup>
+import { useDisplay } from "vuetify";
 import { ref, computed } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
-import { useDisplay } from "vuetify/lib/framework.mjs";
+const { smAndDown, mdAndDown } = useDisplay();
 
 const props = defineProps({
   cards: Array,
@@ -109,9 +107,7 @@ const props = defineProps({
   },
 });
 
-const { width, mdAndDown } = useDisplay();
 const functionCarousel = ref(null);
-const activeCardIndex = ref(0);
 
 const itemsToShow = computed(() => {
   if (width.value >= 1280 && width.value <= 1920) {
@@ -132,14 +128,12 @@ const previousAction = () => {
 </script>
 
 <style scoped>
-
-.custom-row{
+.custom-row {
   width: 95%;
   margin-left: auto;
   margin-right: auto;
 }
 
-
 .card-img {
   width: 5rem;
   height: 3rem;
@@ -161,8 +155,7 @@ const previousAction = () => {
   margin-right: 2rem;
 }
 
-.card.active-card {
-}
+
 
 .title-container {
   display: flex;
@@ -192,9 +185,7 @@ const previousAction = () => {
   transition: transform 0.3s;
 }
 
-.card.active-card {
-  transform: scale(1.05);
-}
+
 .carousel-button {
   display: flex;
   justify-content: center;
@@ -230,21 +221,25 @@ const previousAction = () => {
 }
 
 .card {
-  box-sizing: border-box;
-}
-
-.card {
-  min-height: 35rem;
-  max-height: 35rem;
   border-radius: 1rem;
   transition: transform 0.3s;
 }
 
 .v-card {
+
+  min-height: 400px !important;
+  max-height: 400px !important;
   border-radius: 1rem;
   min-height: 25rem;
 }
 
+@media(min-width: 2900px){
+  .v-card{
+    min-height: 300px !important;
+  max-height: 300px !important;
+  }
+}
+
 .card-container {
   display: flex;
   justify-content: center;

components/Layout/Footer.vue

@@ -73,14 +73,14 @@
               </v-row>
               <v-row>
                 <router-link
-                  to="/https://ressources.opentalent.fr/display/FAQ/Accueil"
+                  to="https://ressources.opentalent.fr/display/FAQ/Accueil"
                   class="small-link ml-12"
                   >Foire Aux Questions</router-link
                 >
               </v-row>
               <v-row>
                 <router-link
-                  to="/https://ressources.opentalent.fr/"
+                  to="https://ressources.opentalent.fr/"
                   class="small-link ml-12"
                   >Support en ligne</router-link
                 >

components/Layout/Prefooter.vue

@@ -4,7 +4,7 @@
       <div v-if="lgAndUp" class="activities">
         <v-row class="custom-row">
           <v-col cols="4" class="text-center">
-            <a href="/opentalent_artist"> 
+            <a href="/opentalent_artist">
               <v-img
                 class="logo logo-jaune"
                 src="/images/logo/logiciels/Artist-noir.png"
@@ -14,28 +14,31 @@
               >Orchestres, chorales, danse, théâtre, cirque</small
             >
           </v-col>
+
           <div class="vertical-bar" />
           <v-col cols="4" class="text-center">
-            <a href="/opentalent_manager"> 
+            <a href="/opentalent_school">
               <v-img
-                class="logo logo-rouge"
-                src="/images/logo/logiciels/Manager-noir.png"
+                class="logo logo-bleu"
+                src="/images/logo/logiciels/School-noir.png"
               />
             </a>
             <small class="text-logo"
-              >Fédérations, confédérations, collectivités</small
+              >Tous les établissements d'enseignement artistique</small
             >
           </v-col>
+
           <div class="vertical-bar" />
+
           <v-col cols="3" class="text-center">
-            <a href="/opentalent_school"> 
+            <a href="/opentalent_manager">
               <v-img
-                class="logo logo-bleu ml-12"
-                src="/images/logo/logiciels/School-noir.png"
+                class="logo logo-rouge"
+                src="/images/logo/logiciels/Manager-noir.png"
               />
             </a>
-            <small class="text-logo "
-              >Tous les établissements d'enseignement artistique</small
+            <small class="text-logo"
+              >Fédérations, confédérations, collectivités</small
             >
           </v-col>
         </v-row>
@@ -44,7 +47,6 @@
   </footer>
 </template>
 
-
 <script setup>
 import { useDisplay } from "vuetify";
 import { ref, provide } from "vue";
@@ -56,12 +58,10 @@ const { smAndDown, lgAndUp } = useDisplay();
 </script>
 
 <style scoped>
-
-.custom-row{
+.custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
-
 }
 .flex-container {
   display: flex;
@@ -75,18 +75,13 @@ const { smAndDown, lgAndUp } = useDisplay();
   margin-top: 3rem;
 }
 
-
 .activities {
   height: 10rem;
   border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
 }
 
-
 .logo {
   margin-top: 2rem;
   height: 70px;
 }
-
-
-
 </style>

components/Layout/UI/Presentation.vue

@@ -116,6 +116,16 @@ const iconColor = computed(() => {
     return "rgba(32, 147, 190, 0.6)"; 
   }
 });
+
+// on affiche " à partir de" sur opentalent_school et artist
+const pricingFromText = computed(() => {
+  if (/^\/opentalent_artist(\/|$)/.test(route.path) || /^\/opentalent_school(\/|$)/.test(route.path)) {
+    return "à partir de";
+  }else{
+    return ''
+  }
+
+})
 const props = defineProps({
   pictoImages: {
     type: Array,
@@ -138,8 +148,7 @@ const props = defineProps({
     default: "",
   },
   pricingFromText: {
-    type: String,
-    default: "à partir de",
+    type: String
   },
   pricingAmount: {
     type: String,
@@ -226,11 +235,10 @@ const props = defineProps({
   top: 0.2rem;
 }
 .rectangle-4 {
-  width: 20rem;
+  width: 100%;
   height: 6rem;
   background: rgba(32, 147, 190, 0.2);
   border-radius: 3rem;
-  margin-left: 5rem;
   margin-top: 2rem;
 }
 .picto-text {
@@ -238,7 +246,7 @@ const props = defineProps({
   font-size: 0.9rem;
   margin-top: -3rem;
   text-align: center;
-  width: 50%;
+  width: 60%;
   margin-right: auto;
   margin-left: auto;
 }
@@ -246,19 +254,13 @@ const props = defineProps({
   display: flex;
   flex-direction: row;
 }
-
 .picto-group {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-left: -4rem;
 }
-.outil-list {
-  margin-left: 1rem;
-  font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
+
 .picto-container {
   display: flex;
   flex-direction: row;
@@ -266,6 +268,5 @@ const props = defineProps({
 
 .screen-img {
   margin-top: 2rem;
-  margin-left: 3rem;
 }
 </style>

components/Logiciels/Artist/Abonnement.vue

@@ -1,32 +1,51 @@
 <template>
   <div id="Abonnement">
     <LayoutContainer>
-        <v-row class="mt-12">
+      <v-row class="mt-12">
         <v-col cols="4">
           <LayoutUISubTitle
-          :iconSize="6"
-          :iconClasses="iconClasses"
-          :titleText="'S\'abonner dès maintenant'"
-          :iconColor="'#fac20a'"
-        />
+            :iconSize="6"
+            :iconClasses="iconClasses"
+            :titleText="'S\'abonner dès maintenant'"
+            :iconColor="'#fac20a'"
+          />
           <div class="profile-circle">
-            <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png" style="top:.5rem"></v-img>
-
+            <v-img
+              src="/images/logo/logiciels/OT_Artist-BLANC.png"
+              style="top: 0.5rem"
+            ></v-img>
           </div>
 
           <div class="subscription-info">
-            <p class="mt-3 mb-6">Pour vous abonner au logiciel, téléchargez et remplissez le formulaire avant de nous le transmettre</p>
-            <a href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf" target="_blank" class="download-button">Télécharger le formulaire d'abonnement</a>
+            <p class="mt-3 mb-6">
+              Pour vous abonner au logiciel, téléchargez et remplissez le
+              formulaire avant de nous le transmettre
+            </p>
+            <a
+              href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf"
+              target="_blank"
+              class="download-button"
+              >Télécharger le formulaire d'abonnement</a
+            >
           </div>
           <div class="subscription-steps">
             <ol>
-              <li  class="mt-6">Téléchargez le formulaire</li>
+              <li class="mt-6">Téléchargez le formulaire</li>
               <li>Complétez le formulaire</li>
-              <li>Joignez le règlement par chèque avec le formulaire à <br> <br> 
-                2iOPENservice <br>
-                217 rue Raoul Follereau <br>
-                74300 CLUSES</li><br>
-              <li>Après réception de votre formulaire d'adhésion et de votre règlement, nous vous ouvrons le service choisi. Vous recevrez alors un mail avec votre identifiant de connexion, votre mot de passe, ainsi que l'URL de votre site internet.</li>
+              <li>
+                Joignez le règlement par chèque avec le formulaire à <br />
+                <br />
+                2iOPENservice <br />
+                217 rue Raoul Follereau <br />
+                74300 CLUSES
+              </li>
+              <br />
+              <li>
+                Après réception de votre formulaire d'adhésion et de votre
+                règlement, nous vous ouvrons le service choisi. Vous recevrez
+                alors un mail avec votre identifiant de connexion, votre mot de
+                passe, ainsi que l'URL de votre site internet.
+              </li>
             </ol>
           </div>
         </v-col>
@@ -35,8 +54,12 @@
           <h5 class="title">
             Opentalent Artist, la solution que vous attendiez...
           </h5>
-          <p class="solution" style="text-align: justify;">
-            Conçu pour les structures artistiques telles que chorales, orchestres (fanfares, orchestres d'harmonie, symphoniques, musiques actuelles, petites formations musicales...), compagnies de danse, troupes de théâtre, cirque, arts de la rue… Le logiciel s'adapte à vos besoins d'évolution ! 
+          <p class="solution" style="text-align: justify">
+            Conçu pour les structures artistiques telles que chorales,
+            orchestres (fanfares, orchestres d'harmonie, symphoniques, musiques
+            actuelles, petites formations musicales...), compagnies de danse,
+            troupes de théâtre, cirque, arts de la rue… Le logiciel s'adapte à
+            vos besoins d'évolution !
           </p>
           <h3 class="cmf">
             Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
@@ -47,12 +70,9 @@
               src="/images/logiciels/school/cmf_logo_orange.png"
             /> -->
 
-            <div class="logo-cmf">
-
-            </div>
+            <div class="logo-cmf"></div>
             <div class="cmf-container">
-
-              <p class="cmf-text" >
+              <p class="cmf-text">
                 Attention si vous êtes 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
@@ -71,9 +91,8 @@
 <script setup></script>
 
 <style scoped>
-
-.v-container{
-  max-width: 90%;  
+.v-container {
+  max-width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
@@ -81,14 +100,14 @@
   list-style-type: decimal;
   padding-left: 2rem;
   color: #000;
-/* Body Large - Light */
-font-family: Barlow;
-font-size: 16px;
-font-style: normal;
-font-weight: 300;
-line-height: 20px; /* 125% */ 
-margin-left: 3rem;
-width: 20rem;
+  /* Body Large - Light */
+  font-family: Barlow;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 20px; /* 125% */
+  margin-left: 3rem;
+  width: 20rem;
 }
 .profile-circle {
   width: 100px;
@@ -97,12 +116,11 @@ width: 20rem;
   background-color: #000;
   border-radius: 50%;
   margin-left: 11rem;
-  top: 3rem
-
+  top: 3rem;
 }
 .subscription-info {
   margin-left: 4rem;
-  background: var(--Jaune-Artist-20, rgba(250, 194, 10, 0.20));
+  background: var(--Jaune-Artist-20, rgba(250, 194, 10, 0.2));
   border-radius: 10px;
   height: 15rem;
   width: 20rem;
@@ -111,18 +129,16 @@ width: 20rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  color: var(--Vert-100, #091D20);
+  color: var(--Vert-100, #091d20);
 
-text-align: center;
-font-family: Barlow;
-font-size: 1rem;
-font-style: normal;
-font-weight: 300;
-line-height: 18px; 
+  text-align: center;
+  font-family: Barlow;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 18px;
 }
 
-
-
 .download-button {
   background-color: #000;
   color: #fff;
@@ -187,7 +203,6 @@ line-height: 18px;
   align-items: center;
   width: 50rem;
   height: 15rem;
-  border-radius: 5%;
 }
 .cmf-container {
   margin-top: 4rem;
@@ -200,7 +215,7 @@ line-height: 18px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  width: 15rem; 
+  width: 15rem;
   height: 10rem;
 }
 

components/Logiciels/Artist/Formations.vue

@@ -2,7 +2,8 @@
   <div id="Webinaires">
     <LayoutContainer>
       <div class="container-green 2">
-        <v-row>
+        <v-container>
+          <v-row class="custom-row"> 
           <LayoutUISubTitle
             class="mt-12"
             title-color="#fff"
@@ -13,16 +14,16 @@
           />
         </v-row>
 
-        <v-row class="mt-12" no-gutters>
+        <v-row class="mt-12 align-center " no-gutters>
           <v-col cols="12" lg="6" md="6" sm="6">
             <div class="reunion-img mb-12"></div>
           </v-col>
 
           <v-col cols="12" lg="6" md="6" sm="6">
-            <h3 class="formation-title">
+            <h3 class="formation-title ml-6 mr-12">
               Webinaire de découverte - Nouveaux utilisateurs
             </h3>
-            <p class="formation-details mb-6" style="text-align: justify">
+            <p class="formation-details ml-6 mr-12" style="text-align: justify">
               Rejoignez notre webinaire, spécialement conçu pour les
               professionnels du secteur culturel, orchestres, chorales,
               compagnies de danse, ainsi que les troupes de théâtre et de
@@ -34,14 +35,17 @@
               nos solutions technologiques innovantes !
             </p>
             <nuxt-link to="/webinaires">
-              <v-btn class="formation-btn mt-12">
+              <v-btn class="formation-btn mt-12 ml-6 ">
                 S'inscrire à nos webinaires</v-btn
               >
             </nuxt-link>
           </v-col>
         </v-row>
+        </v-container>
+
+
       </div>
-      <v-row>
+      <v-row class="custom-row">
         <LayoutUISubTitle
           :iconSize="6"
           :iconClasses="iconClasses"
@@ -104,53 +108,20 @@ const items = ref([
 .v-container {
   padding: 0 !important;
 }
-.v-row {
-  max-width: 1600px;
-  margin-right: auto;
-  margin-left: auto;
-}
-.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;
+@media (min-width: 1000px) {
+  .custom-row {
+    margin-right: auto;
+    margin-left: auto;
+  }
 }
-.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;
+.custom-row {
+  width: 90%;
   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: 0.5rem;
+  margin-left: auto;
 }
+
 .formation-btn {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1rem;
   line-height: 18px;
@@ -158,23 +129,20 @@ const items = ref([
   color: #eff9fb;
   border: 1px solid #eff9fb;
   border-radius: 0.5rem;
+  width: 90%;
 }
 .formation-details {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 300;
   font-size: 1rem;
   line-height: 1.5rem;
   color: #eff9fb;
 }
 .formation-title {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 1.8rem;
   line-height: 26px;
   color: #ffffff;
-  margin-bottom: 3rem;
+  margin-bottom: 1rem;
 }
 .reunion-img {
   width: 600px;
@@ -184,25 +152,6 @@ const items = ref([
   border-radius: 10%;
   background-image: url("/images/logiciels/artist/webinaire.jpg");
 }
-.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: #fac20a;
-  font-size: 1.5rem;
-  margin-right: 0.5rem;
-  margin-left: 5rem;
-}
 .container-green {
   background-color: #0e2d32;
   padding: 20px;
@@ -218,15 +167,4 @@ const items = ref([
   justify-content: center;
   align-items: center;
 }
-.card {
-  background: #fac20a;
-  border-radius: 10px;
-  width: 36rem;
-  height: 15rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
 </style>

components/Logiciels/School/Formations.vue

@@ -10,7 +10,7 @@
             title-color="#fff"
           />
         </v-row>
-        <v-row class="mb-6">
+        <v-row class="mb-6 align-center">
           <v-col cols="6" v-for="(formation, index) in formations" :key="index">
             <div class="image-wrapper mb-6">
               <div :class="formation.overlayClass"></div>
@@ -34,7 +34,7 @@
         </v-row>
       </div>
 
-      <v-row>
+      <v-row class="aling-center">
         <v-col cols="4">
           <v-container> </v-container>
           <v-row no-gutters>

components/Logiciels/School/Projet.vue

@@ -79,8 +79,7 @@
   background: rgba(32, 147, 190, 0.4);
   border-radius: 6px;
   color: #fff;
-
-  font-weight: 600;
+  font-weight: 500;
   font-size: 18px;
   line-height: 16px;
   letter-spacing: 0.18em;

pages/formations.vue

@@ -1,13 +1,14 @@
 <template>
   <LayoutNavigation />
+
+  <FormationBanner />
+  <FormationMenuScroll />
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
     <LayoutUIStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
     />
   </div>
-  <FormationBanner />
-  <FormationMenuScroll />
   <FormationPresentation />
   <FormationCatalogue />
   <FormationOPCA />
@@ -36,14 +37,6 @@ const squaresData = [
     text: "Nous contacter",
     url: "/nous-contacter",
   },
-  {
-    id: 2,
-    bgColor: "green-square",
-    iconClass: "fa-solid fa-circle-info icon",
-    text: "Demander une demo",
-    url: "/nous-contacter",
-
-  },
   {
     id: 4,
     bgColor: "darkblue-square",

pages/test.vue

@@ -1,74 +1,255 @@
 <template>
-  <v-app>
-    <v-app-bar-nav-icon @click="drawer = true"> </v-app-bar-nav-icon>
-
-    <v-navigation-drawer v-model="drawer" app>
-      <v-list nav dense>
-        <v-list-item v-for="(item, index) in items" :key="item">
-          <v-list-item-title @click="selectMenu(item)">
-            {{ item }}
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-    <!-- Tiroir de navigation pour les sous-menus -->
-    <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
-      <v-list nav dense>
-        <!-- Bouton de retour -->
-        <v-list-item @click="closeSubMenu">
-          <v-list-item-title>Retour</v-list-item-title>
-        </v-list-item>
-
-        <!-- Éléments du sous-menu -->
-        <v-list-item
-          v-for="(subItem, subIndex) in subMenus[currentMenu]"
-          :key="subIndex"
-        >
-          <v-list-item-title>{{ subItem }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-    <!-- Contenu principal -->
-  </v-app>
+  <div id="L'agenda opentalent">
+    <LayoutContainer>
+      <v-row class="custom-row align-center">
+        <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" />
+            </div>
+            <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 TOUS LES EVENEMENTS </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row class="custom-row">
+        <p class="agenda-details">
+          Retrouvez tous les évènements culturels autour de chez vous.
+        </p>
+      </v-row>
+
+      <v-row class="custom-row">
+        <v-col cols="12" lg="12" md="12">
+          <Carousel ref="carousel" :items-to-show="3.2" :items-to-scroll="2">
+            <Slide
+              v-for="(event, eventIndex) in events"
+              :key="eventIndex"
+              class="slide-card"
+            >
+              <v-card>
+                <div
+                  class="card-img"
+                  :style="{ backgroundImage: 'url(' + event.img + ')' }"
+                ></div>
+
+                <v-card-title>
+                  {{ event.title }}
+                </v-card-title>
+
+                <v-card-text>
+                  {{ event.localisation }}
+                </v-card-text>
+
+                <div class="card-footer">
+                  <v-chip-group active-class="primary--text" column>
+                    <v-chip
+                      v-for="(tag, tagIndex) in event.tags"
+                      :key="tagIndex"
+                      class="ma-2 chip-custom"
+                      :color="tagColor(tag)"
+                      label
+                    >
+                      <span :class="tagTextColor(tag)">{{ tag }}</span>
+                    </v-chip>
+                  </v-chip-group>
+                </div>
+              </v-card>
+            </Slide>
+          </Carousel>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      drawer: false,
-      subMenuDrawer: false, // État du tiroir de navigation des sous-menus
-      currentMenu: "",
-      items: ["web", "shopping", "videos", "images", "news"],
-      subMenus: {
-        web: ["Sous-menu Web 1", "Sous-menu Web 2"],
-        shopping: ["Sous-menu Shopping 1", "Sous-menu Shopping 2"],
-        // Ajoutez d'autres sous-menus ici
-      },
-    };
+<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"],
   },
-  methods: {
-    selectMenu(item) {
-      this.currentMenu = item;
-      // fermes le tiroir de navigation principal
-      this.drawer = false;
-      this.subMenuDrawer = true; 
-    },
-    closeSubMenu() {
-      this.subMenuDrawer = false;
-      this.drawer = true;
-    },
+  {
+    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>
-.nav-menu {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 999;
+.card-img {
+  width: 100%;
+  height: 200px;
+  background-size: cover;
+  background-position: center;
+}
+
+.green--text {
+  color: green;
+}
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.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-custom {
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+
+.carousel-button i {
+  color: #000000;
+}
+
+.card-date {
+  font-size: 0.8em;
+  color: #888;
+  margin-left: 1rem;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 4rem;
+}
+
+
+.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>