Merge pull request #95 from RobEasthope/404-page

Custom 404 page
RobEasthope · May 7, 2019 · e64f663 · e64f663
2 parents 8db1fd9 + 28f8edb
commit e64f663
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/web/src/components/ProjectText/ProjectText.js b/web/src/components/ProjectText/ProjectText.js
@@ -8,6 +8,10 @@ const ProjectText = styled(Text)`
   font-size: ${fontSizing(20, 24)};
   margin-bottom: 0.5em;
   max-width: 27em;
+
+  img {
+    max-width: 100%;
+  }
 `;
 
 export default ProjectText;
diff --git a/web/src/pages/404.js b/web/src/pages/404.js
@@ -1,13 +1,47 @@
 import React from 'react';
+import { Flex, Box } from 'rebass';
+import { Link } from 'gatsby';
 
 import Layout from '../components/Layout/Layout';
 import SEO from '../components/Seo/Seo';
+import ProjectTitle from '../components/ProjectTitle/ProjectTitle';
+import ProjectText from '../components/ProjectText/ProjectText';
 
 const NotFoundPage = () => (
   <Layout>
     <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <Flex
+      id="portfolio"
+      as="section"
+      flexDirection="row"
+      flexWrap="wrap"
+      px="4"
+      justifyContent={{ b: 'flex-start', md: 'flex-end' }}
+    >
+      <Flex
+        flexWrap="wrap"
+        flexDirection="row"
+        justifyContent={{ b: 'flex-start', md: 'flex-end' }}
+      >
+        <Box mb="3" mt="5" order={{ b: 1, xlg: 2 }}>
+          <ProjectText>
+            <p style={{ fontStyle: 'italic' }}>Fear not, brave friend...</p>
+            <p>
+              Apologies, but you just found a route that actually doesn't
+              exist...
+            </p>
+            <p>
+              <Link to="/">Go back to the landing page</Link>
+            </p>
+
+            <img
+              src="https://uploads2.wikiart.org/images/gustave-dore/the-inferno-canto-8-1.jpg!HD.jpg"
+              alt="The Inferno, Canto 8 | Gustave Dore"
+            />
+          </ProjectText>
+        </Box>
+      </Flex>
+    </Flex>
   </Layout>
 );