home page correction

assets/css/main.css

@@ -0,0 +1,29 @@
+h1, h2, h3, h4, h5, h6, p{
+  font-family: "Barlow";
+  font-style: normal;
+}
+
+
+/* BUTTON */
+.btn-artist {
+  background: rgba(250, 194, 10, 0.4);
+}
+
+.btn-manager {
+  background: rgba(216, 5, 11, 0.4);
+
+}
+
+.btn-school, .btn-artist, .btn-manager{
+  border-radius: 0.5rem;
+  margin-left: 2vw;
+  padding: 25px;
+  gap: 9px;
+  font-weight: 700;
+  font-size: .9rem;
+  line-height: 15px;
+  width: 10rem;
+  height: 4rem;
+  font-family: "Barlow";
+  font-style: normal;
+}

components/About/Agenda.vue

@@ -216,7 +216,7 @@ const goNext = () => carousel.next();
   color: #000000;
 }
 .card-text {
-  font-family: "Barlow";
+  mily: "Barlow";
   font-style: normal;
   font-weight: 500;
   font-size: 16px;

components/Home/Caroussel.vue

@@ -1,16 +1,8 @@
 <template>
   <LayoutContainer>
 
-    <h1 class="big-title"> LOGICIELS CULTURELS </h1>
-    <h2 class="middle-title">UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</h2>
-    <h3
-      v-if="smAndDown"
-      class="title-page"
-    >
-      Une <span class="color-solution">solution</span> adapatée à chaque
-      structure culturelle
-    </h3>
-
+    <h1 class="title text-center"> LOGICIELS CULTURELS </h1>
+    <h2 class="subtitle text-center">UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</h2>
     <!-- <v-carousel
       ref="carousel"
       v-model="activeIndex"
@@ -36,17 +28,17 @@
         :key="index"
       >
         <v-row>
-          <v-col :cols="smAndDown ? 12 : 6">
-            <v-row :class="!smAndDown ? 'align-start' : ''">
+          <v-col cols="6">
+            <v-row >
               <v-img
                 v-if="!smAndDown"
-                class="logo-school"
+                class="logo"
                 :src="item.logo"
               />
             </v-row>
 
             <v-row class="align-start">
-              <p :class="smAndDown ? 'description-sm' : 'description'">
+              <p class="description ml-4 mr-4">
                 {{ item.description }}
               </p>
             </v-row>
@@ -60,12 +52,10 @@
             </v-row>
           </v-col>
 
-          <v-col :cols="smAndDown ? 12 : 6">
+          <v-col cols="6">
             <v-row class="justify-end">
               <div
-                :class="
-                  smAndDown ? 'background-rectangle-sm' : 'background-rectangle'
-                "
+                class="background-rectangle"
                 :style="{ backgroundColor: item.color }"
               />
               <v-card
@@ -94,8 +84,9 @@
               </v-card>
 
               <v-img
-                :src="item.image"
+              :src="item.image"
                 :class="smAndDown ? 'image-sm' : 'image'"
+
               />
             </v-row>
           </v-col>
@@ -172,45 +163,25 @@ const carouselItems = ref([
 ::v-deep .v-carousel__controls {
   display: none;
 }
-.big-title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: bold;
+
+/* ============= TITLE ===============  */
+.title {
   font-size: 4rem;
   line-height: 3.5rem;
   letter-spacing: 1.1rem;
-  text-align: center;
-  color: #000000;
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.middle-title {
-  font-family: "Barlow";
-  font-style: normal;
-  letter-spacing: .5rem;
-  font-weight: bold;
+
+.subtitle {
   font-size: 1.5rem;
   line-height: 2rem;
-  text-align: center;
-  color: #000000;
+  letter-spacing: .5rem;
   margin-bottom: 8rem;
 }
-.color-solution {
-  color: rgba(32, 147, 190, 0.9);
-}
-.title-page {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: bold;
-  font-size: 2rem;
-  line-height: 2.5rem;
-  text-align: left;
-  color: #000000;
-  margin-bottom: 2rem;
-  width: 25rem;
-}
 
+/* ============= CARD ===============  */
 .card {
   height: 20%;
   width: 27%;
@@ -240,6 +211,7 @@ const carouselItems = ref([
   margin-bottom: 1vh;
 }
 
+/* ============= RECTANGLE ===============  */
 .background-rectangle {
   position: absolute;
   width: 70%;
@@ -249,47 +221,14 @@ const carouselItems = ref([
   transform: translate(-50%, -50%);
   border-radius: 200px 0px 0px 15rem;
   z-index: -1;
-}
-.background-rectangle-sm {
-  position: absolute;
-  width: 100%;
-  height: 15rem;
-  left: 72%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 200px 0px 0px 15rem;
-  z-index: -1;
-}
 
-.carousel-sm {
-  height: 44rem !important;
-  margin-bottom: -14.3rem;
-  margin-top: 2rem;
-}
 
-.carousel {
-  margin-top: 1rem;
-  height: 900% !important;
-  margin-bottom: -2rem;
-}
-.logo-school {
+/* ============= LOGO ===============  */}
+.logo {
   max-width: 25vw;
   height: 25vh;
   margin-top: 10px;
 }
-
-.image {
-  height: 35rem;
-  margin-top: 6rem;
-  right: 20%;
-}
-
-.image-sm {
-  height: 20rem;
-  margin-top: 9rem;
-  left: 10%;
-  bottom: 10rem;
-}
 .description {
   text-align: left;
   margin-right: 9vw;
@@ -298,14 +237,7 @@ const carouselItems = ref([
   margin-bottom: 1rem;
 }
 
-.description-sm {
-  margin-top: 1rem;
-  width: 100%;
-  text-align: left;
-  margin-left: 1rem;
-  margin-bottom: 1rem;
-}
-
+/* ============= CAROUSEL ===============  */
 .custom-controls {
   position: absolute;
   top: 50%;
@@ -316,12 +248,19 @@ const carouselItems = ref([
   gap: 1vh;
 }
 
+.image {
+  height: 35rem;
+  right: 5rem;
+}
+
+
 .custom-controls div {
-  width: 1vh;
-  height: 1vh;
+  width: .6rem;
+  height: .6rem;
   border-radius: 50%;
   background-color: grey;
   cursor: pointer;
+  margin-bottom: .5rem;
 }
 
 .custom-controls .active-control {
@@ -329,6 +268,10 @@ const carouselItems = ref([
   margin-right: 2rem;
 }
 
+
+/* ============= BUTTON ===============  */
+
+
 .btn-school {
   background: rgba(32, 147, 190, 0.4);
 }

components/Home/Help.vue

@@ -4,7 +4,7 @@
       <v-row>
         <v-col :cols="smAndDown ? 12 : 8">
           <v-img
-            :class="smAndDown ? 'help-img-sm' : 'help-img'"
+            class="help-img"
             src="/images/help/Help.png"
           />
         </v-col>
@@ -98,8 +98,8 @@ const { smAndDown } = useDisplay();
 }
 
 .help-img {
-  width: 50rem;
   margin-left: 5rem;
+  margin-right: 3rem;
   border-radius: 3rem;
 }
 

components/Home/Promotion.vue

@@ -14,30 +14,31 @@
         </h5>
       </div>
       <v-row>
-        <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="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            />
-          </span>
-          tout en un pour la gestion et la promotion
-          <span class="d-inline-flex">
-            <v-img
-              src="/images/promotion/danse.jpg"
-              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            />
-          </span>
-          , de votre structure culturelle.
-          <span class="d-inline-flex">
-            <v-img
-              src="/images/promotion/cirque.jpg"
-              :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
-            />
-          </span>
-        </p>
-      </v-row>
+  <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 align-center">
+      <v-img
+        src="/images/promotion/piano.jpg"
+        :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+      />
+    </span>
+    tout en un pour la gestion et la promotion
+    <span class="d-inline-flex align-center">
+      <v-img
+        src="/images/promotion/danse.jpg"
+        :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+      />
+    </span>
+    , de votre structure culturelle.
+    <span class="d-inline-flex align-center">
+      <v-img
+        src="/images/promotion/cirque.jpg"
+        :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
+      />
+    </span>
+  </p>
+</v-row>
+
     </v-col>
     <v-row>
       <v-col cols="12">
@@ -59,62 +60,6 @@
         pour chaque structure
       </h3>
 
-      <div v-if="smAndDown">
-        <v-row>
-          <div class="horizontal-line" />
-          <div class="picto-group">
-            <v-img
-            src="/images/pictoHome/picto4.svg"
-
-              class="picto-sm"
-            />
-            <p class="text-outil-sm">
-              Logiciel de Gestion et communication en ligne
-            </p>
-          </div>
-        </v-row>
-        <v-row>
-          <div class="horizontal-line" />
-          <div class="picto-group">
-            <v-img
-            src="/images/pictoHome/picto3.svg"
-             
-              class="picto-sm"
-            />
-            <p class="text-outil-sm">
-              Site Web intégré et simple d’usage
-            </p>
-          </div>
-        </v-row>
-        <v-row>
-          <div class="horizontal-line" />
-          <div class="picto-group">
-            <v-img
-            src="/images/pictoHome/picto1.svg"
-
-             
-              class="picto-sm"
-            />
-            <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 class="picto-group mb-12">
-            <v-img
-            src="/images/pictoHome/picto2.svg"
-              class="picto-sm"
-            />
-            <p class="text-outil-sm">
-              Communiquez en réseau
-            </p>
-          </div>
-        </v-row>
-      </div>
-
       <div v-if="!smAndDown">
         <v-row>
           <v-col cols="6">
@@ -187,11 +132,24 @@ const zoomOut = () => {
 </script>
 
 <style scoped>
+.text-gestion .d-inline-flex {
+  vertical-align: middle;
+}
+
+.rectangle-img, .rectangle-img-sm {
+  max-width: 100%; 
+  height: auto; 
+}
+
+.align-center {
+  align-items: center; 
+  display: inline-flex; 
+}
+
 .picto-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  /** rapproché du centre */
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
@@ -204,8 +162,6 @@ const zoomOut = () => {
   margin-bottom: 1rem;
 }
 .text-outil-sm {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size: 22px;
   line-height: 26px;
@@ -257,8 +213,7 @@ const zoomOut = () => {
   line-height: 1rem;
   margin-top: 1rem;
   color: #c1eff0;
-  text-align: center;
-  font-family: "Barlow";
+  text-align: center;;
   letter-spacing: 2.16px;
   text-transform: uppercase;
 }
@@ -285,8 +240,6 @@ const zoomOut = () => {
 }
 
 .text-outil-details {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size: 22px;
   line-height: 26px;
@@ -296,8 +249,6 @@ const zoomOut = () => {
 }
 
 .text-outil {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 400;
   font-size: 2rem;
   color: #0e2d32;
@@ -311,8 +262,6 @@ const zoomOut = () => {
 }
 
 .text-gestion-sm {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 500;
   font-size: 2.5rem;
   line-height: 3.5rem;
@@ -329,16 +278,13 @@ const zoomOut = () => {
 }
 
 .text-gestion {
-  font-family: "Barlow";
-  font-style: normal;
   font-weight: 600;
-  font-size: 3.5rem;
-  line-height: 5.5rem;
+  font-size: 3rem;
   text-align: center;
   color: white;
   height: 20rem;
   margin-top: 3rem;
-  width: 55rem;
+  width: 45rem;
   margin: 2rem auto 28rem;
 }
 
@@ -346,18 +292,8 @@ 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;
-  width: 8rem;
-  height: 5rem;
+  width: 7rem;
   border-radius: 5rem;
 }
 </style>

components/Home/Reviews.vue

@@ -7,45 +7,17 @@
       </div>
 
       <h1 class="title-review">C'est vous qui le dites</h1>
-      <div v-if="smAndDown">
-        <Carousel
-          ref="carousel"
-          :items-to-scroll="1"
-          :autoplay="4000"
-          :items-to-show="2"
-          :wrap-around="true"
-          :transition="500"
-        >
-          <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-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 v-if="!smAndDown" class="container-green">
       <v-row justify="center">
         <!-- v-card with client review -->
-        <v-col cols="12" md="6" lg="4">
-          <v-card class="review-card left mx-auto">
+        <div class="content">
+          
+        </div>
+        <v-col cols="5" class='col-review'>
+          <v-card class="review-card left mx-auto ">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
             </v-avatar>
@@ -71,7 +43,7 @@
           </v-card>
         </v-col>
 
-        <v-col cols="12" md="6" lg="4">
+        <v-col cols="5" class='col-review'>
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -101,7 +73,7 @@
 
       <v-row justify="center">
         <!-- v-card with client review -->
-        <v-col cols="12" md="6" lg="4">
+        <v-col cols="5" class='col-review'>
           <v-card class="review-card left mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -128,7 +100,7 @@
           </v-card>
         </v-col>
 
-        <v-col cols="12" md="6" lg="4">
+        <v-col cols="5" class='col-review'>
           <v-card class="review-card right mx-auto">
             <v-avatar size="80" class="profile-img">
               <v-img src="/images/reviews/photo1.jpg" />
@@ -185,42 +157,6 @@
       </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" />
-              </div>
-              <div class="carousel-button-sm" @click="goNext">
-                <i class="fas fa-chevron-right" />
-              </div>
-            </div>
-          </div>
-        </v-col>
-      </v-row>
-
-      <Carousel
-        ref="carousel"
-        class="carousel-sm"
-        :items-to-show="1"
-        :items-to-scroll="1"
-      >
-        <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>
 
@@ -300,8 +236,25 @@ const items = ref([
 </script>
 
 <style scoped>
-.title,
-.title-sm {
+
+.col-review{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: normal;
+
+}
+
+.left {
+  bottom: 12rem;
+}
+
+.right {
+  bottom: 7rem;
+
+}
+
+.title{
   font-family: "Barlow";
   font-style: normal;
   font-size: 2rem;
@@ -314,10 +267,6 @@ const items = ref([
   width: 25rem;
 }
 
-.title-sm {
-  text-align: center;
-  margin-top: 3rem;
-}
 .icon-title {
   margin-top: 1rem;
   color: #64afb7;
@@ -327,8 +276,7 @@ const items = ref([
   color: #ffffff;
 }
 
-.carousel-button,
-.carousel-button-sm {
+.carousel-button{
   display: flex;
   justify-content: center;
   align-items: center;
@@ -341,11 +289,7 @@ 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;
@@ -354,12 +298,6 @@ const items = ref([
   display: block;
 }
 
-.card-img-sm {
-  /** center the image */
-  height: 10rem;
-  width: 10rem;
-  margin-right: 25rem;
-}
 
 .carousel {
   background-color: white;
@@ -378,22 +316,12 @@ const items = ref([
 }
 .container-green {
   background-color: #0e2d32;
-  padding: 2rem;
   height: 70rem;
 }
 .container-green-sm {
   background-color: #0e2d32;
-  padding: 2rem;
-}
-.left {
-  left: 3rem;
-  bottom: 15rem;
 }
 
-.right {
-  bottom: 9rem;
-  right: 5rem;
-}
 .status {
   margin-top: 1rem;
   font-family: "Barlow";
@@ -443,19 +371,11 @@ 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%;
-  box-shadow: 0px 4px 4px rgba(21, 65, 79, 0.25);
-}
 .review-name {
   margin-left: 1rem;
   font-weight: 500;

components/Layout/Container.vue

@@ -23,7 +23,9 @@ const overflow = ref(props.overflow);
 
 <style scoped>
 .container {
+  position: relative;
   max-width: 100%;
-  min-width: 300px; /* une largeur minimale pour gérer les très petits appareils */
+  min-width: 300px; 
 }
+
 </style>

components/Layout/Navigation.vue

@@ -1,23 +1,32 @@
 <template>
   <LayoutContainer>
-    <v-row
-      class="menu"
-      v-if="!mdAndDown"
-    >
-      <!-- Logo Column -->
-      <v-col cols="2">
+    <div class="container-grey ">
+      <v-row>
+        <v-col cols="12" class="buttons-col mb-2 ">
+          
+          <nuxt-link to="https://admin.opentalent.fr/#/login/">
+            <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
+            </v-btn>
+          </nuxt-link>
+
+          <div class="vertical-bar" />
+          <v-btn class="btn btn-common btn-subscribe ml-4" text>
+            <v-icon left class="fas fa-calendar mr-4"></v-icon> Agenda Culturel
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+
+    <v-row class="menu" v-if="!mdAndDown">
+      <v-col cols="3">
         <nuxt-link to="/">
           <v-img class="logo" src="/images/logo/navigation-logo.png" />
         </nuxt-link>
       </v-col>
 
-      <!-- Colored Square for Mobile -->
-      <v-col v-if="mdAndDown" cols="3">
-        <div class="colored-square"></div>
-      </v-col>
-      <!-- Menu Links -->
-      <v-col cols="6">
-        <!-- Menu déroulant logiciels -->
+      <v-col cols="9">
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
             <nuxt-link v-bind="props" class="link-style"
@@ -39,10 +48,9 @@
           </v-list>
         </v-menu>
 
-        <!-- Menu déroulant services -->
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="link-style" 
+            <nuxt-link v-bind="props" class="link-style"
               >Nos services
             </nuxt-link>
           </template>
@@ -61,12 +69,9 @@
           </v-list>
         </v-menu>
 
-        <!-- Menu déroulant à propos -->
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
-            <nuxt-link v-bind="props" class="link-style" 
-              >A propos</nuxt-link
-            >
+            <nuxt-link v-bind="props" class="link-style">A propos</nuxt-link>
           </template>
 
           <v-list>
@@ -85,31 +90,6 @@
 
         <nuxt-link class="link-style" to="/actualites">Actualités</nuxt-link>
       </v-col>
-
-      <!-- Buttons Column -->
-      <!-- <v-col v-if="!mdAndDown" cols="3" class="buttons-col" >
-        <v-btn class="btn btn-common btn-login" text>
-          <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter
-        </v-btn>
-        <div class="vertical-bar" />
-        <v-btn class="btn btn-common btn-subscribe ml-4" text>
-          <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
-        </v-btn>
-      </v-col> -->
-
-      <v-col cols="2" class="buttons-col">
-        <nuxt-link to="https://admin.opentalent.fr/#/login/">
-          <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
-          </v-btn>
-        </nuxt-link>
-
-        <div class="vertical-bar" />
-        <v-btn class="btn btn-common btn-subscribe ml-4" text>
-          <v-icon left class="fas fa-calendar mr-4"></v-icon> Agenda Culturel
-        </v-btn>
-      </v-col>
     </v-row>
   </LayoutContainer>
 </template>
@@ -137,14 +117,53 @@ const aboutLinks = ref([
 </script>
 
 <style scoped>
-/* =============== Base Styles =============== */
+/* =============== CONTAINER BUTTON =============== */
+.container-grey {
+  background-color: #dbdbdb;
+  height: 100%;
+}
+/* =============== Button Styles =============== */
+
+.buttons-col {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.btn-common {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1.3rem;
+  border-radius: 6px;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+
+.btn-login {
+  background: #091d20;
+  color: white;
+}
+.vertical-bar {
+  width: 0px;
+  height: 3rem;
+  border: 0.5px solid rgba(14, 45, 50, 0.4);
+  margin-left: 10px;
+  margin-top: 0.2rem;
+}
+
+.btn-subscribe {
+  background: #9edbdd;
+}
+/* =============== menu Styles =============== */
 
 .menu {
   display: flex;
   align-items: center;
   background-color: #ffffff;
 }
-
 .v-list-item-title {
   font-family: "Barlow";
   font-style: normal;
@@ -165,22 +184,17 @@ const aboutLinks = ref([
   color: #0e2d32;
   text-decoration: none !important;
 }
-
-.menu-list{
-  padding: 0 2rem;
-}
 .link-style {
   font-family: "Barlow";
   font-style: normal;
-  font-size: 1.1rem;
-  margin-right: 20px;
+  font-size: 1rem;
+  margin-right: 3rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: #0e2d32;
   text-decoration: none !important;
   cursor: pointer;
-
 }
 .link-styles {
   font-family: "Barlow";
@@ -188,81 +202,9 @@ const aboutLinks = ref([
   text-decoration: none !important;
   color: #0e2d32;
 }
-
-.menu-bar {
-  display: flex;
-  align-items: center;
-  background-color: #ffffff;
-  height: 100%;
-  margin-top: 10px;
-}
-
-.custom-row {
-  padding: 0 2rem;
-}
-
-/* =============== Colored Square =============== */
-
-.colored-square {
-  width: 3.5rem;
-  height: 3.5rem;
-  background-color: #091d20;
-}
-
-/* =============== Logo Styles =============== */
-
 .logo {
-  height: 5.5rem;
+  height: 8rem;
 }
 
-/* =============== Menu Link Styles =============== */
-
-.menu-link {
-  text-decoration: none;
-  padding: 1.1rem;
-  font-weight: 500;
-  font-size: 1rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: #0e2d32;
-  margin-right: 0.2rem;
-}
-
-.menu-link:hover {
-  text-decoration: underline;
-}
-
-/* =============== Button Styles =============== */
-
-.buttons-col {
-  display: flex;
-}
 
-.btn-common {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 25px;
-  border-radius: 6px;
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 700;
-  font-size: 0.9rem;
-}
-
-.btn-login {
-  background: #091d20;
-  color: white;
-}
-.vertical-bar {
-  width: 0px;
-  height: 3rem;
-  border: 0.5px solid rgba(14, 45, 50, 0.4);
-  margin-left: 10px;
-  margin-top: 0.2rem;
-}
-
-.btn-subscribe {
-  background: #9edbdd;
-}
 </style>

components/Layout/UI/StickyMenu.vue

@@ -1,10 +1,9 @@
 
 <template>
-  <LayoutContainer>
   <div :class="stickyClass" >
-    <v-row class="outil-row" justify="end">
-      <v-col cols="3">
-        <div class="container-square">
+    <v-row class="outil-row" >
+      <v-col cols="12">
+        <div class="container-square ">
           <v-row v-for="square in squares" :key="square.id" :class="square.bgColor">
             <div>
               <v-icon :class="square.iconClass" />
@@ -15,7 +14,6 @@
       </v-col>
     </v-row>
   </div>
-</LayoutContainer>
 </template>
 
 <script setup lang="ts">
@@ -33,10 +31,10 @@ const squares = ref(props.squaresData);
 </script>
 
 <style scoped>
+
 .container-square {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   color: white;
   font-weight: 500;
   font-size: 0.7rem;
@@ -53,8 +51,6 @@ const squares = ref(props.squaresData);
   position: relative;
   font-family: "Barlow";
   width: 10rem;
-  height: 7rem;
-  margin-left: 14rem;
   padding: 1rem;
 
 }
@@ -79,8 +75,5 @@ const squares = ref(props.squaresData);
 .text-square {
   margin: 0.5rem 2rem;
 }
-.outil-row {
-  margin: 5rem 0;
-}
 
 </style>

nuxt.config.ts

@@ -9,6 +9,7 @@ import { fa } from "vuetify/lib/locale";
  * @see https://nuxt.com/docs/api/configuration/nuxt-config
  */
 export default defineNuxtConfig({
+  css: ["~/assets/css/main.css"],
   ssr: false,
   title: "Opentalent",
   runtimeConfig: {

pages/index.vue

@@ -73,8 +73,9 @@ onMounted(() => {
 #sticky-menu {
   position: sticky;
   top: 25rem;
-  left: 0;
-  z-index: 10;
-  margin-bottom: -40rem;
+  z-index: 1;
+  margin-bottom: -30rem;
+  float: right;
 }
+
 </style>