V8-7053

components/Partnerships/Benefit.vue

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