fix a propos and notre offre

src/app/(la-fabrique)/a-propos/components/history.tsx

@@ -2,8 +2,8 @@ export default function History() {
   return (
     <section>
       <div className="fr-container">
-        <h2 className="fr-h2 fabnum-title--h2">Quelle est notre histoire ?</h2>
-        <div className="px-10 py-4 text-2xl text-blue-900 font-bold">2013</div>
+        <h2 className="fr-h2">Quelle est notre histoire ?</h2>
+        <div className="px-10 py-4 text-4xl text-blue-950 font-bold">2013</div>
         <p className="fr-text pl-10 py-2 border-l ml-16 mr-6 border-blue-900 text-justify">
           En 2013, pour répondre au besoin d&apos;innovation et de refonte de la
           plateforme de données publiques data.gouv.fr, une première équipe de
@@ -15,7 +15,7 @@ export default function History() {
           s&apos;attaquer à des problèmes concrets rencontrés par les citoyens
           et les entreprises.
         </p>
-        <div className="px-10 py-4 text-2xl text-blue-900 font-bold">2015</div>
+        <div className="px-10 py-4 text-4xl text-blue-950 font-bold">2015</div>
         <p className="fr-text pl-10 py-2 border-l ml-16 mr-6 border-blue-900 text-justify">
           L&apos;incubateur des services numériques, mission de la Direction
           interministérielle du numérique DINUM (anciennement DINSIC: direction
@@ -24,7 +24,7 @@ export default function History() {
           regrouper les Startups d&apos;État et d&apos;animer sa communauté. Son
           site beta.gouv.fr est alors lancé.
         </p>
-        <div className="px-10 py-4 text-2xl text-blue-900 font-bold">2017</div>
+        <div className="px-10 py-4 text-4xl text-blue-950 font-bold">2017</div>
         <p className="fr-text pl-10 py-2 border-l ml-16 mr-6 border-blue-900 text-justify">
           Depuis 2015, l&apos;incubateur de services numériques accompagne
           plusieurs administrations dans la construction de leurs Startups
@@ -33,7 +33,7 @@ export default function History() {
           qu&apos;en 2017 la Fabrique du Numérique des ministères sociaux est
           créée au sein de la DNUM.
         </p>
-        <div className="px-10 py-4 text-2xl text-blue-900 font-bold">
+        <div className="px-10 py-4 text-4xl text-blue-950 font-bold">
           Aujourd&apos;hui
         </div>
         <p className="fr-text pl-10 py-2 border-l ml-16 mr-6 border-blue-900 text-justify">

src/app/(la-fabrique)/a-propos/components/intro.tsx

@@ -1,15 +1,18 @@
 import Image from "next/image"
 
+import imageMapPin from "../images/map-pin.svg"
+import imageLogoFabrique from "../images/logo-fabrique.svg"
+
 export default function Intro() {
   return (
-    <section>
-      <div className="fr-container gap-6 flex">
+    <section className="fr-container">
+      <h1 className="fr-h1">À propos de la Fabrique</h1>
+      <p className="fr-text--lead text-blue-950">
+        La Fabrique du numérique c&apos;est l&apos;incubateur de startups
+        d&apos;État des Ministères Sociaux (Santé | Solidarité | Travail).
+      </p>
+      <div className="mt-16 gap-x-28 flex">
         <div className="flex-1">
-          <h1 className="fr-display--md">À propos de la Fabrique</h1>
-          <p className="fr-text--lead">
-            La Fabrique du numérique c&apos;est l&apos;incubateur de startups
-            d&apos;État des Ministères Sociaux (Santé | Solidarité | Travail).
-          </p>
           <p className="fr-text--md text-justify">
             L&apos;incubateur vise à encourager l&apos;innovation numérique et
             la transformation digitale au sein des ministères et des services
@@ -26,22 +29,32 @@ export default function Intro() {
             (RGDP, RGAA, RGS) et mettons une core team à disposition des
             produits.
           </p>
-          <address className="font-bold">
-            Nos locaux se situent dans la tour Mirabeau à Paris :<br />
-            39 Quai André Citroën
-            <br />
-            75015 Paris
-          </address>
         </div>
-        <div className="flex align-center">
+        <div className="relative">
           <Image
-            width={500}
-            height={400}
-            src="https://placehold.co/500x400"
-            alt="Illustration de la Fabrique numérique"
+            height={220}
+            src={imageLogoFabrique}
+            style={{ objectFit: "contain" }}
+            alt={`Logo de la Fabrique Numérique des ministères sociaux`}
           />
         </div>
       </div>
+      <address className="font-bold">
+        Nos locaux se situent dans la tour Mirabeau à Paris :<br />
+        <div className="flex mt-2">
+          <Image
+            width={48}
+            height={48}
+            src={imageMapPin}
+            alt="illustration de l'addresse"
+          />
+          <div className="ml-2">
+            39 Quai André Citroën
+            <br />
+            75015 Paris
+          </div>
+        </div>
+      </address>
     </section>
   )
 }

src/app/(la-fabrique)/a-propos/components/kpis.tsx

@@ -4,56 +4,56 @@ export default function Kpis() {
   return (
     <section>
       <div className="fr-container">
-        <h2 className="fr-h2 fabnum-title--h2">
+        <h2 className="fr-h2">
           Quels sont nos indicateurs de performance (KPI) ?
         </h2>
         <div className="kpis mt-12 mx-12 flex flex-col gap-12">
           <div className="flex gap-12">
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">27</div>
-              <div className="font-bold text-blue-900">
+              <div className="font-bold text-5xl text-blue-950">27</div>
+              <div className="font-bold text-blue-950">
                 Nombre de projets incubés
               </div>
             </div>
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">95%</div>
-              <div className="font-bold text-blue-900">
+              <div className="font-bold text-5xl text-blue-950">95%</div>
+              <div className="font-bold text-blue-950">
                 Taux de réussite des projets
               </div>
             </div>
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">6 mois</div>
-              <div className="font-bold text-blue-900">
+              <div className="font-bold text-5xl text-blue-950">6 mois</div>
+              <div className="font-bold text-blue-950">
                 Délai moyen de mise en service d&apos;un outil
               </div>
             </div>
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">80%</div>
-              <div className="font-bold text-blue-900">
+              <div className="font-bold text-5xl text-blue-950">80%</div>
+              <div className="font-bold text-blue-950">
                 Niveau de satisfaction des utilisateurs
               </div>
             </div>
           </div>
           <div className="flex gap-12">
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">2x</div>
-              <div className="font-bold text-blue-900">
+              <div className="font-bold text-5xl text-blue-950">2x</div>
+              <div className="font-bold text-blue-950">
                 Impact sur des servies concernés
               </div>
             </div>
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">2m</div>
-              <div className="font-bold text-blue-900">Économies réalisées</div>
+              <div className="font-bold text-5xl text-blue-950">2m</div>
+              <div className="font-bold text-blue-950">Économies réalisées</div>
             </div>
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">24</div>
-              <div className="font-bold text-blue-900">
+              <div className="font-bold text-5xl text-blue-950">24</div>
+              <div className="font-bold text-blue-950">
                 Nombre de collaborations interministèrielles
               </div>
             </div>
             <div className="kpi flex-1">
-              <div className="font-bold text-4xl text-blue-900">XX</div>
-              <div className="font-bold text-blue-900">Xxxxxxxxxxxxxx</div>
+              <div className="font-bold text-5xl text-blue-950">XX</div>
+              <div className="font-bold text-blue-950">Xxxxxxxxxxxxxx</div>
             </div>
           </div>
         </div>

src/app/(la-fabrique)/a-propos/components/methods.tsx

@@ -44,12 +44,12 @@ function Method({
   index: number
 }) {
   return (
-    <div className="flex-1 flex flex-col items-center">
-      <div className="h-52">
+    <div className="flex-1 flex flex-col">
+      <div className="h-52 relative">
         <Image
-          sizes="100vw"
+          fill
           src={method.image}
-          style={{ width: "auto", height: "100%" }}
+          style={{ objectFit: "contain" }}
           alt={`illustration de la méthode ${index + 1}`}
         />
       </div>
@@ -68,22 +68,20 @@ export default function Methods() {
   return (
     <section>
       <div className="fr-container">
-        <h2 className="fr-h2 fabnum-title--h2">
-          Quelles sont nos méthodes de travail ?
-        </h2>
+        <h2 className="fr-h2">Quelles sont nos méthodes de travail ?</h2>
         <h3 className="fr-h3 fabnum-title--h3">L&apos;approche</h3>
         <p className="fr-text--lg text-justify">
           L&apos;approche startup d&apos;Etat introduit une nouvelle manière de
           concevoir l&apos;action publique et le développement de produits
           numériques. Cela permet de garantir un cadre à la fois pour les
           équipes mais également pour nos partenaires.
         </p>
-        <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-12 mb-12 mt-12">
+        <div className="grid grid-cols-3 gap-x-12 mb-12 mt-12 mx-12">
           {methods.map((method, i) => (
             <Method key={`method-${i}`} method={method} index={i} />
           ))}
         </div>
-        <p className="fr-text--lg text-center text-blue-900 font-bold">
+        <p className="fr-text--xl text-center text-blue-900 font-bold">
           L&apos;approche &quot;Startup d&apos;État&quot; n&apos;est autre que
           la transposition des pratiques produit et lean startup au sein de
           l&apos;État.
@@ -92,7 +90,7 @@ export default function Methods() {
 
       <div className="p-12" style={{ backgroundColor: blueCumulus }}>
         <div className="fr-container">
-          <h3 className="fr-h3 fabnum-title--h3">La méthode Agile</h3>
+          <h3 className="fr-h3 fabnum-title--h3">Méthode Agile</h3>
           <div className="flex gap-12 items-center mt-12">
             <div className="w-96">
               <Image

src/app/(la-fabrique)/notre-offre/components/applications.tsx

@@ -1,14 +1,14 @@
 import Image from "next/image"
 
 import imagePartners from "../images/partners.jpg"
+import imageLogoFabrique from "../images/logo-fabrique.svg"
 import imageEmailCampaign from "../images/email-campaign.svg"
 import imageLogoGovernment from "../images/logo-gouvernement.png"
 
 const applications = [
   {
+    image: imageLogoFabrique,
     title: "L'appel à idée de la Fabrique",
-    // image: "https://placehold.co/200x125",
-    image: imageEmailCampaign,
     text: "Un appel à idées est adressé chaque année à l'ensemble des agents des ministères sociaux. Témoins d'irritants récurrents pour les usagers ou les agents, ils sont invités à exprimer leurs idées et solutions afin de transformer une politique publique : la rendre plus rapide, plus efficace ou moins contraignante. (ex: Domifa, Archifiltre)",
   },
   {
@@ -30,24 +30,33 @@ const applications = [
 
 export default function Applications() {
   return (
-    <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-12">
-      {applications.map(({ image, title, text }, i) => (
-        <div key={`applications-${i + 1}`} className="flex flex-col">
-          <div className="flex flex-col justify-center h-52">
-            <Image
-              src={image}
-              sizes="100vw"
-              alt={`illustration de la méthode ${i + 1}`}
-              className="sm:w-auto sm:h-full lg:w-full lg:h-auto"
-            />
-          </div>
-          <div className="flex items-center gap-3">
-            <div className="text-8xl font-bold text-blue-900">{i + 1}</div>
-            <h4 className="fr-h5 text-blue-900 mt-6 mb-3">{title}</h4>
+    <section className="fr-container">
+      <h3 className="fr-h3 text-blue-900 fabnum-title--h3">
+        Comment proposer son projet pour bénéficier du programme
+        d&apos;incubation ?
+      </h3>
+      <p className="fr-text--lg fr-text--bold text-blue-950">
+        Les voies d&apos;entrée des SE à la Fabrique
+      </p>
+      <div className="grid grid-cols-2 gap-x-40 gap-y-20 mx-12 mt-12">
+        {applications.map(({ image, title, text }, i) => (
+          <div key={`applications-${i + 1}`} className="flex flex-col">
+            <div className="flex flex-col justify-center h-52 relative">
+              <Image
+                fill
+                src={image}
+                style={{ objectFit: "contain" }}
+                alt={`illustration de la méthode ${i + 1}`}
+              />
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="text-8xl font-bold text-blue-900">{i + 1}</div>
+              <h4 className="fr-h5 text-blue-900 mt-6 mb-3">{title}</h4>
+            </div>
+            <p className="fr-text--sm">{text}</p>
           </div>
-          <p className="fr-text--sm">{text}</p>
-        </div>
-      ))}
-    </div>
+        ))}
+      </div>
+    </section>
   )
 }