added 404 error page (#79)

Author: devarshishimpi

frontend/src/App.js

@@ -10,6 +10,7 @@ import Home from './components/LandingPage/Pages/Home'
 import Contact from './components/LandingPage/Pages/Contact'
 import RecycleBin from './components/RecycleBin/RecycleBin';
 import Account from './components/Account/Account';
+import ErrorPage from './components/Error/ErrorPage';
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
         <Route path = "/" element = {<Home />}/>
         <Route path = "/bin" element = {<RecycleBin />}/>
         <Route path = "/myaccount" element = {<Account />}/>
+        <Route path = '*' element={<ErrorPage/>}/>
       </Routes>
     </Router>
   );

frontend/src/assets/error404.png

@@ -0,0 +1,20 @@
+.errorpage_container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem;
+}
+
+.error_banner{
+    width: 35rem;
+}
+
+.errorpage_container h2{
+    text-align: center;
+    font-size: 3rem;
+}
+
+.errorpage_container p{
+    font-size: 1.4rem;
+}

frontend/src/components/Error/ErrorPage.css

@@ -0,0 +1,22 @@
+import React from 'react'
+import Navbar from '../LandingPage/Components/NavBar/NavBar'
+import Footer from '../LandingPage/Components/Footer/Footer'
+import './ErrorPage.css'
+import errorImg from '..//../assets/error404.png'
+import {Link} from 'react-router-dom'
+
+const ErrorPage = () => {
+  return (
+    <>
+    <Navbar/>
+    <div className='errorpage_container'>
+        <img className="error_banner" src={errorImg} alt="404 error image" />
+        <h2>404 Error<br/> Page Not Found!</h2>  
+        <p>Go back to <Link to="/">Home</Link></p> 
+    </div>
+    <Footer/> 
+    </>
+  )
+}
+
+export default ErrorPage