various fixes after tests results

components/Common/ActionMenu.vue

@@ -53,7 +53,7 @@ const { isMobileDevice } = useClientDevice()
 const telephoneNumber = "09 72 12 60 17";
 
 const isVisible: ComputedRef<boolean> = computed(() =>
-  !layoutStore.isHeaderVisible && !layoutStore.isFooterVisible
+  !layoutStore.isHeaderVisible && !layoutStore.isBannerVisible && !layoutStore.isFooterVisible
 )
 
 // Actions par défaut du menu, peut-être surchargé via la propriété `actions`
@@ -63,11 +63,11 @@ const defaultActions: Array<ActionMenuItem> = [
     color: "secondary",
     icon: "far fa-comments",
     text: "Nous contacter",
-    url: "/nous-contacter",
+    url: { path: 'nous-contacter', hash: '#form' },
   },
   {
     type: ActionMenuItemType.CALL_US,
-    color: "secondary",
+    color: "primary",
     icon: "fas fa-phone",
     text: "Nous Appeler",
   },
@@ -92,7 +92,7 @@ const callUs = () => {
   if (isMobileDevice()) {
     window.location.href = `tel:${telephoneNumber}`;
   } else {
-    alert(`Notre numéro de téléphone : ${telephoneNumber}`);
+    navigateTo({ path: 'nous-contacter', hash: '#details' })
   }
 }
 
@@ -103,7 +103,7 @@ const callUs = () => {
 const onActionClick = (action: ActionMenuItem) => {
   switch (action.type) {
     case ActionMenuItemType.ASK_FOR_A_DEMO:
-      router.push({ path: action.url, query: { request: "demo" } });
+      router.push({ path: action.url as string, query: { request: "demo" } });
       break;
 
     case ActionMenuItemType.CALL_US:
@@ -114,7 +114,7 @@ const onActionClick = (action: ActionMenuItem) => {
       if (!action.url) {
         throw Error('Missing prop : url')
       }
-      router.push({ path: action.url });
+      navigateTo(action.url)
       break
 
     default:

components/Common/Banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer>
+  <LayoutContainer v-intersect="onIntersect">
     <v-row>
       <v-col cols="12">
         <div class="banner-container">
@@ -39,6 +39,8 @@
 
 <script setup lang="ts">
 
+import { useLayoutStore } from "~/stores/layoutStore";
+
 const props = defineProps({
   imageSrc: {
     type: String,
@@ -71,6 +73,11 @@ const props = defineProps({
     default: false
   }
 });
+
+const layoutStore = useLayoutStore()
+const onIntersect = (isIntersecting: boolean) => {
+  layoutStore.setIsBannerVisible(isIntersecting)
+}
 </script>
 
 <style scoped lang="scss">

components/Common/Carousel/Fonctionnalite.vue

@@ -21,7 +21,7 @@
       <v-col cols="12" md="12">
         <Carousel
           ref="carousel"
-          :items-to-show="5"
+          :items-to-show="itemsToShow"
           :items-to-scroll="1"
           :wrap-around="true"
         >
@@ -78,7 +78,7 @@ import "vue3-carousel/dist/carousel.css";
 import type { PropType } from "@vue/runtime-core";
 import type { Functionality } from "~/types/interface";
 
-const { mdAndDown } = useDisplay();
+const { lgAndUp, mdAndUp, smAndUp } = useDisplay();
 
 const props = defineProps({
   cards: {
@@ -89,6 +89,9 @@ const props = defineProps({
 
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
+const itemsToShow = computed(() => lgAndUp.value ? 5 : (mdAndUp.value ? 3 : (smAndUp.value ? 2 : 1)))
+
+
 const nextAction = () => {
   carousel.value!.next();
 };
@@ -120,21 +123,25 @@ const previousAction = () => {
 .carousel {
   margin-left: 2rem;
   margin-right: 2rem;
+  margin-bottom: 2rem;
 }
 
 .card-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 3rem;
   margin-right: 2rem;
+  width: 100%;
+  height: 100%;
 }
 
 .v-card {
   border-radius: 1rem;
   transition: transform 0.3s;
   font-weight: 300;
-  min-height: 25rem !important;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 14px;
 
   .v-img {
     width: 5rem;
@@ -171,14 +178,33 @@ const previousAction = () => {
   }
 }
 
-@media(min-width: 1800px){
-  .v-card{
-    min-height: 400px !important;
-    max-height: 400px !important;
-    min-width: 300px !important;
-    max-width: 300px !important;
-  }
-}
+//@media (min-width: 1300px) and (max-width: 1800px){
+//  .v-card{
+//    min-height: 480px !important;
+//    max-height: 480px !important;
+//    min-width: 230px !important;
+//    max-width: 230px !important;
+//  }
+//}
+//
+//@media (min-width: 1500px) and (max-width: 1800px){
+//  .v-card{
+//    min-height: 420px !important;
+//    max-height: 420px !important;
+//    min-width: 260px !important;
+//    max-width: 260px !important;
+//  }
+//}
+//
+//@media (min-width: 1800px){
+//  .v-card{
+//    min-height: 400px !important;
+//    max-height: 400px !important;
+//    min-width: 300px !important;
+//    max-width: 300px !important;
+//  }
+//}
+
 
 
 </style>

components/Common/ContainerVideo.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <div v-if="mdAndUp" class="container-green">
+    <div v-if="videoUrl" class="container-green">
       <v-row class="mt-12">
         <v-row>
           <v-col cols="6">
@@ -44,6 +44,10 @@ const props = defineProps({
   quote: {
     type: String,
     required: true
+  },
+  videoUrl: {
+    type: String,
+    default: ""
   }
 })
 </script>

components/Common/ReviewSection.vue

@@ -239,6 +239,13 @@ const goNext = () => {
   padding-top: 16px;
 }
 
+@media (min-width:1300px) and (max-width: 2100px) {
+  .v-card {
+    min-height: 400px !important;
+    max-height: 400px !important;
+  }
+}
+
 @media (min-width:2100px) {
   .v-card {
     min-height: 360px !important;
@@ -246,6 +253,8 @@ const goNext = () => {
   }
 }
 
+
+
 @media (max-width:600px) {
   :deep(.v-carousel__controls) {
     color: var(--on-neutral-color);

components/Formation/Catalogue.vue

@@ -15,7 +15,8 @@
         <v-col
           v-for="(course, index) in courses"
           :key="index"
-          cols="4"
+          cols="12"
+          lg="4"
         >
           <v-card class="mb-4">
             <v-card-text>

components/Home/Caroussel.vue

@@ -2,101 +2,104 @@
 Carrousel de la page d'accueil
 -->
 <template>
-  <v-carousel
-    ref="carousel"
-    v-model="activeIndex"
-    :show-arrows="false"
-    :hide-delimiter-background="true"
-    :show-delimiters="false"
-    :touch="true"
-    :height="lgAndUp ? 500 : 800"
-    :interval="10000"
-    :cycle="true"
-  >
-    <v-carousel-item
-      v-for="(item, index) in carouselItems"
-      :key="index"
+  <div v-intersect="onIntersect">
+    <v-carousel
+      ref="carousel"
+      v-model="activeIndex"
+      :show-arrows="false"
+      :hide-delimiter-background="true"
+      :show-delimiters="false"
+      :touch="true"
+      :height="lgAndUp ? 500 : 800"
+      :interval="6000"
+      :cycle="true"
     >
-      <v-row>
-        <!-- Partie description (logo, description, bouton 'en savoir plus') -->
-        <v-col cols="12" lg="6" class="col presentation">
-          <nuxt-link :to="item.link">
-            <v-img
-              :src="item.logo"
-              :alt="item.logoAlt"
-              class="logo"
-            />
-          </nuxt-link>
-
-          <p class="description" v-html="mdAndUp ? item.description : item.descriptionSm" />
-
-          <v-btn
-            :to="item.link"
-            append-icon="fas fa-arrow-right"
-            :class="['mt-3 learn-more-btn', item.buttonClass]"
-          >
-            En savoir plus
-          </v-btn>
-        </v-col>
-
-        <!-- Partie Illustration -->
-        <v-col cols="12" lg="6" class="col illustration">
-          <v-row>
-            <div
-              class="background-rectangle"
-              :style="{ backgroundColor: item.color }"
-            />
-
-            <v-card class="card" elevation="5">
+      <v-carousel-item
+        v-for="(item, index) in carouselItems"
+        :key="index"
+      >
+        <v-row>
+          <!-- Partie description (logo, description, bouton 'en savoir plus') -->
+          <v-col cols="12" lg="6" class="col presentation">
+            <nuxt-link :to="item.link">
               <v-img
-                class="profile-image"
-                :src="item.avatar"
-                :alt="item.avatarAlt"
-                contain
-                rounded
+                :src="item.logo"
+                :alt="item.logoAlt"
+                class="logo"
+              />
+            </nuxt-link>
+
+            <p class="description" v-html="mdAndUp ? item.description : item.descriptionSm" />
+
+            <v-btn
+              :to="item.link"
+              append-icon="fas fa-arrow-right"
+              :class="['mt-3 learn-more-btn', item.buttonClass]"
+            >
+              En savoir plus
+            </v-btn>
+          </v-col>
+
+          <!-- Partie Illustration -->
+          <v-col cols="12" lg="6" class="col illustration">
+            <v-row>
+              <div
+                class="background-rectangle"
+                :style="{ backgroundColor: item.color }"
               />
-              <v-card-text>
-                <v-card-title class="name">
-                  {{ item.name }}
 
-                  <p class="school">
-                    {{ item.school }}
+              <v-card class="card" elevation="5">
+                <v-img
+                  class="profile-image"
+                  :src="item.avatar"
+                  :alt="item.avatarAlt"
+                  contain
+                  rounded
+                />
+                <v-card-text>
+                  <v-card-title class="name">
+                    {{ item.name }}
+
+                    <p class="school">
+                      {{ item.school }}
+                    </p>
+                  </v-card-title>
+
+                  <p class="status">
+                    {{ item.status }}
                   </p>
-                </v-card-title>
-
-                <p class="status">
-                  {{ item.status }}
-                </p>
-              </v-card-text>
-            </v-card>
-
-            <v-img
-              :src="item.image"
-              :alt="item.imageAlt"
-              class="image"
-            />
-          </v-row>
-        </v-col>
-      </v-row>
-    </v-carousel-item>
-
-    <div class="custom-controls">
-      <!--suppress JSUnusedLocalSymbols -->
-      <div
-        v-for="(_, index) in carouselItems"
-        :key="index"
-        :class="{ 'active-control': index === activeIndex }"
-        @click="setActiveIndex(index)"
-      />
-    </div>
-  </v-carousel>
+                </v-card-text>
+              </v-card>
+
+              <v-img
+                :src="item.image"
+                :alt="item.imageAlt"
+                class="image"
+              />
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-carousel-item>
+
+      <div class="custom-controls">
+        <!--suppress JSUnusedLocalSymbols -->
+        <div
+          v-for="(_, index) in carouselItems"
+          :key="index"
+          :class="{ 'active-control': index === activeIndex }"
+          @click="setActiveIndex(index)"
+        />
+      </div>
+    </v-carousel>
+  </div>
 </template>
 
 <script setup lang="ts">
-
 import { useDisplay } from "vuetify";
 import type { CarouselItem } from "~/types/interface";
-const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
+import { useLayoutStore } from "~/stores/layoutStore";
+
+const { mdAndUp, lgAndUp } = useDisplay();
 
 // Index de la slide active
 let activeIndex: Ref<number> = ref(0);
@@ -164,6 +167,11 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     avatarAlt: "Photo de profil d’une femme en tailleur",
   },
 ]);
+
+const layoutStore = useLayoutStore()
+const onIntersect = (isIntersecting: boolean) => {
+  layoutStore.setIsBannerVisible(isIntersecting)
+}
 </script>
 
 <style scoped lang="scss">

components/Home/Promotion.vue

@@ -46,7 +46,7 @@
           alt="Vidéo corporate de l’entreprise Opentalent"
           class="screen"
         >
-          <v-icon icon="fas fa-play" class="play-icon" />
+          <v-icon v-show="false" icon="fas fa-play" class="play-icon" />
         </v-img>
 
       </v-col>

components/Home/Solution.vue

@@ -154,7 +154,6 @@ const solutions: Array<SolutionItem> = [
 <style scoped lang="scss">
 .container {
   background: var(--primary-color);
-  height: 40rem;
   position: relative;
 
   @media (max-width: 1240px) {
@@ -329,12 +328,11 @@ h4 {
       text-align: start;
       font-size: 16px;
       line-height: 18px;
-      color: var(--primary-color);
+      color: var(--on-primary-color);
       margin: 6px 0;
 
       @media (max-width: 1240px) {
         font-size: 1.1rem;
-        color: var(--on-primary-color);
       }
     }
 

components/JoinUs/Missions.vue

@@ -261,6 +261,7 @@ const onFormSubmit = () => {
   margin-left: auto;
   margin-right: auto;
   font-weight: 700;
+  background-color: var(--secondary-color);
 
   @media (max-width: 600px) {
     width: 80%;

components/Layout/FAQ.vue

@@ -148,13 +148,13 @@ h3 {
     height: 5.5rem;
     margin-left: 3rem;
     border-radius: 6px;
-    background: transparent;
     font-weight: 500;
     font-size: 0.8rem;
     line-height: 1rem;
     border: 1px var(--on-alt-theme) solid;
     margin-bottom: 2rem;
     text-transform: none !important;
+    background: rgba(0, 0, 0, 0.6);
 
     .v-btn__content>div {
       display: flex;

components/Layout/Navigation/Md.vue

@@ -13,7 +13,7 @@
           <nuxt-link to="/">
             <v-img
               class="logo-md"
-              :src="smAndUp ? '/images/logo/navigation-logo.png' : '/images/Opentalent_Griffe.png'"
+              :src="smAndUp ? '/images/logos/opentalent/Logo_Opentalent-gris.png' : '/images/logos/opentalent/Logo_Opentalent_Griffe.png'"
             />
           </nuxt-link>
         </v-app-bar-title>

components/Logiciels/Manager/Presentation.vue

@@ -18,7 +18,6 @@
       <CommonContainerVideo
         title="Logiciel OpenTalent Manager"
         quote="Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel"
-        image-url="/images/logiciels/school/screen2.png"
       />
     </LayoutContainer>
   </AnchoredSection>

components/Logiciels/School/Presentation.vue

@@ -11,7 +11,6 @@
     <CommonContainerVideo
       title="Logiciel OpenTalent School"
       quote="Pour les petits comme pour les grands établissements d’enseignement artistique"
-      image-url="/images/logiciels/school/screen2.png"
     />
   </AnchoredSection>
 </template>

components/Logiciels/School/SomeNumbers.vue

@@ -82,7 +82,7 @@ const items: Array<{ src: string, alt: string }> = [
 </script>
 
 <style scoped lang="scss">
-.v-container {
+.card-container {
   --on-primary-color-alt: var(--secondary-color);
 }
 

components/News/Details.vue

@@ -57,7 +57,13 @@
           </v-row>
 
           <v-row class="d-flex justify-center align-center">
-            <v-btn class="btn-plus mb-12" text>
+            <v-btn
+              v-if="newsItem.linkButton"
+              :href="newsItem.linkButton"
+              target="_blank"
+              class="btn-plus mb-12"
+              :text="true"
+            >
               En savoir plus
             </v-btn>
           </v-row>

components/News/List.vue

@@ -64,12 +64,12 @@
 
                       <div class="button-container">
                         <v-card-actions class="justify-end">
-                          <v-btn
+                          <v-btnzz
                             :to="`/actualites/${newsItem.id}`"
                             class="inv-theme btn mr-2 mb-1"
                           >
                             En savoir plus
-                          </v-btn>
+                          </v-btnzz>
                         </v-card-actions>
                       </div>
                     </div>

models/Maestro/News.ts

@@ -68,4 +68,7 @@ export default class News extends ApiModel {
 
   @Bool(false)
   declare visible: boolean
+
+  @Str(null)
+  declare linkButton: string
 }

pages/actualites/[id].vue

@@ -12,7 +12,5 @@
   <!-- Balises meta: définies dans le component Details -->
   <NewsDetails class="mb-12"/>
 
-  <HomeEventAgenda />
-
   <LayoutFooterPrefooter />
 </template>

pages/actualites/index.vue

@@ -16,7 +16,7 @@
     imageAlt="Journaux pliés en deux posés les uns à côté des autres"
   />
 
-  <v-row class="center-90">
+  <v-row class="center-90 mt-10">
     <v-col cols="12">
       <NewsList />
     </v-col>

pages/formations.vue

@@ -22,9 +22,7 @@
 
   <FormationPresentation />
 
-  <div v-if="lgAndUp">
-    <FormationCatalogue />
-  </div>
+  <FormationCatalogue />
 
   <FormationOPCA />
 

pages/nous-contacter.vue

@@ -11,9 +11,9 @@
 
   <ContactBanner />
 
-  <ContactForm />
+  <ContactForm id="form" />
 
-  <ContactMap class="contact-map" />
+  <ContactMap id="details" class="contact-map" />
 
   <LayoutFooterPrefooter />
 </template>

pages/opentalent_artist.vue

@@ -27,7 +27,7 @@
 
     <LogicielsArtistAvantages class="mt-8" />
 
-    <div v-if="mdAndUp" class="alt-theme">
+    <div class="alt-theme">
       <LogicielsArtistFonctionnalites />
     </div>
 

pages/opentalent_manager.vue

@@ -27,7 +27,7 @@
 
     <LogicielsManagerAvantages />
 
-    <div v-if="mdAndUp" class="alt-theme">
+    <div class="alt-theme">
       <LogicielsManagerFonctionnalites />
     </div>
 

pages/opentalent_school.vue

@@ -28,7 +28,7 @@
 
     <LogicielsSchoolAvantages />
 
-    <div v-if="mdAndUp" class="alt-theme">
+    <div class="alt-theme">
       <LogicielsSchoolFonctionnalites />
     </div>
 

stores/layoutStore.ts

@@ -8,6 +8,12 @@ export const useLayoutStore = defineStore('layout', () => {
     isHeaderVisible.value = value
   }
 
+  const isBannerVisible: Ref<boolean> = ref(false)
+
+  const setIsBannerVisible = (value: boolean) => {
+    isFooterVisible.value = value
+  }
+
   const isFooterVisible: Ref<boolean> = ref(false)
 
   const setIsFooterVisible = (value: boolean) => {
@@ -27,6 +33,8 @@ export const useLayoutStore = defineStore('layout', () => {
   return {
     isHeaderVisible,
     setIsHeaderVisible,
+    isBannerVisible,
+    setIsBannerVisible,
     isFooterVisible,
     setIsFooterVisible,
     isAnchoredSectionOnScreen,

types/interface.d.ts

@@ -5,7 +5,7 @@ interface ActionMenuItem {
   color: 'primary' | 'secondary'
   icon: string
   text: string
-  url?: string
+  url?: string | object
 }
 
 interface MainMenuItem {