creating and styling 404 page

Author: skools-here

src/pages/404.js

@@ -0,0 +1,43 @@
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+export default function Custom404() {
+  return (
+    <Layout title="404 - Not Found">
+      <main className={styles.notFoundContainer}>
+        <div className={styles.notFoundContent}>
+          <h1 className={styles.notFoundTitle}>Oops! 404</h1>
+          <h2 className={styles.notFoundSubtitle}>Not Found...</h2>
+
+          <p className={styles.notFoundDescription}>
+            Looks like you've wandered off the beaten path. Our team is working
+            to get you back on track and find what you're looking for.
+          </p>
+
+          <div className={styles.notFoundActions}>
+            <Link className={styles.notFoundPrimaryBtn} to="/">
+              Back To Home
+            </Link>
+
+            <button
+              className={styles.notFoundSecondaryBtn}
+              onClick={() => window.history.back()}
+            >
+              Back to Previous Page
+            </button>
+          </div>
+        </div>
+
+        <div className={styles.notFoundImageWrapper}>
+            <img
+                src={useBaseUrl("/img/keploy-logo-dark.svg")}
+                alt="Keploy logo"
+                className={styles.notFoundLogo}
+            />
+        </div>
+      </main>
+    </Layout>
+  );
+}

src/pages/styles.module.css

@@ -159,4 +159,70 @@
 .announcementInner {
   margin: 0 auto;
   max-width: 768px;
-}
+}
+
+.notFoundContainer {
+  min-height: calc(100vh - 80px);
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  align-items: center;
+  padding: 4rem 6rem;
+}
+
+.notFoundTitle {
+  font-size: 72px;
+  font-weight: 700;
+  color: var(--ifm-color-primary);
+}
+
+.notFoundSubtitle {
+  font-size: 56px;
+  font-weight: 700;
+  color: var(--ifm-color-primary);
+  margin-bottom: 1.5rem;
+}
+
+.notFoundDescription {
+  font-size: 18px;
+  color: #6b7280;
+  max-width: 520px;
+  margin-bottom: 2rem;
+}
+
+.notFoundActions {
+  display: flex;
+  gap: 1rem;
+}
+
+.notFoundPrimaryBtn {
+  padding: 0.75rem 1.5rem;
+  border-radius: 999px;
+  background: var(--ifm-color-primary);
+  color: #fff;
+  font-weight: 600;
+}
+
+.notFoundSecondaryBtn {
+  padding: 0.75rem 1.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--ifm-color-primary);
+  background: transparent;
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.notFoundImageWrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.notFoundImage {
+  max-width: 420px;
+  width: 100%;
+}
+
+.notFoundLogo {
+  max-width: 260px;
+  opacity: 0.9;
+}