Add NotFound page

Author: mdossantosdev

client/src/App.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Router } from '@reach/router';
 import { GlobalStyle } from './globalStyle';
-
 import Header from './containers/Header';
 import Home from './containers/Home';
 import Movie from './containers/Movie';
+import NotFound from './containers/NotFound';
 
 const App = () => {
   return (
@@ -13,6 +13,7 @@ const App = () => {
       <Router>
         <Home path='/' />
         <Movie path='/movie/:movieID/*' />
+        <NotFound default />
       </Router>
       <GlobalStyle />
     </>

client/src/containers/NotFound/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Container, Heading, Text } from './styles';
+
+const NotFound = () => {
+  return (
+    <Container>
+      <Heading>404 - Page Not Found</Heading>
+      <Text>Sorry, the page you are looking for does not exist.</Text>
+    </Container>
+  );
+};
+
+export default NotFound;

client/src/containers/NotFound/styles.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+`;
+
+export const Heading = styled.h1`
+  font-size: 4rem;
+  font-weight: 700;
+  color: var(--secondaryColor);
+  margin-bottom: 1rem;
+`;
+
+export const Text = styled.p`
+  font-size: 1.5rem;
+  color: var(--lightGrey);
+  margin-bottom: 2rem;
+`;

client/src/globalStyle.js

@@ -16,6 +16,7 @@ export const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    background-color: rgb(242, 242, 242);
   }
 
   a {