mobile-vue

components/Home/Caroussel.vue

@@ -9,7 +9,6 @@
       :hide-delimiter-background="true"
       :show-delimiters="false"
       :touch="true"
-      cycle
     >
       <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
         <v-row>
@@ -38,15 +37,15 @@
               <v-card class="card" elevation="5">
                 <v-img
                   class="profile-image"
-                  src="/images/carousel/school/avatar.png"
+                  :src="item.avatar"
                   alt="Profile Image"
                   contain
                   rounded
                 ></v-img>
                 <v-card-text>
-                  <v-card-title class="name">Cindy Blanchard</v-card-title>
-                  <p class="school">Conservatoire d'Anemasse</p>
-                  <p class="status">Eleve</p>
+                  <v-card-title class="name">{{ item.name }}</v-card-title>
+                  <p class="school">{{ item.school }}</p>
+                  <p class="status">{{ item.status }}</p>
                 </v-card-text>
               </v-card>
 
@@ -78,6 +77,7 @@ const changeSlide = (index) => {
   activeIndex.value = index;
 };
 
+
 const carouselItems = ref([
   {
     logo: "/images/carousel/school/school.png",
@@ -87,6 +87,10 @@ const carouselItems = ref([
     image: "/images/carousel/school/Fille_School.png",
     color: "rgba(32, 147, 190, 0.4)",
     link: "/logiciels/school",
+    name: "Cindy Blanchard",
+    school: "Conservatoire d'Anemasse",
+    status: "Eleve",
+    avatar: "/images/carousel/school/avatar.png",
   },
   {
     logo: "/images/carousel/artist/artist.png",
@@ -96,6 +100,10 @@ const carouselItems = ref([
     image: "/images/carousel/artist/musician.png",
     color: "rgba(250, 194, 10, 0.4)",
     link: "/logiciels/artist",
+    name: "Thierry Dupont ",
+    school: "Orchestre d’harmonie de Cluse",
+    status: "Admin",
+    avatar: "/images/carousel/artist/avatar.png",
   },
   {
     logo: "/images/carousel/manager/manager.png",
@@ -105,6 +113,10 @@ const carouselItems = ref([
     image: "/images/carousel/manager/fédération.png",
     color: "rgba(216, 5, 11, 0.4)",
     link: "/logiciels/manager",
+    name: "Marie Voisin",
+    school: "Confédération Musicale de France",
+    status: "ADMIN",
+    avatar: "/images/carousel/manager/avatar.png",
   },
 ]);
 </script>

components/Home/Promotion.vue

@@ -6,20 +6,29 @@
         <h5 class="subtitle">GESTION ET PROMOTION</h5>
       </div>
       <v-row>
-        <p class="text-gestion">
+        <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
           <span class="span-color">Simplifiez</span> vous la vie avec un outil
           <span class="d-inline-flex">
-            <v-img src="/images/promotion/piano.jpg" class="rectangle-img">
+            <v-img
+              src="/images/promotion/piano.jpg"
+              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+            >
             </v-img>
           </span>
           tout en un pour la gestion et la promotion
           <span class="d-inline-flex">
-            <v-img src="/images/promotion/danse.jpg" class="rectangle-img">
+            <v-img
+              src="/images/promotion/danse.jpg"
+              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+            >
             </v-img>
           </span>
           , de votre structure culturelle.
           <span class="d-inline-flex">
-            <v-img src="/images/promotion/cirque.jpg" class="rectangle-img">
+            <v-img
+              src="/images/promotion/cirque.jpg"
+              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+            >
             </v-img>
           </span>
         </p>
@@ -29,8 +38,10 @@
       <v-col cols="12">
         <v-img
           src="/images/home/écran.JPG"
-          class="screen"
-          :class="{ zoom: isZoomed }"
+          :class="[
+            smAndDown ? 'screen-sm' : 'screen',
+            !smAndDown && isZoomed ? 'zoom' : '',
+          ]"
           @mouseover="zoomIn"
           @mouseleave="zoomOut"
         ></v-img>
@@ -43,7 +54,42 @@
         pour chaque structure
       </h3>
 
-      <v-row>
+      <div v-if="smAndDown">
+        <v-row>
+          <div class="horizontal-line"></div>
+          <div class="picto-group">
+            
+            <v-img src="/images/pictoHome/picto1.svg" class="picto-sm"></v-img>
+            <p class="text-outil-sm"> Logiciel de Gestion et communication en ligne</p>
+          </div>
+        </v-row>
+        <v-row>
+          <div class="horizontal-line"></div>
+          <div class="picto-group">
+            <v-img src="/images/pictoHome/picto2.svg" class="picto-sm"></v-img>
+            <p class="text-outil-sm"> Site Web intégré et simple d’usage</p>
+          </div>
+        </v-row>
+        <v-row>
+          <div class="horizontal-line"></div>
+          <div class="picto-group">
+            <v-img src="/images/pictoHome/picto3.svg" class="picto-sm"></v-img>
+            <p class="text-outil-sm"> Boostez votre visibilité et votre communication avec l’agenda
+              culturel</p>
+          </div>
+        </v-row>
+        <v-row>
+          <div class="horizontal-line"></div>
+          <div class="picto-group mb-12">
+            <v-img src="/images/pictoHome/picto4.svg" class="picto-sm"></v-img>
+            <p class="text-outil-sm"> Communiquez en réseau</p>
+          </div>
+         
+        </v-row>
+      </div>
+
+      <div v-if="!smAndDown">
+        <v-row>
         <v-col cols="6">
           <v-row class="row-outil">
             <p class="text-outil-details with-border-top mt-3">
@@ -71,11 +117,15 @@
           </v-row>
         </v-col>
       </v-row>
+      </div>
+
     </div>
   </LayoutContainer>
 </template>
 
 <script setup>
+import { useDisplay } from "vuetify";
+const { mdAndDown, smAndDown } = useDisplay();
 const isZoomed = ref(false);
 
 const zoomIn = () => {
@@ -88,6 +138,44 @@ const zoomOut = () => {
 </script>
 
 <style scoped>
+.horizontal-line {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  height: 1px;
+  background-color: #d1cdc7;
+  margin-bottom: 1rem;
+}
+.text-outil-sm{
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 22px;
+  line-height: 26px;
+  width: 19rem;
+  color: #0e2d32;
+}
+.picto-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+.picto-sm {
+  margin-left: 4rem;
+  width: 50px;
+  height: 50px;
+  margin-right: 2rem;
+}
+.screen-sm {
+  width: 70%;
+  object-fit: cover;
+  margin: 2rem auto;
+  border-radius: 20px;
+  bottom: 15rem;
+  margin-bottom: 8rem;
+}
 .screen {
   width: 900px;
   object-fit: cover;
@@ -162,6 +250,20 @@ const zoomOut = () => {
   background: #0e2d32;
 }
 
+.text-gestion-sm {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 2.5rem;
+  line-height: 3.5rem;
+  text-align: center;
+  color: white;
+  height: 20rem;
+  margin-top: 3rem;
+  width: 40rem;
+  margin: 3rem 2rem 10rem;
+}
+
 .text-gestion {
   font-family: "Barlow";
   font-style: normal;
@@ -180,6 +282,13 @@ const zoomOut = () => {
   color: #caf5f4;
 }
 
+.rectangle-img-sm {
+  margin-top: -3rem;
+  top: 2rem;
+  width: 6rem;
+  height: 5rem;
+  border-radius: 5rem;
+}
 .rectangle-img {
   margin-top: -2rem;
   top: 2rem;

components/Layout/Navigation.vue

@@ -1,13 +1,20 @@
 <template>
   <LayoutContainer>
-    <v-row class="menu-bar custom-row">
-      <v-col cols="6" sm="4" md="2">
+    <v-row
+      justify="space-between"
+      :class="smAndDown ? 'menu-bar' : ' menu-bar custom-row'"
+    >
+      <v-col :cols="smAndDown ? 5 : 6" sm="4" md="2">
         <nuxt-link to="/">
           <v-img class="logo" src="/images/Opentalent.png"></v-img>
         </nuxt-link>
       </v-col>
 
-      <v-col cols="12" sm="7" md="5">
+      <v-col v-if="smAndDown" cols="3">
+        <div class="colored-square"></div>
+      </v-col>
+
+      <v-col v-if="!smAndDown" cols="12" sm="7" md="5">
         <nuxt-link class="common-styles menu-link" to="/about"
           >A propos</nuxt-link
         >
@@ -22,7 +29,7 @@
         >
       </v-col>
 
-      <v-col cols="12" sm="12" md="5" class="buttons-col">
+      <v-col v-if="!smAndDown" cols="12" sm="12" md="5" class="buttons-col">
         <v-btn class="btn btn-common common-styles btn-login" text>
           <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter
         </v-btn>
@@ -40,9 +47,17 @@
   </LayoutContainer>
 </template>
 
-<script></script>
+<script setup>
+import { useDisplay } from "vuetify";
+const { mdAndDown, smAndDown } = useDisplay();
+</script>
 
 <style scoped>
+.colored-square {
+  width: 3.5rem;
+  height: 3.5rem;
+  background-color: #091d20;
+}
 .logo {
   height: 4.5rem;
   height: 5rem;