Updated 404 page and bug fix

src/App.css

@@ -58,6 +58,48 @@
     padding-block: 4rem;
     background: var(--black);
 }
+.page-warning {
+    background: var(--white);
+    box-shadow: var(--shadow);
+    padding: 2rem;
+    max-width: 500px;
+    margin-inline: auto;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+.page-warning-content {
+    display: flex;
+    justify-content: space-between;
+    gap: 2rem;
+    align-items: center;
+}
+.page-warning-icon {
+    font-size: 2rem;
+    color: var(--main);
+}
+.page-warning-text {
+    font-size: 1rem;
+    color: var(--darkGray);
+}
+.page-warning-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+}
+.page-warning-action {
+    padding: 0.3rem 1rem;
+    border: none;
+    text-decoration: none;
+    border-radius: 999px;
+    background: var(--main);
+    color: var(--white);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: 0.3s;
+}
 
 @media screen and (max-width: 1100px) {
     .page {
@@ -66,4 +108,11 @@
     .page-title {
         font-size: 1.75rem;
     }
+}
+@media screen and (max-width: 500px) {
+    .page-warning-content {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
 }

src/pages/404/404.tsx

@@ -1,28 +1,44 @@
+import { WarningCircle } from 'iconoir-react';
 import React from 'react';
 
 const NotFound: React.FC = () => {
   return (
-    <div>
-      <h2>Note du 28/09/2024</h2>
-      <p>
-        Le site est actuellement en rénovation (passage de vanilla à ReactJS).
-      </p>
-      <p>
-        Nous sommes désolé pour la gêne occasionnée, nous faisons de notre mieux
-        pour que le site soit de nouveau disponible.
-      </p>
-      <h1>404 - Page Not Found</h1>
-      <p>
-        La page à laquel vous essayez d'accéder n'est pas disponible pour le
-        moment, veuillez revenir plus tard.
-      </p>
-      <p>Le site est comme nous, il expériemente en continu.</p>
-      <p>
-        Si vous vouliez nous contacter et que la page de contact vous à amenez
-        ici, nous sommes disponibles par mail à{' '}
-        <a href={'mailto:contact@modelec.club'}>contact@modelec.club</a>
-      </p>
-    </div>
+    <>
+      <h1 className={'page-title'}>Page non-trouvée</h1>
+      <div className={'page-warning'}>
+        <div className={'page-warning-content'}>
+          <WarningCircle className={'page-warning-icon'} />
+          <p className={'page-warning-text'}>
+            Le contenu que vous essayez d'afficher n'existe pas ou plus.
+          </p>
+        </div>
+        <div className={'page-warning-actions'}>
+          <a className={'page-warning-action'} href={'/'}>Retourner à l'accueil</a>
+          <a className={'page-warning-action'} href={'mailto:contact@modelec.club'}>Nous signaler un problème</a>
+        </div>
+      </div>
+    </>
+    // <div>
+    //   <h2>Note du 28/09/2024</h2>
+    //   <p>
+    //     Le site est actuellement en rénovation (passage de vanilla à ReactJS).
+    //   </p>
+    //   <p>
+    //     Nous sommes désolé pour la gêne occasionnée, nous faisons de notre mieux
+    //     pour que le site soit de nouveau disponible.
+    //   </p>
+    //   <h1>404 - Page Not Found</h1>
+    //   <p>
+    //     La page à laquel vous essayez d'accéder n'est pas disponible pour le
+    //     moment, veuillez revenir plus tard.
+    //   </p>
+    //   <p>Le site est comme nous, il expériemente en continu.</p>
+    //   <p>
+    //     Si vous vouliez nous contacter et que la page de contact vous à amenez
+    //     ici, nous sommes disponibles par mail à{' '}
+    //     <a href={'mailto:contact@modelec.club'}>contact@modelec.club</a>
+    //   </p>
+    // </div>
   );
 };
 

src/pages/projets/Projets.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Timeline, TimelineProject } from '../../components/timeline/timeline';
-import './Projets.css';
 
 const Projets: React.FC = () => {
   return (