feat(dashboard-v2): add custom 404 page

packages/dashboard-v2/src/pages/404.js

@@ -1,54 +1,27 @@
 import * as React from "react";
-import { Link } from "gatsby";
 
-// styles
+import DashboardLayout from "../layouts/DashboardLayout";
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-};
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-};
 
-const paragraphStyles = {
+import { Metadata } from "../components/Metadata";
-  marginBottom: 48,
+import HighlightedLink from "../components/HighlightedLink";
-};
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-};
 
-// markup
 const NotFoundPage = () => {
   return (
-    <main style={pageStyles}>
+    <div>
+      <Metadata>
         <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
+      </Metadata>
-      <p style={paragraphStyles}>
+      <section className="mt-12">
-        Sorry{" "}
+        <h1>Oops! 😔</h1>
-        <span role="img" aria-label="Pensive emoji">
+        <p>Whatever you're looking for is not here.</p>
-          😔
+        <p>
-        </span>{" "}
+          Would you like to <HighlightedLink to="/">go back to homepage</HighlightedLink>?
-        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>
+      </section>
+    </div>
   );
 };
 
+NotFoundPage.Layout = DashboardLayout;
+
 export default NotFoundPage;