Rename agent connect to pro connect (#29)

* replace apostrophes

* rename AgentConnect to ProConnect everywhere

* add new design for landing pages

* make hide notice permanent

* delete useless import

* change icon on landing page

* redirect help to crisp

* delete mention simplification acces

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AgentConnect</title>
+    <title>ProConnect</title>
     <link
       rel="apple-touch-icon"
       href="/dsfr/favicon/apple-touch-icon.png?v=1.12.1"

src/Pages/Eligibility/PrivateResult.tsx

@@ -0,0 +1,7 @@
+import Result from "./Result";
+
+export function PrivateResult() {
+  return (
+    <Result subtitle="Collaborez facilement avec l'administration sur les sites et services qui l'acceptent." />
+  );
+}

src/Pages/Eligibility/PublicResult.tsx

@@ -0,0 +1,10 @@
+import Result from "./Result";
+
+export function PublicResult() {
+  return (
+    <Result
+      subtitle="Vous pouvez dès maintenant utiliser ProConnect pour vous
+                connecter à de nombreux outils et sites de l'administration."
+    />
+  );
+}

src/Pages/Eligibility/Eligible.tsx → src/Pages/Eligibility/Result.tsx

@@ -1,6 +1,7 @@
 import Button from "@codegouvfr/react-dsfr/Button";
 import Lottie from "react-lottie";
 import eligibleAnimation from "../../assets/Success.json";
+import WantToIntegrateProConnect from "../../components/WantToIntegrateProConnect/WantToIntegrateProConnect";
 
 const defaultOptions = {
   loop: true,
@@ -11,7 +12,7 @@ const defaultOptions = {
   },
 };
 
-export function Eligible() {
+function Result(props: { subtitle: string }) {
   return (
     <div className="fr-container">
       <div className="container fr-my-8w">
@@ -22,17 +23,17 @@ export function Eligible() {
             </div>
             <div className="fr-col-12 fr-col-md-6">
               <h1 className="fr-h2">Bonne nouvelle, vous êtes éligible !</h1>
-              <p>
-                Vous pouvez dès maintenant utiliser AgentConnect pour vous
-                connecter à de nombreux outils et sites de l'administration
-              </p>
+              <p>{props.subtitle}</p>
               <a className="fr-raw-link" href="/services">
                 <Button>Explorer l'annuaire des sites</Button>
               </a>
             </div>
           </div>
         </div>
       </div>
+      <WantToIntegrateProConnect />
     </div>
   );
 }
+
+export default Result;

src/Pages/Eligibility/WhoIsYourBoss.tsx

@@ -1,14 +1,16 @@
-import eligibility from "../../assets/eligibility.svg";
 import { RadioButtons } from "@codegouvfr/react-dsfr/RadioButtons";
 import Button from "@codegouvfr/react-dsfr/Button";
-import coding from "../../assets/coding.svg";
 import { useState } from "react";
 import { bosses, bossNames, bossNameType } from "./constants";
+import eligibility from "../../assets/eligibility.svg";
+import WantToIntegrateProConnect from "../../components/WantToIntegrateProConnect/WantToIntegrateProConnect";
+import { useNavigate } from "react-router-dom";
 
 export function WhoIsYourBoss() {
   const [selectedOption, setSelectedOption] = useState<
     bossNameType | undefined
   >(undefined);
+  const navigate = useNavigate();
   return (
     <>
       <div className="container fr-mt-8w">
@@ -34,51 +36,23 @@ export function WhoIsYourBoss() {
                 })}
                 state="default"
               />
-              <a
-                href={
-                  selectedOption && bosses[selectedOption].isEligible
-                    ? "/eligibilite/eligible"
-                    : "/eligibilite/non-eligible"
-                }
-              >
-                <Button>Valider</Button>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="fr-container fr-col-12 fr-col-md-8 fr-py-6w fr-py-md-2w fr-mt-4w fr-mb-8w card-radius">
-        <div className="fr-container centered-content">
-          <div className="fr-grid-row fr-grid-row--center fr-grid-row--middle">
-            <div className="fr-col-1 fr-hidden fr-unhidden-md ">
-              <img src={coding} alt="" />
-            </div>
-            <div className="fr-ml-3w">
-              <p className="centered-content delete-margin-bottom bold">
-                Vous voulez intégrer AgentConnect sur votre site ?
-              </p>
+
+              <Button disabled={!selectedOption} onClick={navigateToResult}>
+                Valider
+              </Button>
             </div>
           </div>
         </div>
-        <div className="fr-container centered-text fr-my-2w">
-          <a
-            className="fr-raw-link"
-            href="mailto:[email protected]"
-          >
-            <Button className="fr-mr-2w fr-mb-2w" iconId="fr-icon-mail-line">
-              Nous écrire
-            </Button>
-          </a>
-          <a
-            className="fr-raw-link"
-            href="https://github.com/numerique-gouv/agentconnect-documentation/blob/main/README.md#-agentconnect---documentation"
-          >
-            <Button priority="secondary" iconId="fr-icon-code-s-slash-line">
-              Commencer vos tests
-            </Button>
-          </a>
-        </div>
       </div>
+      <WantToIntegrateProConnect />
     </>
   );
+
+  function navigateToResult() {
+    if (!selectedOption) {
+      return;
+    }
+
+    navigate(`/eligibilite/${bosses[selectedOption].category}`);
+  }
 }

src/Pages/Eligibility/constants.ts

@@ -8,37 +8,38 @@ const bossNames = [
 ] as const;
 
 type bossNameType = (typeof bossNames)[number];
+type categoryType = "public" | "private";
 
 const bosses: Record<
   bossNameType,
   {
     label: string;
-    isEligible: boolean;
+    category: categoryType;
   }
 > = {
   fonction_publique_etat: {
     label: "Fonction publique d'État",
-    isEligible: true,
+    category: "public",
   },
   fonction_publique_territoriale: {
     label: "Fonction publique territoriale",
-    isEligible: true,
+    category: "public",
   },
   fonction_publique_hospitaliere: {
     label: "Fonction publique hospitalière",
-    isEligible: true,
+    category: "public",
   },
   operateur_etat: {
     label: "Opérateur de l'État",
-    isEligible: true,
+    category: "public",
   },
   autre_structure_public: {
     label: "Autre structure du service public",
-    isEligible: true,
+    category: "public",
   },
   asso_entreprise_prive: {
     label: "Association ou entreprise privée",
-    isEligible: false,
+    category: "private",
   },
 };
 

src/Pages/HomeLayout.tsx

@@ -3,9 +3,9 @@ import welcome from "../assets/welcome.svg";
 import "./layout.css";
 import { fr } from "@codegouvfr/react-dsfr";
 import Button from "@codegouvfr/react-dsfr/Button";
-import whatService from "../assets/quelService.svg";
+import news from "../assets/news.svg";
 import HowDoesItWork from "../components/HowDoesItWork/HowDoesItWork";
-import { tilesData } from "../Datas";
+import { tilesData } from "../data";
 
 function HomeLayout() {
   return (
@@ -15,17 +15,16 @@ function HomeLayout() {
           <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
             <div className="fr-col-12 fr-col-md-6">
               <h1 className="fr-h2">
-                Avec le bouton&nbsp;
-                <span className="blue-france">AgentConnect</span>
+                <span className="blue-france">ProConnect</span>
                 ,
                 <br />
-                nous vous identifions <br />
-                sur les sites de l'administration.
+                la solution officielle qui vous identifie <br />
+                en tant que professionnel.
               </h1>
               <a className="fr-raw-link" href="/eligibilite">
                 <Button>
                   <i className={fr.cx("ri-user-star-line") + " fr-pr-2w"} />
-                  Testez votre éligibilité
+                  Êtes-vous éligible ?
                 </Button>
               </a>
             </div>
@@ -37,41 +36,47 @@ function HomeLayout() {
       </div>
       <div className="fr-container">
         <HowDoesItWork tiles={tilesData}></HowDoesItWork>
-        <div className="fr-container--fluid">
+        <div
+          className="fr-container--fluid"
+          id="agentconnect-devient-proconnect-container"
+        >
           <div className="fr-container fr-py-4w fr-py-md-8w">
             <div className="fr-grid-row fr-grid-row--gutters">
               <div className="fr-col-12 fr-col-md-7 fr-pt-0">
-                <h1 className="fr-h3">
-                  A quels services en ligne pouvez-vous vous connecter ?
-                </h1>
+                <h2 className="fr-h2">AgentConnect devient ProConnect !</h2>
+                <h3 className="fr-h3">Pourquoi ce changement ?</h3>
                 <p>
-                  Grâce au bouton AgentConnect, accédez à tous les outils de la
-                  DINUM,
-                  <br />à la Suite Numérique et à tous les services
-                  interministériels de nos partenaires.
+                  Les services de connexion pour les pros évoluent !
+                  MonComptePro, InclusionConnect et AgentConnect fusionnent pour
+                  devenir ProConnect.
                 </p>
-                <a href="/services" className="blue-france fr-mb-5w">
-                  Découvrez l’annuaire des services&nbsp;
-                  <span
-                    className="fr-icon-arrow-right-line"
-                    aria-hidden="true"
-                  ></span>
-                </a>
-              </div>
-              <div className="fr-col-4 fr-col-offset-1 fr-p-4w fr-hidden fr-unhidden-md centered-content card-radius">
-                <div className="display-column">
-                  <img src={whatService} className="fr-mb-2w" alt="" />
-
-                  <h3 className="fr-text--lead centered-text">
-                    Êtes-vous éligible <br />à AgentConnect ?
-                  </h3>
-                  <a className="fr-raw-link" href="/eligibilite">
-                    <Button>
-                      <i className="ri-user-star-line fr-pr-1w"></i>
-                      Testez votre éligibilité
-                    </Button>
+                <h3 className="fr-h3">Qu'est-ce que ça change pour vous ?</h3>
+                <ul>
+                  <li>Vous continuez à vous connecter de la même manière.</li>
+                  <li>
+                    Vous pouvez désormais accéder à encore plus de sites et
+                    d'outils de l'administration !
+                  </li>
+                </ul>
+                <p>
+                  <a href="/services" className="blue-france fr-mb-5w">
+                    Découvrez l’annuaire des services&nbsp;
+                    <span
+                      className="fr-icon-arrow-right-line"
+                      aria-hidden="true"
+                    ></span>
                   </a>
-                </div>
+                </p>
+                <h3 className="fr-h3">
+                  Comment repérer le bouton ProConnect ?
+                </h3>
+                <p>
+                  Facile ! Vous verrez la Marianne avec la mention "pro" en
+                  jaune.
+                </p>
+              </div>
+              <div className="fr-col-4 fr-p-4w centered-content">
+                <img src={news} alt="" />
               </div>
             </div>
           </div>