feat: page nous contacter (#1845)

* feat: page nous contacter

* review

src/app/nous-contacter/page.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import Section from '@/components/Section'
+import Button from '@codegouvfr/react-dsfr/Button'
+import styled from 'styled-components'
+
+const StyledWrapper = styled(Section)`
+  > section {
+    margin-bottom: 2rem;
+
+    h2 {
+      font-size: 1.5rem;
+    }
+
+    .osmose-buttons {
+      display: flex;
+      gap: 1rem;
+    }
+
+    a::after {
+      display: none;
+    }
+  }
+`
+
+export default function NousContacterPage() {
+  return (
+    <StyledWrapper pageTitle="Nous contacter">
+      <section>
+        <h2>
+          Je suis un particulier ou une entreprise et j’ai constaté une adresse manquante ou incorrecte.
+        </h2>
+        <p>
+          La gestion des adresses est une compétence des communes. <b>Vous devez vous adresser à votre mairie</b>, et le cas échéant lui indiquer l’existence de ce site.
+        </p>
+      </section>
+      <section>
+        <h2>
+          Je suis une commune ou un EPCI et je veux gérer les adresses de mon territoire pour améliorer la qualité des services apportés à mes administrés.
+        </h2>
+        <p>
+          La gestion des adresses est la compétence des communes, mais elle est quelque fois exercée avec le soutien technique d’un EPCI.
+        </p>
+        <p>
+          Cette gestion est simplifiée par l’existence d’outils officiels et gratuits, tels que <a target="_blank" href="https://mes-adresses.data.gouv.fr/">Mes Adresses</a>.
+        </p>
+        <p>
+          Vous pouvez en quelques clics créer la Base Adresse Locale de votre commune, y apporter des modifications, et publier les changements pour que ceux-ci soient pris en compte par un maximum d’acteurs. La prise en main est très simple, et ne nécessite pas de compétences informatiques particulières.
+        </p>
+        <a href="/programme-bal" className="fr-link">Votre commune et la base adresse locale</a>
+      </section>
+      <section>
+        <h2>
+          Pour toute autre demande ou pour plus d’informations.
+        </h2>
+        <p>
+          Si vous ne trouvez pas les réponses à vos questions sur ce site ou dans la documentation ou la FAQ, vous pouvez nous contacter à l’adresse suivante : [email protected].
+        </p>
+        <p>
+          Notre équipe fera le nécessaire pour vous répondre dans les plus brefs délais, dans la limite de sa disponibilité.
+        </p>
+        <Button
+          iconId="fr-icon-mail-line"
+          linkProps={{
+            href: 'mailto:[email protected] ',
+          }}
+        >Nous contacter
+        </Button>
+      </section>
+      <section>
+        <h2>
+          En tant qu’utilisateur des données, rejoignez Osmose
+        </h2>
+        <p>
+          Osmose est l&apos;outil d&apos;animation et de support de la démarche Adresse_Lab, instance de concertation et de co-construction sur les évolutions de la Base Adresse Nationale.
+        </p>
+        <p>
+          Il s&apos;adresse aux utilisateurs de la donnée BAN : administrations et services publics, services de secours et de sécurité, opérateurs de réseaux, services de localisation et navigation, ... constitués par le biais de cette démarche en &quot;Collectif des usagers de la BAN&quot;. L&apos;objectif est la connaissance des cas d&apos;application et la compréhension des besoins pour piloter les évolutions de la feuille de route BAN en adéquation avec les usages.
+        </p>
+        <div className="osmose-buttons">
+          <Button
+            iconId="fr-icon-mail-line"
+            priority="secondary"
+            linkProps={{
+              href: ' https://osmose.numerique.gouv.fr/jcms/p_4881391/fr/mtect-collectif-des-utilisateurs-de-la-ban',
+            }}
+          >
+            Demander à rejoindre Osmose
+          </Button>
+          <Button
+            iconId="fr-icon-question-answer-line"
+            linkProps={{
+              href: ' https://osmose.numerique.gouv.fr/jcms/p_4881391/fr/mtect-collectif-des-utilisateurs-de-la-ban',
+            }}
+          >
+            Accéder à Osmose
+          </Button>
+        </div>
+      </section>
+    </StyledWrapper>
+  )
+}

src/components/SectionSearchBAN/SectionSearchBAN.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import PropTypes from 'prop-types'
 import Image from 'next/image'
 import { SearchBar } from '@codegouvfr/react-dsfr/SearchBar'
@@ -15,6 +15,7 @@ import {
   Title,
   FormDescription,
 } from './SectionSearchBAN.styles'
+import BALWidgetContext from '@/contexts/BALWidget.context'
 
 interface InputSearchBANProps {
   id?: string
@@ -54,6 +55,13 @@ function InputSearch() {
 }
 
 function SectionSearchBAN({ id }: InputSearchBANProps) {
+  const { open, navigate } = useContext(BALWidgetContext)
+
+  const handleContactParticuliers = () => {
+    navigate('/particulier')
+    open()
+  }
+
   return (
     <Section id={id}>
       <Wrapper>
@@ -67,7 +75,7 @@ function SectionSearchBAN({ id }: InputSearchBANProps) {
           <InputSearch />
           <FormWrapperFooter>
             <a className="fr-link fr-link--icon-left fr-icon-road-map-line" href="#">Consulter directement la carte</a>
-            <a className="fr-link fr-link--icon-left fr-icon-questionnaire-line" href="#">J’ai un soucis avec mon adresse, pourquoi ?</a>
+            <button className="fr-link fr-link--icon-left fr-icon-questionnaire-line" onClick={handleContactParticuliers}>J’ai un soucis avec mon adresse, pourquoi ?</button>
           </FormWrapperFooter>
         </FormWrapper>
       </Wrapper>

src/layouts/Header.tsx

@@ -90,7 +90,7 @@ export const navEntries: MainNavigationProps.Item[] = [
       },
       { text: 'Validateur BAL', linkProps: { href: '/outils/validateur-bal' } },
       // { text: 'Géocodeur', linkProps: { href: '#' } },
-      { text: 'Publication des adresses', linkProps: { href: '#' } },
+      { text: 'Formulaire de publication', linkProps: { href: '/outils/formulaire-de-publication' } },
       {
         text: 'Supervision BAN/BAL',
         linkProps: {
@@ -185,7 +185,7 @@ export default function Header() {
           {
             iconId: 'fr-icon-message-2-fill',
             linkProps: {
-              href: '#',
+              href: '/nous-contacter',
             },
             text: 'Nous contacter',
           },