feat: alternated blocs as cards

content/landing/blocs/01/title.mdx

@@ -5,7 +5,7 @@ image:
   alt: Image panier courses bio
   position: left
   mobile:
-    size: md
+    size: medium
 cta:
   source: produit-bio-durable
   title: Je consomme durable

content/landing/blocs/02/bloc_01.mdx

@@ -1 +1 @@
-- Connectez votre carte bancaire habituelle à **Carte Verte** 
+Connectez votre carte bancaire habituelle à **Carte Verte**

content/landing/blocs/02/bloc_02.mdx

@@ -1 +1 @@
-- Réglez vos achats avec **Carte Verte** dans les commerces éligibles
+Réglez vos achats avec **Carte Verte** dans les commerces éligibles

content/landing/blocs/02/bloc_03.mdx

@@ -1 +1 @@
-- Dépensez votre cagnotte **Carte Verte** lors de vos achats dans les commerces éligibles
+Dépensez votre cagnotte **Carte Verte** lors de vos achats dans les commerces éligibles

content/landing/blocs/02/title.mdx

@@ -1,12 +1,15 @@
 ---
 type: alternated
-images:
-  - src: /img/bloc02-1.svg
-    alt: Image connecter sa carte bancaire à la carte verte
-  - src: /img/bloc02-2.svg
-    alt: Image remise 20 pour cent
-  - src: /img/bloc02-3.svg
-    alt: Image paiment par carte bancaire
+cards:
+  - image:
+      src: /img/bloc02-1.svg
+      alt: Image connecter sa carte bancaire à la carte verte
+  - image:
+      src: /img/bloc02-2.svg
+      alt: Image remise 20 pour cent
+  - image:
+      src: /img/bloc02-3.svg
+      alt: Image paiment par carte bancaire
 cta:
   source: utiliser-carte-verte
   title: J'utilise Carte Verte

content/landing/blocs/03/bloc_01.mdx

@@ -1 +1 @@
-**Étape 1** : vérifiez votre éligibilité en répondant à quelques questions
+Vérifiez votre éligibilité en répondant à quelques questions

content/landing/blocs/03/bloc_02.mdx

@@ -1 +1 @@
-**Étape 2** : si votre profil est sélectionné vous recevez votre **Carte Verte**
+Si votre profil est sélectionné vous recevez votre **Carte Verte**

content/landing/blocs/03/bloc_03.mdx

@@ -1 +1 @@
-**Étape 3** : Dès l'activation de votre **Carte Verte**, profitez de produits durables moins chers
+Dès l'activation de votre **Carte Verte**, profitez de produits durables moins chers

content/landing/blocs/03/title.mdx

@@ -1,14 +1,20 @@
 ---
 type: alternated
-images:
-  - src: /img/bloc03-1.svg
-    alt: Placeholder
-  - src: /img/bloc03-2.svg
-    alt: Placeholder
-  - src: /img/bloc03-3.svg
-    alt: Placeholder
-    mobile:
-      size: md
+cards:
+  - title: Étape 1
+    image:
+      src: /img/bloc03-1.svg
+      alt: Placeholder
+  - title: Étape 2
+    image:
+      src: /img/bloc03-2.svg
+      alt: Placeholder
+  - title: Étape 3
+    image:
+      src: /img/bloc03-3.svg
+      alt: Placeholder
+      mobile:
+        size: medium
 cta:
   source: comment-sinscrire
   title: Je m'inscris à Carte Verte

docs/content.md

@@ -28,7 +28,7 @@ Chaque bloc doit être dans un dossier numéroté. Le numéro du dossier est uti
 
 Il existe 3 types de blocs.
 - `single-image`: bloc avec une seule image
-- `alternated`: bloc avec des images alternées sur desktop et en colonne sur mobile
+- `alternated`: bloc avec des images alternées sur desktop et en colonne sur mobile, avec des cards (dsfr)
 - `text-only`: bloc avec du texte uniquement
 
 #### Single image
@@ -41,7 +41,7 @@ Un bloc `single-image` est découpé en 2 fichiers, `bloc.mdx` et `title.mdx`. L
 - `image.alt`: texte alternatif de l'image (pour l'accessibilité)
 - `image.position`: position de l'image. Soit `left` soit `right`. (`left` par défaut)
 - `image.mobile`: les propriétés de l'image sur mobile
-- `image.mobile.size`: taille d'affichage de l'image sur mobile. Soit `sm`, `md`, `lg`. (`md` par défaut)
+- `image.mobile.size`: taille d'affichage de l'image sur mobile. Soit `small`, `medium`, `large`. (`medium` par défaut)
 - `cta`: les propriétés du CTA
 - `cta.source`: Source utilisée comme propriété Matomo lors du clic
 - `cta.href`: url de la page de destination (form par exemple). Si vide, l'url par défaut est utilisée (fichier config.ts).
@@ -54,11 +54,14 @@ Un maximum de 12 blocs est autorisé.
 
 **Métadonnées**
 - `type`: doit être `alternated`
-- `images`: un tableau de propriétés d'images
-    - `src`: url de l'image. Soit une url, soit le nom d'un fichier situé dans le dossier `public/`
-    - `alt`: texte alternatif de l'image (pour l'accessibilité)
-    - `mobile`: les propriétés de l'image sur mobile
-    - `mobile.size`: taille d'affichage de l'image sur mobile. Soit `sm`, `md`, `lg`. (`md` par défaut)
+- `cards`: un tableau de propriétés des cards
+    - `title`: titre de la card
+    - `image`: les propriétés de l'image
+    - `image.src`: url de l'image. Soit une url, soit le nom d'un fichier situé dans le dossier `public/`
+    - `image.alt`: texte alternatif de l'image (pour l'accessibilité)
+    - `image.position`: position de l'image. Soit `left` soit `right`. (`left` par défaut)
+    - `image.mobile`: les propriétés de l'image sur mobile
+    - `image.mobile.size`: taille d'affichage de l'image sur mobile. Soit `small`, `medium`, `large`. (`medium` par défaut)
 - `cta`: les propriétés du CTA
 - `cta.source`: Source utilisée comme propriété Matomo lors du clic
 - `cta.href`: url de la page de destination (form par exemple). Si vide, l'url par défaut est utilisée (fichier config.ts).

global.d.ts

@@ -2,24 +2,27 @@
 interface CarteVerteMDXImage {
   readonly alt: string;
   readonly mobile?: {
-    readonly size?: "lg" | "md" | "sm";
+    readonly size?: "large" | "medium" | "small";
   };
   readonly src: string;
 }
 
 declare type CarteVerteMDXLandingMetadata = CarteVerteHeroMDXMetadata &
   (
+    | {
+        cards: Array<{
+          readonly image: CarteVerteMDXImage;
+          readonly title?: string;
+        }>;
+        type: "alternated";
+      }
     | {
         image: CarteVerteMDXImage & {
           /** @default "left" */
           position?: "left" | "right";
         };
         type: "single-image";
       }
-    | {
-        images: CarteVerteMDXImage[];
-        type: "alternated";
-      }
     | {
         type: "text-only";
       }

src/app/_landing/blocs/alternated.tsx

@@ -1,17 +1,18 @@
-import Image from "next/image";
-import { Fragment, type ReactNode } from "react";
+import Card from "@codegouvfr/react-dsfr/Card";
+import { Fragment } from "react";
 
 import { CTA } from "@/app/CTA";
 import { Container, Grid, GridCol, type GridColProps } from "@/dsfr";
 
-import { getGridImageOffset } from "./helper";
 import { type MDXBlocProps } from "./type";
 
+// based on 12 columns grid
+const colSizeMap: Array<GridColProps["base"]> = [6, 5, 4, 3, 2, 2, 1, 1, 1, 1, 1, 1];
+
 export const LandingAlternatedBloc = async ({
   metadata,
   id,
   titleComponent: TitleComponent,
-  mobile,
 }: MDXBlocProps & { mobile?: boolean }) => {
   if (metadata.type !== "alternated") {
     throw new Error("AlternatedBloc cannot be used with metadata.type !== alternated");
@@ -20,67 +21,29 @@ export const LandingAlternatedBloc = async ({
   // import(`@__content/landing/blocs/${id}/bloc_01.mdx`),
   const contents = (
     (await Promise.all(
-      metadata.images.map(
+      metadata.cards.map(
         (_, index) => import(`@__content/landing/blocs/${id}/bloc_${index < 9 ? "0" : ""}${index + 1}.mdx`),
       ),
     )) as Array<typeof import("*.mdx")>
-  ).map(({ default: Content }, index) => <Content key={`bloc_${index}`} />);
-
-  // first: <Image className="!relative" src={metadata.images.first.src} alt={metadata.images.first.alt} fill />,
-  const subProps = {
-    contents,
-    images: metadata.images.map(({ src, alt }) => <Image key={src} className="!relative" src={src} alt={alt} fill />),
-    title: <TitleComponent />,
-    metadata,
-  };
-
-  return mobile ? <LandingAlternatedBlocsMobile {...subProps} /> : <LandingAlternatedBlocsDesktop {...subProps} />;
-};
-
-interface SubProps {
-  contents: ReactNode[];
-  images: ReactNode[];
-  metadata: Extract<MDXBlocProps["metadata"], { type: "alternated" }>;
-  title: ReactNode;
-}
+  ).map(({ default: Content }, index) => <Content key={`bloc_${index}`} components={{ p: Fragment }} />);
 
-const LandingAlternatedBlocsMobile = ({ contents, title, images, metadata }: SubProps) => (
-  <Container className="md:hidden">
-    <Grid haveGutters>
-      <GridCol>{title}</GridCol>
-      {images.map((image, index) => (
-        <Fragment key={index}>
-          <GridCol {...getGridImageOffset(metadata.images[index].mobile?.size)}>{image}</GridCol>
-          <GridCol>{contents[index]}</GridCol>
-        </Fragment>
-      ))}
-    </Grid>
-    {metadata.cta && (
-      <CTA source={metadata.cta.source} title={metadata.cta.title} href={metadata.cta.href} asGroup>
-        {metadata.cta.title}
-      </CTA>
-    )}
-  </Container>
-);
-
-// based on 12 columns grid
-const colSizeMap: Array<GridColProps["base"]> = [6, 5, 4, 3, 2, 2, 1, 1, 1, 1, 1, 1];
-
-const LandingAlternatedBlocsDesktop = ({ contents, title, images, metadata }: SubProps) => {
-  const base = colSizeMap[metadata.images.length - 1];
+  const md = colSizeMap[metadata.cards.length - 1];
   return (
-    <Container className="hidden md:flex">
+    <Container>
       <Grid haveGutters align="center">
-        <GridCol>{title}</GridCol>
-        {images.map((image, index) => (
-          <GridCol key={index} base={base}>
-            {image}
-          </GridCol>
-        ))}
-        <GridCol p="0" m="0"></GridCol>
+        <GridCol>
+          <TitleComponent />
+        </GridCol>
         {contents.map((content, index) => (
-          <GridCol key={index} base={base}>
-            {content}
+          <GridCol key={index} md={md}>
+            <Card
+              shadow
+              title={metadata.cards[index].title}
+              imageUrl={metadata.cards[index].image.src}
+              imageAlt={metadata.cards[index].image.alt}
+              desc={content}
+              size="large"
+            />
           </GridCol>
         ))}
         {metadata.cta && (

src/app/_landing/blocs/helper.ts

@@ -3,13 +3,13 @@ import { type ColsNumberType } from "@/dsfr";
 const BASE = 12;
 type ImageSize = NonNullable<NonNullable<CarteVerteMDXImage["mobile"]>["size"]>;
 const OFFSETS: Record<ImageSize, ColsNumberType> = {
-  lg: 0 as ColsNumberType,
-  md: 2,
-  sm: 4,
+  large: 0 as ColsNumberType,
+  medium: 2,
+  small: 4,
 };
 
-export const getGridImageOffset = (size = "md" as ImageSize) => {
-  const offset = OFFSETS[size] ?? OFFSETS.md;
+export const getGridImageOffset = (size = "medium" as ImageSize) => {
+  const offset = OFFSETS[size] ?? OFFSETS.medium;
   return {
     base: (BASE - offset) as ColsNumberType,
     offset: (offset / 2) as ColsNumberType,

src/app/page.tsx

@@ -58,12 +58,7 @@ const Home = async () => {
                   </Fragment>
                 );
               case "alternated":
-                return (
-                  <Fragment key={id}>
-                    <LandingAlternatedBloc id={id} metadata={metadata} titleComponent={titleComponent} />
-                    <LandingAlternatedBloc mobile id={id} metadata={metadata} titleComponent={titleComponent} />
-                  </Fragment>
-                );
+                return <LandingAlternatedBloc key={id} id={id} metadata={metadata} titleComponent={titleComponent} />;
               case "text-only":
                 return <LandingTextOnlyBloc key={id} id={id} metadata={metadata} titleComponent={titleComponent} />;
               default: