feat(front): update website with new mockup

index.html

@@ -14,7 +14,7 @@
             crossorigin="use-credentials"
         />
 
-        <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?v=1.12.1" />
+        <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=b9c27aa0" />
         <link rel="stylesheet" href="/dsfr/dsfr.min.css?v=1.12.1" />
         <!-- Matomo -->
         <script>

package.json

@@ -13,12 +13,14 @@
         "start": "serve --single dist"
     },
     "dependencies": {
+        "react-lottie": "^1.2.4",
         "serve": "^14.2.3"
     },
     "devDependencies": {
         "@codegouvfr/react-dsfr": "^1.9.27",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
+        "@types/react-lottie": "^1.2.10",
         "@types/react-scroll": "^1.8.10",
         "@vitejs/plugin-react": "^4.2.1",
         "react": "^18.2.0",

src/Datas.tsx

@@ -18,28 +18,6 @@ export const tilesData = [
     },
 ];
 
-export const stepsInfosPublic = [
-    {
-        question: 'Êtes-vous éligible ?',
-        response:
-            'Oui ! Tous les membres de la Fonction Publique peuvent utiliser notre bouton de connexion AgentConnect.',
-    },
-    {
-        question: 'Que se passe-t-il si votre administration n’est pas partenaire ?',
-        response: `Aucun problème, vous pouvez utiliser ProConnnect ! 
-    Nous nous assurons nous-même que vous faites partie de la Fonction Publique en vérifiant votre email professionnel et le SIRET de votre organisation.`,
-        link: '/partenaires',
-        descriptionLink: 'Découvrez la liste des partenaires',
-    },
-    {
-        question: 'À quels services en ligne pouvez-vous vous connecter ?',
-        response:
-            'Grâce au AgentConnect, accédez à tous les outils de la DINUM, à la Suite Numérique et à tous les services interministériels de nos partenaires.',
-        link: '/services',
-        descriptionLink: `Découvrez l'annuaire des services`,
-    },
-];
-
 export const stepsInfosPrivate = [
     {
         question: 'Êtes-vous éligible ?',

src/Pages/Eligibility/EligibilityTest.tsx

@@ -0,0 +1,12 @@
+import './eligibility.css';
+
+import { WhoIsYourBoss } from './WhoIsYourBoss';
+
+function EligibilityTest() {
+    return (
+        <div className="fr-container" id="componentStart">
+            <WhoIsYourBoss />
+        </div>
+    );
+}
+export default EligibilityTest;

src/Pages/Eligibility/Eligible.tsx

@@ -0,0 +1,38 @@
+import Button from '@codegouvfr/react-dsfr/Button';
+import Lottie from 'react-lottie';
+import eligibleAnimation from '../../assets/Success.json';
+
+const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: eligibleAnimation,
+    rendererSettings: {
+        preserveAspectRatio: 'xMidYMid slice',
+    },
+};
+
+export function Eligible() {
+    return (
+        <div className="fr-container">
+            <div className="container fr-my-8w">
+                <div className="fr-container fr-py-3w">
+                    <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+                        <div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
+                            <Lottie options={defaultOptions} height={300} width={300} />
+                        </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>
+                            <a className="fr-raw-link" href="/services">
+                                <Button>Explorer l'annuaire des sites</Button>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/Pages/Eligibility/NotEligible.tsx

@@ -0,0 +1,24 @@
+import notEligible from '../../assets/notEligible.svg';
+
+export function NotEligible() {
+    return (
+        <div className="fr-container">
+            <div className="container fr-my-8w">
+                <div className="fr-container fr-py-3w">
+                    <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+                        <div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
+                            <img src={notEligible} alt="" />
+                        </div>
+                        <div className="fr-col-12 fr-col-md-6">
+                            <h1 className="fr-h2">Vous n'êtes pas éligible.</h1>
+                            <p>
+                                AgentConnect est réservé aux agents publics. Les associations et
+                                entreprises privées ne peuvent pas l'utiliser.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/Pages/Eligibility/WhoIsYourBoss.tsx

@@ -0,0 +1,82 @@
+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';
+
+export function WhoIsYourBoss() {
+    const [selectedOption, setSelectedOption] = useState<bossNameType | undefined>(undefined);
+    return (
+        <>
+            <div className="container fr-mt-8w">
+                <div className="fr-container fr-py-3w">
+                    <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+                        <div className="fr-col-6 fr-hidden fr-unhidden-md centered-content">
+                            <img src={eligibility} alt="" />
+                        </div>
+                        <div className="fr-col-12 fr-col-md-6">
+                            <h1 className="fr-h2">Testez votre éligibilité !</h1>
+                            <RadioButtons
+                                legend="Qui est votre employeur ?"
+                                name="radio"
+                                options={bossNames.map((name) => {
+                                    const { label } = bosses[name];
+                                    return {
+                                        label,
+                                        nativeInputProps: {
+                                            checked: selectedOption === name,
+                                            onChange: () => setSelectedOption(name),
+                                        },
+                                    };
+                                })}
+                                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>
+                        </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>
+        </>
+    );
+}