Mises à jour sur la mise en forme du site

packages/site/app/Informations.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 /* eslint-disable react/no-unescaped-entities */
-import ButtonWithLink from '@components/dstet/buttons/ButtonWithLink';
 import CardsWrapper from '@components/cards/CardsWrapper';
 import CardsSection from '@components/sections/CardsSection';
+import {Button} from '@tet/ui';
 import CalendarPicto from 'public/pictogrammes/CalendarPicto';
 import CommunityPicto from 'public/pictogrammes/CommunityPicto';
 import InformationPicto from 'public/pictogrammes/InformationPicto';
@@ -23,31 +25,33 @@ const Informations = ({titre, description, className}: InformationsProps) => {
         <CardsWrapper cols={3} className="!gap-14">
           <div className="flex flex-col items-center gap-8">
             <PictoWithBackground pictogram={<InformationPicto />} />
-            <ButtonWithLink href="/faq" fullWidth variant="outlined" size="big">
+            <Button
+              href="/faq"
+              variant="outlined"
+              className="w-full justify-center"
+            >
               Lire les questions fréquentes
-            </ButtonWithLink>
+            </Button>
           </div>
           <div className="flex flex-col items-center gap-8">
             <PictoWithBackground pictogram={<CommunityPicto />} />
-            <ButtonWithLink
+            <Button
               href="/contact"
-              fullWidth
               variant="outlined"
-              size="big"
+              className="w-full justify-center"
             >
               Contacter l'équipe
-            </ButtonWithLink>
+            </Button>
           </div>
           <div className="flex flex-col items-center gap-8">
             <PictoWithBackground pictogram={<CalendarPicto />} />
-            <ButtonWithLink
+            <Button
               href="https://calendly.com/territoiresentransitions"
-              fullWidth
+              className="w-full justify-center"
               external
-              size="big"
             >
               Participer à une démo
-            </ButtonWithLink>
+            </Button>
           </div>
         </CardsWrapper>
       }

packages/site/app/Newsletter.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 /* eslint-disable react/no-unescaped-entities */
-import ButtonWithLink from '@components/dstet/buttons/ButtonWithLink';
 import Section from '@components/sections/Section';
+import {Button} from '@tet/ui';
 import classNames from 'classnames';
 
 type NewsletterProps = {
@@ -14,13 +16,9 @@ const Newsletter = ({titre, description, className}: NewsletterProps) => {
     <Section className={classNames('gap-0', className)}>
       <h2 className="mb-3">{titre}</h2>
       <p>{description}</p>
-      <ButtonWithLink
-        href="https://cloud.contact.ademe.fr/inscription-tete"
-        external
-        size="big"
-      >
+      <Button href="https://cloud.contact.ademe.fr/inscription-tete" external>
         S'inscrire
-      </ButtonWithLink>
+      </Button>
     </Section>
   );
 };

packages/site/app/collectivites/[code]/[name]/AccesCompte.tsx

@@ -1,4 +1,6 @@
-import ButtonWithLink from '@components/dstet/buttons/ButtonWithLink';
+'use client';
+
+import {Button} from '@tet/ui';
 
 type AccesCompteProps = {
   description: string;
@@ -12,9 +14,7 @@ const AccesCompte = ({description, cta, href}: AccesCompteProps) => {
       <p className="text-center text-primary-8 font-bold text-[18px] leading-[28px]">
         {description}
       </p>
-      <ButtonWithLink href={href} size="big">
-        {cta}
-      </ButtonWithLink>
+      <Button href={href}>{cta}</Button>
     </div>
   );
 };

packages/site/app/collectivites/[code]/[name]/ActionCollectivite.tsx

@@ -3,9 +3,9 @@
 import {useState} from 'react';
 import classNames from 'classnames';
 import {StrapiItem} from 'src/strapi/StrapiItem';
-import AnchorAsButton from '@components/buttons/AnchorAsButton';
 import {StrapiImage} from '@components/strapiImage/StrapiImage';
 import Markdown from '@components/markdown/Markdown';
+import {Button} from '@tet/ui';
 
 const splitContent = (content: string, limit: number) => {
   let newContent = content.slice(0, limit);
@@ -61,12 +61,12 @@ const ActionCollectivite = ({
         />
 
         {contenu.length > limitContent && (
-          <AnchorAsButton
+          <Button
             onClick={() => setContenuOpen(prevState => !prevState)}
-            className="text-primary-7 font-bold"
+            variant="underlined"
           >
             {contenuOpen ? 'Lire moins' : 'Lire plus'}
-          </AnchorAsButton>
+          </Button>
         )}
       </div>
     </div>

packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx

@@ -105,21 +105,19 @@ const CollectiviteHeader = ({
             {!annuaireUrl ? (
               nom
             ) : (
-              <>
-                <a
-                  href={annuaireUrl}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  className="bg-none active:!bg-transparent after:hidden"
-                >
-                  {nom}
-                </a>
+              <a
+                href={annuaireUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="bg-none active:!bg-transparent after:hidden flex items-end gap-1.5"
+              >
+                <span className="inline-block">{nom}</span>
                 <Icon
                   icon="external-link-line"
                   size="2xl"
                   className="inline-block mb-1.5"
                 />
-              </>
+              </a>
             )}
           </h1>
 

packages/site/app/collectivites/[code]/[name]/IndicateurCard.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import DonutChartWithLegend from '@components/charts/DonutChartWithLegend';
 import {StrapiImage} from '@components/strapiImage/StrapiImage';
 import {IndicateurDefaultData} from './IndicateursCollectivite';

packages/site/app/contact/ContactForm.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import Button from '@components/dstet/buttons/Button';
 import {ToastFloater} from '@components/floating-ui/ToastFloater';
 import classNames from 'classnames';
 import {useState} from 'react';
 import {supabase} from '../initSupabase';
 import {options} from './data';
+import {Button} from '@tet/ui';
 
 type FormData = {
   categorie: string;
@@ -165,7 +165,7 @@ const ContactForm = () => {
         </div>
 
         <div className="flex justify-end">
-          <Button size="big">Envoyer</Button>
+          <Button>Envoyer</Button>
         </div>
       </form>
 

packages/site/app/error.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import {Button} from '@tet/ui';
+import {useEffect} from 'react';
+
+const Error = ({
+  error,
+  reset,
+}: {
+  error: Error & {digest?: string};
+  reset: () => void;
+}) => {
+  useEffect(() => {
+    // Optionally log the error
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className="flex h-full flex-col gap-6 items-center justify-center my-16">
+      <h2 className="text-center text-lg font-normal">
+        Une erreur est survenue lors du chargement de la page...
+      </h2>
+      <Button
+        size="sm"
+        onClick={
+          // Attempt to recover by trying to re-render
+          () => reset()
+        }
+      >
+        Réessayer
+      </Button>
+    </main>
+  );
+};
+
+export default Error;

packages/site/app/faq/ContactEquipe.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+/* eslint-disable react/no-unescaped-entities */
+import Section from '@components/sections/Section';
+import {Button} from '@tet/ui';
+import CommunityPicto from 'public/pictogrammes/CommunityPicto';
+import PictoWithBackground from 'public/pictogrammes/PictoWithBackground';
+
+const ContactEquipe = () => {
+  return (
+    <Section
+      className="!flex-row justify-between items-center gap-8 flex-wrap"
+      containerClassName="bg-primary-1"
+    >
+      <p className="mb-0 flex-auto text-center">
+        Cette page n’a pas répondu à votre question ? Notre équipe est à votre
+        écoute !
+      </p>
+      <div className="flex-auto flex justify-center items-center gap-8 flex-wrap">
+        <PictoWithBackground pictogram={<CommunityPicto />} />
+        <Button href="/contact" variant="outlined">
+          Contacter l'équipe
+        </Button>
+      </div>
+    </Section>
+  );
+};
+
+export default ContactEquipe;

packages/site/app/faq/ListeQuestions.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import {Accordion} from '@tet/ui';
+import {FaqData} from './page';
+import Markdown from '@components/markdown/Markdown';
+
+type ListeQuestionsProps = {
+  questions: FaqData[];
+};
+
+const ListeQuestions = ({questions}: ListeQuestionsProps) => {
+  return (
+    <div className="flex flex-col gap-4">
+      {questions.map(q => (
+        <div key={q.id}>
+          <Accordion
+            id={q.id.toString()}
+            title={q.titre}
+            content={
+              <Markdown
+                texte={q.contenu}
+                className="px-10 pt-6 border border-t-0 border-grey-4 rounded-b-lg"
+              />
+            }
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ListeQuestions;

packages/site/app/faq/page.tsx

@@ -1,22 +1,19 @@
 'use server';
-/* eslint-disable react/no-unescaped-entities */
 
-import Accordion from '@components/accordion/Accordion';
-import ButtonWithLink from '@components/dstet/buttons/ButtonWithLink';
 import Section from '@components/sections/Section';
 import {Metadata} from 'next';
-import CommunityPicto from 'public/pictogrammes/CommunityPicto';
-import PictoWithBackground from 'public/pictogrammes/PictoWithBackground';
 import {fetchCollection} from 'src/strapi/strapi';
 import {sortByRank} from 'src/utils/sortByRank';
+import ContactEquipe from './ContactEquipe';
+import ListeQuestions from './ListeQuestions';
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
     title: 'FAQ',
   };
 }
 
-type FaqData = {
+export type FaqData = {
   id: number;
   titre: string;
   contenu: string;
@@ -43,34 +40,9 @@ const Faq = async () => {
     <>
       <Section>
         <h1>Questions fréquentes</h1>
-        {questions && (
-          <div>
-            {questions.map(q => (
-              <Accordion
-                key={q.id}
-                id={q.id.toString()}
-                title={q.titre}
-                content={q.contenu}
-              />
-            ))}
-          </div>
-        )}
-      </Section>
-      <Section
-        className="!flex-row justify-between items-center gap-8 flex-wrap"
-        containerClassName="bg-primary-1"
-      >
-        <p className="mb-0 flex-auto text-center">
-          Cette page n’a pas répondu à votre question ? Notre équipe est à votre
-          écoute !
-        </p>
-        <div className="flex-auto flex justify-center items-center gap-8 flex-wrap">
-          <PictoWithBackground pictogram={<CommunityPicto />} />
-          <ButtonWithLink href="/contact" variant="outlined" size="big">
-            Contacter l'équipe
-          </ButtonWithLink>
-        </div>
+        {questions && <ListeQuestions questions={questions} />}
       </Section>
+      <ContactEquipe />
     </>
   );
 };

packages/site/app/global.css

@@ -61,7 +61,7 @@ nav.md-toc ~ h2:before {
 }
 
 /** listes ul / ol */
-ul:not(.fr-footer__content-list, .fr-btns-group),
+ul:not(.fr-btns-group),
 ol {
   list-style: inside;
 }

packages/site/app/layout.tsx

@@ -1,9 +1,9 @@
 import './global.css';
 import AppHeader from './AppHeader';
-import {Footer} from '@components/footer/Footer';
 import {Metadata, Viewport} from 'next';
 import {getMetaData} from './utils';
 import {Amplitude} from './Amplitude';
+import Footer from '@components/layout/Footer';
 
 export const viewport: Viewport = {
   width: 'device-width',

packages/site/app/not-found.tsx

@@ -3,7 +3,7 @@ import Section from '@components/sections/Section';
 
 const NotFound = () => {
   return (
-    <Section className="mt-32 md:mt-60">
+    <Section className="my-16">
       <div className="flex items-center justify-center divide-x divide-black">
         <h1 className="text-3xl font-normal pr-4">404</h1>
         <h2 className="text-lg font-normal pl-4">Cette page n'existe pas</h2>

packages/site/app/outil-numerique/EquipeListe.tsx

@@ -20,7 +20,7 @@ const EquipeListe = ({liste}: EquipeListeProps) => {
         >
           <StrapiImage
             data={l.image}
-            className="rounded-full w-[83px] h-[83px] border border-primary-4"
+            className="rounded-full w-[83px] h-[83px] min-w-[83px] min-h-[83px] object-cover border border-primary-4"
           />
           <div className="flex flex-col gap-1">
             <p className="text-primary-9 text-[14px] text-center leading-[19px] font-[500] mb-0">