404 page

app/public/index.html

@@ -8,7 +8,8 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Build your portfolio management website using a free open source tool." />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.webp" />
-  <meta name="keywords" content="Portfolio, Portfolioshop, Management, Sudip, Mondal, Ayush, Tiwari, Open-Source, GitHub" />
+  <meta name="keywords"
+    content="Portfolio, Portfolioshop, Management, Sudip, Mondal, Ayush, Tiwari, Open-Source, GitHub" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -23,9 +24,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap" rel="stylesheet">
   <title>Portfolio Shop: We build for you</title>
-  
+
   <!-- Google Adsense-->
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4384339607469188"
     crossorigin="anonymous"></script>

app/src/App.js

@@ -10,6 +10,7 @@ import Menufooter from './Components/MenuFooter'
 import PrivacyPolicy from './Pages/PrivacyPolicy'
 import SnackbarStateProvider from './Providers/SnackbarStateProvider'
 import Snackbar from './Components/MuiComponents/Snackbar'
+import Page404 from './Pages/page404'
 
 const App = () => {
   return (
@@ -21,6 +22,7 @@ const App = () => {
             <Route path="/" element={<Home />} />
             <Route path="/team" element={<Team />} />
             <Route path="/about-us" element={<Aboutus />} />
+            <Route path="*" element={<Page404 />} />
             <Route path="/privacy-policy" element={<PrivacyPolicy />} />
           </Routes>
           <Snackbar />

app/src/Pages/page404.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Typography, Container, Button } from '@mui/material'
+import { withStyles } from '@mui/styles'
+import { useNavigate } from "react-router-dom"
+
+const styles = (theme) => ({
+    block: {
+        margin: '27vh 0 40vh 0',
+        textAlign: 'center'
+    },
+    heading: {
+        font: '140px Rubik Mono One',
+        letterSpacing: '-10px',
+        transform: 'rotate(-6deg)',
+        marginBottom: '5px',
+        textShadow: '5px 7px 2px #8787874f'
+    }
+})
+
+const Page404 = (props) => {
+    const { classes } = props
+    const navigate = useNavigate();
+
+    const handleClick = () => {
+        navigate("/");
+    }
+
+    return (
+        <>
+            <Container>
+                <div className={classes.block} >
+                    <h1 className={classes.heading} >404</h1>
+                    <Typography>Oops, looks like the page you were looking for does not exist</Typography>
+                    <Button sx={{ height: 45, mt: 3.5 }}
+                        style={{
+                            borderRadius: 0,
+                            backgroundColor: "#28282a",
+                            padding: "18px 36px",
+                            fontSize: "18px"
+                        }}
+                        variant="contained"
+                        onClick={handleClick}
+                    >
+                        Go Home
+                    </Button>
+                </div>
+            </Container>
+        </>
+    )
+}
+
+export default withStyles(styles)(Page404)
+