From dfa4a0b335bedc584dae271b3d2baa527561de7b Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 16 Dec 2022 16:38:12 +0100
Subject: [PATCH] Add 404 page-not-found fallback [Fixes #155] (#176)

* add 404 page not found fallback

* clean up styling
---
 src/constants.ts  |  4 +++-
 src/pages/404.tsx | 49 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/404.tsx

diff --git a/src/constants.ts b/src/constants.ts
index 58c0354042..656859cdb5 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -163,7 +163,9 @@ export const METADATA = {
   HOME_DESCRIPTION:
     'Go-ethereum website, home for the official Golang execution layer implementation of the Ethereum protocol',
   DOWNLOADS_TITLE: 'Downloads',
-  DOWNLOADS_DESCRIPTION: 'All Geth releases and builds, available for download'
+  DOWNLOADS_DESCRIPTION: 'All Geth releases and builds, available for download',
+  PAGE_404_TITLE: '404 - Page not found',
+  PAGE_404_DESCRIPTION: 'The page you are looking for does not exist'
 };
 
 // GitHub urls
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000000..82f268a70a
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,49 @@
+import { Button, Flex, Text } from '@chakra-ui/react';
+import type { NextPage } from 'next';
+import NextLink from 'next/link';
+
+import { GopherHomeFront } from '../components/UI/svgs';
+import { PageMetadata } from '../components/UI';
+
+import { METADATA} from '../constants';
+
+const Page404NotFound: NextPage = ({}) => {
+  return (
+    <>
+      <PageMetadata title={METADATA.PAGE_404_TITLE} description={METADATA.PAGE_404_DESCRIPTION} />
+
+      <main id='main-content'>
+        <Flex direction='column' alignItems='center' py={{ base: 16, md: 24 }} border="2px" borderColor="primary">
+          <GopherHomeFront />
+          <Text
+            fontSize={{ base: "8xl", md: "9xl" }}
+            lineHeight='120%'
+            fontFamily='heading'
+            textAlign='center'
+            letterSpacing='0.05em'
+            fontWeight='500'
+          >
+            404
+          </Text>
+          <Text
+            fontSize={{ base: 'xl', md: '2xl'}}
+            fontFamily='heading'
+            fontWeight='700'
+            textAlign='center'
+            mb={{ base: 8, md: 12 }}
+            letterSpacing='0.05em'
+          >
+            page not found
+          </Text>
+          <NextLink href='/' passHref legacyBehavior>
+            <Button variant='primary' as='a' data-group>
+              <Text textStyle='homepage-primary-label'>Go to homepage</Text>
+            </Button>
+          </NextLink>
+        </Flex>
+      </main>
+    </>
+  );
+};
+
+export default Page404NotFound;