fix: cleaning (#1052)

SocialGouv · Oct 11, 2023 · 30bf282 · 30bf282
1 parent b84bac6
commit 30bf282
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 207 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,6 +1,6 @@
 # Install dependencies only when needed
 FROM node:16-alpine3.18 AS base
-RUN apk add --no-cache libc6-compat=1.2.4-r1
+RUN apk add --no-cache libc6-compat=1.2.4-r2
 WORKDIR /app
 COPY package.json yarn.lock ./
 

diff --git a/src/app/(la-fabrique)/a-propos/components/history.tsx b/src/app/(la-fabrique)/a-propos/components/history.tsx
@@ -1,47 +1,48 @@
-import { fr } from "@codegouvfr/react-dsfr"
-
 export default function History() {
   return (
-    <section className="fr-container">
-      <h2 className={fr.cx("fr-h2")}>Quelle est notre histoire ?</h2>
-      <div className="px-10 py-4 text-2xl text-blue-900 font-bold">2013</div>
-      <p className="fr-text pl-10 py-2 border-l ml-16 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
-        travail est constituée. En décembre 2013, la nouvelle version de
-        data.gouv.fr est lancée : c&apos;est le premier service numérique public
-        conçu selon une approche que l&apos;on surnommera ensuite &quot;Startup
-        d&apos;État&quot;. Dans la foulée de data.gouv.fr, d&apos;autres équipes
-        sont constituées pour moderniser l&apos;État et 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>
-      <p className="fr-text pl-10 py-2 border-l ml-16 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
-        interministérielle du numérique des systèmes d&apos;information et de
-        communication), est officiellement né en 2015. Il a pour objectif de
-        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>
-      <p className="fr-text pl-10 py-2 border-l ml-16 border-blue-900 text-justify">
-        Depuis 2015, l&apos;incubateur de services numériques accompagne
-        plusieurs administrations dans la construction de leurs Startups
-        d&apos;État et, en parallèle, de premiers ministères se dotent de leur
-        incubateur en prenant modèle sur celui de la DINSIC : c&apos;est ainsi
-        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">
-        Aujourd&apos;hui
+    <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>
+        <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
+          travail est constituée. En décembre 2013, la nouvelle version de
+          data.gouv.fr est lancée : c&apos;est le premier service numérique
+          public conçu selon une approche que l&apos;on surnommera ensuite
+          &quot;Startup d&apos;État&quot;. Dans la foulée de data.gouv.fr,
+          d&apos;autres équipes sont constituées pour moderniser l&apos;État et
+          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>
+        <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
+          interministérielle du numérique des systèmes d&apos;information et de
+          communication), est officiellement né en 2015. Il a pour objectif de
+          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>
+        <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
+          d&apos;État et, en parallèle, de premiers ministères se dotent de leur
+          incubateur en prenant modèle sur celui de la DINSIC : c&apos;est ainsi
+          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">
+          Aujourd&apos;hui
+        </div>
+        <p className="fr-text pl-10 py-2 border-l ml-16 mr-6 border-blue-900 text-justify">
+          La Fabrique du numérique est mobilisable pour l&apos;ensemble des
+          politiques des ministères sociaux avec trois ministères de tutelle
+          (Santé | Solidarité | Travail) : Cela a généré 27 Startups
+          d&apos;État, 11 intrapreneurs, 240 projets open-source, 52784 commits.
+        </p>
       </div>
-      <p className="fr-text pl-10 py-2 border-l ml-16 border-blue-900 text-justify">
-        La Fabrique du numérique est mobilisable pour l&apos;ensemble des
-        politiques des ministères sociaux avec trois ministères de tutelle
-        (Santé | Solidarité | Travail) : Cela a généré 27 Startups d&apos;État,
-        11 intrapreneurs, 240 projets open-source, 52784 commits.
-      </p>
     </section>
   )
 }
diff --git a/src/app/(la-fabrique)/a-propos/components/intro.tsx b/src/app/(la-fabrique)/a-propos/components/intro.tsx
@@ -2,38 +2,45 @@ import Image from "next/image"
 
 export default function Intro() {
   return (
-    <section className="fr-container gap-12 flex">
-      <div className="flex-1">
-        <h1 className="fr-h1">À propos de la Fabrique</h1>
-        <p className="fr-text--md">
-          La Fabrique du numérique c&apos;est l&apos;incubateur de startups
-          d&apos;État des Ministères Sociaux (Santé | Solidarité | Travail).
-          L&apos;incubateur vise à encourager l&apos;innovation numérique et la
-          transformation digitale au sein des ministères et des services sociaux
-          en créant un environnement propice à la collaboration, à
-          l&apos;expérimentation et au développement de solutions innovantes.
-        </p>
-        <p className="fr-text--md text-justify">
-          Nous accompagnons des startups d&apos;État qui répondent à un problème
-          de politique publique par la création de produits numériques, le tout
-          dans une approche incrémentale. La Fabrique du numérique propose un
-          cadre technique sur lequel les startups doivent s&apos;appuyer: nous
-          pilotons les budgets des startups d&apos;État en toute transparence,
-          nous appréhendons les aspects de conformité (RGDP, RGAA, RGS) et
-          mettons une core team à disposition des produits.
-        </p>
-        <p className="font-bold">
-          Nos locaux se situent dans la tour Mirabeau à Paris : 📍 39 quai andré
-          Citroën, Paris 15e
-        </p>
-      </div>
-      <div className="flex align-center">
-        <Image
-          width={300}
-          height={200}
-          src="https://placehold.co/300x200"
-          alt="Illustration de la Fabrique numérique"
-        />
+    <section>
+      <div className="fr-container gap-6 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
+            sociaux en créant un environnement propice à la collaboration, à
+            l&apos;expérimentation et au développement de solutions innovantes.
+          </p>
+          <p className="fr-text--md text-justify">
+            Nous accompagnons des startups d&apos;État qui répondent à un
+            problème de politique publique par la création de produits
+            numériques, le tout dans une approche incrémentale. La Fabrique du
+            numérique propose un cadre technique sur lequel les startups doivent
+            s&apos;appuyer: nous pilotons les budgets des startups d&apos;État
+            en toute transparence, nous appréhendons les aspects de conformité
+            (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">
+          <Image
+            width={500}
+            height={400}
+            src="https://placehold.co/500x400"
+            alt="Illustration de la Fabrique numérique"
+          />
+        </div>
       </div>
     </section>
   )

diff --git a/src/app/(la-fabrique)/a-propos/components/kpis.tsx b/src/app/(la-fabrique)/a-propos/components/kpis.tsx
@@ -4,7 +4,7 @@ export default function Kpis() {
   return (
     <section>
       <div className="fr-container">
-        <h2 className={fr.cx("fr-h2")}>
+        <h2 className="fr-h2 fabnum-title--h2">
           Quels sont nos indicateurs de performance (KPI) ?
         </h2>
         <div className="kpis mt-12 mx-12 flex flex-col gap-12">

diff --git a/src/app/(la-fabrique)/a-propos/components/methods.tsx b/src/app/(la-fabrique)/a-propos/components/methods.tsx
@@ -8,135 +8,91 @@ import imageMethod3 from "../images/method-3.svg"
 import imageMethod4 from "../images/method-4.svg"
 import imageMethod5 from "../images/method-5.svg"
 
+const methods = [
+  {
+    image: imageMethod1,
+    title: "Une recherche d'impact",
+    text: "Un pilotage par la finalité et non par les moyens. L'objectif est d'avoir des utilisateurs satisfaits et non de créer un outil.",
+  },
+  {
+    image: imageMethod2,
+    title: "Des usagers au centre du projet",
+    text: "Un produit centré sur les besoins des usagers et non de l'administration.",
+  },
+  {
+    image: imageMethod3,
+    title: "De l'amélioration continue",
+    text: "Un produit développé de manière itérative et incrémentale en confrontation permanente au terrain.",
+  },
+  {
+    image: imageMethod4,
+    title: "Un porteur dédié",
+    text: "Le porteur du produit vient du terrain, il a un temps dédié au projet et est capable de travailler selon les méthodes des startups d'État.",
+  },
+  {
+    image: imageMethod5,
+    title: "Des équipes autonomes",
+    text: "Qui prennent leurs décisions seules, pour atteindre leurs objectifs, et qui produisent des ressources ouvertes. Les équipes sont pluridisciplinaires et mélangent des compétences privé-public.",
+  },
+]
+
+function Method({
+  method,
+  index,
+}: {
+  method: (typeof methods)[number]
+  index: number
+}) {
+  return (
+    <div className="flex-1 flex flex-col items-center">
+      <div className="h-52">
+        <Image
+          sizes="100vw"
+          src={method.image}
+          style={{ width: "auto", height: "100%" }}
+          alt={`illustration de la méthode ${index + 1}`}
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <div className="text-9xl font-bold text-blue-900">{index + 1}</div>
+        <div className="text-blue-900 font-bold">{method.title}</div>
+      </div>
+      <p className="fr-text--sm">{method.text}</p>
+    </div>
+  )
+}
+
 export default function Methods() {
   const blueCumulus = fr.colors.decisions.background.alt.blueCumulus.default
 
   return (
     <section>
       <div className="fr-container">
-        <h2 className={fr.cx("fr-h2")}>
+        <h2 className="fr-h2 fabnum-title--h2">
           Quelles sont nos méthodes de travail ?
         </h2>
-        <h3 className={fr.cx("fr-h3")}>L&apos;approche</h3>
-        <p className="fr-text--md">
+        <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="flex gap-x-12 my-12">
-          <div className="flex-1 flex flex-col items-center">
-            <div className="h-52">
-              <Image
-                sizes="100vw"
-                src={imageMethod1}
-                alt="illustration de la méthode 1"
-                style={{ width: "100%", height: "auto" }}
-              />
-            </div>
-            <div className="flex items-center gap-3">
-              <div className="text-9xl font-bold text-blue-900">1</div>
-              <div className="text-blue-900 font-bold">
-                Une recherche d&apos;impact
-              </div>
-            </div>
-            <p className="fr-text--sm">
-              Un pilotage par la finalité et non par les moyens. L&apos;objectif
-              est d&apos;avoir des utilisateurs satisfaits et non de créer un
-              outil.
-            </p>
-          </div>
-          <div className="flex-1 flex flex-col items-center">
-            <div className="h-52">
-              <Image
-                sizes="100vw"
-                src={imageMethod2}
-                alt="illustration de la méthode 2"
-                style={{ width: "auto", height: "100%" }}
-              />
-            </div>
-            <div className="flex items-center gap-3">
-              <div className="text-9xl font-bold text-blue-900">2</div>
-              <div className="text-blue-900 font-bold">
-                Des usagers au centre du projet
-              </div>
-            </div>
-            <p className="fr-text--sm">
-              Un produit centré sur les besoins des usagers et non de
-              l&apos;administration.
-            </p>
-          </div>
-          <div className="flex-1 flex flex-col items-center">
-            <div className="h-52">
-              <Image
-                sizes="100vw"
-                src={imageMethod3}
-                alt="illustration de la méthode 3"
-                style={{ width: "auto", height: "100%" }}
-              />
-            </div>
-            <div className="flex items-center gap-3">
-              <div className="text-9xl font-bold text-blue-900">3</div>
-              <div className="text-blue-900 font-bold">
-                De l&apos;amélioration continue
-              </div>
-            </div>
-            <p className="fr-text--sm">
-              Un produit développé de manière itérative et incrémentale en
-              confrontation permanente au terrain.
-            </p>
-          </div>
-          <div className="flex-1 flex flex-col items-center">
-            <div className="h-52">
-              <Image
-                sizes="100vw"
-                src={imageMethod4}
-                alt="illustration de la méthode 4"
-                style={{ width: "auto", height: "100%" }}
-              />
-            </div>
-            <div className="flex items-center gap-3">
-              <div className="text-9xl font-bold text-blue-900">4</div>
-              <div className="text-blue-900 font-bold">Un porteur dédié</div>
-            </div>
-            <p className="fr-text--sm">
-              Le porteur du produit vient du terrain, il a un temps dédié au
-              projet et est capable de travailler selon les méthodes des
-              startups d&apos;État.
-            </p>
-          </div>
-          <div className="flex-1 flex flex-col items-center">
-            <div className="h-52">
-              <Image
-                sizes="100vw"
-                src={imageMethod5}
-                alt="illustration de la méthode 5"
-                style={{ width: "auto", height: "100%" }}
-              />
-            </div>
-            <div className="flex items-center gap-3">
-              <div className="text-9xl font-bold text-blue-900">5</div>
-              <div className="text-blue-900 font-bold">
-                Des équipes autonomes
-              </div>
-            </div>
-            <p className="fr-text--sm">
-              Qui prennent leurs décisions seules, pour atteindre leurs
-              objectifs, et qui produisent des ressources ouvertes. Les équipes
-              sont pluridisciplinaires et mélangent des compétences
-              privé-public.
-            </p>
-          </div>
+        <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">
+          {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">
           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.
         </p>
       </div>
+
       <div className="p-12" style={{ backgroundColor: blueCumulus }}>
         <div className="fr-container">
-          <h3 className={fr.cx("fr-h3")}>La méthode Agile</h3>
+          <h3 className="fr-h3 fabnum-title--h3">La méthode Agile</h3>
           <div className="flex gap-12 items-center mt-12">
             <div className="w-96">
               <Image

diff --git a/src/app/(la-fabrique)/a-propos/page.tsx b/src/app/(la-fabrique)/a-propos/page.tsx
@@ -5,7 +5,7 @@ import History from "./components/history"
 
 export default function AboutPage() {
   return (
-    <div className="flex flex-col gap-y-16">
+    <div className="flex flex-col gap-y-24">
       <Intro />
       <History />
       <Methods />