sticky menu

.eslintignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

.eslintrc.yaml

@@ -0,0 +1,20 @@
+env:
+  browser: true
+parser: vue-eslint-parser
+parserOptions:
+  parser: '@typescript-eslint/parser'
+  ecmaVersion: 2020
+  sourceType: 'module'
+plugins:
+  - vue
+  - '@typescript-eslint'
+extends: 
+  - eslint:recommended
+  - plugin:vue/recommended
+  - plugin:nuxt/recommended
+  - plugin:@typescript-eslint/recommended
+rules:
+  vue/multi-word-component-names: off
+  vue/no-multiple-template-root: off
+  eqeqeq: warn
+  strict: off

.nvmrc

@@ -0,0 +1 @@
+18.10.0

components/Home/Caroussel.vue

@@ -1,12 +1,15 @@
 <template>
   <LayoutContainer>
-    <h1
+
+    <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
-    </h1>
+    </h3>
 
     <v-carousel
       ref="carousel"
@@ -159,7 +162,30 @@ const carouselItems = ref([
 ::v-deep .v-carousel__controls {
   display: none;
 }
+.big-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: bold;
+  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;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  text-align: center;
+  color: #000000;
+  margin-bottom: 8rem;
+}
 .color-solution {
   color: rgba(32, 147, 190, 0.9);
 }

components/Layout/Navigation.vue

@@ -2,94 +2,100 @@
   <LayoutContainer>
     <v-row
       justify="space-between"
-      :class="mdAndDown ? 'menu-bar' : ' menu-bar custom-row'"
+      :class="mdAndDown ? 'menu-bar' : 'menu-bar custom-row'"
     >
-      <v-col
-        :cols="mdAndDown ? 8 : 6"
-        sm="8"
-        md="2"
-      >
+      <!-- Logo Column -->
+      <v-col :cols="mdAndDown ? 8 : 6" sm="8" md="2">
         <nuxt-link to="/">
-          <v-img
-            class="logo"
-            src="/images/Opentalent.png"
-          />
+          <v-img class="logo" src="/images/Opentalent.png" />
         </nuxt-link>
       </v-col>
 
-      <v-col
-        v-if="mdAndDown"
-        cols="3"
-      >
-        <div class="colored-square" />
+      <!-- Colored Square for Mobile -->
+      <v-col v-if="mdAndDown" cols="3">
+        <div class="colored-square"></div>
       </v-col>
 
-      <v-col
-        v-if="!mdAndDown"
-        cols="12"
-        sm="7"
-        md="5"
-      >
-        <nuxt-link
-          class="common-styles menu-link"
-          to="/about"
-        >
-          A propos
-        </nuxt-link>
-        <nuxt-link
-          class="common-styles menu-link"
-          to="/software"
-        >
-          Nos logiciels
-        </nuxt-link>
-        <nuxt-link
-          class="common-styles menu-link"
-          to="/directory"
-        >
-          Annuaire
-        </nuxt-link>
-        <nuxt-link
-          class="common-styles menu-link"
-          to="/news"
-        >
-          Actualités
-        </nuxt-link>
+      <!-- Menu Links -->
+      <v-col v-if="!mdAndDown" cols="12" sm="7" md="5">
+        <!-- Menu déroulant logiciels -->
+        <v-menu open-on-hover>
+          <template v-slot:activator="{ props }">
+            <nuxt-link v-bind="props" class="common-styles" to="/software"
+              >Nos logiciels
+            </nuxt-link>
+          </template>
+
+          <v-list class="menu-list">
+            <nuxt-link
+              v-for="software in softwareLinks"
+              :key="software.name"
+              :to="software.href"
+              class="link-styles"
+            >
+              <v-list-item>
+                <v-list-item-title>{{ software.name }}</v-list-item-title>
+              </v-list-item>
+            </nuxt-link>
+          </v-list>
+        </v-menu>
+
+        <!-- Menu déroulant services -->
+        <v-menu open-on-hover>
+          <template v-slot:activator="{ props }">
+            <nuxt-link v-bind="props" class="common-styles" to="/software"
+              >Nos services
+            </nuxt-link>
+          </template>
+
+          <v-list>
+            <nuxt-link
+              v-for="service in serviceLinks"
+              :key="service.name"
+              :to="service.href"
+              class="link-styles"
+            >
+              <v-list-item>
+                <v-list-item-title>{{ service.name }}</v-list-item-title>
+              </v-list-item>
+            </nuxt-link>
+          </v-list>
+        </v-menu>
+
+        <!-- Menu déroulant à propos -->
+        <v-menu open-on-hover>
+          <template v-slot:activator="{ props }">
+            <nuxt-link v-bind="props" class="common-styles" to="/software"
+              >A propos</nuxt-link
+            >
+          </template>
+
+          <v-list>
+            <nuxt-link
+              v-for="info in aboutLinks"
+              :key="info.name"
+              :to="info.href"
+              class="link-styles"
+            >
+              <v-list-item>
+                <v-list-item-title>{{ info.name }}</v-list-item-title>
+              </v-list-item>
+            </nuxt-link>
+          </v-list>
+        </v-menu>
+
+        <nuxt-link class="common-styles" to="/news">Actualités</nuxt-link>
       </v-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"
-          /> Se connecter
-        </v-btn>
-        <v-btn
-          class="btn btn-common common-styles btn-subscribe ml-4"
-          text
-        >
-          <v-icon
-            left
-            class="fas fa-bell mr-4"
-          />Vous abonner
+      <!-- Buttons Column -->
+      <v-col v-if="!mdAndDown" cols="12" sm="12" md="5" 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" />
-
-        <nuxt-link
-          class="common-styles btn-contact"
-          to="/contact"
-        >
-          <v-icon class="fas fa-comment-dots mr-2" />Nous contacter
-        </nuxt-link>
+        <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>
@@ -98,40 +104,55 @@
 <script setup>
 import { useDisplay } from "vuetify";
 const { mdAndDown } = useDisplay();
+
+const softwareLinks = ref([
+  { name: "Opentalent Artist", href: "/opentalent_artist" },
+  { name: "Opentalent School", href: "/opentalent_school" },
+  { name: "Opentalent Manager", href: "/opentalent_manager" },
+]);
+
+const serviceLinks = ref([
+  { name: "Formations", href: "/formations" },
+  { name: "Webinaires", href: "/webinaires" },
+]);
+
+const aboutLinks = ref([
+  { name: "Qui sommes-nous", href: "/qui-sommes-nous" },
+  { name: "Nous rejoindre", href: "/nous-rejoindre" },
+  { name: "Nous contacter", href: "/nous-contacter" },
+]);
 </script>
 
 <style scoped>
-.colored-square {
-  width: 3.5rem;
-  height: 3.5rem;
-  background-color: #091d20;
-}
-.logo {
-  height: 4.5rem;
-}
-.custom-row {
-  padding: 0 4rem;
-}
+/* =============== Base Styles =============== */
 
-.common-styles {
+.v-list-item-title {
   font-family: "Barlow";
   font-style: normal;
-  font-weight: 700;
-  font-size: 0.7rem;
-  line-height: 15px;
+  font-weight: 500;
+  font-size: 0.9rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #0e2d32;
 }
-
-.vertical-bar {
-  width: 0px;
-  height: 3rem;
-  border: 0.5px solid rgba(14, 45, 50, 0.4);
-  margin-left: 10px;
-  margin-right: 10px;
-  margin-top: 0.2rem;
+.common-styles {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 1.1rem;
+  padding: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #0e2d32;
+  margin-right: 20px;
+  text-decoration: none !important;
 }
 
-.buttons-col {
-  display: flex;
+.link-styles {
+  font-family: "Barlow";
+  font-style: normal;
+  text-decoration: none !important;
+  color: #0e2d32;
 }
 
 .menu-bar {
@@ -142,15 +163,45 @@ const { mdAndDown } = useDisplay();
   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: 4.5rem;
+}
+
+/* =============== Menu Link Styles =============== */
+
 .menu-link {
   text-decoration: none;
   padding: 1.1rem;
   font-weight: 500;
-  font-size: 0.96rem;
+  font-size: 1rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #0e2d32;
-  margin-right: 4px;
+  margin-right: 0.2rem;
+}
+
+.menu-link:hover {
+  text-decoration: underline;
+}
+
+/* =============== Button Styles =============== */
+
+.buttons-col {
+  display: flex;
 }
 
 .btn-common {
@@ -158,31 +209,27 @@ const { mdAndDown } = useDisplay();
   flex-direction: row;
   align-items: center;
   padding: 25px;
-  font-weight: 700;
-  font-size: 0.8rem;
-  line-height: 15px;
   border-radius: 6px;
+  margin-left: 15rem;
+  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;
 }
-
-.btn-contact {
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #0e2d32;
-  margin-top: 17px;
-  text-decoration: none;
-}
-
-.btn-contact:hover,
-.menu-link:hover {
-  text-decoration: underline;
-}
 </style>

components/Logiciels/School/Accompagnement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Accompagnement">
+  <div id="formations">
     <LayoutContainer>
       <div class="container-green">
         <v-row>

components/Logiciels/School/MenuScroll.vue

@@ -33,8 +33,7 @@ const menus = [
   { label: "Avantages" },
   { label: "Fonctionnalites" },
   { label: "Comparatif" },
-  { label: "détails" },
-  { label: "abonnement" },
+  { label: "contact" },
   { label: "Temoignages" },
   { label: "formations" },
   { label: "Aide" },

components/Logiciels/School/Outil.vue

@@ -61,7 +61,7 @@
           </ul>
         </v-col>
 
-        <v-col cols="3">
+        <!-- <v-col cols="3">
           <div class="container-square">
             <v-row>
               <div class="blue-square">
@@ -99,7 +99,7 @@
               </div>
             </v-row>
           </div>
-        </v-col>
+        </v-col> -->
         <v-row>
           <v-col cols="4" />
 

components/Logiciels/School/Projet.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="Contact">
+  <div id="contact">
     <LayoutContainer>
       <v-row>
         <div class="project-container" />

components/Logiciels/School/StickyMenu.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="sticky-menu">
+    <LayoutContainer >
+      <v-row class="outil-row">
+        <v-col cols="3">
+          <div class="container-square">
+            <v-row class="blue-square">
+              <div>
+                <v-icon class="fa-regular fa-comments icon" />
+                <p class="text-square">Nous contacter</p>
+              </div>
+            </v-row>
+
+            <v-row class="blue-square">
+              <div>
+                <v-icon class="fa-regular fa-circle-info icon" />
+                <p class="text-square">Demander une demo</p>
+              </div>
+            </v-row>
+
+            <v-row class="blue-square">
+              <div>
+                <v-icon class="fa-brands fa-readme icon" />
+                <p class="text-square">Brochure</p>
+              </div>
+            </v-row>
+
+            <v-row class="darkblue-square">
+              <div>
+                <v-icon class="fa-solid fa-phone icon" />
+                <p class="text-square">Nous Appeler</p>
+              </div>
+            </v-row>
+          </div>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.container-square {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: white;
+  font-weight: 500;
+  font-size: 0.7rem;
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.blue-square,
+.darkblue-square {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Barlow";
+  width: 10rem;
+  height: 7rem;
+  margin-left: 14rem;
+  padding: 1rem;
+}
+
+.blue-square {
+  background: rgba(32, 147, 190, 0.6);
+}
+
+.darkblue-square {
+  background: #0e2d32;
+}
+
+.text-square {
+  margin: 0.5rem 2rem;
+}
+
+.icon {
+  margin-right: 1rem;
+}
+
+.icon-logiciel {
+  color: rgba(32, 147, 190, 0.6);
+  margin-right: 1rem;
+}
+
+.outil-row {
+  margin: 5rem 0;
+}
+
+#sticky-menu {
+  position: sticky;
+  top: 10rem;
+  z-index: 10;  /* Pour s'assurer qu'il reste au-dessus des autres éléments */
+  margin-left: 88rem;
+}
+
+</style>

pages/logiciels/school.vue

@@ -1,7 +1,10 @@
 <template>
   <LayoutNavigation />
   <LogicielsSchoolBanner />
+
   <LogicielsSchoolMenuScroll />
+  <LogicielsSchoolStickyMenu />
+
   <LogicielsSchoolOutil />
   <LogicielsSchoolAvantages />
   <LogicielsSchoolFonctionnalites />

pages/stick.vue

@@ -0,0 +1,100 @@
+
+<template>
+<div id="app">
+  <v-app>
+      <v-content class="container">
+          <v-row>
+              <v-col sm="4" class="pink">
+                  
+              </v-col>
+              <v-col>
+                  <h2>Center</h2>
+                  <p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
+swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
+ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
+synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
+
+<p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+<p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
+swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
+ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
+synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
+
+<p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+<p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
+swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
+ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
+synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
+
+<p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+<p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+                  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape 
+swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade 
+ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh 
+synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> 
+
+<p>Ethical Kickstarter PBR 
+asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan 
+Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb 
+readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy 
+leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, 
+forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
+              </v-col>
+              <v-col sm="4" class="pink">
+                  <div class="sticky-top">
+                    <LogicielsSchoolStickyMenu></LogicielsSchoolStickyMenu>
+                  </div>
+              </v-col>
+              
+          </v-row>
+          
+      </v-content>
+  </v-app>
+</div>
+
+</template>
+
+<style>
+.sticky-top {
+    position: sticky;
+    top: 0;
+}
+</style>