✨(frontend) add administration, agent and editeur pages

Those page are based on the recent sketches. Those three pages are
based on the same model to avoid duplication.

src/components/ContentSection.tsx

@@ -5,22 +5,26 @@ interface ContentSectionProps
     Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
   background?: 'gray'
   padding?: boolean
+  horizontalPadding?: boolean
+  verticalPadding?: boolean
   gap?: string
 }
 
 export const ContentSection: React.FC<ContentSectionProps> = ({
   children,
   background,
   padding = true,
+  horizontalPadding = true,
+  verticalPadding = true,
   gap = 'gap-[50px]',
   ...props
 }) => {
   return (
     <div
-      className={`overflow-hidden flex justify-center ${background === 'gray' && 'bg-white-1'} ${padding && 'py-[50px] md:py-20'}`}
+      className={`justify-center overflow-hidden flex ${background === 'gray' && 'bg-white-1'} ${padding && verticalPadding && 'py-[50px] md:py-20'}`}
     >
       <div
-        className={`flex flex-col items-center w-full lg:w-[70em] ${gap} ${padding && 'px-4'}`}
+        className={`flex flex-col items-center w-full lg:w-[70em] ${gap} ${padding && horizontalPadding && 'px-4'}`}
         {...props}
       >
         {children}

src/pages/administration/index.tsx

@@ -0,0 +1,67 @@
+import { Layout } from '@/components/Layout'
+import { TITLE_SITE } from '@/constant'
+import { Hero } from '@/sections/Hero'
+import { ContentSection } from '@/components/ContentSection'
+import { DoubleBlock } from '@/sections/DoubleBlock'
+import heroImage from '@/assets/hero_administration.png'
+import AdministrationImage1 from '@/assets/administration_block_1.png'
+import AdministrationImage2 from '@/assets/administration_block_2.png'
+import AdministrationImage3 from '@/assets/administration_block_3.png'
+
+import { Button } from '@/components/Button'
+
+export default function Agent() {
+
+    const button = <Button href="/products" variant="outline">
+    Explorez comment La Suite peut transformer la gestion de votre administration
+    </Button>
+
+
+  return (
+    <Layout title={TITLE_SITE}>
+      <Hero
+        intro="... au service de votre administration"
+        callout="Modernisez vos processus avec des outils conçus pour les besoins spécifiques des administrations publiques"
+        image={heroImage}
+      />
+      <ContentSection verticalPadding={false}>
+        <div className="pb-16">
+          {button}
+        </div>
+      </ContentSection>
+      <ContentSection background="gray">
+        <p className="text-lg font-medium text-gray-3 text-center">
+        Les <strong>administrations publiques</strong> doivent faire face à des défis uniques en matière de gestion, de communication et de sécurité des données. <strong>La Suite propose des solutions numériques adaptées, sécurisées et interconnectées</strong> pour répondre aux besoins de la sphère publique.
+        </p>
+      </ContentSection>
+      <ContentSection padding={false} gap="">
+        <DoubleBlock image={AdministrationImage1}>
+          <h3 className="text-2xl font-bold mb-4">Pourquoi choisir La Suite pour votre administration ?</h3>
+          <ul className="list-disc pl-6 space-y-4 mt-8">
+            <li>Garantissez la <strong>sécurité et la confidentialité</strong> des informations traitées par vos services.</li>
+            <li>Centralisez et gérez vos données de manière <strong>efficace</strong> grâce à des outils de collaboration modernes.</li>
+            <li>Profitez de <strong>l'interopérabilité</strong> entre les applications de La Suite pour fluidifier vos missions.</li>
+          </ul>
+        </DoubleBlock>
+        <DoubleBlock image={AdministrationImage2} reverse={true}>
+            <h3 className="text-2xl font-bold mb-4">ProConnect</h3>
+          <ul className="list-disc pl-6 space-y-4 mt-8">
+            <li>Intégrez AgentConnect à vos propres applications pour offrir à vos agents une connexion simplifiée et sécurisée à travers toute votre administration.</li>
+            <li>AgentConnect centralise l'accès à vos outils en s'intégrant avec plusieurs ministères et agences de l'État, éliminant ainsi le besoin de multiples mots de passe et simplifiant la gestion des identités.</li>
+          </ul>
+        </DoubleBlock>
+        <DoubleBlock image={AdministrationImage3}>
+          <h3 className="text-2xl font-bold mb-4">Exemples concrets d'utilisation</h3>
+          <ul className="list-disc pl-6 space-y-4 mt-8">
+            <li><strong>Organisation d'événements et de visios</strong> avec webinaire.gouv.fr pour des webinaires, des réunions d'équipe et des ateliers.</li>
+            <li><strong>Partage sécurisé de documents</strong> avec Résana pour le stockage et FranceTransfert pour transmettre des fichiers volumineux en toute confiance.</li>
+            <li><strong>Des feuilles de calcul</strong> avec Grist pour centraliser, analyser et collaborer sur vos projets.</li>
+          </ul>
+        </DoubleBlock>
+      </ContentSection>
+      <ContentSection>
+        {button}
+        </ContentSection>
+    </Layout>
+  )
+}

src/pages/agent/index.tsx

@@ -0,0 +1,58 @@
+import { Layout } from '@/components/Layout'
+import { TITLE_SITE } from '@/constant'
+import { Hero } from '@/sections/Hero'
+import heroImage from '@/assets/hero_agent.png'
+import { ContentSection } from '@/components/ContentSection'
+import { DoubleBlock } from '@/sections/DoubleBlock'
+import AgentImage1 from '@/assets/agent_block_1.png'
+import AgentImage2 from '@/assets/agent_block_2.png'
+import { Button } from '@/components/Button'
+
+export default function Agent() {
+
+  const button = <Button href="/products" variant="outline">
+      Découvrez comment La Suite peut améliorer votre efficacité quotidienne
+  </Button>
+
+  return (
+    <Layout title={TITLE_SITE}>
+      <Hero
+        intro="... un écosystème numérique pour faciliter votre quotidien"
+        callout="Simplifiez vos missions grâce à des outils numériques interconnectés, conçus pour répondre aux besoins spécifiques des agents publics"
+        image={heroImage}
+        backgroundImage={false}
+      />
+      <ContentSection verticalPadding={false}>
+        <div className="pb-16">
+        {button}
+        </div>
+      </ContentSection>
+      <ContentSection background="gray">
+        <p className="text-lg font-medium text-gray-3 text-center">
+          En tant qu'agent public, <strong>vous avez besoin d'outils adaptés</strong> à vos missions quotidiennes et qui respectent les spécificités du service public. La Suite met à votre disposition des <strong>applications sécurisées, open-source, et interconnectées qui facilitent la collaboration, la communication et l'organisation</strong>
+        </p>
+      </ContentSection>
+      <ContentSection padding={false} gap="">
+        <DoubleBlock image={AgentImage1}>
+          <h3 className="text-2xl font-bold mb-4">Pourquoi choisir La Suite ?</h3>
+          <ul className="list-disc pl-6 space-y-4 mt-8">
+            <li>Un <strong>environnement sécurisé</strong> conçu pour répondre aux exigences de l'État.</li>
+            <li>Des <strong>outils simples</strong> à utiliser, même sans expertise technique.</li>
+            <li>Une <strong>interopérabilité entre les applications</strong> pour un flux de travail sans friction.</li>
+          </ul>
+        </DoubleBlock>
+        <DoubleBlock image={AgentImage2} reverse={true}>
+          <h3 className="text-2xl font-bold mb-4">Exemples concrets d'utilisation</h3>
+          <ul className="list-disc pl-6 space-y-4 mt-8">
+            <li><strong>Communication simplifiée</strong> avec Tchap pour échanger instantanément avec vos collègues.</li>
+            <li><strong>Organisation facilitée</strong> avec Resana pour stocker, partager et collaborer sur vos documents en toute sécurité.</li>
+            <li><strong>Réunions distantes</strong> facilitées grâce à WebConf pour tenir vos réunions à distance dans un cadre sécurisé</li>
+          </ul>
+        </DoubleBlock>
+      </ContentSection>
+      <ContentSection>
+        {button}
+      </ContentSection>
+    </Layout>
+  )
+}

src/pages/editeur/index.tsx

@@ -0,0 +1,41 @@
+import { Layout } from '@/components/Layout'
+import { TITLE_SITE } from '@/constant'
+import { Hero } from '@/sections/Hero'
+import heroImage from '@/assets/editeur_hero.png'
+import { ContentSection } from '@/components/ContentSection'
+import { DoubleBlock } from '@/sections/DoubleBlock'
+import AgentImage1 from '@/assets/agent_block_1.png'
+import AgentImage2 from '@/assets/agent_block_2.png'
+import { Button } from '@/components/Button'
+
+export default function Editeur() {
+
+  return (
+    <Layout title={TITLE_SITE}>
+      <Hero
+        intro="... avec vous pour renforcer l’interopérabilité"
+        callout="Intégrez ProConnect, la solution d’authentification centralisée de l’État, et offrez à vos utilisateurs un accès simple, sécurisé et fluide à vos produits et services."
+        image={heroImage}
+        imageClassName="py-10"
+        backgroundImage={false}
+      />
+      <ContentSection padding={false} gap="">
+        <DoubleBlock image={AgentImage1}>
+          <h3 className="text-2xl font-bold mb-4">ProConnect : Simplifiez et sécurisez l’accès à vos services numériques</h3>
+          <p>
+          ProConnect est la solution d’authentification centralisée de La Suite Numérique, spécialement conçue pour simplifier l’accès aux services numériques de la sphère publique. <br/><br/>
+          En un clic, les utilisateurs peuvent se connecter à l’ensemble de leurs outils quotidiens à l’aide d’une seule identité numérique, éliminant la complexité liée à la gestion de multiples identifiants. <br/><br/>
+          En plus d’assurer une expérience fluide, ProConnect garantit le respect des normes de sécurité les plus élevées, s’intégrant de manière transparente aux systèmes publics et privés.
+          </p>
+        </DoubleBlock>
+        <DoubleBlock image={AgentImage2} reverse={true} fit="object-contain">
+          <h3 className="font-bold mb-4 text-2xl">Éditeurs : Intégrez ProConnect et optimisez vos solutions</h3>
+          <p>
+          ProConnect, au cœur de La Suite Numérique de l’État, est un levier clé pour une authentification unifiée et sécurisée au sein de l’écosystème public et au-delà. <br/><br/>En tant qu’éditeurs, vous avez l’opportunité de participer à cette transformation numérique en intégrant ProConnect à vos produits. Cette solution vous permet de bénéficier de l’interopérabilité avec les services de la Suite Numérique, tout en offrant à vos utilisateurs une authentification simplifiée et conforme aux standards de sécurité de l’État.
+          </p>
+        </DoubleBlock>
+        <div className="pt-10"></div>
+      </ContentSection>
+    </Layout>
+  )
+}

src/sections/DoubleBlock.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren, ReactElement } from 'react'
+import Image, { StaticImageData } from 'next/image'
+
+export const DoubleBlock = ({
+                              children, image, reverse = false, fit = 'object-cover'
+                            }: { image: StaticImageData, reverse?: boolean, fit?: string } & PropsWithChildren) => {
+  const ImageBlock = (
+
+      <Image
+        src={image}
+        aria-hidden={true}
+        alt=""
+        className={"flex z-10 h-full " + fit}
+        priority
+        placeholder="blur"
+      />
+  );
+
+  const ContentBlock = (
+    <div className='p-10'>
+      {children}
+    </div>
+  );
+
+  return (
+    <div className='flex w-full flex-col md:flex-row'>
+      <div className={`md:w-1/2 md:order-${reverse ? 2 : 1}`}>
+        {ContentBlock}
+      </div>
+      <div className={`md:w-1/2 md:order-${reverse ? 1 : 2}`}>
+        {ImageBlock}
+      </div>
+    </div>
+  )
+}

src/sections/Hero.tsx

@@ -1,47 +1,51 @@
-import Image from 'next/image'
+import Image, { StaticImageData } from 'next/image'
 import { Callout } from '@/components/Callout'
 import { URL_SITE } from '@/constant'
-
-import heroImage from '@/assets/hero-desktop.png'
-import heroImageMobile from '@/assets/hero-mobile.webp'
 import LogoSvg from '@/assets/logo/suite-numerique.svg'
 import type { ReactElement } from 'react'
 import { useTranslations } from '@/locales/useTranslations'
 
 export const Hero = ({
   intro,
   callout,
+  image,
+  imageClassName,
+  backgroundImage = true
 }: {
   intro: ReactElement | string
   callout: ReactElement | string
+  image: StaticImageData
+  imageClassName?: string
+  backgroundImage?: boolean
 }) => {
   const t = useTranslations()
+  const background = backgroundImage ? 'md:bg-[url(/assets/bg-nid-abeille.webp)] md:bg-no-repeat md:bg-center' : ''
   return (
     <div className="hero relative overflow-hidden bg-white ">
-      <div className="flex flex-col justify-between items-start sm:items-center px-8 py-10 sm:py-20 md:bg-[url(/assets/bg-nid-abeille.webp)] md:bg-no-repeat md:bg-center">
+      <div className={"flex flex-col justify-between items-start sm:items-center px-8 py-10 sm:py-20 md:bg-no-repeat md:bg-center " + background}>
         <h1 className="w-full flex justify-center pb-11">
           <Image
             src={LogoSvg}
             height={168}
             width={480}
             alt={URL_SITE}
-            className="max-w-[80%]"
+            className={"max-w-[80%]"}
             priority
           />
         </h1>
-        <div className="text-lg text-body max-w-[44rem] text-left sm:text-center pb-8 md:pb-0">
+        <div className="text-blue-1 text-4xl font-bold max-w-[44rem] text-left sm:text-center pb-8 md:pb-0 text-center">
           {intro}
         </div>
         <Image
-          src={heroImage}
+          src={image}
           width={1000}
           alt={t('homepage.hero_img_alt')}
-          className="mr-[-12%] md:flex z-10"
+          className={"flex z-10 " + imageClassName}
           priority
           placeholder="blur"
         />
         <Callout>
-          La Suite numérique fédère agents et professionnels autour d'applications open-source interconnectées pour simplifier leur quotidien
+          {callout}
         </Callout>
       </div>
     </div>