Update PageNotFound.jsx

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>
 }

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;
+}