site_logiciels/components/Partnerships/Partners.vue

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

        <LayoutUITitle>
          Découvrir nos partenaires
        </LayoutUITitle>
      </v-row>

      <v-row class="center-90 benefits" v-for="(article, index) in articles">
        <CommonArticle :article="article" :picture-right="index % 2 === 0"/>
      </v-row>

    </LayoutContainer>

  </AnchoredSection>
</template>

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

const articles: Ref<Array<Article>> = ref([
  {
    title: 'CMF',
    text: 'Partenaire majeur depuis 17 ans, la Confédération Musicale de France accompagne les associations musicales de France professionnelles ou amateurs dans leur pratique.',
    image: '/images/pages/nos-partenaires/partners/Logo_Confederation_Musicale_de_France-CMF_vivre_la_musique_ensemble.jpg',
    imageAlt: 'Logo de la CMF',
    btnTitle: 'En savoir plus',
    btnHref: 'https://www.cmf-musique.org/',
  },
  {
    title: 'HelloAsso',
    text: 'Faciliter la collecte de fonds et la gestion des paiements pour nos associations partenaires grâce à une solution dédiée et intuitive.',
    image: '/images/pages/nos-partenaires/partners/Logo-HelloAsso.png',
    imageAlt: 'Logo de HelloAsso',
    btnTitle: 'En savoir plus',
    btnHref: 'https://www.helloasso.com/',
  },
  {
    title: 'Basicompta',
    text: 'Simplifier la comptabilité des associations avec un outil adapté, désormais directement accessible depuis Opentalent.',
    image: '/images/pages/nos-partenaires/partners/Logo-Basicompta.png',
    imageAlt: 'Logo de BasiCompta',
    btnTitle: 'En savoir plus',
    btnHref: 'https://basicompta.fr/',
  },
])
</script>

<style scoped lang="scss">
.v-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.benefits{
  margin-bottom: 50px;
}

</style>