Merge branch 'V8-5729_refact_pages' into feature/V8-5674-recette--refactoring-du-site-log

.gitlab-ci.yml

@@ -12,13 +12,13 @@ before_script:
 qa:
   stage: qa
   script:
-    - yarn lint 
+    - yarn lint
 
-deploy_test:
-  stage: deploy_test
-  script:
-    # - apt-get update -qq && apt-get install -y -qq sshpass
-    # - ssh exploitation@test5 "cd /var/opentalent/git/portail_v2 && nvm exec yarn deploy && echo 'Deploy successful' "
-    - ssh exploitation@test3 'ls /tmp'
-  only:
-    - home
+#deploy_test:
+#  stage: deploy_test
+#  script:
+#    # - apt-get update -qq && apt-get install -y -qq sshpass
+#    # - ssh exploitation@test5 "cd /var/opentalent/git/portail_v2 && nvm exec yarn deploy && echo 'Deploy successful' "
+#    - ssh exploitation@test3 'ls /tmp'
+#  only:
+#    - home

assets/style/theme.scss

@@ -20,6 +20,11 @@ body {
   --artist-color: #FAC20A;
   --school-color: #2093be;
   --manager-color: #D8050B;
+
+  --action-menu-primary-color: #0e2d32;
+  --action-menu-on-primary-color: #ffffff;
+  --action-menu-secondary-color: #9edbdd;
+  --action-menu-on-secondary-color: #262626;
 }
 
 body {

components/Common/StickyMenu.vue → components/Common/ActionMenu.vue

@@ -2,31 +2,35 @@
 Menu d'actions rapides (appel, contact, ...), qui reste accroché au bord droit
 de l'écran (ou au bas de l'écran sur les petits écrans)
 -->
-<!-- TODO: implémenter le theming ici -->
 <template>
-  <!-- Écrans larges : menu lateral -->
+  <!-- Écrans larges : menu lateral, accroché au bord droit de l'écran -->
   <div class="sticky-menu lateral" v-if="lgAndUp">
     <v-row
       v-for="(action, index) in actionsOrDefault"
       :key="index"
-      :class="['square', action.bgColor]"
+      :class="['square', action.color]"
       @click="() => onActionClick(action)"
     >
       <NuxtLink :to="action.url" class="link">
         <div>
-          <v-icon :class="action.iconClass" />
-          <p class="text-square mt-2">{{ action.text }}</p>
+          <v-icon
+            :class="action.icon"
+          />
+
+          <p class="text-square mt-2">
+            {{ action.text }}
+          </p>
         </div>
       </NuxtLink>
     </v-row>
   </div>
 
-  <!-- Petits : menu sous forme de bandeau en pied de page (sauf si le footer du site est visible) -->
+  <!-- Petits écrans : menu sous forme de bandeau en pied de page (sauf si le footer du site est visible) -->
   <div class="sticky-menu band" v-else-if="!layoutStore.isFooterVisible">
     <v-btn
       v-for="(action, index) in actionsOrDefault"
       :key="index"
-      :class="[action.bgColor]"
+      :class="[action.color]"
       @click="() => onActionClick(action)"
     >
       {{ action.text }}
@@ -38,46 +42,45 @@ de l'écran (ou au bas de l'écran sur les petits écrans)
 import { useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
 import { useLayoutStore } from "~/stores/layoutStore";
-import { StickyMenuActionType } from "~/types/enum/layout";
-import type { StickyMenuAction } from "~/types/interface";
+import { ActionMenuItemType } from "~/types/enum/layout";
+import { ActionMenuItem } from "~/types/interface";
 
 const { mdAndDown, lgAndUp } = useDisplay();
 const router = useRouter();
 const layoutStore = useLayoutStore()
 const { isMobileDevice } = useClientDevice()
 
-// TODO: passer en conf?
 const telephoneNumber = "09 72 12 60 17";
 
 // Actions par défaut du menu, peut-être surchargé via la propriété `actions`
-const defaultActions: Array<StickyMenuAction> = [
+const defaultActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "green-square",
-    iconClass: "fa-regular fa-comments icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "secondary",
+    icon: "far fa-comments",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.CALL_US,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
+    type: ActionMenuItemType.CALL_US,
+    color: "primary",
+    icon: "fas fa-phone",
     text: "Nous Appeler",
   },
 ];
 
 const props = defineProps({
   /**
-   * Actions accessibles via le menu (par défaut: "Nous contacter", "Nous appeller")
+   * Actions accessibles via le menu (par défaut : "Nous contacter", "Nous appeler")
    */
   actions: {
-    type: Array<StickyMenuAction>,
+    type: Array<ActionMenuItem>,
     required: false,
     default: []
   }
 })
 
-const actionsOrDefault: ComputedRef<Array<StickyMenuAction>> = computed(() => {
+const actionsOrDefault: ComputedRef<Array<ActionMenuItem>> = computed(() => {
   return props.actions.length > 0 ? props.actions : defaultActions
 })
 
@@ -93,17 +96,17 @@ const callUs = () => {
  * On a cliqué sur une des actions du menu
  * @param action
  */
-const onActionClick = (action: StickyMenuAction) => {
+const onActionClick = (action: ActionMenuItem) => {
   switch (action.type) {
-    case StickyMenuActionType.ASK_FOR_A_DEMO:
+    case ActionMenuItemType.ASK_FOR_A_DEMO:
       router.push({ path: action.url, query: { request: "demo" } });
       break;
 
-    case StickyMenuActionType.CALL_US:
+    case ActionMenuItemType.CALL_US:
       callUs()
       break;
 
-    case StickyMenuActionType.FOLLOW_LINK:
+    case ActionMenuItemType.FOLLOW_LINK:
       if (!action.url) {
         throw Error('Missing prop : url')
       }
@@ -114,8 +117,6 @@ const onActionClick = (action: StickyMenuAction) => {
       throw Error('Unrecognized action')
   }
 };
-
-
 </script>
 
 <style scoped lang="scss">
@@ -134,7 +135,6 @@ const onActionClick = (action: StickyMenuAction) => {
 
   display: flex;
   flex-direction: column;
-  color: white;
   font-weight: 500;
   font-size: 0.7rem;
   line-height: 15px;
@@ -151,7 +151,6 @@ const onActionClick = (action: StickyMenuAction) => {
   width: 100%;
   display: flex;
   justify-content: center;
-  background-color: white;
 
   .v-btn {
     margin: 4px 6px;
@@ -173,31 +172,23 @@ const onActionClick = (action: StickyMenuAction) => {
 
 .link {
   text-decoration: none;
-  color: white;
 }
 
-.yellow-square {
-  background: rgb(250, 194, 10);
-  color: #0e2d32;
-}
-
-.green-square {
-  background: #9edbdd;
-}
+.primary {
+  background: var(--action-menu-primary-color);
+  color: var(--action-menu-on-primary-color);
 
-.red-square {
-  background: #d8050b;
+  a {
+    color: var(--action-menu-on-primary-color);
+  }
 }
 
-.blue-square {
-  background: #2093be;
-}
+.secondary {
+  background: var(--action-menu-secondary-color);
+  color: var(--action-menu-on-secondary-color);
 
-.logo-square {
-  background: var(--Bleu-School-60, rgba(32, 147, 190));
-}
-
-.darkblue-square {
-  background: #0e2d32;
+  a {
+    color: var(--action-menu-on-secondary-color);
+  }
 }
 </style>

components/Common/MenuScroll.vue

@@ -27,7 +27,6 @@
 </template>
 
 <script setup lang="ts">
-
 import type { PropType } from "@vue/runtime-core";
 import type { MenuScroll } from "~/types/interface";
 import { useLayoutStore } from "~/stores/layoutStore";

components/Form/ApplicationForm.vue → components/Form/Application.vue

@@ -1,3 +1,7 @@
+<!--
+TODO: n'est pas utilisé pour l'instant
+-->
+
 <template>
   <v-dialog v-model="dialog" persistent max-width="600">
     <v-card>

components/Formation/Solutions.vue

@@ -1,182 +0,0 @@
-<!-- TODO: voir si utilisé? -->
-
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <h4 class="solution-title text-center">
-          Ces solutions peuvent vous intéresser
-        </h4>
-      </v-col>
-    </v-row>
-
-    <v-row class="row-artist">
-      <v-col cols="3">
-        <v-img
-          src="/images/opentalent_artist_black.png"
-          class="logo"
-        />
-      </v-col>
-
-      <v-col cols="2">
-        <h5 class="solution-name">
-          Opentalent Artist
-        </h5>
-      </v-col>
-
-      <v-col cols="7">
-        <!-- list v-chip-->
-        <v-chip-group
-          active-class="primary--text"
-          column
-        >
-          <v-chip
-            class="ma-2 chip"
-            label
-          >
-            <span>Agenda</span>
-          </v-chip>
-          <v-chip
-            class="ma-2"
-            label
-          >
-            <span>Facturation</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip"
-            label
-          >
-            <span>Comptabilité</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip"
-            label
-          >
-            <span>Communication</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip"
-            label
-          >
-            <span>Site internet</span>
-          </v-chip>
-        </v-chip-group>
-      </v-col>
-    </v-row>
-
-    <v-row class="row-artist">
-      <v-col cols="3">
-        <v-img
-          src="/images/opentalent_manager_black.jpg"
-          class="logo"
-        />
-      </v-col>
-
-      <v-col cols="2">
-        <h5 class="solution-name">
-          Opentalent Manager
-        </h5>
-      </v-col>
-
-      <v-col cols="7">
-        <!-- list v-chip-->
-        <v-chip-group
-          active-class="primary--text"
-          column
-        >
-          <v-chip
-            class="ma-2 chip"
-            color="primary"
-            label
-          >
-            <span>Agenda</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip"
-            color="primary"
-            label
-          >
-            <span>Facturation</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip"
-            color="primary"
-            label
-          >
-            <span>Comptabilité</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip"
-            color="primary"
-            label
-          >
-            <span>Communication</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip"
-            color="primary"
-            label
-          >
-            <span>Site internet</span>
-          </v-chip>
-        </v-chip-group>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.chip {
-  /* position: inherit; */
-  color: black;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  text-transform: uppercase;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 16px;
-
-  /* identical to box height, or 114% */
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.2em;
-}
-
-.row-artist {
-  border-top: 1px solid #d1cdc7;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.solution-name {
-  font-weight: 300;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  color: #0e2d32;
-}
-
-.row-artist {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.solution-title {
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  color: #000000;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.logo {
-  width: 10rem;
-  height: 10rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-</style>

components/Home/News.vue

@@ -1,288 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="6">
-        <div class="container-title">
-          <v-icon
-            size="10"
-            class="fa-solid fa-circle icon-title"
-          />
-
-          <h6 class="small-title">
-            Découvrez nos dernières actualités
-          </h6>
-        </div>
-        <h2 class="title">
-          Quoi de neuf ?
-        </h2>
-      </v-col>
-
-      <v-col cols="6">
-        <v-btn
-          class="btn-news"
-          text
-        >
-          VOIR TOUTES LES ACTUALITÉS
-        </v-btn>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="2">
-        <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="10">
-        <Carousel
-          ref="carousel"
-          :items-to-show="3.5"
-          :items-to-scroll="1"
-        >
-          <Slide
-            v-for="(actu, index) in actus"
-            :key="index"
-            class="slide-card"
-          >
-            <div class="card">
-              <img
-                class="card-img-top"
-                :src="actu.img"
-                alt="Card image cap"
-              >
-              <div class="card-body">
-                <h5 class="card-title">
-                  {{ actu.title }}
-                </h5>
-                <p class="card-text">
-                  {{ actu.content }}
-                </p>
-              </div>
-
-              <div class="card-footer">
-                <p class="card-date">
-                  {{ actu.date }}
-                </p>
-                <button class="card-button">
-                  +
-                </button>
-              </div>
-            </div>
-          </Slide>
-        </Carousel>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
-import "vue3-carousel/dist/carousel.css";
-
-const carousel = ref(null);
-
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
-
-const actus = ref([
-  {
-    title: "Suivi Pédagogique",
-    content: "Sed laeditur hic coetuum magnificus",
-    date: "20/06/2023",
-    img: "/images/actu/actu1.jpg",
-  },
-  {
-    title: "AMÉLIORATION DU RÉPERTOIRE",
-    content: "Sed laeditur hic coetuum magnificus",
-    date: "21/06/2023",
-    img: "/images/actu/actu2.jpg",
-  },
-  {
-    title: "fOIRE AUX QUESTIONS",
-    content: "Sed laeditur hic coetuum magnificus",
-    date: "22/06/2023",
-    img: "/images/actu/actu3.jpg",
-  },
-  {
-    title: "Suivi Pédagogique",
-    content: "Sed laeditur hic coetuum magnificus",
-    date: "23/06/2023",
-    img: "/images/actu/actu4.jpg",
-  },
-  {
-    title: "Actu 1",
-    content: "Sed laeditur hic coetuum magnificus gegr",
-    date: "24/06/2023",
-    img: "/images/actu/actu5.jpg",
-  },
-  {
-    title: "Actu 2",
-    content: "Sed laeditur hic coetuum magnificus",
-    date: "25/06/2023",
-    img: "/images/actu/actu6.jpg",
-  },
-  {
-    title: "Actu 3",
-    content: "Sed laeditur hic coetuum magnificus",
-    date: "26/06/2023",
-    img: "/images/actu/actu1.jpg",
-  },
-  {
-    title: "Suivi Pédagogique",
-    content: "Sed laeditur hic coetuum magnificus",
-    date: "27/06/2023",
-    img: "/images/actu/actu2.jpg",
-  },
-]);
-</script>
-
-<style scoped>
-.card {
-  border: 0.5px solid #c4c4c4;
-  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 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: 2px solid #000000;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 4rem;
-}
-
-.carousel-button i {
-  color: #000000;
-}
-.card-text {
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 18px;
-  margin-bottom: 1rem;
-  color: #091d20;
-}
-.card-title {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-.card-date {
-  font-size: 0.8em;
-  color: #888;
-  margin-left: 1rem;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-body {
-  text-align: left;
-  margin-bottom: 1rem;
-  margin-left: 1rem;
-}
-
-.card-button {
-  background-color: transparent;
-  border: none;
-  width: 2.5rem;
-  font-size: 1.5em;
-  text-align: right;
-  color: #ffffff;
-  background-color: #64afb7;
-  border: none;
-  text-align: center;
-}
-.slide-card {
-  margin-left: 1rem;
-  margin-right: 1rem;
-  height: 100%;
-}
-
-.card-img-top {
-  border-radius: 15px 15px 0 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-.small-title {
-  font-weight: 600;
-  width: 12rem;
-  font-size: 12px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin-left: 2rem;
-  color: #071b1f;
-  margin-top: 4.5rem;
-}
-
-.title {
-  margin-top: 2rem;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  margin-left: 2rem;
-  color: #071b1f;
-  margin-bottom: 2rem;
-}
-
-.btn-news {
-  color: #9edbdd;
-  margin-left: 25rem;
-  margin-top: 8rem;
-  top: 6rem;
-  background: transparent;
-  border: 1px solid #9edbdd;
-  border-radius: 6px;
-  font-weight: 600;
-  text-transform: uppercase;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 25px;
-  font-size: 10px;
-  line-height: 15px;
-}
-</style>

components/Logiciels/Artist/Formations.vue

@@ -40,68 +40,12 @@
           </v-row>
         </v-container>
       </div>
-
-      <!--
-      TODO: Déplacer le "Quelques chiffres" dans un composant à part,
-      voir comment gérer ça avec les anchored sections
-      -->
-      <v-row class="center-90">
-        <LayoutUISubTitle class="mb-12">
-          Quelques chiffres
-        </LayoutUISubTitle>
-      </v-row>
-
-      <v-container>
-        <v-row class="card-container mb-12">
-          <v-col
-            cols="3"
-            class="d-flex justify-center align-center small-padding"
-          >
-            <CommonCardStat
-              number="184 634"
-              text="Utilisateurs"
-            />
-          </v-col>
-
-          <v-col cols="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="3 424"
-              text="Structures"
-            />
-          </v-col>
-
-          <v-col cols="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="13"
-              text="Années d'expérience"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-      <v-row />
-
-      <v-row />
-
-      <CommonCarouselClients :items="items" >
-        <template v-slot:title>
-          Plus de <span class="alt-color">3400 structures</span> nous ont déjà adoptées
-        </template>
-      </CommonCarouselClients>
     </LayoutContainer>
   </AnchoredSection>
 </template>
 
 <script setup lang="ts">
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
-
-const items: Ref<Array<{ src: string }>> = ref([
-  { src: "/images/reviews/artist/review1.jpeg" },
-  { src: "/images/reviews/artist/review2.jpg" },
-  { src: "/images/reviews/artist/review3.jpeg" },
-  { src: "/images/reviews/artist/review4.jpg" },
-  { src: "/images/reviews/artist/review5.png" },
-  { src: "/images/reviews/artist/review6.jpeg" },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -153,12 +97,4 @@ const items: Ref<Array<{ src: string }>> = ref([
     width: 90%;
   }
 }
-
-.card-container {
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 </style>

components/Logiciels/Artist/Reviews.vue

@@ -2,7 +2,9 @@
   <AnchoredSection id="testimonials">
     <div>
       <LayoutContainer>
-        <CommonReviewSection :cards="cards" />
+        <LogicielsArtistSomeNumbers />
+
+        <CommonReviewSection :cards="cards" class="alt-theme" />
       </LayoutContainer>
     </div>
   </AnchoredSection>

components/Logiciels/Artist/SomeNumbers.vue

@@ -0,0 +1,74 @@
+<template>
+  <LayoutContainer>
+    <v-row class="custom-row">
+      <LayoutUISubTitle class="mb-12">
+        Quelques chiffres
+      </LayoutUISubTitle>
+    </v-row>
+
+    <v-container>
+      <v-row class="card-container mb-12">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <CommonCardStat
+            number="184 634"
+            text="Utilisateurs"
+          />
+        </v-col>
+
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <CommonCardStat
+            number="3 424"
+            text="Structures"
+          />
+        </v-col>
+
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <CommonCardStat
+            number="13"
+            text="Années d'expérience"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <CommonCarouselClients :items="items" >
+      <template v-slot:title>
+        Plus de <span class="alt-color">3400 structures</span> nous ont déjà adoptées
+      </template>
+    </CommonCarouselClients>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+const items: Ref<Array<{ src: string }>> = ref([
+  { src: "/images/reviews/artist/review1.jpeg" },
+  { src: "/images/reviews/artist/review2.jpg" },
+  { src: "/images/reviews/artist/review3.jpeg" },
+  { src: "/images/reviews/artist/review4.jpg" },
+  { src: "/images/reviews/artist/review5.png" },
+  { src: "/images/reviews/artist/review6.jpeg" },
+]);
+</script>
+
+<style scoped lang="scss">
+.custom-row {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.card-container {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+</style>

components/Logiciels/Manager/Formation.vue

@@ -41,54 +41,6 @@
           </v-col>
         </v-row>
       </div>
-
-      <v-row class="align-center">
-        <LayoutUISubTitle>
-          Quelques chiffres
-        </LayoutUISubTitle>
-      </v-row>
-
-      <v-container>
-        <v-row class="card-container justify-center mb-12">
-          <v-col
-            cols="3"
-            class="d-flex justify-center align-center small-padding"
-          >
-            <CommonCardStat
-              number="140"
-              text="Structures en réseau"
-              backgroundColor="#d8050b"
-            />
-          </v-col>
-          <v-col cols="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="300 000"
-              text="Utilisateurs"
-              backgroundColor="#d8050b"
-            />
-          </v-col>
-          <v-col cols="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="12"
-              text="Années de collaboration"
-              backgroundColor="#d8050b"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <v-row>
-        <v-col cols="12" class="justify-center">
-          <span class="cmf-trust-statement">
-            La plus grande Confédération Musicale de France nous fait confiance
-          </span>
-        </v-col>
-      </v-row>
-
-      <v-img
-        src="/images/logiciels/manager/cmf.jpg"
-        class="cmf-img mb-6"
-      />
     </LayoutContainer>
   </AnchoredSection>
 </template>
@@ -120,14 +72,6 @@ const formations = ref([
     link: "/webinaires",
   },
 ]);
-const items = ref([
-  { src: "/images/reviews/school/review1.svg" },
-  { src: "/images/reviews/school/review2.png" },
-  { src: "/images/reviews/school/review3.png" },
-  { src: "/images/reviews/school/review4.jpeg" },
-  { src: "/images/reviews/school/review5.jpeg" },
-  { src: "/images/reviews/school/review6.jpeg" },
-]);
 </script>
 
 <style scoped>
@@ -184,17 +128,4 @@ const items = ref([
     color: #eff9fb;
   }
 }
-
-.cmf-img {
-  width: 30rem;
-  height: 18rem;
-  margin-top: 2rem;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.cmf-trust-statement {
-  font-size: 2rem;
-  text-align: center;
-}
 </style>

components/Logiciels/Manager/Reviews.vue

@@ -2,7 +2,9 @@
   <AnchoredSection id="testimonials">
     <div>
       <LayoutContainer>
-        <CommonReviewSection :cards="cards" />
+        <LogicielsManagerSomeNumbers />
+
+        <CommonReviewSection :cards="cards" class="alt-theme" />
       </LayoutContainer>
     </div>
   </AnchoredSection>

components/Logiciels/Manager/SomeNumbers.vue

@@ -0,0 +1,106 @@
+<template>
+  <LayoutContainer>
+    <v-row class="align-center">
+      <LayoutUISubTitle>
+        Quelques chiffres
+      </LayoutUISubTitle>
+    </v-row>
+
+    <v-container>
+      <v-row class="card-container justify-center mb-12">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <CommonCardStat
+            number="140"
+            text="Structures en réseau"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <CommonCardStat
+            number="300 000"
+            text="Utilisateurs"
+          />
+        </v-col>
+        <v-col cols="3" class="d-flex justify-center align-center">
+          <CommonCardStat
+            number="12"
+            text="Années de collaboration"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-row>
+      <v-col cols="12" class="justify-center">
+        <span class="cmf-trust-statement">
+          La plus grande Confédération Musicale de France nous fait confiance
+        </span>
+
+        <v-img
+          src="/images/logiciels/manager/cmf.jpg"
+          class="cmf-img mb-6"
+        />
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.custom-row {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.v-row {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+:deep(h2) {
+  width: 60rem;
+}
+
+.card-container {
+  --primary-color-alt: white;
+
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+
+.background-img {
+  width: 600px;
+  height: 400px;
+  background-size: cover;
+  background-position: center;
+}
+
+.cmf-img {
+  width: 30rem;
+  height: 18rem;
+  margin-top: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.cmf-trust-statement {
+  font-size: 2rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>

components/Logiciels/School/Formations.vue

@@ -41,64 +41,6 @@
           </v-col>
         </v-row>
       </div>
-
-      <!--
-      TODO: Déplacer le "Quelques chiffres" dans un composant à part,
-      voir comment gérer ça avec les anchored sections
-      -->
-      <v-row class="align-center">
-        <v-col cols="12">
-          <v-row no-gutters>
-            <LayoutUISubTitle>
-              Quelques chiffres
-            </LayoutUISubTitle>
-
-            <LayoutUITitle>
-              Pour les petits comme pour les GRANDS établissements d'enseignement artistique
-            </LayoutUITitle>
-          </v-row>
-        </v-col>
-      </v-row>
-
-      <v-container>
-        <v-row class="mb-12">
-          <v-col
-            cols="12"
-            lg="3"
-            class="d-flex justify-center align-center small-padding"
-          >
-            <CommonCardStat
-              number="30 > 1 500"
-              text="Élèves"
-            />
-          </v-col>
-          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="234"
-              text="Clients"
-            />
-          </v-col>
-          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="20 304"
-              text="Utilisateurs"
-            />
-          </v-col>
-          <v-col cols="12" lg="3" class="d-flex justify-center align-center">
-            <CommonCardStat
-              number="13"
-              text="Années d'expérience"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-      <v-row />
-
-      <CommonCarouselClients :items="items" >
-        <template v-slot:title>
-          Plus de <span class="alt-color">5000 structures</span> nous font confiance
-        </template>
-      </CommonCarouselClients>
     </LayoutContainer>
   </AnchoredSection>
 </template>
@@ -129,15 +71,6 @@ const formations: Array<Formation> = [
     link: "/webinaires",
   },
 ];
-
-const items: Array<{ src: string }> = [
-  { src: "/images/reviews/school/review1.svg" },
-  { src: "/images/reviews/school/review2.png" },
-  { src: "/images/reviews/school/review3.png" },
-  { src: "/images/reviews/school/review4.jpeg" },
-  { src: "/images/reviews/school/review5.jpeg" },
-  { src: "/images/reviews/school/review6.jpeg" },
-];
 </script>
 
 <style scoped>

components/Logiciels/School/Reviews.vue

@@ -2,7 +2,9 @@
   <AnchoredSection id="testimonials">
     <div>
       <LayoutContainer>
-        <CommonReviewSection :cards="cards" />
+        <LogicielsSchoolSomeNumbers />
+
+        <CommonReviewSection :cards="cards" class="alt-theme" />
       </LayoutContainer>
     </div>
   </AnchoredSection>

components/Logiciels/School/Solutions.vue

@@ -1,181 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col cols="12">
-        <h4 class="solution-title text-center">
-          Une gamme de logiciels adaptée à chaque structure
-        </h4>
-      </v-col>
-    </v-row>
-
-    <v-row class="row-artist">
-      <v-col cols="3">
-        <v-img
-          src="/images/opentalent_artist_black.png"
-          class="logo"
-        />
-      </v-col>
-
-      <v-col cols="2">
-        <h5 class="solution-name">
-          Opentalent Artist
-        </h5>
-      </v-col>
-
-      <v-col cols="7">
-        <!-- list v-chip-->
-        <v-chip-group
-          active-class="primary--text"
-          column
-        >
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Orchestres</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Chorales</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Compagnies de danse</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Compagnies de théâtre</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            label
-          >
-            <span class="chip-detail">Compagnies de cirque</span>
-          </v-chip>
-        </v-chip-group>
-      </v-col>
-    </v-row>
-
-    <v-row class="row-artist">
-      <v-col cols="3">
-        <v-img
-          src="/images/opentalent_manager_black.jpg"
-          class="logo"
-        />
-      </v-col>
-
-      <v-col cols="2">
-        <h5 class="solution-name">
-          Opentalent Manager
-        </h5>
-      </v-col>
-
-      <v-col cols="7">
-        <!-- list v-chip-->
-        <v-chip-group
-          active-class="primary--text"
-          column
-        >
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Fédérations</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Confédération</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Réseaux</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Collectivités</span>
-          </v-chip>
-          <v-chip
-            class="ma-2 chip-custom"
-            color="primary"
-            label
-          >
-            <span class="chip-detail">Site internet</span>
-          </v-chip>
-        </v-chip-group>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup></script>
-
-<style scoped>
-.chip-detail {
-  color: #000000;
-}
-.chip-custom {
-  color: white;
-  border: 1px solid #0e2d32;
-  border-radius: 3rem;
-  text-transform: uppercase;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 16px;
-
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.2em;
-}
-
-.row-artist {
-  border-top: 1px solid #d1cdc7;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.solution-name {
-  font-weight: 300;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  color: #0e2d32;
-}
-
-.row-artist {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.solution-title {
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  color: #000000;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.logo {
-  width: 10rem;
-  height: 10rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-</style>

components/Logiciels/School/SomeNumbers.vue

@@ -0,0 +1,105 @@
+<template>
+  <LayoutContainer>
+    <v-row class="align-center custom-row">
+      <v-col cols="12">
+        <v-row no-gutters>
+          <LayoutUISubTitle>
+            Quelques chiffres
+          </LayoutUISubTitle>
+
+          <LayoutUITitle>
+            Pour les petits comme pour les GRANDS établissements d'enseignement artistique
+          </LayoutUITitle>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <v-container>
+      <v-row class="mb-12 card-container custom-row">
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center small-padding"
+        >
+          <CommonCardStat
+            number="30 > 1 500"
+            text="Élèves"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
+          <CommonCardStat
+            number="234"
+            text="Clients"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
+          <CommonCardStat
+            number="20 304"
+            text="Utilisateurs"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          class="d-flex justify-center align-center"
+        >
+          <CommonCardStat
+            number="13"
+            text="Années d'expérience"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-row />
+
+    <CommonCarouselClients :items="items" >
+      <template v-slot:title>
+        Plus de <span class="alt-color">5000 structures</span> nous font confiance
+      </template>
+    </CommonCarouselClients>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+const items: Array<{ src: string }> = [
+  { src: "/images/reviews/school/review1.svg" },
+  { src: "/images/reviews/school/review2.png" },
+  { src: "/images/reviews/school/review3.png" },
+  { src: "/images/reviews/school/review4.jpeg" },
+  { src: "/images/reviews/school/review5.jpeg" },
+  { src: "/images/reviews/school/review6.jpeg" },
+];
+</script>
+
+<style scoped lang="scss">
+.custom-row {
+  width: 90%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.v-row {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+:deep(h2) {
+  width: 60rem;
+}
+
+.card-container {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+</style>

components/Logiciels/School/StickyMenu.vue

@@ -1,101 +0,0 @@
-<template>
-  <div id="sticky-menu">
-    <LayoutContainer >
-      <v-row class="outil-row">
-        <v-col cols="3">
-          <div class="container-square">
-            <v-row class="logo-square">
-              <div>
-                <v-icon class="fa-regular fa-comments icon" />
-                <p class="text-square">Nous contacter</p>
-              </div>
-            </v-row>
-
-            <v-row class="logo-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="logo-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;
-}
-
-.logo-square,
-.darkblue-square {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 10rem;
-  height: 7rem;
-  margin-left: 14rem;
-  padding: 1rem;
-}
-
-.logo-square {
-  background:blue;
-}
-
-.darkblue-square {
-  background: #0e2d32;
-}
-
-.text-square {
-  margin: 0.5rem 2rem;
-}
-
-.icon {
-  margin-right: 1rem;
-}
-
-.icon-logiciel {
-  color: #9EDBDD;
-  margin-right: 1rem;
-}
-
-.outil-row {
-  margin: 5rem 0;
-}
-
-#sticky-menu {
-  position: sticky;
-  top: 10rem;
-  z-index: 10;
-  left: 0;
-  margin-bottom: -40rem;
-}
-
-</style>

pages/formations.vue

@@ -19,7 +19,7 @@
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <FormationPresentation />
 

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <LayoutUITitlePage :class="mdAndDown ? 'mt-12' : ''">
     LOGICIELS CULTURELS

pages/opentalent_artist.vue

@@ -2,7 +2,7 @@
   <div class="theme-artist" >
     <LayoutNavigation />
 
-    <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonActionMenu :actions="stickyMenuActions" />
 
     <LogicielsTitle>
       <template #left-text>School</template>
@@ -33,7 +33,7 @@
 
     <LogicielsArtistFormations />
 
-    <LogicielsArtistReviews class="alt-theme"/>
+    <LogicielsArtistReviews />
 
     <LayoutFAQ />
 
@@ -44,8 +44,8 @@
 </template>
 
 <script setup lang="ts">
-import { StickyMenuActionType } from "~/types/enum/layout";
-import type { MenuScroll, StickyMenuAction } from "~/types/interface";
+import { ActionMenuItemType } from "~/types/enum/layout";
+import type { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { useDisplay } from "vuetify";
 
 const { mdAndUp } = useDisplay()
@@ -60,18 +60,18 @@ const menus: Array<MenuScroll> = [
   { anchor: "testimonials", label: "Témoignages" },
 ];
 
-const stickyMenuActions: Array<StickyMenuAction> = [
+const stickyMenuActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "yellow-square",
-    iconClass: "fa-regular fa-comments icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "primary",
+    icon: "far fa-comments",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "yellow-square",
-    iconClass: "fa-solid fa-circle-info icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "primary",
+    icon: "fas fa-circle-info",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/Depliant_Opentalent_Artist_23.pdf ",
   }
@@ -85,5 +85,10 @@ const stickyMenuActions: Array<StickyMenuAction> = [
   --on-primary-color: #0e2d32;
   --primary-color-alt: #262626;
   --on-primary-color-alt: #fac20a;
+
+  --action-menu-primary-color: #fac20a;
+  --action-menu-on-primary-color: #262626;
+  --action-menu-secondary-color: #fef3ce;
+  --action-menu-on-secondary-color: #262626;
 }
 </style>

pages/opentalent_manager.vue

@@ -7,6 +7,7 @@
       title="Opentalent Manager"
       rightText="Artist"
     />
+
     <LogicielsTitle>
       <template #left-text>School</template>
       Opentalent Manager
@@ -25,7 +26,7 @@
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
-    <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonActionMenu :actions="stickyMenuActions" />
 
     <LogicielsManagerPresentation />
 
@@ -39,7 +40,7 @@
 
     <LogicielsManagerFormation />
 
-    <LogicielsManagerReviews class="alt-theme"/>
+    <LogicielsManagerReviews />
 
     <LayoutFAQ />
 
@@ -50,8 +51,8 @@
 </template>
 
 <script setup lang="ts">
-import type { MenuScroll, StickyMenuAction } from "~/types/interface";
-import { StickyMenuActionType } from "~/types/enum/layout";
+import type { MenuScroll, ActionMenuItem } from "~/types/interface";
+import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
 const { mdAndUp } = useDisplay()
@@ -65,25 +66,25 @@ const menus: Array<MenuScroll> = ref([
   { anchor: "testimonials", label: "Témoignages" },
 ]).value;
 
-const stickyMenuActions: Array<StickyMenuAction> = [
+const stickyMenuActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "red-square",
-    iconClass: "fa-regular fa-comments icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "primary",
+    icon: "fa-regular fa-comments icon",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "red-square",
-    iconClass: "fa-brands fa-readme icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "primary",
+    icon: "fa-brands fa-readme icon",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/user_upload/Manager.pdf",
   },
   {
-    type: StickyMenuActionType.CALL_US,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
+    type: ActionMenuItemType.CALL_US,
+    color: "secondary",
+    icon: "fa-solid fa-phone icon",
     text: "Nous appeler",
   },
 ];
@@ -96,5 +97,10 @@ const stickyMenuActions: Array<StickyMenuAction> = [
   --secondary-color: #f7cdce;
   --on-primary-color: #0e2d32;
   --on-primary-color-alt: #d8050b;
+
+  --action-menu-primary-color: #d8050b;
+  --action-menu-on-primary-color: #ffffff;
+  --action-menu-secondary-color: #0e2d32;
+  --action-menu-on-secondary-color: #ffffff;
 }
 </style>

pages/opentalent_school.vue

@@ -18,7 +18,7 @@
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
-    <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonActionMenu :actions="stickyMenuActions" />
 
     <LogicielsSchoolPresentation />
 
@@ -34,7 +34,7 @@
 
     <LogicielsSchoolFormations />
 
-    <LogicielsSchoolReviews class="alt-theme"/>
+    <LogicielsSchoolReviews/>
 
     <LayoutFAQ  />
 
@@ -45,8 +45,8 @@
 </template>
 
 <script setup lang="ts">
-import type { MenuScroll, StickyMenuAction } from "~/types/interface";
-import { StickyMenuActionType } from "~/types/enum/layout";
+import type { MenuScroll, ActionMenuItem } from "~/types/interface";
+import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
 const { mdAndUp } = useDisplay()
@@ -61,32 +61,32 @@ const menus: Array<MenuScroll> = [
   { anchor: "testimonials", label: "Témoignages" },
 ];
 
-const stickyMenuActions: Array<StickyMenuAction> = [
+const stickyMenuActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "blue-square",
-    iconClass: "fa-regular fa-comments icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "primary",
+    icon: "fa-regular fa-comments icon",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "blue-square",
-    iconClass: "fa-solid fa-circle-info icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "primary",
+    icon: "fa-solid fa-circle-info icon",
     text: "Demander une demo",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "blue-square",
-    iconClass: "fa-brands fa-readme icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "primary",
+    icon: "fa-brands fa-readme icon",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
   },
   {
-    type: StickyMenuActionType.CALL_US,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
+    type: ActionMenuItemType.CALL_US,
+    color: "secondary",
+    icon: "fa-solid fa-phone icon",
     text: "Nous Appeler",
   },
 ];
@@ -102,5 +102,10 @@ const stickyMenuActions: Array<StickyMenuAction> = [
   --on-primary-color-alt: #c3e5e7;
 
   --banner-center-image: 40%;
+
+  --action-menu-primary-color: #c3e5e7;
+  --action-menu-on-primary-color: #262626;
+  --action-menu-secondary-color: #0e2d32;
+  --action-menu-on-secondary-color: #ffffff;
 }
 </style>

pages/qui-sommes-nous.vue

@@ -16,7 +16,7 @@
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <AboutPresentation />
 

pages/webinaires.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <LayoutUITitlePage>
     Webinaires

types/enum/layout.ts

@@ -1,7 +1,7 @@
 
 
 // Actions du sticky menu
-export const enum StickyMenuActionType {
+export const enum ActionMenuItemType {
   FOLLOW_LINK,
   CALL_US,
   ASK_FOR_A_DEMO

types/interface.d.ts

@@ -1,9 +1,9 @@
-import { StickyMenuActionType } from "~/types/enum/layout";
+import { ActionMenuItemType } from "~/types/enum/layout";
 
-interface StickyMenuAction {
-  type: StickyMenuActionType
-  bgColor: string,
-  iconClass: string,
+interface ActionMenuItem {
+  type: ActionMenuItemType
+  color: 'primary' | 'secondary',
+  icon: string,
   text: string,
   url?: string,
 }