V8-7053

components/Common/Article.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-col cols="12" md="6" class="image-container d-flex justify-center" v-if="!pictureRight && mdAndUp">
+    <v-img
+        max-width="350"
+        :src="article.image"
+        :alt="article.imageAlt"
+    />
+  </v-col>
+
+  <v-col cols="12" md="6">
+    <h3>{{article.title}}</h3>
+    <p>{{article.text}}</p>
+    <v-btn
+        max-width="510px"
+        :href="article.btnHref"
+        target="_blank"
+    >
+      {{article.btnTitle}}
+    </v-btn>
+  </v-col>
+
+  <v-col cols="12" md="6" class="image-container d-flex justify-center" v-if="pictureRight || (mdAndDown && !md)">
+    <v-img
+        max-width="350"
+        :src="article.image"
+        :alt="article.imageAlt"
+    />
+  </v-col>
+
+
+</template>
+
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {Article} from "~/types/interface";
+import {useDisplay} from "vuetify";
+
+const { mdAndUp, mdAndDown, md } = useDisplay()
+
+const props = defineProps({
+  article: {
+    type: Object as PropType<Article>,
+    required: true,
+  },
+  pictureRight:{
+    type: Boolean,
+    default: true
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.v-btn {
+  background: var(--secondary-color);
+  color: var(--on-secondary-color);
+  margin-top: 20px;
+}
+</style>

components/Partnerships/Partners.vue

@@ -0,0 +1,70 @@
+<!--
+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>

pages/nos-partenaires.vue

@@ -27,6 +27,8 @@
 
     <PartnershipsBenefit />
 
+    <PartnershipsPartners />
+
     <LayoutFooterPrefooter />
   </div>
 </template>

types/interface.d.ts

@@ -173,3 +173,12 @@ interface CookiesPreferences {
   adUserDataConsent: boolean,
   adPersonalizationConsent: boolean,
 }
+
+interface Article {
+  title: string
+  text: string
+  image: string
+  imageAlt: string
+  btnTitle?: string
+  btnHref?: string
+}