Merge branch 'feature/page-partenaires' into develop

assets/style/main.scss

@@ -20,7 +20,7 @@ body {
 }
 
 .center-90 {
-  width: 90%;
+  width: 85%;
   max-width: 1600px;
   margin-right: auto;
   margin-left: auto;

components/Common/Article.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-col
+    v-if="!pictureRight && mdAndUp"
+    cols="12"
+    md="6"
+    class="image-container d-flex justify-center"
+  >
+    <v-img max-width="350" :src="article.image" :alt="article.imageAlt" />
+  </v-col>
+
+  <v-col cols="12" md="6" class="txt_article">
+    <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
+    v-if="pictureRight || (mdAndDown && !md)"
+    cols="12"
+    md="6"
+    class="image-container d-flex justify-center"
+  >
+    <v-img max-width="350" :src="article.image" :alt="article.imageAlt" />
+  </v-col>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { useDisplay } from 'vuetify'
+import type { Article } from '~/types/interface'
+
+const { mdAndUp, mdAndDown, md } = useDisplay()
+
+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/Common/Card/Benefit.vue

@@ -60,7 +60,7 @@ hr {
   h4 {
     font-weight: 300;
     font-size: 1.5rem;
-    line-height: 1rem;
+    line-height: 1.3rem;
     color: var(--on-primary-color);
   }
 

components/Layout/Navigation.vue

@@ -39,6 +39,7 @@ const menu: Array<MainMenuItem> = [
     label: 'À propos',
     children: [
       { label: 'Qui sommes-nous', to: '/qui-sommes-nous' },
+      { label: 'Nos partenaires', to: '/nos-partenaires' },
       { label: 'Nous rejoindre', to: '/nous-rejoindre' },
     ],
   },

components/Partnerships/Benefit.vue

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

components/Partnerships/Contact.vue

@@ -0,0 +1,125 @@
+<!--
+Section "Besoin d'aide" de la page d'accueil
+-->
+
+<template>
+  <AnchoredSection id="contact">
+    <LayoutContainer>
+      <v-row class="center-90 mt-6">
+        <v-col cols="12" lg="6" class="col">
+          <v-img
+            src="/images/pages/home/help/Opentalent_a_votre_service.png"
+            alt="Un homme et une femme, tous les deux le sourire aux lèvres, se serrent la main"
+          />
+        </v-col>
+
+        <v-col cols="12" lg="6" class="col">
+          <h3>Nous contacter</h3>
+
+          <p>Vous souhaitez devenir partenaire d’Opentalent ?</p>
+          <br />
+          <p>
+            Contactez-nous pour explorer ensemble de nouvelles opportunités.
+          </p>
+
+          <v-row>
+            <v-btn to="/nous-contacter" class="button-faq">
+              Devenir partenaire
+            </v-btn>
+          </v-row>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
+  </AnchoredSection>
+</template>
+
+<script setup lang="ts">
+import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
+</script>
+
+<style scoped lang="scss">
+.v-container {
+  margin: 64px auto 24px auto;
+  padding: 16px;
+  max-width: 95%;
+
+  .col {
+    padding: 0 6px;
+    display: flex;
+    flex-direction:column;
+    align-self: center;
+  }
+
+  .col:nth-child(2) {
+    padding-left: 60px;
+    padding-right: 60px;
+
+    @media (max-width: 600px) {
+      padding: 12px;
+      * {
+        max-width: 100%;
+      }
+    }
+  }
+
+  @media (max-width: 600px) {
+    margin: 0;
+  }
+}
+
+.v-img {
+  width: 50rem;
+  border-radius: 3rem;
+}
+
+h3 {
+  margin-bottom: 0.7rem;
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 34px;
+  width: 25rem;
+}
+
+p {
+  width: 25rem;
+  font-weight: 300;
+  font-size: 1.1rem;
+  line-height: 1.4rem;
+  color: var(--primary-color);
+}
+
+.button-faq {
+  width: 195px;
+  height: 53px;
+  margin-top: 30px;
+  margin-left: 10px;
+  background: var(--secondary-color);
+  border-radius: 6px;
+  color: var(--on-secondary-color);
+  padding: 19px 28px;
+
+  @media (max-width: 1240px) {
+    width: 40%;
+    margin-left: 30%;
+  }
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-left: 5%;
+  }
+}
+
+@media (max-width: 1240px) {
+  .v-row {
+    width: 100%;
+    margin: 0;
+  }
+
+  .v-img {
+    width: 40rem;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 4rem;
+  }
+}
+</style>

components/Partnerships/Partners.vue

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

pages/nos-partenaires.vue

@@ -0,0 +1,57 @@
+<!--
+  Page "Qui sommes nous?"
+-->
+
+<template>
+  <div class="theme-partnerships">
+    <CommonMeta
+      title="Partenaires Opentalent : ensemble, construisons le monde culturel de demain"
+      description="Découvrez les partenaires d'Opentalent et leur engagement pour construire un monde culturel innovant et durable. Ensemble, soutenons la culture et les arts de demain."
+    />
+
+    <LayoutUITitlePage>
+      Nos partenaires
+      <template #subtitle>
+        Construire ensemble un monde pour la culture
+      </template>
+    </LayoutUITitlePage>
+
+    <CommonBanner
+      image-src="/images/pages/nos-partenaires/banner/Partenaires_culturels_Opentalent.webp"
+      image-alt="Une poignée de main entre deux personnes"
+    />
+
+    <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
+
+    <CommonActionMenu />
+
+    <PartnershipsBenefit class="mb-8" />
+
+    <PartnershipsPartners class="mb-8" />
+
+    <PartnershipsContact />
+
+    <LayoutFooterPrefooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import type { MenuScroll } from '~/types/interface'
+
+const { lgAndUp } = useDisplay()
+
+const menus: Array<MenuScroll> = [
+  { anchor: 'benefits', label: 'Bénéfices' },
+  { anchor: 'partenaires', label: 'Partenaires' },
+  { anchor: 'contact', label: 'Contact' },
+]
+</script>
+
+<style scoped lang="scss">
+.theme-partnerships {
+  --on-primary-color-alt: var(--secondary-color);
+  --on-primary-color: var(--alt-theme);
+  --scroll-menu-on-primary-color: var(--neutral-color);
+}
+</style>

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
+}