revamp template

src/errors/Error404Page.tsx

@@ -0,0 +1,41 @@
+import useBodyClasses from '@/hooks/useBodyClasses';
+import { toAbsoluteUrl } from '@/utils';
+import { Link } from 'react-router-dom';
+import { Fragment } from 'react/jsx-runtime';
+
+const Error404Page = () => {
+  useBodyClasses('dark:bg-coal-500');
+
+  return (
+    <Fragment>
+      <div className="mb-10">
+        <img
+          src={toAbsoluteUrl('/media/illustrations/19.svg')}
+          className="dark:hidden max-h-[160px]"
+          alt="image"
+        />
+        <img
+          src={toAbsoluteUrl('/media/illustrations/19-dark.svg')}
+          className="light:hidden max-h-[160px]"
+          alt="image"
+        />
+      </div>
+
+      <span className="badge badge-primary badge-outline mb-3">404 Error</span>
+
+      <h3 className="text-2.5xl font-semibold text-gray-900 text-center mb-2">
+        We have lost this page
+      </h3>
+
+      <div className="text-md text-center text-gray-700 mb-10">
+        The requested page is missing. Check the URL or&nbsp;
+        <Link to="/" className="text-primary font-medium hover:text-primary-active">
+          Return Home
+        </Link>
+        .
+      </div>
+    </Fragment>
+  );
+};
+
+export { Error404Page };

src/errors/Error500Page.tsx

@@ -0,0 +1,48 @@
+import useBodyClasses from '@/hooks/useBodyClasses';
+import { toAbsoluteUrl } from '@/utils';
+import { Link } from 'react-router-dom';
+import { Fragment } from 'react/jsx-runtime';
+
+const Error500Page = () => {
+  useBodyClasses('dark:bg-coal-500');
+
+  return (
+    <Fragment>
+      <div className="mb-10">
+        <img
+          src={toAbsoluteUrl('/media/illustrations/20.svg')}
+          className="dark:hidden max-h-[160px]"
+          alt="image"
+        />
+        <img
+          src={toAbsoluteUrl('/media/illustrations/20-dark.svg')}
+          className="light:hidden max-h-[160px]"
+          alt="image"
+        />
+      </div>
+
+      <span className="badge badge-primary badge-outline mb-3">500 Error</span>
+
+      <h3 className="text-2.5xl font-semibold text-gray-900 text-center mb-2">
+        Internal Server Error
+      </h3>
+
+      <div className="text-md text-center text-gray-700 mb-10">
+        Server error occurred. Please try again later or &nbsp;
+        <a
+          href="https://devs.keenthemes.com"
+          className="text-primary font-medium hover:text-primary-active"
+        >
+          Contact Us
+        </a>
+        &nbsp; for assistance.
+      </div>
+
+      <Link to="/" className="btn btn-primary flex justify-center">
+        Back to Home
+      </Link>
+    </Fragment>
+  );
+};
+
+export { Error500Page };

src/errors/ErrorsRouting.tsx

@@ -0,0 +1,18 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import { ErrorsLayout } from '@/layouts/errors';
+import { Error404Page } from './Error404Page';
+import { Error500Page } from './Error500Page';
+
+const ErrorsRouting = () => (
+  <Routes>
+    <Route element={<ErrorsLayout />}>
+      <Route index element={<Error404Page />} />
+      <Route path="404" element={<Error404Page />} />
+      <Route path="500" element={<Error500Page />} />
+      <Route path="*" element={<Navigate to="/error/404" />} />
+    </Route>
+  </Routes>
+);
+
+export { ErrorsRouting };

src/errors/index.ts

@@ -0,0 +1,3 @@
+export * from './Error404Page';
+export * from './Error500Page';
+export * from './ErrorsRouting';