From d6f3614a4ffa3a7fabec4d7d19a66d7175efc654 Mon Sep 17 00:00:00 2001
From: Xavier Desoindre <xavier.desoindre@hotmail.fr>
Date: Thu, 19 Dec 2024 18:04:46 +0100
Subject: [PATCH] feat: Add eco-conception page

---
 app/(public)/eco-conception/page.tsx          |  16 +++
 .../politique-de-confidentialite/page.tsx     |   1 -
 src/components/layout/Footer.tsx              |   5 +
 src/views/EcoConceptionPage.tsx               | 123 ++++++++++++++++++
 src/views/Page.module.css                     |   1 +
 src/views/PlanDuSitePage.tsx                  |   6 +-
 6 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 app/(public)/eco-conception/page.tsx
 create mode 100644 src/views/EcoConceptionPage.tsx

diff --git a/app/(public)/eco-conception/page.tsx b/app/(public)/eco-conception/page.tsx
new file mode 100644
index 000000000..ade515d51
--- /dev/null
+++ b/app/(public)/eco-conception/page.tsx
@@ -0,0 +1,16 @@
+import { Metadata } from 'next'
+import EcoConceptionPage from 'src/views/EcoConceptionPage'
+import Suggestion from 'components/layout/Suggestion'
+
+export const metadata: Metadata = {
+  title: 'Éco-conception | Impact CO₂',
+}
+
+export default function Politique() {
+  return (
+    <>
+      <EcoConceptionPage />
+      <Suggestion fromLabel='Eco-conception' from='/eco-conception' simulatorName="de l'éco-conception du site" />
+    </>
+  )
+}
diff --git a/app/(public)/politique-de-confidentialite/page.tsx b/app/(public)/politique-de-confidentialite/page.tsx
index 2ef0579db..0fb52534f 100644
--- a/app/(public)/politique-de-confidentialite/page.tsx
+++ b/app/(public)/politique-de-confidentialite/page.tsx
@@ -1,5 +1,4 @@
 import { Metadata } from 'next'
-import React from 'react'
 import PolitiquePage from 'src/views/PolitiquePage'
 import Suggestion from 'components/layout/Suggestion'
 
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index ea4a67a4d..d2ecf487b 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -57,6 +57,11 @@ export default function Footer() {
                     Nous contacter
                   </Link>
                 </li>
+                <li>
+                  <Link prefetch={false} href='/eco-conception'>
+                    Éco-conception
+                  </Link>
+                </li>
               </ul>
             </div>
             <div>
diff --git a/src/views/EcoConceptionPage.tsx b/src/views/EcoConceptionPage.tsx
new file mode 100644
index 000000000..baea08ae4
--- /dev/null
+++ b/src/views/EcoConceptionPage.tsx
@@ -0,0 +1,123 @@
+import classNames from 'classnames'
+import styles from './Page.module.css'
+
+const EcoConceptionPage = () => {
+  return (
+    <div className={classNames(styles.container, 'main-container')}>
+      <h1>Éco-conception</h1>
+      <h2>Introduction au principe d’éco-conception d’un service numérique</h2>
+      <p>
+        Un site éco-conçu est un site pensé pour être moins énergivore, plus respectueux de l’environnement et qui
+        adopte une posture éthique sociétale.
+      </p>
+      <h2>Raison d’être du service</h2>
+      <p>
+        Nous veillons activement à limiter l’impact de notre propre site web et des ressources que l’on propose afin de
+        porter les thématiques de sensibilisation écologique auprès d’un large public pour un impact limité.
+      </p>
+      <br />
+      <p>
+        Nous mesurons constamment l’impact de notre service, afin de nous assurer de la bonne performance de notre
+        mission de sensibilisation.
+      </p>
+      <br />
+      <p>
+        Pour répondre aux exigences de l’éco-conception et limiter l’impact de notre site et de ses ressources, nous
+        nous engageons à respecter les 3 axes suivants :
+      </p>
+      <br />
+      <ul>
+        <li>
+          <b>Créer un site léger</b> (en termes de code mais également de visuels et de fonctionnalités) avec moins de
+          besoin de stockage et de transfert de données. Le but est d’économiser l’énergie nécessaire pour faire
+          fonctionner le site et d’allonger la durée de vie du matériel.
+        </li>
+        <br />
+        <li>
+          <b>Faciliter l’accès</b> à tous les utilisateurs en respectant les exigences d’accessibilité et de protection
+          des données personnelles.
+        </li>
+        <br />
+        <li>
+          Fournir un <b>site internet utile et pérenne</b> avec une navigation facilitée et non intrusive et surtout un
+          site facile à entretenir.
+        </li>
+      </ul>
+      <h2>Score fruggr</h2>
+      <p>
+        Pour objectiver notre démarche, nous suivons la consommation de notre site Impact CO2 sur l’outil{' '}
+        <a href='https://www.fruggr.io/fr/' target='_blank' rel='noreferrer noopener'>
+          fruggr
+        </a>
+        , une solution qui évalue automatiquement l’impact du site.
+      </p>
+      <br />
+      <p>
+        L’outil fruggr nous donne la note de <b>87/100</b> au 12/12/2024.
+      </p>
+      <br />
+      <p>Ce score représente l'impact du service sur les 3 domaines adressés par fruggr :</p>
+      <br />
+      <ul>
+        <li>
+          l'environnement (<b>79/100</b>)
+        </li>
+        <br />
+        <li>
+          le social (<b>92/100</b>)
+        </li>
+        <br />
+        <li>
+          et la sobriété (<b>91/100</b>)
+        </li>
+      </ul>
+      <br />
+      <p>
+        L’Accélérateur de la Transition Écologique a fixé un objectif de 80/100 au minimum sur tous ses sites internet.
+      </p>
+      <h2>Exemples</h2>
+      <p>
+        Voici les scores portant sur les 3 axes (environnement, social, sobriété) ainsi que le poids en ko d’un
+        échantillon de nos outils principaux :
+      </p>
+      <br />
+      <ul>
+        <li>Simulateur Transport : 86/100 - 713kB</li>
+        <br />
+        <li>Impact Alimentation : 85/100 - 724kB</li>
+        <br />
+        <li>Quiz Carbone : 87/100 - 718kB</li>
+      </ul>
+      <h2>Leviers d’amélioration</h2>
+      <p>
+        Dans une démarche d'amélioration continue nous nous efforçons de rendre le site Impact CO2 et ses ressources
+        moins énergivores et plus respectueux de l'environnement.
+      </p>
+      <br />
+      <p>Nous agissons sur les leviers suivants :</p>
+      <br />
+      <ul>
+        <li>
+          <b>Réduire le poids des pages </b> plus la page est lourde, plus le coût énergétique pour les calculs serveurs
+          et l'usage du réseau sont élevés. Nous travaillons à la sensibilisation et à la formation de tous les
+          contributeurs sur le web pour leur donner les bonnes pratiques sur le poids des médias et la pertinence à les
+          utiliser.
+        </li>
+        <br />
+        <li>
+          <b>Améliorer l’accessibilité numérique </b> afin de rendre notre site accessible à tous, nous vérifions les
+          critères RGAA (Référentiel général d'amélioration de l'accessibilité) pour tous les nouveaux éléments publiés
+          sur Impact CO2.
+        </li>
+        <br />
+        <li>
+          <b>Réfléchir chaque nouveau composant du site pour qu’il soit le moins énergivore possible </b>
+          les présentations animées sont très énergivores. Aussi, nous veillons à les utiliser avec parcimonie. Nous
+          actionnons également des leviers sur le socle technique pour améliorer l’éco-conception d’Impact CO2.
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+export default EcoConceptionPage
diff --git a/src/views/Page.module.css b/src/views/Page.module.css
index 8242ecff6..3f8f0e447 100644
--- a/src/views/Page.module.css
+++ b/src/views/Page.module.css
@@ -15,6 +15,7 @@
 
   ul {
     margin-left: 2rem;
+    list-style: disc;
   }
 
   table {
diff --git a/src/views/PlanDuSitePage.tsx b/src/views/PlanDuSitePage.tsx
index f5e70b12a..920ad9382 100644
--- a/src/views/PlanDuSitePage.tsx
+++ b/src/views/PlanDuSitePage.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames'
-import React from 'react'
 import { categories } from 'data/categories'
 import { getName } from 'utils/Equivalent/equivalent'
 import Link from 'components/base/buttons/Link'
@@ -115,6 +114,11 @@ const PlanDuSitePage = () => {
             </Link>
           </li>
         </ul>
+        <li>
+          <Link prefetch={false} href='/eco-conception'>
+            Éco-conception
+          </Link>
+        </li>
         <li>
           <Link prefetch={false} href='/mentions-legales'>
             Mentions légales