From cad8edc3955fd633786627b12bf6a4aef8339476 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 17 Jul 2023 19:00:26 +0330
Subject: [PATCH] feat: custom 404 page, refs #98

---
 .../src/client/theme/NotFound/index.tsx       | 63 +++++++++++++++++++
 .../client/theme/NotFound/styles.module.scss  | 24 +++++++
 2 files changed, 87 insertions(+)
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NotFound/index.tsx
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NotFound/styles.module.scss

diff --git a/packages/logos-docusaurus-theme/src/client/theme/NotFound/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/NotFound/index.tsx
new file mode 100644
index 0000000..dfc93db
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/NotFound/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import Translate, { translate } from '@docusaurus/Translate'
+import { PageMetadata } from '@docusaurus/theme-common'
+import Layout from '@theme/Layout'
+import styles from './styles.module.scss'
+import clsx from 'clsx'
+import { Button, Typography } from '@acid-info/lsd-react'
+import Link from '@docusaurus/Link'
+
+export default function NotFound(): JSX.Element {
+  return (
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+      <Layout>
+        <main className={clsx('container margin-vert--xl', styles.root)}>
+          <div className="row">
+            <div className="col col--6 col--offset-3">
+              <Typography variant="h1">
+                <Translate
+                  id="theme.NotFound.title"
+                  description="The title of the 404 page"
+                >
+                  Page Not Found
+                </Translate>
+              </Typography>
+              <Typography variant="body1" component="p">
+                <Translate
+                  id="theme.NotFound.p1"
+                  description="The first paragraph of the 404 page"
+                >
+                  We could not find what you were looking for.
+                </Translate>
+                <br />
+                <Translate
+                  id="theme.NotFound.p2"
+                  description="The 2nd paragraph of the 404 page"
+                >
+                  Please contact the owner of the site that linked you to the
+                  original URL and let them know their link is broken.
+                </Translate>
+              </Typography>
+            </div>
+            <Link to="/">
+              <Button size="large" variant="outlined">
+                <Translate
+                  id="theme.NotFound.backToHome"
+                  description="The label of the back to home link on the 404 page"
+                >
+                  Back to home
+                </Translate>
+              </Button>
+            </Link>
+          </div>
+        </main>
+      </Layout>
+    </>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/NotFound/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/NotFound/styles.module.scss
new file mode 100644
index 0000000..be21ddd
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/NotFound/styles.module.scss
@@ -0,0 +1,24 @@
+.root {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem !important;
+
+  > div {
+    width: 100%;
+    max-width: 796px !important;
+  }
+
+  > div > div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 0 !important;
+  }
+
+  a {
+    margin-top: 2.5rem;
+  }
+}