[UPD] 404 page basic styling + Translation wiring

Author: carms-ng

src/pages/404.js

@@ -1,14 +1,43 @@
-import * as React from "react"
+import * as React from "react";
+import { graphql } from 'gatsby';
+import { Trans } from "gatsby-plugin-react-i18next";
+import Layout from "../components/layout";
+import SEO from "../components/seo";
+import SiteBorderStyles from "../styles/SiteBorderStyles";
 
-import Layout from "../components/layout"
-import SEO from "../components/seo"
+export default function NotFoundPage() {
+  return (
+    <Layout>
+      <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> Page 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>
+  )
+}
 
-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>
-  </Layout>
-)
-
-export default NotFoundPage
+export const query = graphql`
+  query($language: String!) {
+    locales: allLocale(filter: {language: {eq: $language}}) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`;

src/pages/index.js

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { useTranslation } from 'gatsby-plugin-react-i18next';
-
+import { graphql } from 'gatsby';
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import Hero from "../components/hero";