responsive

components/About/Agenda.vue

@@ -29,7 +29,7 @@
 
       <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">
+          <Carousel ref="carousel" :items-to-show="1" :items-to-scroll="2">
             <Slide
               v-for="(event, eventIndex) in events"
               :key="eventIndex"

components/Home/Caroussel.vue

@@ -1,14 +1,14 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer :class="mdAndDown ? 'mt-12' : ''">
     <LayoutUITitlePage
       title="LOGICIELS CULTURELS"
       subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
     />
     <v-carousel
+      v-if="!mdAndDown"
       ref="carousel"
       v-model="activeIndex"
       :show-arrows="false"
-      :class="smAndDown ? 'carousel-sm' : 'carousel'"
       :hide-delimiter-background="true"
       :show-delimiters="false"
       :touch="true"
@@ -17,14 +17,14 @@
     >
       <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
         <v-row>
-          <v-col cols="6">
-            <v-row>
-              <v-img v-if="!smAndDown" class="logo" :src="item.logo" />
-            </v-row>
+          <v-col cols="12" md="12" lg="6" sm="12">
+            <v-img class="logo" :src="item.logo" />
 
-            <v-row class="align-start">
-              <p v-html="item.description" class="description" style="text-align: justify;"></p>
-            </v-row>
+            <p
+              v-html="item.description"
+              class="description"
+              style="text-align: justify"
+            ></p>
 
             <v-row class="align-start">
               <nuxt-link :to="item.link">
@@ -39,13 +39,13 @@
             </v-row>
           </v-col>
 
-          <v-col cols="6">
+          <v-col cols="12" md="12" lg="6" sm="12">
             <v-row class="justify-end">
               <div
                 class="background-rectangle"
                 :style="{ backgroundColor: item.color }"
               />
-              <v-card v-if="!smAndDown" class="card" elevation="5">
+              <v-card class="card" elevation="5">
                 <v-img
                   class="profile-image"
                   :src="item.avatar"
@@ -85,13 +85,14 @@
         />
       </div>
     </v-carousel>
+
   </LayoutContainer>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { useDisplay } from "vuetify";
-const { smAndDown } = useDisplay();
+const { mdAndDown } = useDisplay();
 
 let activeIndex = ref(0);
 
@@ -102,10 +103,14 @@ const changeSlide = (index) => {
 const carouselItems = ref([
   {
     logo: "/images/logo/logiciels/School-noir.png",
+    description_mobile:
+      "Pour les petits comme pour les GRANDS <br> établissements d’enseignement artistique <br> tels que les écoles de musique, de danse, <br> de théâtre, d'art, de cirque et conservatoire.",
     description:
       "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.<br> Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
     buttonClass: "btn-school",
-    image: "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
+    buttonClassMobile: "btn-school-mobile",
+    image:
+      "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
     color: "rgba(32, 147, 190, 0.4)",
     link: "/opentalent_school",
     name: "Cindy Blanchard",
@@ -118,7 +123,8 @@ const carouselItems = ref([
     description:
       "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. <br> Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion.",
     buttonClass: "btn-artist",
-    image: "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
+    image:
+      "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
     color: "rgba(250, 194, 10, 0.4)",
     link: "opentalent_artist",
     name: "Thierry Dupont ",
@@ -131,7 +137,8 @@ const carouselItems = ref([
     description:
       "La solution de mise en réseau des organisations culturelles.<br> Fédérations, confédérations et collectivités, utilisez une solution collaborative innovante et unique spécialement développée pour les réseaux culturels.",
     buttonClass: "btn-manager",
-    image: "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
+    image:
+      "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
     color: "rgba(216, 5, 11, 0.4)",
     link: "opentalent_manager",
     name: "Marie Voisin",
@@ -143,8 +150,19 @@ const carouselItems = ref([
 </script>
 
 <style scoped>
-
-
+.btn-school-mobile {
+  background: rgba(32, 147, 190, 0.4);
+  border-radius: 0.5rem;
+  margin-left: 1rem;
+  padding: 15px;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 0.7rem;
+  line-height: 15px;
+  width: 10rem;
+  height: 2.5rem;
+  margin-top: 1rem;
+}
 ::v-deep .v-carousel__controls {
   display: none;
 }
@@ -167,22 +185,24 @@ const carouselItems = ref([
 
 /* ============= CARD ===============  */
 .card {
-  height: 20%;
+  position: relative;
+  left: 10%;
+  height: 100%;
   width: 27%;
   border-radius: 1rem;
   margin-top: 1rem;
 }
 
 .profile-image {
-  width: 40%;
-  margin: auto;
+  width: 100%;
   height: 12vh;
 }
 
 .name {
   text-align: center;
-  font-size: 1rem;
+  font-size: 0.9rem;
   white-space: normal;
+  padding: 0 !important;
 }
 .school,
 .status {
@@ -220,11 +240,14 @@ const carouselItems = ref([
   /* ============= LOGO ===============  */
 }
 .logo {
-  max-width: 25vw;
-  height: 20vh;
+  width: 20rem;
   margin-top: 10px;
   margin-left: 4rem;
 }
+.logo-md {
+  width: 20rem;
+  margin-top: 10px;
+}
 .description {
   text-align: left;
   margin-left: 7rem;
@@ -232,7 +255,19 @@ const carouselItems = ref([
   margin-bottom: 1rem;
 }
 
+.desccription-md {
+  width: 20rem;
+  margin-top: 10px;
+}
+
 /* ============= CAROUSEL ===============  */
+
+.carousel-md{
+  height: 100%;
+  width: 100%;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
 .custom-controls {
   position: absolute;
   top: 50%;
@@ -248,6 +283,7 @@ const carouselItems = ref([
   right: 5rem;
 }
 
+
 .custom-controls div {
   width: 0.6rem;
   height: 0.6rem;

components/Layout/Navigation.vue

@@ -2,7 +2,10 @@
   <div class="container-grey" v-if="!mdAndDown">
     <v-row>
       <v-col cols="12" class="buttons-col">
-        <nuxt-link to="https://admin.opentalent.fr/#/login/" style="text-decoration: none">
+        <nuxt-link
+          to="https://admin.opentalent.fr/#/login/"
+          style="text-decoration: none"
+        >
           <v-btn class="btn btn-common btn-login" text>
             <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter<br />aux
             logiciels
@@ -10,7 +13,7 @@
         </nuxt-link>
 
         <div class="vertical-bar" />
-        <NuxtLink to="/agenda-culturel" style="text-decoration: none;">
+        <NuxtLink to="/agenda-culturel" style="text-decoration: none">
           <v-btn class="btn btn-common btn-subscribe ml-4 mr-2" text>
             <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
           </v-btn>
@@ -89,7 +92,7 @@
       <nuxt-link class="link-style" to="/nous-contacter">Contact</nuxt-link>
     </v-col>
   </v-row>
-  <v-app v-if="mdAndDown">
+  <v-app v-if="mdAndDown" class="navigation-sm">
     <v-app-bar app>
       <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
 
@@ -228,6 +231,11 @@ const closeSubMenu = () => {
 </script>
 
 <style scoped>
+.navigation-sm {
+  background-color: #ffffff;
+  position: fixed;
+  top: 0;
+}
 /* =============== CONTAINER BUTTON =============== */
 .container-grey {
   background-color: #dbdbdb;

pages/poc.vue

@@ -0,0 +1,121 @@
+<template>
+  <Carousel>
+    <Slide v-for="slide in carouselItems" :key="slide" :items-to-show="1">
+      <v-row>
+        <v-col cols="12">
+          <v-img :src="slide.logo" class="logo ml-12" />
+          <div
+            class="description ml-12"
+            style="text-align: justify"
+            v-html="slide.description"
+          ></div>
+        </v-col>
+      </v-row>
+      <v-row class="image-row">
+        <div
+          class="background-rectangle"
+          :style="{ backgroundColor: slide.color }"
+        />
+        <v-img :src="slide.image" class="image" />
+      </v-row>
+    </Slide>
+
+
+    <template #addons>
+      <Navigation />
+      <Pagination />
+    </template>
+  </Carousel>
+</template>
+
+<script setup>
+import { Carousel, Navigation, Pagination, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+
+const carouselItems = ref([
+  {
+    logo: "/images/logo/logiciels/School-noir.png",
+    description:
+      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.",
+    buttonClass: "btn-school",
+    buttonClassMobile: "btn-school-mobile",
+    image:
+      "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
+    color: "rgba(32, 147, 190, 0.4)",
+    link: "/opentalent_school",
+    name: "Cindy Blanchard",
+    school: "Conservatoire de Musique",
+    status: "élève",
+    avatar: "/images/carousel/school/avatar.png",
+  },
+  {
+    logo: "/images/logo/logiciels/Artist-noir.png",
+    description:
+      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque.",
+    buttonClass: "btn-artist",
+    image:
+      "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
+    color: "rgba(250, 194, 10, 0.4)",
+    link: "opentalent_artist",
+    name: "Thierry Dupont ",
+    school: "Orchestre d’harmonie",
+    status: "Admin",
+    avatar: "/images/carousel/artist/avatar.png",
+  },
+  {
+    logo: "/images/logo/logiciels/Manager-noir.png",
+    description: "La solution de mise en réseau des organisations culturelles.",
+    buttonClass: "btn-manager",
+    image:
+      "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
+    color: "rgba(216, 5, 11, 0.4)",
+    link: "opentalent_manager",
+    name: "Marie Voisin",
+    school: "Réseau d'organisations culturelles ",
+    status: "ADMIN",
+    avatar: "/images/carousel/manager/avatar.png",
+  },
+]);
+</script>
+
+<style>
+.background-rectangle {
+  position: absolute;
+  width: 70%;
+  height: 20rem;
+  left: 72%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 200px 0px 0px 15rem;
+  z-index: -1;
+
+  /* ============= LOGO ===============  */
+}
+.carousel {
+  height: 100vh;
+}
+
+.logo {
+  width: 200px;
+  height: 100px;
+}
+
+.desccription-md {
+  width: 20rem;
+  margin-top: 10px;
+}
+
+.carousel__slide {
+  padding: 10px;
+}
+
+.carousel__prev,
+.carousel__next {
+  display: none;
+}
+
+.image {
+  width: 20rem;
+  height: 100%;
+}
+</style>