feat: update page ressource

src/app/ressources-et-documentations/page.styles.ts → src/app/documentation-bal/page.styles.ts

@@ -7,7 +7,7 @@ export const StyledPage = styled.div`
     display: flex;
     align-items: center;
     > div {
-        flex: 1;       
+        flex: 1;
          padding: 2rem;
 
     }
@@ -23,6 +23,15 @@ export const StyledPage = styled.div`
         .logo-wrapper {
             display: flex;
             justify-content: space-around ;
+
+            > .ban-logo {
+                max-width: 180px;
+                max-height: 80px;
+            }
+            > .bal-logo {
+                max-width: 140px;
+                max-height: 80px;
+            }
         }
     }
 }
@@ -81,6 +90,13 @@ export const StyledPage = styled.div`
 
                 }
             }
+            > .buttons-wrapper {
+                display: flex;
+                align-items: center;
+                > a {
+                    margin-right: 1rem;
+                }
+            }
         }
 
         > .illustration-wrapper {
@@ -97,6 +113,23 @@ export const StyledPage = styled.div`
         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 {
@@ -108,5 +141,21 @@ export const StyledPage = styled.div`
             }
         }
     }
+
+    .guide-section {
+        > div {
+            flex-direction: column;
+
+            > .text-wrapper {
+                flex-basis: 100%;
+                order: 1;
+            }
+
+            > .illustration-wrapper {
+                flex-basis: 100%;
+                order: 2;
+            }
+        }
+    }
 }
 `

src/app/ressources-et-documentations/page.tsx → src/app/documentation-bal/page.tsx

@@ -1,50 +1,57 @@
+'use client'
+
 import ResponsiveImage from '@/components/ResponsiveImage'
 import Section from '@/components/Section'
 import { StyledPage } from './page.styles'
-import CardWrapper from '@/components/CardWrapper'
-import Card from '@codegouvfr/react-dsfr/Card'
 import SectionTilesList from '@/components/SectionTilesList'
 import Button from '@codegouvfr/react-dsfr/Button'
-import Alert from '@codegouvfr/react-dsfr/Alert'
-import Link from 'next/link'
+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: '/ressources-et-documentations/book.png',
+    picto: '/documentation-bal/book.png',
     link: {
-      href: '#',
+      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: '/ressources-et-documentations/document-download.png',
+    picto: '/documentation-bal/document-download.png',
     link: {
-      href: '#',
-      target: '_self',
+      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: '/ressources-et-documentations/community.png',
+    picto: '/documentation-bal/community.png',
     link: {
-      href: '#',
+      href: 'https://adresse-data-gouv-fr.gitbook.io/faq',
       target: '_self',
     },
   },
 ]
 
-export default async function RessourcesPage() {
+export default function RessourcesPage() {
+  const { open, navigate } = useContext(BALWidgetContext)
+
+  const handleOpenContactForm = () => {
+    navigate('/commune/contact')
+    open()
+  }
+
   return (
     <StyledPage>
-      <Section pageTitle="Ressources autour de l'adressage">
+      <Section pageTitle="Documentation Base Adresse Locale">
         <div className="on-this-page">
           <div className="illustration-wrapper">
-            <ResponsiveImage src="/ressources-et-documentations/ressources.png" alt="Illustration ressources et documentations" />
+            <ResponsiveImage src="/documentation-bal/ressources.png" alt="Illustration ressources et documentations" />
           </div>
           <div className="text-wrapper">
             <div>
@@ -65,8 +72,8 @@ export default async function RessourcesPage() {
               </li>
             </ul>
             <div className="logo-wrapper">
-              <ResponsiveImage src="/ressources-et-documentations/logo-ban.png" alt="Logo BAN" style={{ height: 80, width: 180 }} />
-              <ResponsiveImage src="/ressources-et-documentations/logo-bal.png" alt="Logo BAL" style={{ height: 80, width: 140 }} />
+              <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>
@@ -84,16 +91,16 @@ export default async function RessourcesPage() {
             <p>
               Pour être tenu informé des mises à jour ou suggérer des évolutions, n’hésitez-pas à nous contacter.
             </p>
-            <Button>
+            <Button onClick={handleOpenContactForm}>
               Contactez nous
             </Button>
           </div>
           <div className="illustration-wrapper">
-            <ResponsiveImage src="/ressources-et-documentations/questions.png" alt="Illustration restez informés" style={{ width: 470 }} />
+            <ResponsiveImage src="/documentation-bal/questions.png" alt="Illustration restez informés" style={{ width: 470 }} />
           </div>
         </div>
       </Section>
-      <Section className="guide-section">
+      <Section id="guide-mes-adresses" className="guide-section">
         <div>
           <div className="text-wrapper">
             <div>
@@ -107,23 +114,20 @@ export default async function RessourcesPage() {
             <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>
-            <Link href="#" target="_blank">Le Guide de Mes Adresses est disponible dans un format texte en ligne</Link>
-            <Button iconId="fr-icon-download-line">Télécharger le guide</Button>
-            <Alert
-              description="Si vous téléchargez la version PDF, pensez à vérifier que vous disposez de la dernière version en vigueur. Le type de version et les dates de mises à jour figurent à la fin des PDF."
-              severity="info"
-              title="Les guides sont régulièrement actualisés"
-            />
+            <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">
-            <ResponsiveImage src="/ressources-et-documentations/guide-mes-adresses.png" alt="Illustration guide Mes Adresses" style={{ width: 220, height: 300 }} />
+            <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 theme="grey" className="guide-section">
         <div>
           <div className="illustration-wrapper">
-            <ResponsiveImage src="/ressources-et-documentations/guide-mes-adresses.png" alt="Illustration guide Mes Adresses" style={{ width: 220, height: 300 }} />
+            <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>
@@ -138,13 +142,12 @@ export default async function RessourcesPage() {
             <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>
-            <Link href="#" target="_blank">Le Guide des bonnes pratiques est disponible dans un format texte en ligne</Link>
-            <Button iconId="fr-icon-download-line">Télécharger le guide</Button>
-            <Alert
-              description="Si vous téléchargez la version PDF, pensez à vérifier que vous disposez de la dernière version en vigueur. Le type de version et les dates de mises à jour figurent à la fin des PDF."
-              severity="info"
-              title="Les guides sont régulièrement actualisés"
-            />
+            <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>

src/components/DownloadGuideCard/index.tsx

@@ -0,0 +1,54 @@
+'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')
+  }
+
+  console.log('isHovered', isHovered)
+
+  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 }}
     />

src/layouts/Header.tsx

@@ -63,6 +63,10 @@ export const navEntries: MainNavigationProps.Item[] = [
         text: 'Consulter la page d’une commune',
         linkProps: { href: '/commune' },
       },
+      {
+        text: 'Documentation Base Adresse Locale',
+        linkProps: { href: '/documentation-bal' },
+      },
       {
         text: 'Application Mes adresses',
         linkProps: {