Fixed the Error Page

Author: SadafKausar2025

package-lock.json

@@ -15,7 +15,7 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0"
   },
-"devDependencies": {
+  "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.3.1",

package.json

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

postcss.config.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
 
 import {
   Route,
   RouterProvider,
   createBrowserRouter,
   createRoutesFromElements,
-} from 'react-router-dom';
-import Categories from './pages/Categories/Categories';
-import Login from './pages/Login/Login';
-import Toys from './pages/gifts/Toys';
-import AboutUs from './pages/About/AboutUs';
+} from "react-router-dom";
+import Categories from "./pages/Categories/Categories";
+import Login from "./pages/Login/Login";
+import Toys from "./pages/gifts/Toys";
+import AboutUs from "./pages/About/AboutUs";
 // import Gifts from './pages/gifts/Gifts';
 import Contact from "./pages/Contacts/Contact";
 import Dashboard from "./pages/Dashboard/Dashboard";
@@ -45,13 +45,12 @@ const router = createBrowserRouter(
 
       {/* Drop down of categories */}
 
-      <Route path="/categories" element={<Categories />}/>
+      <Route path="/categories" element={<Categories />} />
       <Route path="/categories/fashion" element={<Fashion />} />
       <Route path="/categories/bodycare" element={<BodyCare />} />
       <Route path="/categories/furniture" element={<Furniture />} />
       <Route path="/categories/stationary" element={<Stationary />} />
       <Route path="/categories/gifts" element={<Gifts />} />
-      
 
       <Route path="about" element={<AboutUs />} />
       <Route path="help" element={<Help />} />
@@ -76,8 +75,8 @@ const router = createBrowserRouter(
   )
 );
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <>
     <RouterProvider router={router} />
-  </>,
+  </>
 );

src/main.jsx

@@ -1,19 +1,30 @@
-import React from 'react';
-import {NavLink} from 'react-router-dom';
+import React from "react";
+import { NavLink } from "react-router-dom";
 
 const Page404 = () => {
   return (
     <section className="flex flex-col items-center justify-center min-h-screen bg-white py-10">
       <div className="flex flex-col items-center">
         <div className="relative w-full max-w-xl">
-          <div className="bg-cover bg-center h-80" style={{ backgroundImage: 'url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif)' }}>
+          <div
+            className="bg-cover bg-center h-80"
+            style={{
+              backgroundImage:
+                "url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif)",
+            }}>
             <h1 className="text-center text-6xl font-bold">404</h1>
           </div>
         </div>
         <div className="text-center mt-[-2.5rem]">
           <h3 className="text-4xl font-semibold">Look like you're lost</h3>
-          <p className="text-lg mt-4">The page you are looking for is not available!</p>
-          <NavLink to="/" className="inline-block mt-5 px-6 py-2 text-white bg-green-600 rounded">Go to Home</NavLink>
+          <p className="text-lg mt-4">
+            The page you are looking for is not available!
+          </p>
+          <NavLink
+            to="/"
+            className="inline-block mt-5 px-6 py-2 text-white bg-green-600 rounded">
+            Go to Home
+          </NavLink>
         </div>
       </div>
     </section>