{title}
diff --git a/src/components/cards/ToolCards.module.css b/src/components/cards/ToolCards.module.css
index 2e4858c34..05d3fee26 100644
--- a/src/components/cards/ToolCards.module.css
+++ b/src/components/cards/ToolCards.module.css
@@ -1,8 +1,5 @@
.container {
display: flex;
+ flex-wrap: wrap;
gap: 0.75rem;
-
- @media screen and (max-width: 48rem) {
- flex-wrap: wrap;
- }
}
diff --git a/src/components/cards/tools.ts b/src/components/cards/tools.ts
new file mode 100644
index 000000000..8915fd3c7
--- /dev/null
+++ b/src/components/cards/tools.ts
@@ -0,0 +1,75 @@
+export const tools = [
+ {
+ slug: 'comparateur',
+ title: 'Comparateur',
+ description: 'Le bon outil pour obtenir les bons ordres de grandeur',
+ linkLabel: 'Visualiser',
+ },
+ {
+ slug: 'transport',
+ title: 'Transports',
+ description: 'Calculer l’impact carbone des moyens de transport',
+ linkLabel: 'Essayer',
+ },
+ {
+ slug: 'chauffage',
+ title: 'Chauffage',
+ description: 'Situer l’empreinte carbone des modes de chauffage',
+ linkLabel: 'Calculer',
+ },
+ {
+ slug: 'mobilier',
+ title: 'Mobilier',
+ description: 'Découvrir l’impact carbone des meubles',
+ linkLabel: 'Visualiser',
+ },
+ {
+ slug: 'repas',
+ title: 'Repas',
+ description: 'Pour aborder l’impact carbone de l’alimentation',
+ linkLabel: 'Découvrir',
+ },
+ {
+ slug: 'electromenager',
+ title: 'Électroménager',
+ description: 'Comparer l’impact carbone des appareils ménagers',
+ linkLabel: 'Comparer',
+ },
+ {
+ slug: 'fruitsetlegumes',
+ title: 'Fruits et légumes',
+ description: 'Aliquam eu libero malesuada, consequat odio ',
+ linkLabel: 'Visualiser',
+ },
+ {
+ slug: 'habillement',
+ title: 'Habillement',
+ description: 'Aliquam eu libero malesuada, consequat odio ',
+ linkLabel: 'Découvrir',
+ },
+ {
+ slug: 'numerique',
+ title: 'Numérique',
+ description: 'Aliquam eu libero malesuada, consequat odio ',
+ linkLabel: 'Comparer',
+ },
+ {
+ slug: 'boisson',
+ title: 'Boissons',
+ description: 'Aliquam eu libero malesuada, consequat odio ',
+ linkLabel: 'Comparer',
+ },
+ {
+ slug: 'usagenumerique',
+ title: 'Usage numérique',
+ description: 'Aliquam eu libero malesuada, consequat odio ',
+ linkLabel: 'Visualiser',
+ },
+
+ {
+ slug: 'livraison',
+ title: 'Livraison',
+ description: 'Aliquam eu libero malesuada, consequat odio ',
+ linkLabel: 'Découvrir',
+ },
+]
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index fea4ecbc6..7f08356aa 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import Link from 'components/base/buttons/Link'
import ToolCard from 'components/cards/ToolCard'
import ToolCards from 'components/cards/ToolCards'
+import { tools } from 'components/cards/tools'
import Block from 'components/layout/web/Block'
import Email from './Email'
import Equivalents from './Equivalents'
@@ -14,27 +15,9 @@ const Home = () => {
Les bons outils pour communiquer sur l’impact carbone
-
-
-
+ {tools.slice(0, 3).map((tool) => (
+
+ ))}
Voir tous les outils
@@ -71,10 +54,9 @@ const Home = () => {
description="Vous souhaitez mobiliser votre communauté autour de l'empreinte carbone ?">
diff --git a/src/components/layout/web/Block.module.css b/src/components/layout/web/Block.module.css
index 9add36658..0b8d2dba1 100644
--- a/src/components/layout/web/Block.module.css
+++ b/src/components/layout/web/Block.module.css
@@ -1,11 +1,6 @@
.block {
margin: auto;
padding-top: 4rem;
- padding-bottom: 2rem;
-
- h2 {
- margin-bottom: 0;
- }
}
.description {
@@ -18,7 +13,6 @@
display: flex;
justify-content: space-between;
align-items: flex-end;
- margin-bottom: 2rem;
gap: 0.75rem;
@media screen and (max-width: 48rem) {
@@ -26,3 +20,8 @@
flex-direction: column;
}
}
+
+.children {
+ margin-top: 2rem;
+ padding-bottom: 2rem;
+}
diff --git a/src/components/layout/web/Block.tsx b/src/components/layout/web/Block.tsx
index d4003fa7f..750b20758 100644
--- a/src/components/layout/web/Block.tsx
+++ b/src/components/layout/web/Block.tsx
@@ -3,31 +3,43 @@ import React, { ReactNode } from 'react'
import Link from 'components/base/buttons/Link'
import styles from './Block.module.css'
+const getTitle = (title?: string, as?: 'h1') => {
+ if (!title) {
+ return null
+ }
+ if (as === 'h1') {
+ return
{title}
+ }
+ return
{title}
+}
+
const Block = ({
children,
title,
description,
link,
linkLabel,
+ as,
}: {
- children: ReactNode
+ children?: ReactNode
title?: string
description?: string
link?: string
linkLabel?: string
+ as?: 'h1'
}) => {
return (
{title && (
- {title &&
{title}
}
+ {getTitle(title, as)}
{description &&
{description}
}
{link &&
{linkLabel}}
)}
- {children}
+ {children &&
{children}
}
)
}
diff --git a/src/components/osezchanger/icons/arrow-right.tsx b/src/components/osezchanger/icons/arrow-right.tsx
index 32c232174..99cc2ec03 100644
--- a/src/components/osezchanger/icons/arrow-right.tsx
+++ b/src/components/osezchanger/icons/arrow-right.tsx
@@ -1,11 +1,11 @@
import React from 'react'
const Icon = () => (
-