chore: error page setup and footer height fix

src/App.tsx

@@ -10,6 +10,7 @@ import Dashboard from './scenes/Dashboard';
 import Mock from './scenes/Mock';
 import Shop from './scenes/Shop';
 import Contact from './scenes/Contact';
+import Error from './scenes/Error';
 
 const App = () => {
   const mode = useAppSelector((state) => state.global.mode) as PaletteMode;
@@ -27,6 +28,7 @@ const App = () => {
             <Route path='/shop' element={<Shop />} />
             <Route path='/contact' element={<Contact />} />
             <Route path='/mock' element={<Mock />} />
+            <Route path='*' element={<Error />} />
           </Route>
         </Routes>
       </ThemeProvider>

src/scenes/Error/index.tsx

@@ -0,0 +1,31 @@
+import { Box, Button, Container, Typography } from '@mui/material';
+import FlexBetween from '../../components/FlexBetween';
+import { useNavigate } from 'react-router-dom';
+
+const Error = () => {
+  const navigate = useNavigate();
+  return (
+    <Container maxWidth='lg' sx={{ p: '5.5rem 0' }}>
+      <FlexBetween sx={{ flexDirection: 'column', gap: '2.5rem' }}>
+        <Box component='img' src='/assets/error.png' alt='error' />
+        <Box>
+          <Typography variant='h4' textAlign={'center'} p='1rem 0' fontWeight={600}>
+            Opps!
+          </Typography>
+          <Typography
+            variant='subtitle1'
+            width={292}
+            textAlign={'center'}
+            lineHeight={2}
+            letterSpacing={1.5}
+          >
+            We’re sorry. The page you requested could not be found.
+          </Typography>
+          <Button onClick={() => navigate('/home')}>Back to the home page</Button>
+        </Box>
+      </FlexBetween>
+    </Container>
+  );
+};
+
+export default Error;

src/scenes/Footer/footer.styles.css

@@ -1,6 +1,6 @@
 .footer {
   width: 100%;
-  height: 505px;
+  height: 300px;
 }
 
 .footer__meta-title {