♻️ Homepage improvements

src/app/(simulation)/tutoriel/page.tsx

@@ -32,7 +32,7 @@ export async function generateMetadata() {
 export default async function Tutoriel() {
   return (
     <ContentLarge>
-      <div className="mx-auto mt-8 flex h-screen max-w-3xl flex-col overflow-auto md:mt-12">
+      <div className="mx-auto flex h-screen max-w-3xl flex-col overflow-auto">
         <Title
           data-cypress-id="tutoriel-title"
           className="text-lg md:text-2xl"
@@ -50,9 +50,10 @@ export default async function Tutoriel() {
 
         <AutresQuestions />
 
+        {/* Check if body has the "iframe-mode" class name and if so add the static class to the footer */}
         <div
           className={twMerge(
-            'fixed bottom-0 left-0 right-0 z-50 border-t-2 border-primary-200 bg-gray-100 py-3'
+            'tutorial-footer fixed bottom-0 left-0 right-0 z-50 border-t-2 border-primary-200 bg-gray-100 py-3'
           )}>
           <div
             className={twMerge(

src/app/_components/CollectivelyCommit.tsx

@@ -17,7 +17,7 @@ export default async function CollectivelyCommit() {
             <Trans>
               Chez Nos Gestes Climat, nous croyons au pouvoir de{' '}
               <strong className="text-primary-600">l’action collective</strong>{' '}
-              pour relever les défis environnementaux. Notre mission est de
+              pour relever les défis environnementaux. Notre mission est de{' '}
               <strong className="text-primary-600">sensibiliser</strong> et
               d’accompagner chacun, citoyens, entreprises et collectivités, à
               mieux comprendre son empreinte écologique, carbone ou eau,{' '}

src/app/_components/Mobilise.tsx

@@ -50,9 +50,9 @@ export default async function Mobilise() {
       <div className="flex flex-col items-center justify-between gap-6 md:flex-row md:gap-24">
         <div className="py-14">
           <Image
-            src="/images/illustrations/reflechir-impacts-de-son-empreinte.svg"
+            src="/images/illustrations/reflechir-impacts-de-son-empreinte-en-entreprise.svg"
             alt={t(
-              'Un groupe de personnes en train de réfléchir aux impacts de leur empreinte carbone et eau'
+              'un groupe de personnes en train de réfléchir à leurs impacts et leur bilan carbone et eau'
             )}
             width={500}
             height={500}

src/app/_components/ModelInfo.tsx

@@ -19,7 +19,7 @@ export default function ModelInfo() {
                   l’Agence de l’Environnement et de la Maîtrise de l’Énergie
                 </strong>{' '}
                 dans le calculateur de Nos Gestes Climat : données,
-                perspectives,
+                perspectives, leviers d'action.
               </Trans>
             }
             link={{

src/app/_components/Partners.tsx

@@ -1,4 +1,3 @@
-import Link from '@/components/Link'
 import Ademe from '@/components/images/partners/Ademe'
 import Marianne from '@/components/images/partners/Marianne'
 import { getServerTranslation } from '@/helpers/getServerTranslation'
@@ -11,18 +10,20 @@ export default async function Partners() {
     <div className="flex justify-center md:-mt-10">
       <div className="relative flex items-center justify-center gap-6 py-6 md:gap-8 md:px-24 md:py-10">
         <Marianne className="h-auto w-12 md:w-auto" />
-        <Link href="https://ademe.fr" target="_blank">
+
+        <div>
           <Ademe className="h-auto w-10 md:w-auto" />
-        </Link>
-        <Link href="https://abc-transitionbascarbone.fr" target="_blank">
+        </div>
+
+        <div>
           <Image
             src="/images/misc/logo-abc-web.webp"
             alt={t("Logo de l'Association pour la transition Bas Carbone")}
             width="90"
             height="30"
             className="h-auto w-20"
           />
-        </Link>
+        </div>
       </div>
     </div>
   )

src/app/_components/TwoFootprints.tsx

@@ -2,11 +2,53 @@ import Link from '@/components/Link'
 import Trans from '@/components/translation/Trans'
 import ColorLine from '@/design-system/layout/ColorLine'
 import Separator from '@/design-system/layout/Separator'
-import { getServerTranslation } from '@/helpers/getServerTranslation'
+import dynamic from 'next/dynamic'
 import Image from 'next/image'
 
+const TwoGraphsIllustration = dynamic(
+  () => import('./twoFootprints/LocalizedTwoGraphIllustration'),
+  {
+    loading: () => (
+      <Image
+        src="/images/misc/graphiques-empreinte-carbone-eau-fr.png"
+        className="hidden md:block"
+        alt="Deux représentations graphiques de l'empreinte carbone et eau"
+        width={600}
+        height={800}
+      />
+    ),
+  }
+)
+
+const CarbonGraphIllustration = dynamic(
+  () => import('./twoFootprints/LocalizedCarbonGraphIllustration'),
+  {
+    loading: () => (
+      <Image
+        src="/images/misc/graphique-empreinte-carbone.png"
+        alt="Graphique de l'empreinte carbone"
+        width={300}
+        height={300}
+      />
+    ),
+  }
+)
+
+const WaterGraphIllustration = dynamic(
+  () => import('./twoFootprints/LocalizedWaterGraphIllustration'),
+  {
+    loading: () => (
+      <Image
+        src="/images/misc/graphique-empreinte-eau.png"
+        alt="Graphique de l'empreinte eau"
+        width={300}
+        height={300}
+      />
+    ),
+  }
+)
+
 export default async function TwoFootprints() {
-  const { t } = await getServerTranslation()
   return (
     <div className="my-16 flex flex-col items-center px-4 md:mx-auto md:my-20 md:max-w-5xl">
       <div className="relative mb-16 pb-4 md:mb-20">
@@ -17,25 +59,14 @@ export default async function TwoFootprints() {
       </div>
 
       {/* Displayed on desktop only */}
-      <Image
-        src="/images/misc/graphiques-empreinte-carbone-eau.png"
-        className="hidden md:block"
-        alt={t("Deux représentations graphiques de l'empreinte carbone et eau")}
-        width={600}
-        height={800}
-      />
+      <TwoGraphsIllustration />
 
       <div className="flex flex-col gap-16 md:flex-row md:gap-8">
         <div className="flex flex-col">
           <div className="flex flex-col">
             {/* Displayed on mobile only */}
             <div className="-mb-10 flex justify-center md:hidden">
-              <Image
-                src="/images/misc/graphique-empreinte-carbone.png"
-                alt=""
-                width={300}
-                height={300}
-              />
+              <CarbonGraphIllustration />
             </div>
 
             <h3 className="mb-0 text-xl md:text-2xl">
@@ -66,12 +97,7 @@ export default async function TwoFootprints() {
           <div className="flex flex-col">
             {/* Displayed on mobile only */}
             <div className="-mb-10 flex justify-center md:hidden">
-              <Image
-                src="/images/misc/graphique-empreinte-eau.png"
-                alt=""
-                width={300}
-                height={300}
-              />
+              <WaterGraphIllustration />
             </div>
 
             <h3 className="mb-0 text-xl md:text-2xl">

src/app/_components/mainLayoutProviders/IframeOptionsContext.tsx

@@ -4,7 +4,7 @@ import { trackingIframe } from '@/constants/tracking/misc'
 import { useIsClient } from '@/hooks/useIsClient'
 import { getIsIframe } from '@/utils/getIsIframe'
 import { trackEvent } from '@/utils/matomo/trackEvent'
-import type { PropsWithChildren} from 'react';
+import type { PropsWithChildren } from 'react'
 import { createContext, useEffect, useState } from 'react'
 
 export const IframeOptionsContext = createContext<{
@@ -81,6 +81,13 @@ export const IframeOptionsProvider = ({ children }: PropsWithChildren) => {
     setIframeLang(urlParams.get('lang'))
   }, [isIframe])
 
+  useEffect(() => {
+    if (isIframe) {
+      // Add class to body to modify the style of the page on iframe mode
+      document.body.classList.add('iframe-mode')
+    }
+  }, [isIframe])
+
   useEffect(() => {
     if (isIframeOnlySimulation) {
       // Add class to body that hides the header and the footer

src/app/_components/twoFootprints/LocalizedCarbonGraphIllustration.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useClientTranslation } from '@/hooks/useClientTranslation'
+import { useLocale } from '@/hooks/useLocale'
+import Image from 'next/image'
+
+export default function LocalizedCarbonGraphIllustration() {
+  const locale = useLocale()
+  const { t } = useClientTranslation()
+
+  return (
+    <Image
+      src={`/images/misc/graphique-empreinte-carbone_${locale}.png`}
+      alt={t("Graphique de l'empreinte carbone")}
+      width={300}
+      height={300}
+    />
+  )
+}

src/app/_components/twoFootprints/LocalizedTwoGraphIllustration.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useClientTranslation } from '@/hooks/useClientTranslation'
+import { useLocale } from '@/hooks/useLocale'
+import Image from 'next/image'
+
+export default function LocalizedTwoGraphsIllustration() {
+  const locale = useLocale()
+  const { t } = useClientTranslation()
+
+  return (
+    <Image
+      src={`/images/misc/graphiques-empreinte-carbone-eau_${locale}.png`}
+      className="hidden md:block"
+      alt={t("Deux représentations graphiques de l'empreinte carbone et eau")}
+      width={600}
+      height={800}
+    />
+  )
+}

src/app/_components/twoFootprints/LocalizedWaterGraphIllustration.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useClientTranslation } from '@/hooks/useClientTranslation'
+import { useLocale } from '@/hooks/useLocale'
+import Image from 'next/image'
+
+export default function LocalizedCarbonGraphIllustration() {
+  const locale = useLocale()
+  const { t } = useClientTranslation()
+
+  return (
+    <Image
+      src={`/images/misc/graphique-empreinte-eau_${locale}.png`}
+      alt={t("Graphique de l'empreinte eau")}
+      width={300}
+      height={300}
+    />
+  )
+}

src/app/documentation/_components/DocumentationLanding.tsx

@@ -6,6 +6,7 @@ import { useRules } from '@/hooks/useRules'
 
 import Link from '@/components/Link'
 import LightBulbIcon from '@/components/icons/LightBulbIcon'
+import SquareImageContainer from '@/components/images/SquareImageContainer'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import type { DottedName } from '@incubateur-ademe/nosgestesclimat'
 import Image from 'next/image'
@@ -42,10 +43,9 @@ export default function DocumentationLanding() {
 
   return (
     <div className="mt-4">
-      <Title title={<Trans>Documentation</Trans>} />
-
       <div className="flex flex-wrap gap-8 md:flex-nowrap">
         <div>
+          <Title title={<Trans>Documentation</Trans>} />
           <p>
             <Trans>
               Le simulateur Nos Gestes Climat est basé sur le modèle de calcul
@@ -67,16 +67,28 @@ export default function DocumentationLanding() {
             </Link>
           </div>
         </div>
-
+        {/* Displayed on mobile only */}
         <Image
-          className="-mt-8 ml-auto w-48 md:-mt-16 md:w-full"
+          className="ml-auto h-auto w-48 md:hidden md:w-full"
           src="/images/illustrations/girl-reading-newspaper.png"
           width="400"
           height="300"
           alt={t(
             'Un femme lisant le journal au coin du feu avec un chien assoupi.'
           )}
         />
+        {/* Displayed on desktop only */}
+        <SquareImageContainer className="hidden max-w-96 md:flex">
+          <Image
+            className="ml-auto h-auto w-48 md:w-full"
+            src="/images/illustrations/girl-reading-newspaper.png"
+            width="400"
+            height="300"
+            alt={t(
+              'Un femme lisant le journal au coin du feu avec un chien assoupi.'
+            )}
+          />
+        </SquareImageContainer>
       </div>
 
       <SearchBar rules={rules} />

src/app/empreinte-eau/page.tsx

@@ -40,7 +40,7 @@ export default async function WaterFootprintLandingPage() {
           {
             '@context': 'https://schema.org',
             '@type': 'Organization',
-            url: 'https://nosgestesclimat.fr/',
+            url: 'https://nosgestesclimat.fr',
             name: 'Nos Gestes Climat',
             logo: 'https://nosgestesclimat.fr/_next/image?url=%2Fimages%2Fmisc%2Fpetit-logo%403x.png&w=640&q=75',
           },

src/app/layout.tsx

@@ -12,8 +12,7 @@ import MainLayoutProviders from './_components/MainLayoutProviders'
 import './globals.css'
 
 const ClientErrorContent = dynamic(
-  () => import('@/components/error/ErrorContent'),
-  { ssr: false }
+  () => import('@/components/error/ErrorContent')
 )
 
 export const marianne = localFont({

src/app/page.tsx

@@ -19,12 +19,11 @@ import TwoFootprints from './_components/TwoFootprints'
 const InteractiveIllustration = dynamic(
   () => import('./_components/InteractiveIllustration'),
   {
-    ssr: false,
     loading: () => (
       <Image
         src="/images/illustrations/empreinte-carbone-eau-objets-du-quotidien.svg"
         alt={t(
-          "Une fille tapant sur son ordinateur, entouré d'objets aux empreintes carbone et eau variées."
+          "Une fille tapant sur son ordinateur, entouré d'objets aux empreintes écologiques variées."
         )}
         width={580}
         height={580}
@@ -55,7 +54,7 @@ export default async function Homepage() {
           {
             '@context': 'https://schema.org',
             '@type': 'Organization',
-            url: 'https://nosgestesclimat.fr/',
+            url: 'https://nosgestesclimat.fr',
             name: 'Nos Gestes Climat',
             logo: 'https://nosgestesclimat.fr/_next/image?url=%2Fimages%2Fmisc%2Fpetit-logo%403x.png&w=640&q=75',
           },

src/components/images/SquareImageContainer.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export default function SquareImageContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={twMerge(
+        'relative flex aspect-square w-full items-center justify-center',
+        className
+      )}>
+      {children}
+    </div>
+  )
+}

src/components/landing-pages/DidYouKnowSlider.tsx

@@ -7,6 +7,7 @@ import type { ReactNode } from 'react'
 import Slider from 'react-slick'
 import 'slick-carousel/slick/slick.css'
 import DynamicCTAButton from '../cta/DynamicCTAButton'
+import Trans from '../translation/Trans'
 
 export default function DidYouKnowSlider({
   slides,
@@ -45,7 +46,7 @@ export default function DidYouKnowSlider({
 
               <div className="w-full flex-1">
                 <h3 className="text-center text-xl md:text-left md:text-3xl">
-                  Le saviez vous ?
+                  <Trans>Le saviez vous ?</Trans>
                 </h3>
 
                 <Separator className="mx-auto my-4 md:mx-0" />