<!--
  Page "Qui sommes nous?"
-->

<template>
  <div>
    <CommonMeta
      title="Opentalent : éditeur de logiciels de gestion et de communication pour le secteur culturel  "
      description="Opentalent, créé par des passionnés, révolutionne la gestion culturelle et la promotion du spectacle vivant pour enrichir le développement de la culture."
    />

    <LayoutUITitlePage>
      Qui sommes-nous ?
      <template #subtitle>
        Découvrez qui nous sommes et ce qui nous anime
      </template>
    </LayoutUITitlePage>

    <CommonBanner
      image-src="/images/pages/qui-sommes-nous/banner/Opentalent_entreprise_qui_sommes-nous.webp"
      image-alt="Réunion d’équipe dans une salle de réunion avec 5 personnes"
    />

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

    <CommonActionMenu />

    <AboutPresentation />

    <AboutValeurs />

    <AboutLogiciels />

    <AnchoredSection id="agenda" class="mb-6">
      <HomeEventAgenda />
    </AnchoredSection>

    <AboutChronologie />

    <AboutEquipe />

    <AboutFAQ />

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

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import type { MenuScroll } from '~/types/interface'
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'

const { lgAndUp } = useDisplay()

const menus: Array<MenuScroll> = [
  { anchor: 'about', label: 'Qui sommes-nous' },
  { anchor: 'values', label: 'Nos valeurs' },
  { anchor: 'softwares', label: 'Nos logiciels' },
  { anchor: 'agenda', label: "L'agenda opentalent" },
  { anchor: 'history', label: 'Notre Histoire' },
  { anchor: 'team', label: 'Notre équipe' },
  { anchor: 'help', label: 'Aide' },
]
</script>

<style scoped lang="scss">
:deep(.active) {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
}
</style>
