[Home-Page] Add Section BAL

src/app/page.styles.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const CardContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+
+  & > div {
+    flex: 1 1 300px;
+  }
+`

src/app/page.tsx

@@ -1,3 +1,7 @@
+import { Card } from '@codegouvfr/react-dsfr/Card'
+import { Button } from '@codegouvfr/react-dsfr/Button'
+
+import Section from '@/components/Section'
 import Notices from '@/components/Notices'
 import SectionHero from '@/components/SectionHero'
 import SectionTilesList from '@/components/SectionTilesList'
@@ -11,6 +15,8 @@ import dataActions from '@/data/sample-actions.json'
 import dataQuotes from '@/data/sample-quotes.json'
 import theme from '@/theme'
 
+import { CardContainer } from './page.styles'
+
 export default async function Home() {
   const stats = await getStats()
 
@@ -77,6 +83,60 @@ export default async 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>
     </>
   )
 }