feat: custom card

src/app/_landing/raisons-zone.tsx

@@ -1,5 +1,6 @@
-import Card from "@codegouvfr/react-dsfr/Card";
+import { fr } from "@codegouvfr/react-dsfr";
 
+import { Card } from "@/components/Card";
 import { Box, Container, Grid, GridCol } from "@/dsfr";
 import { H2 } from "@/dsfr/base/typography";
 
@@ -12,38 +13,47 @@ export const RaisonsZone = () => {
         <H2 mt="10w">On a tous une bonne raison</H2>
 
         <Grid haveGutters>
-          <GridCol base={4}>
+          <GridCol base={9}>
             <Card
               border
               shadow
               desc="C’est le bon moment pour vous renseigner sur les solutions durables, spécifiquement adaptées à votre immeuble."
               imageAlt="texte alternatif de l’image"
+              imageUrl="/img/chaudiere-cassee.svg"
+              horizontal
               size="small"
               title="Chaudière en panne&nbsp;?"
               titleAs="h4"
+              className={fr.cx("fr-card--horizontal-tier")}
             />
           </GridCol>
+        </Grid>
 
-          <GridCol base={4}>
+        <Grid className={fr.cx("fr-mt-4w")}>
+          <GridCol base={9} offset={2}>
             <Card
               border
               shadow
               desc="Les solutions “renouvelables” sont souvent moins gourmandes, et donc moins exposées aux augmentations de prix."
               imageAlt="texte alternatif de l’image"
-              // imageUrl="/img/chaudiere-cassee.svg"
-              size="small"
+              imageUrl="/img/monnaie.svg"
+              horizontal
+              size="large"
               title="Facture trop élevée&nbsp;?"
               titleAs="h4"
             />
           </GridCol>
+        </Grid>
 
-          <GridCol base={4}>
+        <Grid className={fr.cx("fr-mt-4w")}>
+          <GridCol base={9} offset={4}>
             <Card
               border
               shadow
               desc="Réseau de chaleur ? pompe à chaleur ? solaire thermique ? biomasse ? Késako ? Les solutions sont nombreuses, laissez nous vous guider pas à pas."
               imageAlt="texte alternatif de l’image"
-              // imageUrl="/img/chaudiere-cassee.svg"
+              imageUrl="/img/soleil.svg"
+              horizontal
               size="small"
               title="Envie de passer au vert&nbsp;?"
               titleAs="h4"

src/components/Card.module.scss

@@ -0,0 +1,13 @@
+.card {
+    border: 2px solid #274430;
+    padding: 16px 0;
+    border-radius: 16px;
+    box-shadow: 4px 4px 0px 0px #183D2F;
+
+    & img {
+        object-fit: unset !important;
+        max-width: 100px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

src/components/Card.tsx

@@ -0,0 +1,17 @@
+import CardDsfr from "@codegouvfr/react-dsfr/Card";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
+
+import styles from "./Card.module.scss";
+
+type Props = Parameters<typeof CardDsfr>[0];
+
+/**
+ * Custom button for Pacoupa
+ */
+export const Card = (props: Props) => {
+  return (
+    <>
+      <CardDsfr {...props} className={cx(styles.card, props.className)} />
+    </>
+  );
+};