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" 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>