create 404 page

Author: ueokande

src/pages/404.tsx

@@ -1,49 +1,26 @@
 import { type HeadFC, Link, type PageProps } from "gatsby";
-import type * as React from "react";
-
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-};
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-};
-
-const paragraphStyles = {
-  marginBottom: 48,
-};
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-};
+import { Heading, Page, PageContent, Paragraph } from "grommet";
+import { Layout } from "../components/layout";
+import { Seo } from "../components/seo";
 
 const NotFoundPage: React.FC<PageProps> = () => {
   return (
-    <main style={pageStyles}>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry 😔, we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
-    </main>
+    <Layout>
+      <Page kind="narrow" margin={{ vertical: "xlarge" }}>
+        <PageContent>
+          <Heading level="1" margin="none">
+            Page not found
+          </Heading>
+          <Paragraph size="large" fill>
+            Sorry 😔, we couldn’t find what you were looking for.{" "}
+            <Link to="/">Go home</Link>.
+          </Paragraph>
+        </PageContent>
+      </Page>
+    </Layout>
   );
 };
 
 export default NotFoundPage;
 
-export const Head: HeadFC = () => <title>Not found</title>;
+export const Head: HeadFC = () => <Seo title="Not Found" />;