From 06e99a53fa90cdef6ffbcb64d8f7fb7fab934f95 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Mon, 26 Aug 2024 15:45:27 +0200
Subject: [PATCH] :sparkles page 404

---
 .../Elements/HelpBox/classes.module.scss      |  5 +++
 .../Components/Elements/HelpBox/index.tsx     | 39 ++++++++++++++++++
 .../Layouts/Folder/classes.module.scss        |  6 ---
 src/front/Components/Layouts/Folder/index.tsx | 31 +++++++-------
 .../Layouts/PageNotFound/classes.module.scss  | 39 ++++++++++++------
 .../Components/Layouts/PageNotFound/index.tsx | 40 +++++++++++++++----
 6 files changed, 116 insertions(+), 44 deletions(-)
 create mode 100644 src/front/Components/Elements/HelpBox/classes.module.scss
 create mode 100644 src/front/Components/Elements/HelpBox/index.tsx

diff --git a/src/front/Components/Elements/HelpBox/classes.module.scss b/src/front/Components/Elements/HelpBox/classes.module.scss
new file mode 100644
index 00000000..0c94c931
--- /dev/null
+++ b/src/front/Components/Elements/HelpBox/classes.module.scss
@@ -0,0 +1,5 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-sm, 8px);
+}
diff --git a/src/front/Components/Elements/HelpBox/index.tsx b/src/front/Components/Elements/HelpBox/index.tsx
new file mode 100644
index 00000000..9770f464
--- /dev/null
+++ b/src/front/Components/Elements/HelpBox/index.tsx
@@ -0,0 +1,39 @@
+import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import classes from "./classes.module.scss";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import Link from "next/link";
+
+export type IProps = {
+	title: string;
+	description: string;
+	button: { text: string; link?: string; onClick?: () => void };
+};
+
+export default function HelpBox(props: IProps) {
+	const { title, description, button } = props;
+	return (
+		<div className={classes["root"]}>
+			<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.TEXT_SECONDARY}>
+				{title}
+			</Typography>
+			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
+				{description}
+			</Typography>
+			{button.link ? (
+				<Link href={button.link}>
+					<Button
+						variant={EButtonVariant.SECONDARY}
+						styletype={EButtonstyletype.TEXT}
+						size={EButtonSize.MD}
+						onClick={button.onClick}>
+						Contactez le support
+					</Button>
+				</Link>
+			) : (
+				<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD} onClick={button.onClick}>
+					Contactez le support
+				</Button>
+			)}
+		</div>
+	);
+}
diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss
index c716d594..9fd3d27a 100644
--- a/src/front/Components/Layouts/Folder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/classes.module.scss
@@ -39,12 +39,6 @@
 			display: flex;
 			gap: var(--spacing-lg, 24px);
 
-			.box {
-				display: flex;
-				flex-direction: column;
-				gap: var(--spacing-sm, 8px);
-			}
-
 			@media screen and (max-width: 600px) {
 				flex-direction: column;
 			}
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index b5cf37a3..5bab6189 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -1,9 +1,12 @@
 import LogoIcon from "@Assets/logo_small_blue.svg";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import HelpBox from "@Front/Components/Elements/HelpBox";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
+import useUser from "@Front/Hooks/useUser";
 import { DocumentIcon } from "@heroicons/react/24/outline";
 import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
 import Image from "next/image";
@@ -12,8 +15,6 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
-import useUser from "@Front/Hooks/useUser";
-import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
 
 export default function Folder() {
 	const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
@@ -80,13 +81,11 @@ export default function Folder() {
 					</div>
 
 					<div className={classes["help-container"]}>
-						<div className={classes["box"]}>
-							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
-							<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
-							<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
-								Accéder aux guides
-							</Button>
-						</div>
+						<HelpBox
+							title="Besoin d'aide ?"
+							description="Consultez nos guides pour bien démarrer."
+							button={{ text: "Accéder aux guides" }}
+						/>
 
 						<Separator
 							className={classes["desktop"]}
@@ -96,13 +95,11 @@ export default function Folder() {
 						/>
 						<Separator className={classes["mobile"]} direction={ESeperatorDirection.HORIZONTAL} color={ESeperatorColor.LIGHT} />
 
-						<div className={classes["box"]}>
-							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
-							<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography>
-							<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
-								Contactez le support
-							</Button>
-						</div>
+						<HelpBox
+							title="Vous avez des questions ?"
+							description="Notre équipe de support est là pour vous aider."
+							button={{ text: "Contactez le support" }}
+						/>
 					</div>
 				</div>
 			</div>
diff --git a/src/front/Components/Layouts/PageNotFound/classes.module.scss b/src/front/Components/Layouts/PageNotFound/classes.module.scss
index 0921d66e..6e8af869 100644
--- a/src/front/Components/Layouts/PageNotFound/classes.module.scss
+++ b/src/front/Components/Layouts/PageNotFound/classes.module.scss
@@ -1,21 +1,34 @@
-@import "@Themes/constants.scss";
 @import "@Themes/animation.scss";
+@import "@Themes/constants.scss";
 
 .root {
-	height: 100%;
-	width: 100%;
+	margin: 80px auto;
+	width: 474px;
+
 	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xl, 32px);
 
-	.content {
+	@media (max-width: $screen-s) {
+		width: 100%;
 		margin: auto;
-
-		.text {
-			margin: 32px 0;
-		}
-
-		@media(max-width: $screen-s) {
-			text-align: center;
-		}
+		padding: var(--spacing-md, 16px);
 	}
 
-}
\ No newline at end of file
+	.content {
+		display: flex;
+		padding: var(--spacing-xl, 32px) var(--spacing-lg, 24px);
+		flex-direction: column;
+		gap: var(--spacing-lg, 24px);
+
+		border-radius: var(--radius-rounded, 16px);
+		background: var(--background-primary, #fff);
+		box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
+
+		.text {
+			display: flex;
+			flex-direction: column;
+			gap: var(--spacing-sm);
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/PageNotFound/index.tsx b/src/front/Components/Layouts/PageNotFound/index.tsx
index d1d53861..ba8a15a2 100644
--- a/src/front/Components/Layouts/PageNotFound/index.tsx
+++ b/src/front/Components/Layouts/PageNotFound/index.tsx
@@ -1,27 +1,51 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import LogoIcon from "@Assets/logo_small_blue.svg";
 import Button from "@Front/Components/DesignSystem/Button";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import HelpBox from "@Front/Components/Elements/HelpBox";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Module from "@Front/Config/Module";
+import Image from "next/image";
 import Link from "next/link";
+
 import BasePage from "../Base";
 import classes from "./classes.module.scss";
-import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
-
-import backgroundImage from "@Assets/images/404-background-image.jpeg";
 
 export default class PageNotFound extends BasePage {
 	public override render(): JSX.Element {
 		return (
 			<DefaultDoubleSidePage title={"Project Not Found"} image={backgroundImage} type="background" showHeader>
 				<div className={classes["root"]}>
-					<div className={classes["content"]}>
-						<Typography typo={ETypo.DISPLAY_LARGE}>Erreur 404</Typography>
-						<Typography typo={ETypo.TEXT_LG_REGULAR} className={classes["text"]}>
-							La page que vous recherchez semble introuvable.
+					<div className={classes["title-container"]}>
+						<Image src={LogoIcon} alt="logo" width={56} />
+						<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
+							Oups ! Page introuvable
 						</Typography>
+						<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_PRIMARY}>
+							Il semble que la page que vous recherchez n'existe pas ou a été déplacée.
+						</Typography>
+					</div>
+					<div className={classes["content"]}>
+						<div className={classes["text"]}>
+							<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.TEXT_PRIMARY}>
+								Pas de panique ! Voici ce que vous pouvez faire :
+							</Typography>
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
+								• Retourner à la page d'accueil en cliquant sur le bouton ci-dessous.
+							</Typography>
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
+								• Contactez-nous si vous avez besoin d'aide.
+							</Typography>
+						</div>
 						<Link href={Module.getInstance().get().modules.pages.Home.props.path}>
 							<Button>Retour à l'accueil</Button>
 						</Link>
 					</div>
+					<HelpBox
+						title="Vous avez des questions ?"
+						description="Notre équipe de support est là pour vous aider."
+						button={{ text: "Contactez le support" }}
+					/>
 				</div>
 			</DefaultDoubleSidePage>
 		);