-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(front): update website with new mockup (#19)
* feat(front): update HomeLayout component * chore(deps): update stylesheet link after npm install * chore: add react-lottie library * feat(front): create component EligibilityTest * fix: delete obsolete class * refactor: delete obsolet code/delete partners page * feat(route): replace modal eligibility with dedicated page * refactor(routes): declare sub routes for lgbt
- Loading branch information
1 parent
0346b96
commit c00214d
Showing
30 changed files
with
529 additions
and
372 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.