home cards

app/pages/index.vue

@@ -41,7 +41,7 @@
     <PageSection padded_size="" class="theme_ppt_wp remonter_bloc_dessous">
       <SectionContent class="theme_ppt">
         <!-- PHOTO DE L'ORCHETSRE -->
-          <DsMedia :src="orchestre_img" alt="L'Orchestre" class="theme_ppt--img"/>
+          <DsMedia :src="homePartoutPourTousImageSrc" :alt="homePartoutPourTousImageAlt" class="theme_ppt--img"/>
         <!-- PHOTO DE LA CARTE IDF -->
         <!-- <DsMedia :src="ppt_img" alt="Carte Île-De-France" class="theme_ppt--img"/> -->
         <!-- Avec couleur rouge par dessus -->
@@ -52,9 +52,11 @@
             {{ homePartoutPourTousTitle }}
           </SectionTitle>
           <SectionContent pad="xs" class="theme_ppt--description">
-            <DsText tone="invert" size="lg" class="theme_ppt--txt" >
-              Faire vivre la musique symphonique au coeur du territoire et la rendre accessible à toutes et tous : telle est la mission de nos <span class="gros_chiffres">95</span> musiciennes et musiciens. L'Orchestre donne <span class="gros_chiffres">120</span> concerts par saison dans les <span class="gros_chiffres">8</span> départements d'Île-de-France, aussi bien dans des salles traditionnelles que dans des lieux variés.
-            </DsText>
+            <StrapiBlocksConvert
+              v-if="homePartoutPourTousDescription?.length"
+              :blocks="homePartoutPourTousDescription"
+              class="theme_ppt--txt theme_ppt--txt-strapi"
+            />
             <!-- UN CTA / LIEN SUR L'IMAGE -->
             <!-- <DsButtonArrow to="/" variant="invert"> -->
                 <!-- Carte des événements -->
@@ -249,23 +251,72 @@
     {
       locale: "fr-FR",
       populate: {
-        carte: {
-          illustration: true,
-        },
+        illustration: true,
       },
       limit: 1,
     }
   )
 
+  const { items: homeCardsPartoutPourTous } = useStrapi(
+    "/api/__strapi__/home-cards",
+    {
+      locale: "fr-FR",
+      populate: {
+        illustration: true,
+      },
+      filters: {
+        type: {
+          $eq: "Partout et pour tous",
+        },
+      },
+      sort: "ordre:asc",
+      pageSize: 1000,
+    }
+  )
+
   const homePartoutPourTousContent = computed(() => homePartoutPourTous.value?.[0] || null)
 
   const homePartoutPourTousTitle = computed(() =>
     homePartoutPourTousContent.value?.titre || "LA MUSIQUE PARTOUT ET POUR TOUS"
   )
 
+  const homePartoutPourTousDescription = computed(() => {
+    const description = homePartoutPourTousContent.value?.description
+
+    if (Array.isArray(description)) return description
+    if (typeof description === "string" && description.trim()) {
+      return [
+        {
+          type: "paragraph",
+          children: [
+            {
+              type: "text",
+              text: description,
+            },
+          ],
+        },
+      ]
+    }
+
+    return []
+  })
+
+  const homePartoutPourTousIllustration = computed(() =>
+    normalizeStrapiMedia(homePartoutPourTousContent.value?.illustration)
+  )
+
+  const homePartoutPourTousImageSrc = computed(() =>
+    homePartoutPourTousIllustration.value?.url || orchestre_img
+  )
+
+  const homePartoutPourTousImageAlt = computed(() =>
+    homePartoutPourTousIllustration.value?.alternativeText ||
+    homePartoutPourTousContent.value?.titre ||
+    "L'Orchestre"
+  )
+
   const cards_ppt = computed(() => {
-    const cartes = homePartoutPourTousContent.value?.carte || []
-    const publishedCards = cartes.filter((carte) => carte.publication !== false)
+    const publishedCards = homeCardsPartoutPourTous.value.filter((carte) => carte.publication !== false)
 
     return publishedCards.map((carte, index) => {
       const image = getStrapiCardImage(carte)
@@ -374,12 +425,13 @@
   ])
 
   function normalizeStrapiMedia(media) {
-    if (!media?.url) return null
+    const item = Array.isArray(media) ? media[0] : media
+    if (!item?.url) return null
 
     return {
-      id: media.id || media.documentId || media.url,
-      url: media.url,
-      alternativeText: media.alternativeText || media.caption || media.name || "",
+      id: item.id || item.documentId || item.url,
+      url: item.url,
+      alternativeText: item.alternativeText || item.caption || item.name || "",
     }
   }
 
@@ -470,6 +522,23 @@
     &--txt {
       margin-bottom: 35px;
     }
+    &--txt-strapi {
+      color: var(--c-text-invert, #fff);
+
+      .strapi-blocks--p {
+        color: inherit;
+        font-family: var(--font-roboto);
+        font-size: var(--text-lg);
+        font-weight: var(--fw-regular);
+        line-height: var(--lh-base);
+        margin: 0 0 var(--sp-6);
+      }
+
+      strong {
+        font-size: var(--fs-18);
+        font-weight: var(--fw-black);
+      }
+    }
 
   }
   .theme_ppt_cards_wp {