From 6e271d712e38b1bf8676414e99a34dd167c5988f Mon Sep 17 00:00:00 2001
From: Nicolas KOKLA <n.kokla@koaji.fr>
Date: Mon, 5 Aug 2024 14:44:08 +0100
Subject: [PATCH] [Home-Page] Add Section BAL

---
 src/app/page.tsx | 70 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a24e11ab5..e82698d78 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,10 @@
 'use client'
 
+import { Card } from '@codegouvfr/react-dsfr/Card'
+import { Button } from '@codegouvfr/react-dsfr/Button'
+import styled from 'styled-components'
+
+import Section from '@/components/Section'
 import Notices from '@/components/Notices'
 import SectionHero from '@/components/SectionHero'
 import SectionTilesList from '@/components/SectionTilesList'
@@ -12,6 +17,17 @@ import dataActions from '@/data/sample-actions.json'
 import dataQuotes from '@/data/sample-quotes.json'
 import theme from '@/theme'
 
+const CardContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+
+  & > div {
+    flex: 1 1 300px;
+  }
+`
+
 export default function Home() {
   return (
     <>
@@ -74,6 +90,60 @@ export default function Home() {
         isSmallTiles
         withoutLinkIcon
       />
+
+      <Section title="Devenir partenaire" theme="primary">
+        <CardContainer>
+          <div>
+            <Card
+              title="Adopter la charte"
+              titleAs="h3"
+              desc={(
+                <>La Charte de la Base Adresse Locale rassemble les organismes qui privilégient
+                  le format Base Adresse Locale et s’engagent en matière de gouvernance. L’enjeu pour la
+                  commune, autorité responsable de l’adresse, est d’identifier un référent en capacité de
+                  l’assister au besoin.
+                </>
+              )}
+              footer={(
+                <Button
+                  iconId="fr-icon-newspaper-line"
+                  linkProps={{
+                    href: '#',
+                  }}
+                  priority="secondary"
+                  size="small"
+                >
+                  Découvrir la charte
+                </Button>
+              )}
+            />
+          </div>
+          <div>
+            <Card
+              title="Les différents modes de publication"
+              titleAs="h3"
+              desc={(
+                <>Cinq méthodes permettent de publier une Base Adresse Locale dans la Base Adresse
+                  Nationale. L’éditeur Mes Adresses permet à la fois de mettre à jour et de publier
+                  ses adresses.
+                </>
+              )}
+              footer={(
+                <Button
+                  iconId="fr-icon-book-2-line"
+                  linkProps={{
+                    href: '#',
+                  }}
+                  priority="secondary"
+                  size="small"
+                >
+                  Accéder à la documentation
+                </Button>
+              )}
+            />
+          </div>
+        </CardContainer>
+      </Section>
     </>
   )
 }