add 404 page

package.json

@@ -80,5 +80,4 @@
   "devDependencies": {
     "gh-pages": "^3.1.0"
   }
-
-}
+}

src/App.js

@@ -6,6 +6,7 @@ import Home from "./pages/Home/Home";
 import Footer from "./components/Footer";
 import COC from "./pages/COC/COC";
 import Team from "./pages/Team/Team";
+import NotFoundPage from "./components/NotFoundPage/NotFound";
 
 const App = () => {
   return (
@@ -30,6 +31,9 @@ const App = () => {
                   <Route exact path="/">
                     <Home />
                   </Route>
+                  <Route exact path="*">
+                    <NotFoundPage />
+                  </Route>
                 </Switch>
               </CSSTransition>
             </TransitionGroup>

src/components/NotFoundPage/NotFound.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Container } from "react-bootstrap";
+
+const NotFound = () => {
+  return (
+    <React.Fragment>
+      <Container fluid>
+        <Container>
+          <div className="main-content mx-auto" id="not-found-content">
+            <h2>404</h2>
+            <h4>Oops! Page Not Found</h4>
+            <p>
+              The page you are looking for does not exist. You may have mistyped
+              the address or the page may have moved.
+            </p>
+            <Link to="/">Back to Home Page</Link>
+          </div>
+        </Container>
+      </Container>
+    </React.Fragment>
+  );
+};
+
+export default NotFound;

src/components/NotFoundPage/NotFound.scss

@@ -0,0 +1,47 @@
+#not-found-content {
+  max-width: 600px;
+  text-align: center;
+  margin-bottom: 100px;
+
+  h2 {
+    font-size: 18vw;
+    color: $primary-blue;
+    line-height: 1em;
+  }
+  h4 {
+    position: relative;
+    font-size: 1.5em;
+    margin-bottom: 15px;
+    color: $black;
+    font-weight: 300;
+    display: inline-block;
+  }
+
+  p {
+    color: $github-button-black;
+    font-size: 1.2em;
+  }
+  a {
+    border-bottom: 3px solid $primary-blue;
+    color: $primary-blue;
+    display: inline-block;
+    font-size: 18px;
+    font-weight: 600;
+    margin: 5px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    &:hover {
+      border-bottom: 3px solid $link-blue;
+      color: $link-blue;
+    }
+  }
+  @media (max-width: 600px) {
+    margin-bottom: 50px;
+    p {
+      font-size: 1em;
+    }
+    a {
+      margin-top: 0px;
+    }
+  }
+}

src/index.scss

@@ -11,3 +11,4 @@
 @import "./components/Twitter/Twitter.scss";
 @import "./components/Footer/Footer.scss";
 @import "./pages/COC/COC.scss";
+@import "./components/NotFoundPage/NotFound.scss";