dev

app/pages/mecenat/mecenes.vue

@@ -1,13 +1,172 @@
 <template>
-  <div>
+  <div class="mecenes--page">
+    <!-- ================== -->
+    <!-- FILS D'ARIANE -->
+    <!-- ================== -->
+    <PageSection tone="" content-size="default" class="breadcrum_wp">
+      <Breadcrumb/>
+    </PageSection>
+
+    <!-- ================== -->
+    <!-- EN-TêTE -->
+    <!-- ================== -->
+    <section class="fiche_header_simple_wp">
+      <div class="fiche_header_wp_gauche"></div>
+
+      <div class="fiche_header_inner">
+        <div class="fiche_header_titres">
+          <div>
+            <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
+              Nos mécènes
+            </DsHeading>
+          </div>
     
+          <DsText as="p" align="justify">
+              Merci à nos mécènes pour leur soutien !
+          </DsText>
+        </div>
+        <div class="fiche_header_img">
+
+        </div>
+        
+      </div>
+      <div class="fiche_header_wp_droite"></div>
+
+    </section>
+
+    <!-- ================== -->
+    <!-- AFFICHAGE DES CARDS MECENES -->
+      <!-- ================== -->
+    <PageSection padded_size="" class="theme_ppt_cards_wp">
+      <SectionContent
+        class="theme_ppt"
+        :style="themePptCardsBgStyle"
+      >
+      <RoundedCardBlocTextList >
+        <RoundedCardBlocText
+          v-for="ppt_card in cards_ppt"
+          :key="ppt_card.id"
+          :id="ppt_card.id"
+          :imgSrc="ppt_card.imgSrc"
+          :imgAlt="ppt_card.imgAlt"
+          :title="ppt_card.title"
+          :description="ppt_card.description"
+          :url="ppt_card.url"
+        ></RoundedCardBlocText>
+      </RoundedCardBlocTextList>
+      </SectionContent>
+    </PageSection>
+
+
   </div>
 </template>
 
 <script setup>
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import { computed } from 'vue'
+
+
+  //--------------------------------------------------------------------------
+  // DONNÉES POUR LES CARTES MECENES
+  //--------------------------------------------------------------------------
+
+  const cards_ppt = ref([
+    {
+      id: '1',
+      imgSrc: '/contenus/ag2r.jpeg',
+      imgAlt: 'logo',
+      title: "Fondation d’entreprise AG2R La Mondiale pour la vitalité artistique",
+      description: `pour son soutien au programme "Mozart au cinéma"`,
+      url:"https://www.ag2rlamondiale.fr/groupe/nos-engagements/soutenir-les-arts-et-promouvoir-le-sport/fondation-pour-la-vitalite-artistique",
+    },
+    {
+      id: '2',
+      imgSrc: '/contenus/bp.png',
+      imgAlt: 'logo',
+      title: "Banque populaire Rives de Paris",
+      description: `pour son soutien au projet "Enchantons l'Île-de-France" à Taverny`,
+      url:"https://www.banquepopulaire.fr/rivesparis/fondation/",
+    },
+    {
+      id: '3',
+      imgSrc: '/contenus/caisse_depot.png',
+      imgAlt: 'logo',
+      title: "Caisse des dépôts",
+      description: `pour son soutien au projet "Enchantons l'Île-de-France" à Montereau-Fault-Yonne`,
+      url:"https://www.caissedesdepots.fr/mecenat",
+    },
+    {
+      id: '4',
+      imgSrc: '/contenus/adp.png',
+      imgAlt: 'logo',
+      title: "Fondation Groupe ADP",
+      description: `pour son soutien au projet "Du sur-mesure pour les petites oreilles"`,
+      url:"https://www.parisaeroport.fr/groupe/rse/fondation",
+    },
+    {
+      id: '5',
+      imgSrc: '/contenus/norma.jpeg',
+      imgAlt: 'logo',
+      title: "Cabinet Norma Avocats",
+      description: `pour son mécénat de compétence`,
+      url:"https://www.norma-avocats.com/",
+    },
+  ])
+
+
+
+
 
 </script>
 
 <style lang="scss">
+  // =======================
+  // SPÉCIFIQUE À CETTE PAGE
+  // =======================
+  .mecenes--page {
+    .chiffres_wp {
+      background-color: var(--c-background-vert);
+      margin-bottom: 50px;
+    }
+    .fiche_description {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      > * {
+        max-width: 640px;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .contact_spe_wp {
+      background-color: var(--c-background-jaune-clair);
+      margin-top: 50px;
+      margin-bottom: 40px;
+    }
+    .theme_ppt_cards_wp {
+      margin-top: -390px;
 
-</style>
+      padding-top: 30px;
+      padding-bottom: 80px;
+      img {
+        object-fit: contain;
+      }
+    }
+    @media (max-width: 599px) {
+      .theme_ppt_cards_wp {
+        margin-top: -620px;
+      }
+    }
+  }
+
+  /* ============================ */
+  /* GALERIES */
+  /* ============================ */
+
+
+
+</style>