fix mobile vue

components/Home/Besoin.vue

@@ -0,0 +1,208 @@
+<template>
+  <LayoutContainer :overflow="false">
+    <v-row class="white-container">
+      <v-row>
+        <v-col  :cols="smAndDown ? 12 : 6">
+          <v-img src="/images/eventAgenda/logiciel.png" :class="smAndDown ? 'screen-img-sm' : 'screen-img'">
+          </v-img>
+        </v-col>
+        <div :class="smAndDown ? 'circle-sm' : '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="smAndDown ? 'title-event-sm d-flex justify-center' : 'title-event'">
+            Une solution évolutive pour vous donner entière satisfaction
+          </h3>
+
+          <p :class="smAndDown ? 'details-sm' : 'details'">
+            La satisfaction de nos clients est notre première motivation et nous
+            nous tenons à votre écoute pour faire évoluer notre logiciel. Un
+            besoin ? Notifiez le nous et après l'étude de votre demande en
+            interne puis validation, nous intégrerons votre requête à notre
+            processus de développement.
+          </p>
+        </v-col>
+      </v-row>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+const { lgAndUp, smAndDown, mdAndDown } = useDisplay();
+</script>
+
+<style scoped>
+
+.btn-event-sm {
+  font-family: "Barlow";
+  font-style: normal;
+  border-radius: 0.5rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
+  
+}
+.icon-arrow {
+  font-size: 1rem;
+  margin-left: 1rem;
+}
+.btn-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20rem;
+}
+.btn-event {
+  font-family: "Barlow";
+  font-style: normal;
+  border-radius: 0.5rem;
+  margin-left: 7vw;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 0.9rem;
+  line-height: 15px;
+  width: 18rem;
+  height: 3rem;
+  margin-top: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  height: 9rem;
+  font-weight: 400;
+  font-size: 3rem;
+  line-height: 3rem;
+  text-align: center;
+  margin-bottom: 3rem;
+  margin-top: 4rem;
+  color: #ffffff;
+  width: 45rem;
+}
+
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.circle {
+  position: absolute;
+  left: 35%;
+  margin-top: 0.5rem;
+  width: 300px;
+  height: 300px;
+  background: #eff9fb;
+  border-radius: 50%;
+}
+
+.circle-sm{
+  position: absolute;
+  left: 25%;
+  margin-top: 15rem;
+  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;
+}
+
+
+.title-event {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 38px;
+  margin-top: 1rem;
+  margin-left: 2rem;
+  color: #091d20;
+  width: 16rem;
+  margin-left: 10rem;
+}
+
+.title-event-sm {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 38px;
+  margin-top: 13rem;
+  color: #091d20;
+  margin-left: 2rem;
+  width: 30rem;
+  text-align: center;
+}
+
+
+.details {
+  font-weight: 400;
+  font-size: 1rem;
+  margin-top: 3rem;
+  margin-left: 2rem;
+  color: #091d20;
+  width: 16rem;
+  margin-left: 10rem;
+  font-family: "Barlow";
+  font-style: normal;
+}
+
+
+.details-sm {
+  font-weight: 400;
+  font-size: 1rem;
+  margin-top: 3rem;
+  margin-left: 2rem;
+  color: #091d20;
+  font-family: "Barlow";
+  font-style: normal;
+  width: 30rem;
+  text-align: center;
+}
+
+
+
+.container-sm {
+  margin-bottom: 60rem;
+}
+
+.white-container {
+  margin-top: 9rem;
+  background-color: #ffffff;
+}
+
+.screen-img {
+  margin-left: 8rem;
+  width: 60%;
+  border-radius: 20%;
+}
+
+.screen-img-sm{
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+  border-radius: 20%;
+}
+</style>

components/Home/EventAgenda.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer :overflow="false">
+  <LayoutContainer :overflow="false"  >
     <div class="title-container">
       <h2 class="title">
         Retrouvez tous vos évènements dans l'agenda et référencez vous dans
@@ -8,16 +8,17 @@
     </div>
 
     <v-row>
-      <v-col cols="12" class="btn-container">
-        <v-col col="6">
-          <v-btn class="btn-event"
+      <v-col cols="12" :class="lgAndUp ? 'btn-container' : ''">
+        <v-col :cols="smAndDown ? 12 : 6" class="d-flex justify-center">
+
+          <v-btn :class="smAndDown ? 'btn-event-sm' : 'btn-event'"
             >Découvrir les évènements
             <v-icon class="fa-solid fa-arrow-right icon-arrow"></v-icon>
           </v-btn>
         </v-col>
 
         <v-col col="6">
-          <v-btn class="btn-event"
+          <v-btn v-if="lgAndUp"  class="btn-event"
             >Découvrir l’ANNUAIRE
             <v-icon class="fa-solid fa-arrow-right icon-arrow"></v-icon>
           </v-btn>
@@ -25,35 +26,25 @@
       </v-col>
     </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-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>
-
-          <p class="details">
-            La satisfaction de nos clients est notre première motivation et nous
-            nous tenons à votre écoute pour faire évoluer notre logiciel. Un
-            besoin ? Notifiez le nous et après l'étude de votre demande en
-            interne puis validation, nous intégrerons votre requête à notre
-            processus de développement.
-          </p>
-        </v-col>
-      </v-row>
-    </div>
   </LayoutContainer>
 </template>
 
+<script setup>
+import { useDisplay } from "vuetify";
+const { lgAndUp, smAndDown, mdAndDown } = useDisplay();
+</script>
+
 <style scoped>
+
+.btn-event-sm {
+  font-family: "Barlow";
+  font-style: normal;
+  border-radius: 0.5rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  margin-top: 3rem;
+  
+}
 .icon-arrow {
   font-size: 1rem;
   margin-left: 1rem;
@@ -100,63 +91,10 @@
   align-items: center;
 }
 
-.circle {
-  position: absolute;
-  left: 35%;
-  margin-top: 0.5rem;
-  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 {
-  font-weight: 400;
-  font-size: 1rem;
-  margin-top: 3rem;
-  margin-left: 2rem;
-  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: 1rem;
-  margin-left: 2rem;
-  color: #091d20;
-  width: 16rem;
-  margin-left: 10rem;
-}
-
-.container {
+.container, 
+.container-sm
+{
   height: 30rem;
-  margin-bottom: 30rem;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
     linear-gradient(
       180deg,
@@ -168,14 +106,9 @@
   background-size: cover;
 }
 
-.white-container {
-  margin-top: 9rem;
-  background-color: #ffffff;
+.container-sm {
+  margin-bottom: 60rem;
 }
 
-.screen-img {
-  margin-left: 8rem;
-  width: 60%;
-  border-radius: 20%;
-}
+
 </style>

components/Home/Reviews.vue

@@ -1,15 +1,47 @@
 <template>
-  <LayoutContainer :overflow="false">
-    <div class="container-color">
+  <LayoutContainer  :overflow="false">
+    <div  :class="smAndDown ? '' : 'container-color'">
       <div class="d-flex justify-center align-center flex-column">
         <v-icon size="8" class="fa-solid fa-circle icon-title"></v-icon>
         <h6 class="small-title">Avis Clients</h6>
       </div>
 
       <h1 class="title-review">C'est vous qui le dites</h1>
+      <div v-if="smAndDown">
+        <Carousel
+        :itemsToShow="2"
+        :itemsToScroll="1"
+        ref="carousel"
+        >
+        <Slide v-for="(review, index) in reviews" :key="index">
+          <v-col cols="12">
+          <v-card class="review-card-sm ">
+            <v-avatar size="80" class="profile-img">
+              <v-img :src="review.avatar"></v-img>
+            </v-avatar>
+            <v-card-title>
+              <span class="review-name">{{ review.name}}</span>
+            </v-card-title>
+
+            <v-card-text>
+              <p class="description-review">
+               {{ review.description }}
+              </p>
+            </v-card-text>
+            <small class="status">{{ review.status}}</small>
+
+            <small class="structure"
+              >{{  review.structure}}</small
+            >
+          </v-card>
+        </v-col>
+        </Slide>
+      </Carousel>
+
+      </div>
     </div>
 
-    <div class="container-green">
+    <div v-if="!smAndDown" class="container-green">
       <v-row justify="center">
         <!-- v-card with client review -->
         <v-col cols="12" md="6" lg="4">
@@ -143,10 +175,9 @@
       </v-row>
 
       <Carousel
-        class="carrousel elevation-6"
+        class="carousel elevation-6"
         :itemsToShow="4"
         :itemsToScroll="2"
-        v-slot="{ carousel: _carousel }"
         ref="carousel"
       >
         <Slide v-for="(item, index) in items" :key="index">
@@ -156,12 +187,45 @@
         </Slide>
       </Carousel>
     </div>
+
+    <div v-if="smAndDown">
+      <v-row class="container-green-sm mt-6" >
+        <v-col cols="12">
+          <div class="d-flex justify-center align-center flex-column">
+            <h2 class="title-sm text-center">
+              Plus de 5 000 structures nous font confiance
+            </h2>
+            <div class="d-flex justify-center align-center">
+              <div class="carousel-button-sm" @click="goPrevious">
+                <i class="fas fa-chevron-left"></i>
+              </div>
+              <div class="carousel-button-sm" @click="goNext">
+                <i class="fas fa-chevron-right"></i>
+              </div>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+
+      <Carousel
+        class="carousel-sm "
+        :itemsToShow="1"
+        :itemsToScroll="1"
+        ref="carousel"
+      >
+        <Slide v-for="(item, index) in items" :key="index">
+            <v-img class="card-img-sm" :src="item.src" alt="Card image cap" contain position="center center" />
+        </Slide>
+      </Carousel>
+    </div>
   </LayoutContainer>
 </template>
 
 <script setup>
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
+import { useDisplay } from "vuetify";
+const { mdAndDown, smAndDown } = useDisplay();
 const carousel = ref(null);
 
 const goPrevious = () => {
@@ -171,6 +235,38 @@ const goPrevious = () => {
 const goNext = () => {
   carousel.value.next();
 };
+
+const reviews = [
+  {
+    name : "John Doe",
+    status : "DIRECTEUR PÉDAGOGIQUE",
+    structure : "Conservatoire Musique & Danse Sens (78)",
+    description : "C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
+    avatar : "/images/reviews/photo1.jpg"
+  },
+  {
+    name : "John Doe",
+    status : "DIRECTEUR PÉDAGOGIQUE",
+    structure : "Conservatoire Musique & Danse Sens (78)",
+    avatar : "/images/reviews/photo1.jpg",
+    description : "C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
+  },
+  {
+    name : "John Doe",
+    status : "DIRECTEUR PÉDAGOGIQUE",
+    structure : "Conservatoire Musique & Danse Sens (78)",
+    avatar : "/images/reviews/photo1.jpg",
+    description : "C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
+  },
+  {
+    name : "John Doe",
+    status : "DIRECTEUR PÉDAGOGIQUE",
+    structure : "Conservatoire Musique & Danse Sens (78)",
+    avatar : "/images/reviews/photo1.jpg",
+    description : "C'est un logiciel très bien conçu et efficace avec une équipe ouverte, dynamique et à l'écoute. L’assistance est très réactive, j'ai toujours eu une réponse rapide à mes besoins, ce qui est fort appréciable.",
+  }
+
+]
 const items = ref([
   { src: "/images/reviews/review1.png" },
   { src: "/images/reviews/review2.png" },
@@ -181,25 +277,39 @@ const items = ref([
 </script>
 
 <style scoped>
-.title {
+.title,
+.title-sm
+{
   font-family: "Barlow";
   font-style: normal;
   font-size: 2rem;
   line-height: 42px;
   text-align: center;
-  color: #ffffff;
-  margin-left: 30rem;
-  margin-right: 30rem;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 25rem;
+}
+
+.title-sm{
+  text-align: center;
+  margin-top: 3rem;
 }
 .icon-title {
   margin-top: 1rem;
   color: #64afb7;
 }
-.carousel-button i {
+.carousel-button i,
+.carousel-button-sm i
+{
   color: #ffffff;
 }
 
-.carousel-button {
+
+.carousel-button,
+.carousel-button-sm
+{
   display: flex;
   justify-content: center;
   align-items: center;
@@ -211,30 +321,52 @@ const items = ref([
   margin-right: 1rem;
   margin-top: 1rem;
 }
+.carousel-button-sm {
+  width: 4rem;
+  height: 4rem;
+  margin-left: 1rem;
+}
 .card-img {
   height: 10rem;
   width: 10rem;
   margin-left: auto;
-  margin-right: auto;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-right: 5rem;
+  display: block;
+
 }
+
+.card-img-sm {
+  /** center the image */
+  height: 10rem;
+  width: 10rem;
+  margin-right: 25rem;
+  
+}
+
 .carousel {
   background-color: white;
   margin-top: 2rem;
   border-radius: 20px;
-  height: 13em;
   width: 60rem;
   margin-left: auto;
   margin-right: auto;
   box-shadow: #071b1f;
 }
+.carousel-sm {
+  background-color: white;
+  margin-top: 2rem;
+  border-radius: 20px;
+  box-shadow: #071b1f;
+}
 .container-green {
   background-color: #0e2d32;
   padding: 2rem;
   height: 70rem;
 }
-
+.container-green-sm {
+  background-color: #0e2d32;
+  padding: 2rem;
+}
 .left {
   left: 3rem;
   bottom: 15rem;
@@ -293,12 +425,18 @@ const items = ref([
   background: #f8f8f8;
   height: 25rem;
 }
+.container-color-sm {
+  background: #f8f8f8;
+}
 .review-card {
   width: 21rem;
   height: 100%;
   margin-bottom: 2rem;
 }
-
+.review-card-sm {
+  width: 80%;
+  height: 100%;
+}
 .review-name {
   margin-left: 1rem;
   font-weight: 500;
@@ -324,7 +462,5 @@ const items = ref([
   line-height: 42px;
   text-align: center;
   color: #071b1f;
-  margin-left: 30rem;
-  margin-right: 30rem;
 }
 </style>

components/Layout/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <div class="activities">
+    <div v-if="lgAndUp" class="activities">
       <v-row>
         <v-col cols="4">
           <v-img
@@ -21,6 +21,7 @@
             >Fédérations, confédérations, collectivités</small
           >
         </v-col>
+        
 
         <v-col cols="4">
           <v-img
@@ -35,9 +36,9 @@
     </div>
 
     <div class="footer">
-      <div class="content-footer">
+      <div  class="content-footer">
         <v-row>
-          <v-col cols="3">
+          <v-col :cols="smAndDown ? 12 : 3" :class="smAndDown ? 'logo-opentalent-sm' : ''">
             <v-img
               class="logo"
               src="/images/Logo-blanc.png"
@@ -46,7 +47,7 @@
             ></v-img>
           </v-col>
 
-          <v-col cols="2">
+          <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
             <v-row class="title-link">Liens Rapides</v-row>
             <v-row>
               <small class="small-link">A propos</small>
@@ -59,7 +60,7 @@
             </v-row>
           </v-col>
 
-          <v-col cols="2">
+          <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
             <v-row class="title-link">Informations</v-row>
             <v-row>
               <small class="small-link">FAQ</small>
@@ -75,7 +76,7 @@
             </v-row>
           </v-col>
 
-          <v-col cols="2">
+          <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
             <v-row class="title-link">Espace client</v-row>
             <v-row>
               <small class="small-link">Mon compte</small>
@@ -85,7 +86,7 @@
             </v-row>
           </v-col>
 
-          <v-col cols="3">
+          <v-col  :cols="smAndDown ? 6 : 2" :class="smAndDown ? 'link-sm' : '' ">
             <v-row class="title-link">Liens Rapides</v-row>
 
             <v-row>
@@ -108,12 +109,26 @@
   </LayoutContainer>
 </template>
 
-<script>
-import "@fortawesome/fontawesome-free/css/all.css";
+<script setup>
+import { useDisplay } from "vuetify";
+const { mdAndDown, smAndDown, lgAndUp } = useDisplay();
 </script>
 
 <style scoped>
-/** icon 2ieme and 3eme child */
+
+.link-sm{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.logo-opentalent-sm{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .icon:nth-child(2) {
   margin-left: 10px;
 }
@@ -125,7 +140,7 @@ import "@fortawesome/fontawesome-free/css/all.css";
   line-height: 20px;
   margin-bottom: 1rem;
 }
-/** small link : margin bottom + color gris + small */
+
 .small-link {
   margin-bottom: 0.5rem;
   font-family: "Barlow";

components/Layout/Navigation.vue

@@ -2,19 +2,19 @@
   <LayoutContainer>
     <v-row
       justify="space-between"
-      :class="smAndDown ? 'menu-bar' : ' menu-bar custom-row'"
+      :class="mdAndDown ? 'menu-bar' : ' menu-bar custom-row'"
     >
-      <v-col :cols="smAndDown ? 5 : 6" sm="4" md="2">
+      <v-col :cols="mdAndDown ? 8 : 6" sm="8" md="2">
         <nuxt-link to="/">
           <v-img class="logo" src="/images/Opentalent.png"></v-img>
         </nuxt-link>
       </v-col>
 
-      <v-col v-if="smAndDown" cols="3">
+      <v-col v-if="mdAndDown" cols="3">
         <div class="colored-square"></div>
       </v-col>
 
-      <v-col v-if="!smAndDown" cols="12" sm="7" md="5">
+      <v-col v-if="!mdAndDown" cols="12" sm="7" md="5">
         <nuxt-link class="common-styles menu-link" to="/about"
           >A propos</nuxt-link
         >
@@ -29,7 +29,7 @@
         >
       </v-col>
 
-      <v-col v-if="!smAndDown" cols="12" sm="12" md="5" class="buttons-col">
+      <v-col v-if="!mdAndDown" 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>
@@ -60,7 +60,6 @@ const { mdAndDown, smAndDown } = useDisplay();
 }
 .logo {
   height: 4.5rem;
-  height: 5rem;
 }
 .custom-row {
   padding: 0 4rem;

nuxt.config.ts

@@ -9,7 +9,7 @@ import { fa } from "vuetify/lib/locale";
  * @see https://nuxt.com/docs/api/configuration/nuxt-config
  */
 export default defineNuxtConfig({
-  ssr: false,
+  ssr: true,
   title: "Opentalent",
   runtimeConfig: {
     // Private config that is only available on the server

pages/index.vue

@@ -4,8 +4,9 @@
   <HomePromotion />
   <HomeSolution />
   <HomeEventAgenda />
+  <HomeBesoin />
   <HomeReviews />
-  <HomeNews />
+  <!-- <HomeNews /> -->
   <HomeHelp />
   <LayoutFooter />
 </template>