fix(kaliacad#229): add semi-transparent background on 404 message (kaliacad#236)

geekananya · web-flow · commit 306f8ae6737d · 2024-07-31T00:08:52.000+02:00
* fix(kaliacad#229): add semi-transparent background on 404 message * refactor(kaliacad#229): add tailwind css, center error message, add button background
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
@@ -1,32 +1,17 @@
 import { useNavigate } from 'react-router-dom';
-import Button from '../components/common/Button';
 
 const NotFound = () => {
     const navigation = useNavigate();
     const handleClick = () => navigation('/');
     return (
-        <div
-            style={{
-                textAlign: 'center',
-                marginTop: '50px',
-            }}
-        >
-            <h1
-                style={{
-                    fontSize: '36px',
-                    marginBottom: '20px',
-                }}
-            >
-                404 - Page non trouvée
-            </h1>
-            <p
-                style={{
-                    fontSize: '18px',
-                }}
-            >
-                {"Désolé, la page que vous recherchez n'existe pas."}
-            </p>
-            <Button text={'Go to home'} event={handleClick} />
+        <div className='text-center flex items-center justify-center p-[25vh]'>
+            <div className='bg-white/45 p-5'>
+                <h1 className='text-4xl mb-2.5'>404 - Page non trouvée</h1>
+                <p className='text-lg'>{"Désolé, la page que vous recherchez n'existe pas."}</p>
+                <button className='py-1 my-1.5 text-base bg-gray-300' onClick={handleClick}>
+                    Go to home
+                </button>
+            </div>
         </div>
     );
 };
