style 404 page

src/components/Header.tsx

@@ -4,6 +4,10 @@ import {
   faUser,
   faCodeBranch,
   faGraduationCap,
+  faExclamation,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faCode,
 } from '@fortawesome/free-solid-svg-icons';
 import {faConnectdevelop} from '@fortawesome/free-brands-svg-icons';
 
@@ -30,9 +34,15 @@ const Header: FC<IProps> = ({title, lead, icon = 'faUser'}) => {
     if (icon === 'code-branch') {
       return <FontAwesomeIcon icon={faCodeBranch} />;
     }
+    if (icon === 'code') {
+      return null;
+    }
     if (icon === 'graduation-cap') {
       return <FontAwesomeIcon icon={faGraduationCap} />;
     }
+    if (icon === 'not-found') {
+      return <FontAwesomeIcon icon={faExclamationTriangle} />;
+    }
   };
 
   return (

src/pages/Landing.tsx

@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
 import {Link} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
+import Header from '../components/Header';
 
 /**
  * Landing page
@@ -9,11 +10,11 @@ const Landing: FC = () => (
   <section className="landing">
     <div className="dark-overlay">
       <div className="landing-inner">
-        <h1 className="x-large">DevBook</h1>
+        <Header
-        <p className="lead">
+          title="DevBook"
-          Create developer profiles, portfolio, share and get help from other
+          lead="Create developer profiles, portfolio, share and get help from other devs"
-          devs
+          icon="code"
-        </p>
+        />
         <div className="buttons">
           <Link to={ROUTES.SIGN_UP} className="btn btn-primary">
             Sign up

src/pages/NotFound.tsx

@@ -0,0 +1,28 @@
+import React, {FC} from 'react';
+import {Link} from 'react-router-dom';
+import Header from '../components/Header';
+import * as ROUTES from '../constants/routes';
+
+const NotFound: FC = () => (
+  <section className="not-found">
+    <div className="dark-overlay">
+      <div className="landing-inner">
+        <Header
+          title="Nothing Here"
+          lead="Sorry the page requested does not exist."
+          icon="not-found"
+        />
+        <div className="buttons">
+          <Link to={ROUTES.SIGN_UP} className="btn btn-primary">
+            Sign up
+          </Link>
+          <Link to={ROUTES.SIGN_IN} className="btn btn-light">
+            Login
+          </Link>
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default NotFound;

src/router/Router.tsx

@@ -11,6 +11,7 @@ import AddExperience from '../pages/AddExperience';
 import AddEducation from '../pages/AddEducation';
 import PostPage from '../pages/Post';
 import Posts from '../pages/Posts';
+import NotFound from '../pages/NotFound';
 import * as ROUTES from '../constants/routes';
 
 /** Register navigation paths accessible */
@@ -27,6 +28,8 @@ const Router: FC = () => (
     <Route exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
     <Route exact path={ROUTES.POST} component={PostPage} />
     <Route exact path={ROUTES.POSTS} component={Posts} />
+    <Route exact path={ROUTES.POSTS} component={Posts} />
+    <Route component={NotFound} />
   </Switch>
 );
 

src/static/css/style.min.css

@@ -540,3 +540,8 @@ img {
 .post img {
   width: 150px;
 }
+.not-found {
+  position: relative;
+  background: url('../img/404.jpg') no-repeat center center/cover;
+  height: 100vh;
+}

src/static/scss/style.scss

@@ -1,7 +1,7 @@
-@import "_config";
+@import '_config';
-@import "_utils";
+@import '_utils';
-@import "_form";
+@import '_form';
-@import "_mobile";
+@import '_mobile';
 
 * {
   box-sizing: border-box;
@@ -10,7 +10,7 @@
 }
 
 body {
-  font-family: "Raleway", sans-serif;
+  font-family: 'Raleway', sans-serif;
   font-size: 1rem;
   line-height: 1.6;
   background-color: white;
@@ -62,7 +62,7 @@ img {
 // landing
 .landing {
   position: relative;
-  background: url("../img/showcase.jpg") no-repeat center center/cover;
+  background: url('../img/showcase.jpg') no-repeat center center/cover;
   height: 100vh;
 
   &-inner {
@@ -93,7 +93,7 @@ img {
 
 .profile-grid {
   display: grid;
-  grid-template-areas: "top top" "about about" "exp edu" "github github";
+  grid-template-areas: 'top top' 'about about' 'exp edu' 'github github';
   grid-gap: 1rem;
 
   .profile-top {
@@ -190,3 +190,9 @@ img {
     width: 150px;
   }
 }
+
+.not-found {
+  position: relative;
+  background: url('../img/404.jpg') no-repeat center center/cover;
+  height: 100vh;
+}