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
        v-for="(article, index) in articles"
        :key="index"
        class="center-90 benefits-block"
      >
        <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: '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-block {
  display: flex;
  align-self: center;
  :deep(.txt_article) {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 80px;
    padding-right: 80px;
  }
}

.benefits-block:nth-child(odd) {
  :deep(.txt_article) {
    background: var(--neutral-color-alt-light);
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media (max-width: 960px) {
  .benefits-block {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .benefits-block:nth-child(odd) {
    :deep(.txt_article) {
      padding: 30px;
    }
  }
}
</style>