Merge pull request #36 from atapas/23-create-a-better-404-page

adding 404 styling

src/common/404/404.css

@@ -0,0 +1,63 @@
+.page-404 {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(100vh - 120px);
+}
+
+.page-404-image {
+    max-width: 100%;
+    height: auto;
+}
+
+.page-404-lead {
+    margin: 0;
+    font-family: var(--ff-accent);
+    font-size: var(--fs-xl);
+    text-align: center;
+}
+
+@media screen and (max-width: 768px) {
+    .page-404-lead {
+        line-height: var(--lh-rg);
+        margin-bottom: 1rem;
+    }
+}
+
+.page-404-desc {
+    margin-top: 0;
+    font-size: var(--fs-md);
+    text-align: center;
+}
+
+.page-404-link {
+    position: relative;
+    color: var(--color-neutral-80);
+    text-decoration: none;
+    transition: all .5s ease-in-out;
+    font-weight: var(--fw-semibold);
+}
+.page-404-link:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 2px;
+    height: 2px;
+    background-color: var(--color-brand-primary);
+    transition: all .1s ease-in-out;
+}
+
+.page-404-link:hover,
+.page-404-link:focus {
+    color: var(--color-neutral-90);
+}
+
+.page-404-link:hover:after,
+.page-404-link:focus:after {
+    height: 5px;
+    bottom: 0;
+    /* background-color: var(--color-neutral-90); */
+}

src/common/404/PageNotFound.jsx

@@ -1,12 +1,15 @@
 import { Link } from 'react-router-dom';
+import { ReactComponent as Image404 } from "images/img-404.svg";
+import "./404.css";
 
 const PageNotFound = () => {
 
   return(
-    <main style={{ padding: "1rem" }}>
-      <p>OOPs!!! Look like you are lost.</p>
-      <p>
-        Why don't you go back to <Link to="/">home</Link>?
+    <main className='page-404'>
+      <Image404 className="page-404-image" />
+      <p className='page-404-lead'>Look like you are lost</p>
+      <p className='page-404-desc'>
+        Why don't you go back to <Link to="/" className='page-404-link'>home</Link>?
       </p>
     </main>
   );