[UPD] 404 page basic styling

Author: carms-ng

src/pages/404.js

@@ -1,13 +1,29 @@
+import { Trans } from "gatsby-plugin-react-i18next"
 import * as React from "react"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
+import SiteBorderStyles from "../styles/SiteBorderStyles"
 
 const NotFoundPage = () => (
   <Layout>
-    <SEO title="404: Not found" />
-    <h1>404: Not Found</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <SEO title="404" />
+    <SiteBorderStyles>
+      <section>
+        <div className="text-left md:text-center py-4 md:pt-16 md:pb-8 lg:pt-24 md:pb-8">
+          <h2 className="text-3xl lg:text-4xl">
+            <span className="highlight-red">
+              404
+            </span>
+            <Trans> Not Found</Trans>
+          </h2>
+          <p className="text-xl lg:text-2xl my-4" style={{color: `var(--darkgrey)`}}>
+            <Trans>You just hit a route that doesn&#39;t exist... the sadness.</Trans>
+          </p>
+        </div>
+      </section>
+
+    </SiteBorderStyles>
   </Layout>
 )