From 883d19d7c4026d48a6c101f5a7d4640c20a4981f Mon Sep 17 00:00:00 2001
From: T'JAMPENS QUENTIN p2406187 <pyramond69@gmail.com>
Date: Wed, 17 Dec 2025 15:10:58 +0100
Subject: [PATCH] Update PageNotFound.jsx

---
 src/pages/PageNotFound/PageNotFound.jsx       | 18 ++++++++--
 .../PageNotFound/PageNotFound.module.css      | 33 +++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/pages/PageNotFound/PageNotFound.jsx b/src/pages/PageNotFound/PageNotFound.jsx
index 35299a6..27b8630 100644
--- a/src/pages/PageNotFound/PageNotFound.jsx
+++ b/src/pages/PageNotFound/PageNotFound.jsx
@@ -1,10 +1,24 @@
 import Background from "../../components/background/background.jsx";
+import styles from "./PageNotFound.module.css"
+import { useNavigate } from "react-router";
 
 export default function PageNotFound() {
 
+    const navigate = useNavigate();
+
     return <Background>
+        <div className={styles.content}>
+            <h1 className={styles.title}> Page non trouvée </h1>
+            <div className={`${styles.container} glassCard`}>
+                <p>
+                    Désolé, la page que vous recherchez n’existe pas ou n’est plus disponible. <br/>
+                    Vous pouvez : <br/>
+                    - Vérifier l’URL pour une éventuelle erreur de saisie. <br/>
+                    - Revenir à l’accueil <span onClick={() => navigate("/")} className={styles.redirectSpan}>ici.</span> <br/>
 
-        <h1>404</h1>
-
+                </p>
+                <p> Contact : contact@example.com </p>
+            </div>
+        </div>
     </Background>
 }
\ No newline at end of file
diff --git a/src/pages/PageNotFound/PageNotFound.module.css b/src/pages/PageNotFound/PageNotFound.module.css
index e69de29..70e36f9 100644
--- a/src/pages/PageNotFound/PageNotFound.module.css
+++ b/src/pages/PageNotFound/PageNotFound.module.css
@@ -0,0 +1,33 @@
+.title {
+    color: white;
+    font-size: xx-large;
+    margin-bottom: 20px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    padding: 10px;
+}
+
+.container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+
+    p {
+        font-size: large;
+    }
+}
+.redirectSpan {
+    color: blue;
+    text-decoration: underline;
+}
+
+.redirectSpan:hover {
+    cursor: pointer;
+}
\ No newline at end of file