Gfay feat page ressource bis

src/app/documentation-bal/page.styles.ts

@@ -0,0 +1,161 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const StyledPage = styled.div`
+.on-this-page {
+    display: flex;
+    align-items: center;
+    > div {
+        flex: 1;
+         padding: 2rem;
+
+    }
+    .text-wrapper {
+        ul {
+            margin: 2rem 0;
+            padding: 2rem 0;
+            border: 1px solid ${({ theme }) => theme.colors.grey.border};
+            border-left: none;
+            border-right: none;
+        }
+
+        .logo-wrapper {
+            display: flex;
+            justify-content: space-around ;
+
+            > .ban-logo {
+                max-width: 180px;
+                max-height: 80px;
+            }
+            > .bal-logo {
+                max-width: 140px;
+                max-height: 80px;
+            }
+        }
+    }
+}
+
+.stay-tuned {
+    padding-bottom: 0 !important;
+    > div {
+        display: flex;
+
+        > .text-wrapper {
+            text-align: right;
+            margin-right: 4rem;
+
+            > i::before {
+                height: 2.5rem;
+                width: 2.5rem;
+                margin-bottom: 1rem;
+            }
+        }
+
+        > .illustration-wrapper {
+            height: 310px;
+            width: 470px;
+            flex-shrink: 0;
+            position: relative;
+
+            > img {
+                position: absolute;
+                bottom: -38px;
+            }
+        }
+    }
+
+}
+
+.guide-section {
+    > div {
+        display: flex;
+        align-items: center;
+
+        > .text-wrapper {
+            flex-basis: 60%;
+
+            > button {
+                margin: 2rem 0;
+            }
+            > div {
+                margin-bottom: 2rem;
+                > h2 {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.1rem;
+                }
+                > legend {
+                    font-size: 0.8rem;
+                    color: ${({ theme }) => theme.colors.grey.main};
+
+                }
+            }
+            > .buttons-wrapper {
+                display: flex;
+                align-items: center;
+                > a {
+                    margin-right: 1rem;
+                }
+            }
+        }
+
+        > .illustration-wrapper {
+            padding: 2rem;
+            flex-basis: 40%;
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
+
+@media screen and (max-width: ${props => props.theme.breakpoints.md}) {
+    .illustration-wrapper {
+        display: none;
+    }
+
+    .on-this-page {
+        .text-wrapper {
+            padding: 0;
+
+            .logo-wrapper {
+                > .ban-logo {
+                    max-width: 90px;
+                    max-height: 40px;
+                }
+                > .bal-logo {
+                    max-width: 70px;
+                    max-height: 40px;
+                }
+            }
+        }
+    }
+
+    .stay-tuned {
+        padding-bottom: 1.5rem !important;
+        > div {
+            display: flex;
+
+            > .text-wrapper {
+                text-align: initial;
+                margin-right: 0;
+            }
+        }
+    }
+
+    .guide-section {
+        > div {
+            flex-direction: column;
+
+            > .text-wrapper {
+                flex-basis: 100%;
+                order: 1;
+            }
+
+            > .illustration-wrapper {
+                flex-basis: 100%;
+                order: 2;
+            }
+        }
+    }
+}
+`

src/app/documentation-bal/page.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import ResponsiveImage from '@/components/ResponsiveImage'
+import Section from '@/components/Section'
+import { StyledPage } from './page.styles'
+import SectionTilesList from '@/components/SectionTilesList'
+import Button from '@codegouvfr/react-dsfr/Button'
+import { useContext } from 'react'
+import BALWidgetContext from '@/contexts/BALWidget.context'
+import DownloadGuideCard from '@/components/DownloadGuideCard'
+
+const ressourcesData = [
+  {
+    title: 'La documentation',
+    description: 'Cette documentation vous fournit les informations relatives à la Base Adresse Nationale, au format Base Adresse Locale, ainsi que des FAQ et conseils pratiques.',
+    picto: '/documentation-bal/book.png',
+    link: {
+      href: 'https://doc.adresse.data.gouv.fr/',
+      target: '_self',
+    },
+  },
+  {
+    title: 'Les guides',
+    description: 'Pour vous accompagner dans la gestion des adresses de votre commune, vous trouverez sur cette page des guides régulièrement mis à jour.',
+    picto: '/documentation-bal/document-download.png',
+    link: {
+      href: '#guide-mes-adresses',
+    },
+  },
+  {
+    title: 'La FAQ',
+    description: 'La F.A.Q répond aux questions les plus courantes, posées lors des webinaires par les acteurs de la commune.',
+    picto: '/documentation-bal/community.png',
+    link: {
+      href: 'https://adresse-data-gouv-fr.gitbook.io/faq',
+      target: '_self',
+    },
+  },
+]
+
+export default function RessourcesPage() {
+  const { open, navigate } = useContext(BALWidgetContext)
+
+  const handleOpenContactForm = () => {
+    navigate('/commune/contact')
+    open()
+  }
+
+  return (
+    <StyledPage>
+      <Section pageTitle="Documentation Base Adresse Locale">
+        <div className="on-this-page">
+          <div className="illustration-wrapper">
+            <ResponsiveImage src="/documentation-bal/ressources.png" alt="Illustration ressources et documentations" />
+          </div>
+          <div className="text-wrapper">
+            <div>
+              <b>Pour vous accompagner dans la gestion des adresses de votre commune,</b> vous trouverez sur cette page:
+            </div>
+            <ul>
+              <li>
+                <b>Des guides</b>
+                <div>Régulièrement mis à jour.</div>
+              </li>
+              <li>
+                <b>La documentation</b>
+                <div>Présentant la Base Adresse Nationale, les formats d’adresse ainsi que les services et outils accessibles sur le site.</div>
+              </li>
+              <li>
+                <b>Une FAQ</b>
+                <div>Répondant aux questions les plus courantes.</div>
+              </li>
+            </ul>
+            <div className="logo-wrapper">
+              <ResponsiveImage src="/documentation-bal/logo-ban.png" alt="Logo BAN" className="ban-logo" />
+              <ResponsiveImage src="/documentation-bal/logo-bal.png" alt="Logo BAL" className="bal-logo" />
+            </div>
+          </div>
+        </div>
+      </Section>
+      <SectionTilesList
+        data={ressourcesData}
+        id="ressources-adressage"
+        theme="primary"
+      />
+      <Section className="stay-tuned">
+        <div>
+          <div className="text-wrapper">
+            <i className="ri-information-line" />
+            <h2>Restez informés </h2>
+            <p>
+              Pour être tenu informé des mises à jour ou suggérer des évolutions, n’hésitez-pas à nous contacter.
+            </p>
+            <Button onClick={handleOpenContactForm}>
+              Contactez nous
+            </Button>
+          </div>
+          <div className="illustration-wrapper">
+            <ResponsiveImage src="/documentation-bal/questions.png" alt="Illustration restez informés" style={{ width: 470 }} />
+          </div>
+        </div>
+      </Section>
+      <Section theme="primary" id="guide-mes-adresses" className="guide-section">
+        <div>
+          <div className="text-wrapper">
+            <div>
+              <h2>
+                Le guide de &quot;Mes Adresses&quot;
+              </h2>
+              <legend>
+                Version 8.2 - 01/06/2023
+              </legend>
+            </div>
+            <p>
+              &quot;Mes Adresses&quot; est un outil en ligne qui vous permet de gérer simplement vos adresses, de la constitution d’une Base Adresse Locale à sa mise à jour. Il est accessible sans compétences techniques et dispose d’un tutoriel embarqué.
+            </p>
+            <div className="buttons-wrapper">
+              <Button linkProps={{ href: 'https://guide.mes-adresses.data.gouv.fr/' }}>Consulter en ligne</Button>
+              <Button iconId="fr-icon-download-line" iconPosition="right" onClick={() => window.open('/documentation-bal/guide-mes-adresses-v8.2.pdf', '_blank')}>Télécharger le guide</Button>
+            </div>
+          </div>
+          <div className="illustration-wrapper">
+            <DownloadGuideCard imgProps={{ src: '/documentation-bal/guide-mes-adresses.png', alt: 'Illustration guide Mes Adresses', style: { width: 220, height: 300 } }} downloadlink="/documentation-bal/guide-bonnes-pratiques-v4.1.pdf" />
+          </div>
+        </div>
+      </Section>
+      <Section className="guide-section">
+        <div>
+          <div className="illustration-wrapper">
+            <DownloadGuideCard imgProps={{ src: '/documentation-bal/guide-bonnes-pratiques.png', alt: 'Illustration guide bonnes pratiques', style: { width: 220, height: 300 } }} downloadlink="/documentation-bal/guide-mes-adresses-v8.2.pdf" />
+          </div>
+          <div className="text-wrapper">
+            <div>
+              <h2>
+                Le guide des bonnes pratiques
+              </h2>
+              <b>à l’usage des communes et de leurs partenaires</b>
+              <legend>
+                Version 4.1 - 08/09/2023
+              </legend>
+            </div>
+            <p>
+              Les communes sont responsables de leurs adresses. Ce guide passe en revue les bonnes pratiques pour nommer, numéroter les voies et diffuser l’information en parfaite conformité avec les obligations légales et rien que les obligations légales.
+            </p>
+            <div className="buttons-wrapper">
+              <Button linkProps={{ href: 'https://guide-bonnes-pratiques.adresse.data.gouv.fr' }}>Consulter en ligne</Button>
+              <Button iconId="fr-icon-download-line" iconPosition="right" onClick={() => window.open('/documentation-bal/guide-bonnes-pratiques-v4.1.pdf', '_blank')}>
+                Télécharger le guide
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Section>
+    </StyledPage>
+  )
+}

src/components/DownloadGuideCard/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useState } from 'react'
+import styled from 'styled-components'
+import ResponsiveImage, { ResponsiveImageProps } from '../ResponsiveImage'
+
+export interface DownloadGuideCardProps {
+  imgProps: ResponsiveImageProps
+  downloadlink: string
+  onDownloadStart?: () => void
+}
+
+const StyledWrapper = styled.div`
+    position: relative;
+    display: flex;
+    cursor: pointer;
+
+    > .hover-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: white;
+        font-size: 2rem;
+    }
+`
+
+export default function DownloadGuideCard({
+  imgProps,
+  downloadlink,
+  onDownloadStart,
+}: DownloadGuideCardProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const handleClick = () => {
+    if (onDownloadStart) {
+      onDownloadStart()
+    }
+    window.open(downloadlink, '_blank')
+  }
+
+  return (
+    <StyledWrapper onClick={handleClick} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => { setIsHovered(false) }}>
+      {isHovered && <div className="hover-background"><span className="fr-icon-download-line" /></div>}
+      <ResponsiveImage {...imgProps} />
+    </StyledWrapper>
+  )
+}

src/components/ResponsiveImage/index.tsx

@@ -4,15 +4,17 @@ export interface ResponsiveImageProps {
   src: string
   alt: string
   style?: React.CSSProperties
+  className?: string
 }
 
-export default function ResponsiveImage({ src, alt, style }: ResponsiveImageProps) {
+export default function ResponsiveImage({ src, alt, style, className }: ResponsiveImageProps) {
   return (
     <Image
       src={src}
       alt={alt}
       width={0}
       height={0}
+      className={className}
       sizes="100vw"
       style={{ width: '100%', height: 'auto', ...style }}
     />