[Home-Page] Add Quotes section

src/app/page.tsx

@@ -1,15 +1,19 @@
-'use client'
-
 import Notices from '@/components/Notices'
 import SectionHero from '@/components/SectionHero'
 import SectionTilesList from '@/components/SectionTilesList'
+import SectionQuotes from '@/components/SectionQuotes'
+import { getStats } from '@/lib/api-ban'
 
 import dataNotices from '@/data/sample-notices.json'
 import dataBAN from '@/data/sample-ban-info.json'
 import dataBAL from '@/data/sample-bal-info.json'
 import dataActions from '@/data/sample-actions.json'
+import dataQuotes from '@/data/sample-quotes.json'
+import theme from '@/theme'
+
+export default async function Home() {
+  const stats = await getStats()
 
-export default function Home() {
   return (
     <>
       <Notices {...dataNotices} />
@@ -54,6 +58,19 @@ export default function Home() {
         title="Constituez la base adresse locale de votre commune !"
       />
 
+      {stats && dataQuotes?.length && (
+        <SectionQuotes
+          title={(
+            <h2>
+              Déjà <strong style={{ color: theme.colors['primary'].main }}>{new Intl.NumberFormat('fr-FR').format(stats.bal.nbCommunesCouvertes)} communes</strong>{' '}
+              ont mis à jour leurs bases d’adresses
+            </h2>
+          )}
+          data={dataQuotes}
+          theme="secondary"
+        />
+      )}
+
       <SectionTilesList
         data={dataActions}
         title="Constituez la base adresse locale de votre commune !"

src/components/SectionQuotes/SectionQuotes.stories.tsx

@@ -0,0 +1,49 @@
+import type { StoryObj } from '@storybook/react'
+
+import appTheme from '@/theme'
+import dataQuotes from '@/data/sample-quotes.json'
+
+import SectionQuotes from './SectionQuotes'
+
+const meta = {
+  title: 'Layout-Components/SectionQuotes',
+  component: SectionQuotes,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Titre de la section',
+    },
+    data: {
+      control: 'object',
+      description: 'Donnéees à afficher',
+    },
+    theme: {
+      control: 'radio',
+      options: [undefined, ...Object.keys(appTheme.colors)],
+      description: 'Thème graphique de la section. Cette propriété déterminera notamment la couleur de fond',
+    },
+  },
+  args: {
+    title: (
+      <h2>
+        Déjà <strong style={{ color: appTheme.colors['primary'].main }}>12 667 communes</strong>{' '}
+        ont mis à jour leurs bases d’adresses
+      </h2>
+    ),
+    data: dataQuotes,
+    theme: undefined,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    theme: undefined,
+  },
+}

src/components/SectionQuotes/SectionQuotes.styles.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const QuoteWrapper = styled.div`
+  gap: 1rem;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 1024px) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 1rem), 1fr));
+    grid-gap: 1rem;
+  }
+`
+
+export const QuoteWrapperFooter = styled.footer`
+  padding: 3rem 0 1rem;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+  }
+`

src/components/SectionQuotes/SectionQuotes.tsx

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { Quote } from '@codegouvfr/react-dsfr/Quote'
+
+import Section from '@/components/Section'
+import type { ColorTheme } from '@/theme'
+
+import { QuoteWrapper, QuoteWrapperFooter } from './SectionQuotes.styles'
+
+interface SectionQuotesProps {
+  title: React.ReactNode
+  data: {
+    author: string
+    text: string
+    url: string
+  }[]
+  theme?: ColorTheme
+}
+
+function SectionQuotes({ title, data, theme }: SectionQuotesProps) {
+  return (
+    <Section theme={theme}>
+      {title && typeof title === 'string' ? <h2>{title}</h2> : title}
+      <QuoteWrapper>
+        {data.map(({ author, text, url }) => (
+          <Quote
+            key={url}
+            author={author}
+            text={text}
+            source={<Link href={url}>Consulter l&apos;article entier</Link>}
+          />
+        ))}
+      </QuoteWrapper>
+      <QuoteWrapperFooter>
+        <a className="fr-link fr-icon-chat-3-line fr-link--icon-right" href="#">Découvrez tous les témoignages</a>
+        <a className="fr-link fr-icon-france-line fr-link--icon-right" href="#">Quelles communes ont mis à jour leur base ? </a>
+      </QuoteWrapperFooter>
+    </Section>
+  )
+}
+
+export default SectionQuotes

src/components/SectionQuotes/index.ts

@@ -0,0 +1 @@
+export { default } from './SectionQuotes'

src/data/sample-quotes.json

@@ -0,0 +1,12 @@
+[
+  {
+    "author": "Marie Jucanzac, maire de Vitrinny-sur-Saône",
+    "text": "C’était beaucoup plus rapide que ce que je pensais. En quelques sessions de travail, avec l’aide de ma stagiaire, nous avons fait un beau plan d’adressage.",
+    "url": "https://adresse.data.gouv.fr/blog/les-bases-adresses-locales-pivot-de-la-transition-numerique-des-communes"
+  },
+  {
+    "author": "Michel, maire de Ploubalai",
+    "text": "J’en ai profité pour remettre à plat toutes nos adresses. Maintenant, tout est cohérent et, surtout, aussi disponible en breton !",
+    "url": "https://adresse.data.gouv.fr/blog/lassociation-des-maires-du-morbihan-mobilise-les-communes-sur-leurs-adresses"
+  }
+]