site_logiciels/pages/opentalent_school.vue

<template>
  <LayoutNavigation />
  <LogicielsSchoolBanner />
  <CommonMenuScroll :menus="menus" class="mb-6" />

  <div v-if="shouldShowStickyMenu" id="sticky-menu" class="mt-6">
    <CommonStickyMenu
      :shouldShowStickyMenu="shouldShowStickyMenu"
      :squaresData="squaresData"
    />
  </div>
  <LogicielsSchoolPresentation />
  <LogicielsSchoolAvantages />
  <LogicielsSchoolFonctionnalites />
  <LogicielsSchoolComparatif />
  <LogicielsSchoolProjet />
  <LogicielsSchoolFormations />
  <LogicielsSchoolReviews />
  <LayoutFAQ  />
  <LayoutFooterSolutionsFooter />
  <LayoutFooter id="layout-footer" />
</template>

<script setup>
import { ref } from "vue";

const shouldShowStickyMenu = ref(true);
const menus = ref([
  { id: "Presentation", label: "Présentation", element: null },
  { id: "Avantages", label: "Avantages", element: null },
  { id: "Fonctionnalites", label: "Fonctionnalités", element: null },
  { id: "Comparatif", label: "Comparatif", element: null },
  { id: "Contact", label: "Contact", element: null },
  { id: "Formations", label: "Formations", element: null },
  { id: "Temoignages", label: "Temoignages", element: null },
]).value;
const squaresData = [
  {
    id: 1,
    bgColor: "blue-square",
    iconClass: "fa-regular fa-comments icon",
    text: "Nous contacter",
    url: "/nous-contacter",
  },
  {
    id: 2,
    bgColor: "blue-square",
    iconClass: "fa-solid fa-circle-info icon",
    text: "Demander une demo",
    url: "/nous-contacter",
  },
  {
    id: 3,
    bgColor: "blue-square",
    iconClass: "fa-brands fa-readme icon",
    text: "Brochure",
    url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
  },
  {
    id: 4,
    bgColor: "darkblue-square",
    iconClass: "fa-solid fa-phone icon",
    text: "Nous Appeler",
  },
];

</script>

<style scoped>
#sticky-menu {
  position: sticky;
  top: 25rem;
  z-index: 10;
  margin-bottom: -35rem;
  float: right;
}

@media (max-width: 1800px) {
  #sticky-menu {
    top: 16rem;
    margin-bottom: -28rem;
  }
}
</style>