✨ Customer login page

src/front/Components/Layouts/LoginCustomer/classes.module.scss

@@ -2,28 +2,48 @@
 
 .root {
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	flex-direction: column;
-	height: 100%;
 	max-width: 530px;
 	margin: auto;
+	margin-top: 220px;
 
 	.title {
-		margin: 32px 0;
+		margin-bottom: 32px;
-		text-align: center;
+		text-align: left;
 
 		@media (max-width: $screen-s) {
 			font-family: 48px;
 		}
 	}
 
+	.logo {
+		margin-top: 32px;
+		cursor: pointer;
+	}
+
+	.what_is_france_connect {
+		color: var(--light-text-action-high-blue-france, #000091);
+		/* 2.Corps de texte/SM - Texte détail/Desktop & Mobile - Regular */
+		font-family: Marianne;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 171.429% */
+		margin-top: 12px;
+	}
+
+	.or {
+		margin-top: 32px;
+	}
 	.forget-password {
 		margin-top: 32px;
 		margin-bottom: 8px;
 	}
 
-	.logo {
+	.form {
-		cursor: pointer;
+		margin-top: 32px;
+		.submit_button {
+			margin-top: 32px;
+		}
 	}
 }

src/front/Components/Layouts/LoginCustomer/index.tsx

@@ -1,4 +1,3 @@
-import CoffreIcon from "@Assets/Icons/coffre.svg";
 import franceConnectLogo from "./france-connect.svg";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
@@ -11,6 +10,8 @@ import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
 import Link from "next/link";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Form from "@Front/Components/DesignSystem/Form";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
 
 export default function Login() {
 	const router = useRouter();
@@ -45,17 +46,27 @@ export default function Login() {
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
-				<Image alt="coffre" src={CoffreIcon} />
 				<Typography typo={ITypo.H1}>
-					<div className={classes["title"]}>Connexion espace client</div>
+					<div className={classes["title"]}>Identifiez-vous</div>
 				</Typography>
+				<Typography typo={ITypo.P_16}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography>
 				<Image alt="france-connect" src={franceConnectLogo} onClick={redirectCustomerOnConnection} className={classes["logo"]} />
-				<Typography typo={ITypo.P_18}>
+				<div className={classes["what_is_france_connect"]}>Qu'est ce que FranceConnect ?</div>
+				<Typography className={classes["or"]} typo={ITypo.P_16}>
+					Ou
+				</Typography>
+				<Form className={classes["form"]}>
+					<TextField placeholder="E-mail" name="email" />
+					<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
+						Suivant
+					</Button>
+				</Form>
+				{/* <Typography typo={ITypo.P_18}>
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:g.texier@notaires.fr">
 					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
-				</Link>
+				</Link> */}
 			</div>
 			<Confirm
 				isOpen={isErrorModalOpen}