Added category page without content

01-frontend/src/App.tsx

@@ -7,6 +7,7 @@ import NoPage from './pages/NoPage';
 import Product from './pages/Product';
 import Payment from './pages/Payment';
 import Contact from './pages/Contact';
+import Category from './pages/Category';
 import { BasketProvider } from './helper/BasketProvider';
 
 export default function App() {
@@ -21,7 +22,7 @@ export default function App() {
           <Route path="*" element={<NoPage />} />
           <Route path="/product/:id" element={<Product />} />
           <Route path="/checkout" element={<Payment />} />
-          <Route path="/categories" element={<Home />} />
+          <Route path="/categories" element={<Category />} />
           <Route path="/contact" element={<Contact />} />
         </Routes>
       </BrowserRouter>

01-frontend/src/pages/Category.tsx

@@ -0,0 +1,34 @@
+import { Box, Typography, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import "./pages.css";
+
+export default function Category() {
+    const navigate = useNavigate();
+
+    const handleGoHome = () => {
+        navigate("/");
+    };
+
+    return (
+        <Box className="no-page-container">
+            <Typography variant="h1" className="no-page-title">
+                Category
+            </Typography>
+            <Typography variant="h5" className="no-page-subtitle">
+                Oops! The page you're looking for doesn't exist.
+            </Typography>
+            <Typography variant="body1" className="no-page-description">
+                It seems you may have taken a wrong turn. Let's get you back on track.
+            </Typography>
+            <Button
+                variant="contained"
+                color="primary"
+                size="large"
+                className="no-page-button"
+                onClick={handleGoHome}
+            >
+                Go Back to Home
+            </Button>
+        </Box>
+    );
+}