ibg-CORPWEB-3437-404-page

Author: ibgrav

src/theme/NotFound/Content/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import clsx from "clsx";
+import Translate from "@docusaurus/Translate";
+import type { Props } from "@theme/NotFound/Content";
+import Heading from "@theme/Heading";
+
+export default function NotFoundContent({ className }: Props): JSX.Element {
+  return (
+    <main className={clsx("container margin-vert--xl", className)}>
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <Heading as="h1" className="hero__title">
+            <Translate
+              id="theme.NotFound.title"
+              description="The title of the 404 page"
+            >
+              Page Not Found
+            </Translate>
+          </Heading>
+          <p>
+            <Translate
+              id="theme.NotFound.p1"
+              description="The first paragraph of the 404 page"
+            >
+              We could not find what you were looking for.
+            </Translate>
+          </p>
+          <p>
+            <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>
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}

src/theme/NotFound/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { translate } from "@docusaurus/Translate";
+import { PageMetadata } from "@docusaurus/theme-common";
+import Layout from "@theme/Layout";
+import NotFoundContent from "@theme/NotFound/Content";
+
+export default function Index(): JSX.Element {
+  const title = translate({
+    id: "theme.NotFound.title",
+    message: "Page Not Found",
+  });
+
+  return (
+    <>
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
+    </>
+  );
+}