site_logiciels/components/Partnerships/Benefit.vue

<!--
Section "Bénéfices" de la page du nos partenaires
-->
<template>
  <AnchoredSection id="benefits">
    <LayoutContainer>
      <v-row class="center-90">
        <LayoutUISubTitle>
          Les bénéfices
        </LayoutUISubTitle>

        <LayoutUITitle>
          Pourquoi rejoindre l'écosystème Opentalent ?
        </LayoutUITitle>
      </v-row>

      <v-row class="center-90 benefits">
        <v-col v-for="(benefit, index) in benefits" :key="index" cols="12" md="4">
          <CommonCardBenefit :benefit="benefit" />
        </v-col>
      </v-row>

      <v-row class="center-90 benefits">
        <v-btn
            to="/nous-contacter"
            href="https://www.cmf-musique.org/contact/"
            class="btn-contact"
        >
          Devenir partenaire
        </v-btn>
      </v-row>

    </LayoutContainer>

  </AnchoredSection>
</template>

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

const benefits: Ref<Array<Benefit>> = ref([
  {
    title: 'Gagnez en visibilité',
    number: '01',
    description:
      'Accédez à un réseau d\'écoles, d\'associations et d\'institutions culturelles à travers nos solutions.',
    image: '/images/pages/nos-partenaires/benefits/Gagnons_en_visibilite.webp',
    alt: 'Un paysage de ville avec des panneaux publicitaires',
  },
  {
    title: 'Partagez vos innovations',
    number: '02',
    description:
      'Vos services seront intégrés à une plateforme utilisée quotidiennement par nos clients.',
    image: '/images/pages/nos-partenaires/benefits/Partageons_nos_innovations.webp',
    alt: 'Plusieurs mains de personnes autour d\'un ordinateur',
  },
  {
    title: 'Collaborez sur des projets impactants',
    number: '03',
    description:
      "Contribuez à des initiatives qui soutiennent le développement culturel.",
    image: '/images/pages/nos-partenaires/benefits/Collaborons_ensemble_pour_la_culture.webp',
    alt: 'Plusieurs personnes réunis autour d\'une table',
  },
])
</script>

<style scoped lang="scss">
.v-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btn-contact {
  margin-top: 1rem;
  height: 53px;
  background: var(--secondary-color);
  border-radius: 6px;
  color: var(--on-secondary-color);
  padding: 19px 28px;
  gap: 9px;
  max-width: 90%;
}
</style>