UI : Improved 404 page

frontend/src/Component/NotFound.jsx

@@ -1,11 +1,42 @@
-import React from "react";
+import React from 'react';
+import { makeStyles, Card, CardMedia } from '@material-ui/core';
+import img from './../assets/404img.png';
 
-const NotFound =(()=>{
-    return(
-        <div>
-            <h1>Not Found</h1>
-        </div>
-    )
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+    height: '90vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#b9b8b8b7',
+  },
+  card: {
+    padding: '1rem',
+    width: '30%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: '16px',
+    textAlign: 'center',
+  },
 });
 
-export default NotFound;
+const NotFound = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Card className={classes.card}>
+        <CardMedia component="img" image={img} alt="Paella dish" />
+        <h5 className={classes.text}>
+          Sorry, the page you are looking for is now beyond our reach.
+        </h5>
+      </Card>
+    </div>
+  );
+};
+
+export default NotFound;

frontend/src/index.css

@@ -1,13 +1,13 @@
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-      sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-      monospace;
-  }
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}