site_logiciels/pages/opentalent-school.vue

<template>
  <div>
    <CommonMeta
      title="Opentalent School - Logiciels de gestion et de communication pour écoles de musique, de danse, de théâtre, de cirque, d’art, conservatoire et MJC"
      description="Opentalent School, le logiciel tout-en-un pour les établissements d’enseignement artistique. Simplifiez la gestion et la communication de votre établissement."
    />

    <div class="theme-school">
      <LogicielsTitle>
        <template #left-text>Artist</template>
        Opentalent School
        <template #right-text>Manager</template>
      </LogicielsTitle>

      <CommonBanner
        image-src="/images/pages/opentalent_school/banner/Opentalent_School_pour_les_etablissements_d_enseignement_artistique.webp"
        image-alt="Deux jeunes filles jouant du violon, l'une est au premier plan et l’autre floutée"
        square-text="Écoles de musique, de danse, de théâtre, d'art, de cirque, conservatoires et MJC"
        logo-src="/images/logos/opentalent/Logo_Opentalent_School-blanc.png"
        logo-alt="Logo Opentalent School - logiciel de gestion et de communication pour les établissements d’enseignement artistique"
        :logo-alt-theme="true"
      />

      <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />

      <CommonActionMenu :actions="stickyMenuActions" />

      <LogicielsSchoolPresentation />

      <LogicielsSchoolAvantages />

      <div class="alt-theme">
        <LogicielsSchoolFonctionnalites />
      </div>

      <LogicielsSchoolComparatif />

      <CommonContact class="mt-12" />

      <LogicielsSchoolFormations />

      <LogicielsSchoolReviews class="mt-8" />

      <LayoutFAQ />

      <LayoutFooterPrefooter />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import type { MenuScroll, ActionMenuItem } from '~/types/interface'
import { ActionMenuItemType } from '~/types/enum/layout'

const { lgAndUp } = useDisplay()

const runtimeConfig = useRuntimeConfig()

const menus: Array<MenuScroll> = [
  { anchor: 'presentation', label: 'Présentation' },
  { anchor: 'benefits', label: 'Avantages' },
  { anchor: 'functionalities', label: 'Fonctionnalités' },
  { anchor: 'comparative', label: 'Comparatif' },
  { anchor: 'contact', label: 'Contact' },
  { anchor: 'webinars', label: 'Formations' },
  { anchor: 'testimonials', label: 'Témoignages' },
]

const stickyMenuActions: Array<ActionMenuItem> = [
  {
    type: ActionMenuItemType.ASK_FOR_A_DEMO,
    color: 'primary',
    icon: 'fa-regular fa-comments icon',
    text: 'Nous contacter',
    url: '/nous-contacter',
  },
  {
    type: ActionMenuItemType.ASK_FOR_A_DEMO,
    color: 'primary',
    icon: 'fa-solid fa-circle-info icon',
    text: 'Demander une demo',
    url: '/nous-contacter',
  },
  {
    type: ActionMenuItemType.FOLLOW_LINK,
    color: 'primary',
    icon: 'fa-brands fa-readme icon',
    text: 'Brochure',
    url:
      runtimeConfig.public.fileStorageBaseUrl +
      '/Brochures/Brochure_Opentalent_School.pdf',
    target: '_blank',
  },
  {
    type: ActionMenuItemType.CALL_US,
    color: 'secondary',
    icon: 'fa-solid fa-phone icon',
    text: 'Nous Appeler',
  },
]
</script>

<style scoped lang="scss">
.theme-school {
  --primary-color: #ffffff;
  --on-primary-color: #0e2d32;
  --primary-color-alt: var(--on-secondary-color);
  --on-primary-color-alt: var(--school-color);
  --secondary-color: var(--school-color-light);

  --banner-center-image: 40%;

  --action-menu-primary-color: var(--school-color-light);
  --action-menu-on-primary-color: var(--on-secondary-color);
  --action-menu-secondary-color: var(--on-primary-color);
  --action-menu-on-secondary-color: var(--primary-color);
}
</style>