retour v3

components/Common/Carousel/Fonctionnalite.vue

@@ -67,16 +67,16 @@
                           </li>
                         </ul>
                       </v-card-text>
-                      <div class="card-footer">
+                 
+                    </v-card-item>
+                    <div class="card-footer">
                         <p
-                          class="reviewer-structure"
                           v-for="option in card.options"
                           :key="option"
                         >
                           {{ option }}
                         </p>
                       </div>
-                    </v-card-item>
                   </v-card>
                 </div>
               </Slide>
@@ -216,8 +216,9 @@ const previousAction = () => {
 }
 .card-footer {
   position: absolute;
-  right: 0;
-  margin-right: 2rem;
+  left: 0;
+  margin-left: .5rem;
+  font-size: .9rem;
 }
 
 .card {
@@ -229,6 +230,7 @@ const previousAction = () => {
 
   min-height: 400px !important;
   max-height: 400px !important;
+  min-width: 300px !important;
   border-radius: 1rem;
   min-height: 25rem;
 }

components/Common/ContainerVideo.vue

@@ -87,7 +87,6 @@ const iconColor = computed(() => {
   margin-left: auto !important;
   margin-right: auto !important;
 }
-
 .v-container {
   padding: 0 !important;
 }

components/Home/Solution.vue

@@ -66,19 +66,17 @@
                 </v-col>
               </div>
             </v-row>
-
-            <v-row>
-              <v-col cols="12" lg="4" md="4" sm="4"
-              >
-                <p style="font-size: 0.7rem; text-align: left !important;">
-                  {{ solution.option }}
-                </p></v-col
-              >
-            </v-row>
           </div>
         </v-container>
       </v-col>
     </v-row>
+    <v-container>
+      <v-row >
+        <v-col cols="12">
+          <p style="text-align: right; font-size: 12px;">* en option</p>
+        </v-col>
+      </v-row>
+    </v-container>
   </LayoutContainer>
 </template>
 
@@ -131,8 +129,7 @@ const solutions = [
       "Site internet intégré",
       "Statistiques",
     ],
-
-    option: "* en option",
+    option: "*Optionnel",
   },
   {
     name: "Manager",
@@ -434,7 +431,7 @@ onMounted(() => {
 .container {
   background: #0e2d32;
   margin-bottom: 15rem;
-  height: 35rem;
+  height: 36rem;
   position: relative;
 }
 </style>

components/JoinUs/Missions.vue

@@ -1,16 +1,20 @@
 <template>
   <LayoutContainer>
-    <div
-      v-for="(job, index) in jobs"
-      :key="index"
-      class="mission-container"
-    >
+    <div v-for="(job, index) in jobs" :key="index" class="mission-container">
       <!-- Première ligne -->
       <v-row class="announcement-title ml-6 mr-6">
-        <div class="title-job">
-          {{ job.title }} - {{ job.contractType }}
-        </div>
+        <NuxtLink
+          :to="`/nous-rejoindre/${job.id}`"
+          class="text-decoration-none"
+        >
+          <div class="title-job">{{ job.title }} - {{ job.contractType }}</div>
+        </NuxtLink>
+        <NuxtLink
+          :to="`/nous-rejoindre/${job.id}`"
+          class="text-decoration-none"
+        >
         <v-btn class="btn-more" text> En savoir plus </v-btn>
+        </NuxtLink>
       </v-row>
 
       <!-- Deuxième ligne -->
@@ -26,14 +30,15 @@
 
     <v-row class="apply-row ml-6 mb-6">
       <v-col cols="12">
-      <p class="apply-now">
-        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à
-        déposer votre candidature ci-dessous :
-      </p>
-    </v-col>
+        <p class="apply-now">
+          Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas
+          à déposer votre candidature ci-dessous :
+        </p>
+      </v-col>
     </v-row>
     <v-row>
       <v-col cols="12">
+        
         <v-btn class="btn-send"> Envoyer ma candidature </v-btn>
       </v-col>
     </v-row>
@@ -46,9 +51,13 @@ import { useMaestroRequestService } from "~/composables/useMaestroRequestService
 const { apiRequestService } = useMaestroRequestService();
 
 const query = computed(() => {
-  const queryParams: { page: number; type?: string; [key: string]: number | string } = {
+  const queryParams: {
+    page: number;
+    type?: string;
+    [key: string]: number | string;
+  } = {
     page: page.value,
-    type: 'ENTREPRISE' 
+    type: "ENTREPRISE",
   };
 
   return queryParams;
@@ -72,22 +81,19 @@ const {
   // Obtenir la date actuelle
   const currentDate = new Date();
 
-  const filteredJobs = collection.filter(item => {
+  const filteredJobs = collection.filter((item) => {
     const endPublicationDate = new Date(item.endPublication);
-    return item.type === 'ENTREPRISE' && endPublicationDate >= currentDate;
+    return item.type === "ENTREPRISE" && endPublicationDate >= currentDate;
   });
 
   totalItems.value = filteredJobs.length;
   console.log(filteredJobs);
   return filteredJobs;
 });
-
-
 </script>
 
 <style scoped>
-
-.location{
+.location {
   font-size: 1.3rem !important;
   color: #0e2d32;
 }
@@ -108,7 +114,8 @@ const {
   color: #ffffff;
 }
 
-.btn-more, .btn-send {
+.btn-more,
+.btn-send {
   background: #9edbdd;
   color: white;
 }
@@ -140,7 +147,6 @@ const {
   font-size: 2rem;
 }
 
-
 .apply-now {
   text-align: center;
   font-style: italic;

components/Layout/Footer/Footer.vue

@@ -8,9 +8,9 @@
               :cols="smAndDown ? 12 : 3"
               :class="smAndDown ? 'logo-opentalent-sm' : 'flex-container'"
             >
-            <nuxt-link to="/">
-              <v-img class="logo" src="/images/logo/footer-logo.png" />
-            </nuxt-link>
+              <nuxt-link to="/">
+                <v-img class="logo" src="/images/logo/footer-logo.png" />
+              </nuxt-link>
               <!-- <small class="ml-12 right-reserved"
                 >© 2022 Opentalent, Tous droits réservés</small
               > -->
@@ -72,22 +72,26 @@
                 <h5 class="ml-12 mt-8 h5-title">Espace client</h5>
               </v-row>
               <v-row>
-                <router-link
+                <NuxtLink
                   to="https://ressources.opentalent.fr/display/FAQ/Accueil"
                   class="small-link ml-12"
-                  >Foire Aux Questions</router-link
+                  >Foire Aux Questions</NuxtLink
                 >
               </v-row>
               <v-row>
-                <router-link
+                <NuxtLink
                   to="https://ressources.opentalent.fr/"
                   class="small-link ml-12"
-                  >Support en ligne</router-link
+                  target="_blank"
+                  >Support en ligne</NuxtLink
                 >
               </v-row>
               <v-row>
-                <router-link to="/nous-contacter" class="small-link ml-12"
-                  >Nous contacter</router-link
+                <NuxtLink
+                  to="/nous-contacter"
+                  class="small-link ml-12"
+                  target="_blank"
+                  >Nous contacter</NuxtLink
                 >
               </v-row>
             </v-col>

components/Layout/Footer/SolutionsFooter.vue

@@ -36,7 +36,7 @@
               <span class="chip-detail">Compagnies de théatre</span>
             </v-chip>
             <v-chip class="ma-2 chip-custom" label>
-              <span class="chip-detail">Compagnie de Cirque</span>
+              <span class="chip-detail">Compagnies de Cirque</span>
             </v-chip>
           </v-chip-group>
         </v-col>

components/Layout/Navigation.vue

@@ -11,7 +11,7 @@
 
         <div class="vertical-bar" />
         <v-btn class="btn btn-common btn-subscribe ml-4 mr-2" text>
-          <v-icon left class="fas fa-calendar mr-4"></v-icon> Logiciel Culturel
+          <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
         </v-btn>
       </v-col>
     </v-row>

components/Logiciels/Manager/Avantages.vue

@@ -41,7 +41,7 @@ import { ref } from "vue";
 
 const cards = ref([
   {
-    title: "Sur - mesure",
+    title: "Sur-mesure",
     number: "01",
     description:
       "S'adapte à tous les réseaux de type pyramidal, quelque soit le nombre de niveaux :",

components/Logiciels/Manager/Fonctionnalites.vue

@@ -26,8 +26,9 @@ const functionCarousel = ref(null);
 const cards = [
   {
     logo:"images/logiciels/manager/fonctionnalites/Espaces_dedies.svg",
-    title: "ESPACES DÉDIÉS",
-    list: ["Administration","Membres / Adhérents", "Sur tous supports <br> (ordinateur, tablette et smartphone) "],
+    title: "ESPACES DÉDIÉS *",
+    list: ["Administration","Membres / Adhérents"],
+    options: ["*Disponible sur tous supports (ordinateur, tablette et smartphone)"],
   },
   {
     logo: "images/logiciels/manager/fonctionnalites/Repertoire.svg",

components/Logiciels/Manager/Pyramide.vue

@@ -1,8 +1,7 @@
 <template>
   <div id="détails">
     <LayoutContainer>
-      <v-container>
-        <v-row class="mt-12">
+        <v-row class="mt-12 custom-row">
         <LayoutUISubTitle
           :iconSize="6"
           :iconClasses="iconClasses"
@@ -11,7 +10,7 @@
         />
       </v-row>
 
-      <v-row>
+      <v-row class="custom-row">
         <v-col cols="12" lg="6" md="6">
           <LayoutUITitle
           title="Opentalent Manager, un logiciel adapté à chacun "
@@ -26,7 +25,6 @@
           />
         </v-col>
       </v-row>
-      </v-container>
 
 
     </LayoutContainer>
@@ -37,6 +35,18 @@
 
 <style scoped>
 
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 2000px) {
+  .custom-row {
+    width: 70%;
+  }
+}
+
 .pyramide-details {
   color: #071B1F;
 font-size: 2.125rem;

components/Logiciels/School/Fonctionnalites.vue

@@ -36,13 +36,13 @@ const itemsToShow = computed(() => {
 const cards = [
   {
     logo: "/images/logiciels/school/fonctionnalites/Espaces.svg",
-    title: "ESPACES DÉDIÉS",
+    title: "ESPACES DÉDIÉS *",
     list: [
       "Administration",
       "Professeurs",
       "Élèves / Familles",
-      "Sur tous supports <br> (ordinateur, tablette et smartphone)",
     ],
+    options: ["*Disponible sur tous supports (ordinateur, tablette et smartphone)"],
   },
   {
     logo: "/images/logiciels/school/fonctionnalites/Répertoire.png",
@@ -58,9 +58,9 @@ const cards = [
     logo: "/images/logiciels/school/fonctionnalites/Pré-inscription.png",
     title: "PRÉINSCRIPTION EN LIGNE",
     list: [
-      "Parametrage personnalisé des formulaires & mails automatiques",
-      "Gestion des réinscriptions et des nouvelles inscriptionse",
-      "Gestion des quotas et du suivi des préinscription en ligne",
+      "Paramètrage personnalisé des formulaires & mails automatiques",
+      "Gestion des réinscriptions et des nouvelles inscription",
+      "Gestion des quotas et du suivi des préinscriptions en ligne",
     ],
   },
   {
@@ -98,7 +98,7 @@ const cards = [
     list: [
       "Facturation automatisée selon différents critères",
       "Suivi des règlements et gestion des relances",
-      "n options : de nombreux moyens de paiement",
+      "En option : de nombreux moyens de paiement",
     ],
   },
   {
@@ -110,7 +110,7 @@ const cards = [
       "Création de modèles de courriers, mails ou SMS",
       "Outil de publipostage intégré pour un envoi personnalisé",
     ],
-    option: "* en option",
+    options: ["* en option"],
   },
   {
     logo: "/images/logiciels/school/fonctionnalites/internet.png",
@@ -125,7 +125,7 @@ const cards = [
   {
     logo: "/images/logiciels/school/fonctionnalites/Statistiques.png",
 
-    title: "STATISTIQUE",
+    title: "STATISTIQUES",
     list: [
       "Rapport d'activité complet en fonction de vos activités",
       "Personnalisation du rapport d'activité grâce aux différents formats proposés lors du téléchargement",
@@ -135,12 +135,13 @@ const cards = [
   {
     logo: "/images/logiciels/school/fonctionnalites/Agenda.png",
 
-    title: "RÉSEAU CMF ",
+    title: "RÉSEAU CMF *",
     list: [
       "Accès au répertoire du réseau",
       "Renouvellement de votre adhésion fédérale",
       "Gestion de l'assurance CMF",
     ],
+    options: ["* Uniquement dédié au adhérents CMF"],
   },
   {
     logo: "/images/logiciels/school/fonctionnalites/Promotion.png",

components/Logiciels/School/Formations.vue

@@ -41,7 +41,11 @@
             <LayoutUISubTitle
               :iconSize="6"
               :iconClasses="iconClasses"
-              :titleText="' Pour les petits comme pour les GRANDS établissements d\'enseignement artistique '"
+              :titleText="'Quelques chiffres '"
+            />
+            <LayoutUITitle
+              title="Pour les petits comme pour les GRANDS établissements d'enseignement artistique"
+              title-color="#091d20"
             />
           </v-row>
         </v-col>
@@ -55,7 +59,7 @@
             class="d-flex justify-center align-center small-padding"
           >
             <CommonCardStat
-              :chiffre="'30 > 1500'"
+              :chiffre="'30 > 1 500'"
               text="élèves"
               backgroundColor="#c3e5e7"
             />
@@ -69,7 +73,7 @@
           </v-col>
           <v-col cols="12" lg="3" class="d-flex justify-center align-center">
             <CommonCardStat
-              :chiffre="20304"
+              :chiffre="'20 304'"
               text="Utilisateurs"
               backgroundColor="#c3e5e7"
             />
@@ -125,6 +129,10 @@ const items = ref([
 </script>
 
 <style scoped>
+
+:deep(.title){
+  width: 60rem;
+}
 .v-row {
   max-width: 1600px;
   margin: 0 auto;

components/Logiciels/School/Presentation.vue

@@ -49,8 +49,5 @@ const presentationData = {
 </script>
 
 <style scoped>
-.v-container {
-  padding: 16px !important;
-}
 
 </style>

components/Logiciels/School/Projet.vue

@@ -6,12 +6,12 @@
           <v-img class="help-img" src="/images/contact/contact.jpg" />
         </v-col>
 
-        <v-col cols="6" class="mt-12">
+        <v-col cols="6">
           <LayoutUISubTitle :titleText="` Contactez-nous `" />
 
           <LayoutUITitle :title="` Vous avez un projet ? `" />
-          <div class="ml-8">
-            <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+          <div class="ml-6">
+            <h6 class="subtitle">N'attendez plus, appelez-nous !</h6>
             <p class="contact-details">
               Vous avez une identité, des besoins, des projets... On est là pour
               vous écouter et vous offrir une offre personnalisée ! Que vous
@@ -30,8 +30,8 @@
       <v-row no-gutters>
         <v-col cols="6" class="mt-12">
           <LayoutUISubTitle :titleText="` Adhérents CMF `" />
-          <LayoutUITitle :title="` Bénéficiez de conditions privilégiés ? `" />
-          <div class="ml-8">
+          <LayoutUITitle :title="` Bénéficiez de conditions privilégiées `" />
+          <div class="ml-4">
             <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
             <p class="contact-details">
               Si votre établissement d’enseignement artistique est adhérent à la
@@ -40,8 +40,8 @@
               Opentalent Artist standard et de conditions priviliégiés pour la
               version Opentalent School. <br />
             </p>
-            <p class="mt-6">
-              Contactez nous direcetement ou contactez votre fédération pour
+            <p class="mt-6 contact-details">
+              Contactez-nous directement ou contactez votre fédération pour
               obtenir vos codes d’accès.
             </p>
             <v-btn class="btn-contact">
@@ -64,9 +64,7 @@
   max-width: 1800px;
   margin: 0 auto;
 }
-:deep().title {
-  width: 100% !important;
-}
+
 .logo-cmf {
   background-image: url("/images/logiciels/school/cmf_logo_orange.png");
   background-repeat: no-repeat;
@@ -74,27 +72,34 @@
   width: 100%;
   height: 100%;
   margin-top: 2rem;
+  margin-left: 2rem;
 }
 
 .btn-contact {
   background: rgba(32, 147, 190, 0.4);
-  border-radius: 6px;
+  padding: 15px;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 0.7rem;
+  line-height: 15px;
+  height: 2.5rem;
+  font-size: .9rem;
   color: #fff;
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 16px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
   margin-top: 2rem;
   margin-bottom: 3rem;
 }
 
+@media (max-width: 1600px) {
+  .contact-details {
+    width: 30rem !important;
+  }
+}
+
 .contact-details {
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
   color: #091d20;
-  width: 40rem;
   text-align: justify;
 }
 

pages/actualites/[id].vue

@@ -10,20 +10,19 @@
     <div v-if="actu">
       <v-row class="custom-row">
         <v-col>
-        <div class="d-flex align-items-center">
-          <NuxtLink to="/actualites" style="text-decoration: none !important;">
-            <div class="carousel-button">
-              <i class="fa-solid fa-arrow-left" />
-            </div>
-          </NuxtLink>
-          <NuxtLink to="/actualites" class="ml-2 back-button mt-12">
-            Retour aux actualités
-          </NuxtLink>
-        </div>
-      </v-col>
+          <div class="d-flex align-items-center">
+            <NuxtLink to="/actualites" style="text-decoration: none !important">
+              <div class="carousel-button">
+                <i class="fa-solid fa-arrow-left" />
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/actualites" class="ml-2 back-button mt-12">
+              Retour aux actualités
+            </NuxtLink>
+          </div>
+        </v-col>
       </v-row>
 
-
       <v-row class="custom-row">
         <v-col cols="6">
           <v-img>
@@ -168,10 +167,6 @@ const getImageUrl = (attachment: string) => {
   }
   console.log("pas d'image");
 };
-const plainText = computed(() => {
-  let doc = new DOMParser().parseFromString(actu.value?.bodyText, "text/html");
-  return doc.body.textContent || "";
-});
 
 const tagColor = (tag) => {
   switch (tag) {
@@ -243,9 +238,8 @@ const goPrevious = () => carousel.prev();
 const goNext = () => carousel.next();
 </script>
 
-
 <style scoped>
-.custom-row{
+.custom-row {
   width: 90%;
   margin-left: auto;
   margin-right: auto;

pages/actualites/index.vue

@@ -3,11 +3,9 @@
 
   <h1 class="title mt-12 mb-12">Toutes les news</h1>
 
-
   <div v-if="pending">{{ t("pending") }}</div>
 
   <div v-else>
-
     <v-row>
       <v-col>
         <div class="d-flex align-items-center ml-12 mt-6 mb-6">
@@ -80,10 +78,15 @@
                       </div>
                       <div class="button-container">
                         <v-card-actions class="justify-end">
-                          <v-btn class="btn" text>
-                            <v-icon class="fas fa-info mr-2"></v-icon>En savoir
-                            plus
-                          </v-btn>
+                          <NuxtLink
+                            :to="`/actualites/${news.id}`"
+                            class="text-decoration-none"
+                          >
+                            <v-btn class="btn" text>
+                              <v-icon class="fas fa-info mr-2"></v-icon>En
+                              savoir plus
+                            </v-btn>
+                          </NuxtLink>
                         </v-card-actions>
                       </div>
                     </div>
@@ -98,20 +101,20 @@
     </v-row>
 
     <v-pagination
-        v-model="page"
-        :length="Math.ceil(totalItems / itemsPerPage)"
-        total-visible="9"
-        @input="updatePage"
-        rounded="circle"
-        max="10"
-        class="pagination mr-10"
-        :prev-icon="page !== 1 ? 'fas fa-arrow-left' : ''"
-        :next-icon="
-          page !== Math.ceil(totalItems / itemsPerPage)
-            ? 'fas fa-arrow-right'
-            : ''
-        "
-      />
+      v-model="page"
+      :length="Math.ceil(totalItems / itemsPerPage)"
+      total-visible="9"
+      @input="updatePage"
+      rounded="circle"
+      max="10"
+      class="pagination mr-10"
+      :prev-icon="page !== 1 ? 'fas fa-arrow-left' : ''"
+      :next-icon="
+        page !== Math.ceil(totalItems / itemsPerPage)
+          ? 'fas fa-arrow-right'
+          : ''
+      "
+    />
   </div>
   <LayoutFooterPrefooter />
   <LayoutFooter />
@@ -124,7 +127,8 @@ import { useMaestroRequestService } from "~/composables/useMaestroRequestService
 // Base URL for API requests
 const config = useRuntimeConfig();
 const baseUrl = `${config.public.apiBaseUrl}/api/news`;
-const getImageUrl = (attachment) => `${config.public.apiBaseUrl}/uploads/news/${attachment}`;
+const getImageUrl = (attachment) =>
+  `${config.public.apiBaseUrl}/uploads/news/${attachment}`;
 
 const { apiRequestService } = useMaestroRequestService();
 const currentPage = ref(1);
@@ -139,9 +143,13 @@ const updatePage = (newPage: number) => {
 };
 
 const query = computed(() => {
-  const queryParams: { page: number; type?: string; [key: string]: number | string } = {
+  const queryParams: {
+    page: number;
+    type?: string;
+    [key: string]: number | string;
+  } = {
     page: page.value,
-    type: 'ENTREPRISE' 
+    type: "ENTREPRISE",
   };
 
   return queryParams;
@@ -157,12 +165,11 @@ const {
   const response = await apiRequestService.get(baseUrl, query.value);
   const collection = response["hydra:member"];
 
-  // Obtenir la date actuelle
   const currentDate = new Date();
 
-  const filteredNews = collection.filter(item => {
+  const filteredNews = collection.filter((item) => {
     const endPublicationDate = new Date(item.endPublication);
-    return item.type === 'ENTREPRISE' && endPublicationDate >= currentDate;
+    return item.type === "ENTREPRISE" && endPublicationDate >= currentDate;
   });
 
   totalItems.value = filteredNews.length;
@@ -170,7 +177,6 @@ const {
   return filteredNews;
 });
 
-
 watch(page, () => {
   refresh();
 });
@@ -231,12 +237,12 @@ watch(page, () => {
 }
 
 .card-title {
-  color: #FFF;
-font-family: Barlow;
-font-size: 36px;
-font-style: normal;
-font-weight: 600;
-line-height: 39px
+  color: #fff;
+  font-family: Barlow;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 39px;
 }
 
 .container-green {
@@ -263,14 +269,13 @@ line-height: 39px
 }
 
 .leadtext {
-  color: #FFF;
-font-family: Barlow;
-font-size: 22px;
-font-style: normal;
-font-weight: 500;
-line-height: 26px;
-margin-left: 1rem;
-
+  color: #fff;
+  font-family: Barlow;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 26px;
+  margin-left: 1rem;
 }
 
 .carousel-button {

pages/formations.vue

@@ -4,7 +4,7 @@
   <FormationBanner />
   <FormationMenuScroll />
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <LayoutUIStickyMenu
+    <CommonStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
     />
@@ -68,7 +68,7 @@ onMounted(() => {
 #sticky-menu {
   position: sticky;
   top: 20rem;
-  z-index: 1;
+  z-index: 2;
   margin-bottom: -32rem;
   float: right;
 }

pages/mobile.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-app>
+    <v-app-bar app>
+      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
+
+      <v-btn icon>
+        <v-icon>mdi-bell</v-icon>
+      </v-btn>
+
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" app>
+      <v-list nav dense>
+        <v-list-item v-for="(item, index) in items" :key="item">
+          <v-list-item-title @click="selectMenu(item)">
+            {{ item }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
+      <v-list nav dense>
+        <v-list-item
+          v-for="(subItem, subIndex) in subMenus[currentMenu]"
+          :key="subIndex"
+        >
+          <v-list-item-title>{{ subItem }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+  </v-app>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      drawer: false,
+      subMenuDrawer: false,
+      currentMenu: "",
+      items: ["web", "shopping", "videos", "images", "news"],
+      subMenus: {
+        web: ["Sous-menu Web 1", "Sous-menu Web 2"],
+        shopping: ["Sous-menu Shopping 1", "Sous-menu Shopping 2"],
+      },
+    };
+  },
+  methods: {
+    selectMenu(item) {
+      this.currentMenu = item;
+      this.subMenuDrawer = true; 
+      this.drawer = false;
+    },
+  },
+};
+</script>

pages/nous-rejoindre.vue

@@ -1,73 +0,0 @@
-<template>
-  <LayoutNavigation />
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <CommonStickyMenu
-      :shouldShowStickyMenu="shouldShowStickyMenu"
-      :squaresData="squaresData"
-    />
-  </div>
-  <JoinUsBanner />
-  <JoinUsMissions />
-  <LayoutFooter id="layout-footer" />
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const shouldShowStickyMenu = ref(true);
-
-
-const squaresData = [
-  {
-    id: 1,
-    bgColor: "green-square",
-    iconClass: "fa-regular fa-comments icon",
-    text: "Nous contacter",
-    url: "/nous-contacter",
-  },
-  {
-    id: 4,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler"
-
-  },
-];
-
-onMounted(() => {
-  const stickyMenu = document.getElementById("sticky-menu");
-  const footer = document.getElementById("layout-footer");
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      shouldShowStickyMenu.value = !entry.isIntersecting;
-    },
-    {
-      root: null,
-      threshold: 0,
-    }
-  );
-
-  observer.observe(footer);
-});
-</script>
-
-<style scoped>
-#sticky-menu {
-  position: sticky;
-  top: 20rem;
-  z-index: 1;
-  margin-bottom: -32rem;
-  float: right;
-}
-
-@media (max-width: 1800px) {
-  #sticky-menu {
-    top: 16rem;
-    margin-bottom: -28rem;
-  }
-}
-</style>

pages/nous-rejoindre/[id].vue

@@ -0,0 +1,451 @@
+<template>
+  <LayoutNavigation />
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="12">
+        <CommonBanner :imageSrc="'/images/actu/pub.png'" imageAlt="'line'" />
+      </v-col>
+    </v-row>
+
+    <div v-if="job">
+      <v-row class="custom-row">
+        <v-col>
+          <div class="d-flex align-items-center">
+            <NuxtLink
+              to="/nous-rejoindre"
+              style="text-decoration: none !important"
+            >
+              <div class="carousel-button">
+                <i class="fa-solid fa-arrow-left" />
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/nous-rejoindre" class="ml-2 back-button mt-12">
+              Retour aux annonces
+            </NuxtLink>
+          </div>
+        </v-col>
+      </v-row>
+
+      <LayoutUITitlePage :title="job.title" />
+
+      <v-row class="blue-content">
+        <v-col cols="6">
+          <v-row class="custom-row">
+            <h4 class="detail-job mt-6 ml-12">
+              Type de contrat :
+              <span class="bold">{{ job.contractType }} </span>
+            </h4></v-row
+          >
+
+          <v-row class="custom-row">
+            <h4 class="detail-job mt-6 ml-12">
+              Location :
+              <span class="bold">{{ job.postalCode }} {{ job.city }}</span>
+            </h4></v-row
+          >
+        </v-col>
+
+        <v-col cols="6">
+          <v-row class="custom-row">
+            <h4 class="detail-job mt-6 ml-12">
+              Secteur d'activité : <span class="bold">{{ job.sector }}</span>
+            </h4></v-row
+          >
+
+          <v-row class="custom-row">
+            <h4 class="detail-job mt-6 ml-12">
+              Date de parution :
+              <span class="bold">{{ job.startPublication }} </span>
+            </h4></v-row
+          >
+        </v-col>
+      </v-row>
+      <v-row>
+        <p class="custom-row description-job mb-12" v-html="job.content"></p>
+      </v-row>
+
+      <v-row class="d-flex justify-center align-center">
+        <v-btn class="btn mb-12" text>
+          <v-icon class="fas fa-info mr-2"></v-icon>Je postule
+        </v-btn>
+      </v-row>
+    </div>
+
+    <v-row class="d-flex justify-space-between custom-row">
+      <p class="share">MOTS CLÉS</p>
+      <div>
+        <p class="share">PARTAGER</p>
+      </div>
+    </v-row>
+
+    <v-row class="d-flex justify-space-between mb-8 custom-row">
+      <p class="key-word mt-3">ROCK CONCERT FESTIVAL</p>
+      <div class="social-icons">
+        <a href="https://facebook.com" target="_blank" class="social-icon">
+          <i class="fa-brands fa-facebook"></i>
+        </a>
+        <a href="https://twitter.com" target="_blank" class="social-icon">
+          <i class="fa-brands fa-twitter"></i>
+        </a>
+        <a href="https://messenger.com" target="_blank" class="social-icon">
+          <i class="fa-brands fa-facebook-messenger"></i>
+        </a>
+        <a href="https://instagram.com" target="_blank" class="social-icon">
+          <i class="fa-brands fa-instagram"></i>
+        </a>
+        <a href="https://linkedin.com" target="_blank" class="social-icon">
+          <i class="fa-brands fa-linkedin"></i>
+        </a>
+        <a href="mailto:example@example.com" class="social-icon">
+          <i class="fa-solid fa-envelope"></i>
+        </a>
+      </div>
+    </v-row>
+  </LayoutContainer>
+  <LayoutFooterPrefooter />
+  <LayoutFooter />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+import "vue3-carousel/dist/carousel.css";
+import { useMaestroRequestService } from "~/composables/useMaestroRequestService";
+const { apiRequestService } = useMaestroRequestService();
+
+const job = ref(null);
+const route = useRoute();
+const jobID = route.params.id;
+const pending = ref(true);
+const config = useRuntimeConfig();
+
+onMounted(async () => {
+  try {
+    job.value = await apiRequestService.get(
+      `${config.public.apiBaseUrl}/api/job-postings/${jobID}`
+    );
+    pending.value = false;
+  } catch (error) {
+    console.error("Erreur lors de la récupération de l'annonce", error);
+    pending.value = false;
+  }
+});
+
+const getImageUrl = (attachment: string) => {
+  if (attachment) {
+    return `${config.public.apiBaseUrl}/uploads/job_postings/${attachment}`;
+  }
+  console.log("pas d'image");
+};
+</script>
+
+<style scoped>
+.description-job {
+  color: #0e2d32;
+  text-align: justify;
+  font-family: "Barlow";
+  font-size: 1.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 2.125rem;
+}
+
+.custom-row {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:deep().text-left,
+:deep().text-right,
+:deep().description-square,
+:deep().black-square,
+:deep().blue-square {
+  display: none;
+}
+:deep().text-right {
+  display: none;
+}
+
+:deep().cover-image {
+  transform: none;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.detail-job {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 25px;
+  line-height: 18px;
+  margin-bottom: 1rem;
+}
+.blue-content {
+  background-color: #64afb7;
+  height: 10rem;
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+}
+.banner-container {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  height: 25rem;
+  width: 100%;
+}
+.cover-image {
+  width: 95%;
+  height: auto;
+  object-fit: cover;
+  margin: 0 auto;
+  display: block;
+}
+
+.btn {
+  background: var(--Vert-60, #64afb7);
+  display: flex;
+  left: 0;
+  padding: 25px 28px;
+  align-items: center;
+  gap: 9px;
+  color: var(--NEUTRAL---BLANC, #fff);
+  font-family: Barlow;
+  font-size: 0.9rem;
+  border-radius: 5px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 15px;
+  letter-spacing: 1.3px;
+  text-transform: uppercase;
+  margin-bottom: -1rem;
+}
+
+.green--text {
+  color: green;
+}
+
+.red--text {
+  color: red;
+}
+.black--text {
+  color: black;
+}
+.btn-news {
+  color: #9edbdd;
+  border-radius: 2rem;
+  font-family: "Barlow";
+  background: transparent;
+  border: 1px solid #9edbdd;
+  border-radius: 6px;
+  font-style: normal;
+  font-weight: 600;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 25px;
+  font-size: 10px;
+  line-height: 15px;
+}
+.chip-detail {
+  color: #000000;
+}
+.chip-custom {
+  color: white;
+  border: 1px solid white;
+  border-radius: 3rem;
+  text-transform: uppercase;
+  font-family: "Barlow";
+  font-style: normal;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.card-localisation {
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-size: 10px;
+  color: #112528;
+}
+.card {
+  border-radius: 15px 15px 0 0;
+  margin-bottom: 2rem;
+}
+
+.icon-title {
+  color: #64afb7;
+  margin-top: 4.5rem;
+}
+.container-title {
+  display: flex;
+  align-items: center;
+  margin-left: 2rem;
+  margin-top: 4.5rem;
+}
+
+.carousel-button i {
+  color: #000000;
+}
+.card-text {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 18px;
+  margin-bottom: 1rem;
+  color: #fff !important;
+}
+.card-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #fff !important;
+}
+.card-date {
+  font-size: 0.8em;
+  color: #888;
+  margin-left: 1rem;
+  color: #fff !important;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-body {
+  text-align: left;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  color: #fff !important;
+  color: #112528;
+}
+
+.card-img-top {
+  border-radius: 9px 9px 0 0;
+  width: 100%;
+  object-fit: 90%;
+  object-position: center;
+  width: 384px;
+  height: 247.11px;
+}
+
+.title,
+.carousel-button,
+.btn-news {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.agenda-details {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  margin-left: 2rem;
+  color: #091d20;
+  margin-bottom: 3rem;
+  width: 15rem;
+}
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 2rem;
+  color: #071b1f;
+}
+
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  background-color: transparent;
+  border: 2px solid #000000;
+  cursor: pointer;
+  margin-right: 1rem;
+}
+
+.container-green {
+  background-color: #0e2d32;
+}
+
+.back-button {
+  text-decoration: none;
+  color: #000000;
+  font-family: Barlow;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 15px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+}
+
+.description-actu {
+  color: #0e2d32;
+  text-align: justify;
+  font-family: Barlow;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 34px;
+  margin-left: 3.5rem;
+  margin-right: 3.5rem;
+  margin-bottom: 3rem;
+}
+
+.share {
+  color: #000;
+  font-family: Barlow;
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+}
+
+.social-icons {
+  display: flex;
+  gap: 10px;
+}
+
+.social-icon i {
+  font-size: 1.9em;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+  color: #0e2d32;
+}
+
+.key-word {
+  color: #000;
+  font-family: Barlow;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.title-other {
+  color: #fff;
+}
+</style>

pages/nous-rejoindre/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <LayoutNavigation />
+  <div v-if="shouldShowStickyMenu" id="sticky-menu">
+    <CommonStickyMenu
+      :shouldShowStickyMenu="shouldShowStickyMenu"
+      :squaresData="squaresData"
+    />
+  </div>
+  <JoinUsBanner />
+  <JoinUsMissions />
+  <LayoutFooterPrefooter />
+  <LayoutFooter id="layout-footer" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useMaestroRequestService } from "~/composables/useMaestroRequestService";
+const { apiRequestService } = useMaestroRequestService();
+
+const query = computed(() => {
+  const queryParams: { page: number; type?: string; [key: string]: number | string } = {
+    page: page.value,
+    type: 'ENTREPRISE' 
+  };
+
+  return queryParams;
+});
+// Base URL for API requests
+const totalItems = ref(0);
+const config = useRuntimeConfig();
+const baseUrl = `${config.public.apiBaseUrl}/api/job-postings`;
+
+const page: Ref<number> = ref(1);
+const itemsPerPage: Ref<number> = ref(10);
+const { t } = useI18n();
+const {
+  data: jobs = [],
+  pending,
+  refresh,
+} = useLazyAsyncData("files", async () => {
+  const response = await apiRequestService.get(baseUrl, query.value);
+  const collection = response["hydra:member"];
+
+  const currentDate = new Date();
+
+  const filteredJobs = collection.filter(item => {
+    const endPublicationDate = new Date(item.endPublication);
+    return item.type === 'ENTREPRISE' && endPublicationDate >= currentDate;
+  });
+
+  totalItems.value = filteredJobs.length;
+  console.log(filteredJobs);
+  return filteredJobs;
+});
+
+
+</script>
+
+<style scoped>
+#sticky-menu {
+  position: sticky;
+  top: 20rem;
+  z-index: 1;
+  margin-bottom: -32rem;
+  float: right;
+}
+
+@media (max-width: 1800px) {
+  #sticky-menu {
+    top: 16rem;
+    margin-bottom: -28rem;
+  }
+}
+</style>

pages/test.vue

@@ -1,255 +0,0 @@
-<template>
-  <div id="L'agenda opentalent">
-    <LayoutContainer>
-      <v-row class="custom-row align-center">
-        <v-col cols="4">
-          <h2 class="title">L'agenda Opentalent</h2>
-        </v-col>
-
-        <v-col cols="4">
-          <div class="d-flex justify-center align-center">
-            <div class="carousel-button" @click="goPrevious">
-              <i class="fas fa-chevron-left" />
-            </div>
-            <div class="carousel-button" @click="goNext">
-              <i class="fas fa-chevron-right" />
-            </div>
-          </div>
-        </v-col>
-
-        <v-col cols="4">
-          <v-btn class="btn-news" text> VOIR TOUS LES EVENEMENTS </v-btn>
-        </v-col>
-      </v-row>
-
-      <v-row class="custom-row">
-        <p class="agenda-details">
-          Retrouvez tous les évènements culturels autour de chez vous.
-        </p>
-      </v-row>
-
-      <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">
-            <Slide
-              v-for="(event, eventIndex) in events"
-              :key="eventIndex"
-              class="slide-card"
-            >
-              <v-card>
-                <div
-                  class="card-img"
-                  :style="{ backgroundImage: 'url(' + event.img + ')' }"
-                ></div>
-
-                <v-card-title>
-                  {{ event.title }}
-                </v-card-title>
-
-                <v-card-text>
-                  {{ event.localisation }}
-                </v-card-text>
-
-                <div class="card-footer">
-                  <v-chip-group active-class="primary--text" column>
-                    <v-chip
-                      v-for="(tag, tagIndex) in event.tags"
-                      :key="tagIndex"
-                      class="ma-2 chip-custom"
-                      :color="tagColor(tag)"
-                      label
-                    >
-                      <span :class="tagTextColor(tag)">{{ tag }}</span>
-                    </v-chip>
-                  </v-chip-group>
-                </div>
-              </v-card>
-            </Slide>
-          </Carousel>
-        </v-col>
-      </v-row>
-    </LayoutContainer>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-const tagColor = (tag) => {
-  switch (tag) {
-    case "Payant":
-      return "red";
-    case "Gratuit":
-      return "green";
-    default:
-      return "primary";
-  }
-};
-
-const tagTextColor = (tag) => {
-  switch (tag) {
-    case "Payant":
-      return "red--text";
-    case "Gratuit":
-      return "green--text";
-    default:
-      return "black--text";
-  }
-};
-const events = ref([
-  {
-    rdv: "20h00",
-    title: "LA NUIT DES RÊVES  ",
-    localisation: "FESTIVALDE musique - LONGCHAMP",
-    date: "21/06/2023",
-    img: "/images/agenda/agenda2.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-  {
-    rdv: "20h00",
-    title: "LE LAC DES CYGNES",
-    localisation: "SPECTACLE DE DANSE - PARIS 1",
-    date: "22/06/2023",
-    img: "/images/agenda/agenda3.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Gratuit"],
-  },
-  {
-    rdv: "20h00",
-    title: "SOLIDAYS 2023  : 23 > 25 juin",
-    localisation: "ORCHESTRE DE PARIS - PARIS 12",
-    date: "23/06/2023",
-    img: "/images/agenda/agenda4.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-  {
-    rdv: "20h00",
-    title: "LE LAC DES CYGNES",
-    localisation: "FESTIVALDE musique - LONGCHAMP",
-    date: "24/06/2023",
-    img: "/images/agenda/agenda5.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-  {
-    rdv: "20h00",
-    title: "SOLIDAYS 2023  : 23 > 25 juin ",
-    localisation: "SPECTACLE DE DANSE - PARIS 1",
-    date: "20/06/2023",
-    img: "/images/agenda/agenda1.jpg",
-    tags: ["Festival", "Musique", "Tout public", "Payant"],
-  },
-]);
-
-let carousel;
-
-const goPrevious = () => carousel.prev();
-const goNext = () => carousel.next();
-</script>
-
-<style scoped>
-.card-img {
-  width: 100%;
-  height: 200px;
-  background-size: cover;
-  background-position: center;
-}
-
-.green--text {
-  color: green;
-}
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-.red--text {
-  color: red;
-}
-.black--text {
-  color: black;
-}
-.btn-news {
-  color: #9edbdd;
-  border-radius: 2rem;
-  font-family: "Barlow";
-  background: transparent;
-  border: 1px solid #9edbdd;
-  border-radius: 6px;
-  font-style: normal;
-  font-weight: 600;
-  text-transform: uppercase;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 25px;
-  font-size: 10px;
-  line-height: 15px;
-}
-.chip-custom {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  text-align: center;
-}
-
-
-.carousel-button i {
-  color: #000000;
-}
-
-.card-date {
-  font-size: 0.8em;
-  color: #888;
-  margin-left: 1rem;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-left: 4rem;
-}
-
-
-.title,
-.carousel-button,
-.btn-news {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-.agenda-details {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  margin-left: 2rem;
-  color: #091d20;
-  margin-bottom: 3rem;
-  width: 15rem;
-}
-.title {
-  font-family: "Barlow";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 2rem;
-  color: #071b1f;
-}
-
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid #000000;
-  cursor: pointer;
-  margin-right: 1rem;
-}
-</style>

pages/webinaires.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
   <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <LayoutUIStickyMenu
+    <CommonStickyMenu
       :shouldShowStickyMenu="shouldShowStickyMenu"
       :squaresData="squaresData"
     />
@@ -30,14 +30,6 @@ const squaresData = [
     text: "Nous contacter",
     url: "/nous-contacter",
   },
-  {
-    id: 2,
-    bgColor: "green-square",
-    iconClass: "fa-solid fa-circle-info icon",
-    text: "Demander une demo",
-    url: "/nous-contacter",
-
-  },
   {
     id: 4,
     bgColor: "darkblue-square",
@@ -69,7 +61,7 @@ onMounted(() => {
 #sticky-menu {
   position: sticky;
   top: 20rem;
-  z-index: 1;
+  z-index: 2;
   margin-bottom: -32rem;
   float: right;
 }