From b37d05bebb6e08bb44babdf2ec1f42889dea4e59 Mon Sep 17 00:00:00 2001
From: Nirmal Kumar <nirmalkc@gmail.com>
Date: Sun, 17 Apr 2022 14:18:53 +0530
Subject: [PATCH 1/2] adding 404 styling

---
 src/common/404/404.css          | 42 +++++++++++++++++++++++++++++++++
 src/common/404/PageNotFound.jsx | 11 +++++----
 src/images/img-404.svg          |  1 +
 3 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 src/common/404/404.css
 create mode 100644 src/images/img-404.svg

diff --git a/src/common/404/404.css b/src/common/404/404.css
new file mode 100644
index 0000000000..ac212242e1
--- /dev/null
+++ b/src/common/404/404.css
@@ -0,0 +1,42 @@
+.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 {
+    color: var(--color-brand-primary);
+}
+
+.page-404-link:hover,
+.page-404-link:focus {
+    color: var(--color-brand-primary-dark);
+}
\ No newline at end of file
diff --git a/src/common/404/PageNotFound.jsx b/src/common/404/PageNotFound.jsx
index 0ec2014230..4a81da5045 100644
--- a/src/common/404/PageNotFound.jsx
+++ b/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>
   );
diff --git a/src/images/img-404.svg b/src/images/img-404.svg
new file mode 100644
index 0000000000..a6b4f5ff62
--- /dev/null
+++ b/src/images/img-404.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="409" height="360" viewBox="0 0 409 360"><g transform="translate(-448 -239)"><g transform="translate(0 -8)"><g transform="translate(555 343)"><path d="M76.5,41.971h-.878c18.2-.059,35.281-2.045,48.092-5.593,6.238-1.728,11.133-3.734,14.549-5.964,3.537-2.309,5.331-4.76,5.331-7.286,0-2.544-1.819-5.012-5.407-7.335-3.465-2.244-8.426-4.259-14.745-5.99-13-3.559-30.273-5.519-48.652-5.519S39.13,6.243,26.135,9.8c-6.319,1.731-11.28,3.746-14.745,5.99C7.8,18.115,5.983,20.583,5.983,23.127c0,3.6,3.712,7.093,10.733,10.111,6.836,2.939,16.478,5.3,27.884,6.827C31.477,38.412,20.353,35.78,12.43,32.457,4.3,29.046,0,25.079,0,20.985a7.056,7.056,0,0,1,1.554-4.229,17.153,17.153,0,0,1,4.457-3.939,42.389,42.389,0,0,1,7.053-3.565,84.4,84.4,0,0,1,9.341-3.106,164.754,164.754,0,0,1,24.315-4.5A259.634,259.634,0,0,1,76.5,0a259.634,259.634,0,0,1,29.776,1.649,164.753,164.753,0,0,1,24.315,4.5,84.4,84.4,0,0,1,9.341,3.106,42.39,42.39,0,0,1,7.053,3.565,17.154,17.154,0,0,1,4.457,3.939,7.056,7.056,0,0,1,1.554,4.229,7.056,7.056,0,0,1-1.554,4.229,17.154,17.154,0,0,1-4.457,3.939,42.389,42.389,0,0,1-7.053,3.565,84.4,84.4,0,0,1-9.341,3.106,164.75,164.75,0,0,1-24.315,4.5A259.631,259.631,0,0,1,76.5,41.971Z" transform="translate(23.06 25.724)" fill="#bfcbdb"/><path d="M18.584,8.636a1.876,1.876,0,0,1,3.2,1.85h0a1.876,1.876,0,0,0,1.447,2.507h0a1.876,1.876,0,0,1,0,3.7h0A1.876,1.876,0,0,0,21.789,19.2h0a1.876,1.876,0,0,1-3.2,1.85h0a1.876,1.876,0,0,0-2.895,0h0a1.876,1.876,0,0,1-3.2-1.85h0a1.876,1.876,0,0,0-1.447-2.507h0a1.876,1.876,0,0,1,0-3.7h0a1.876,1.876,0,0,0,1.447-2.507h0a1.876,1.876,0,0,1,3.2-1.85h0a1.876,1.876,0,0,0,2.895,0Z" transform="translate(68.757 0) rotate(30)" fill="#00f2fe"/><path d="M11.408,5.263A1.147,1.147,0,0,1,13.365,6.4l0,.01a1.147,1.147,0,0,0,.885,1.534h0a1.147,1.147,0,0,1,0,2.262h0a1.147,1.147,0,0,0-.885,1.534l0,.01a1.147,1.147,0,0,1-1.957,1.134l-.016-.019a1.147,1.147,0,0,0-1.767,0l-.016.019a1.147,1.147,0,0,1-1.957-1.134l0-.01A1.147,1.147,0,0,0,6.77,10.2h0a1.147,1.147,0,0,1,0-2.262h0a1.147,1.147,0,0,0,.885-1.534l0-.01A1.147,1.147,0,0,1,9.609,5.263l.016.019a1.147,1.147,0,0,0,1.767,0Z" transform="matrix(0.588, 0.809, -0.809, 0.588, 182.518, 27.666)" fill="#00f2fe"/><path d="M13.61,6.278a1.368,1.368,0,0,1,2.335,1.352l0,.012A1.368,1.368,0,0,0,17,9.472h0a1.368,1.368,0,0,1,0,2.7h0A1.368,1.368,0,0,0,15.941,14l0,.012a1.368,1.368,0,0,1-2.335,1.352l-.019-.023a1.368,1.368,0,0,0-2.108,0l-.019.023a1.368,1.368,0,0,1-2.335-1.352l0-.012a1.368,1.368,0,0,0-1.056-1.83h0a1.368,1.368,0,0,1,0-2.7h0a1.368,1.368,0,0,0,1.056-1.83l0-.012a1.368,1.368,0,0,1,2.335-1.352l.019.023a1.368,1.368,0,0,0,2.108,0Z" transform="translate(0 42.7) rotate(-2)" fill="#00f2fe"/></g><text transform="translate(502 552)" fill="#00f2fe" font-size="157" font-family="Poppins-Bold, Poppins" font-weight="700"><tspan x="-53.145" y="0">4</tspan></text><text transform="translate(803 552)" fill="#00f2fe" font-size="157" font-family="Poppins-Bold, Poppins" font-weight="700"><tspan x="-53.145" y="0">4</tspan></text><ellipse cx="95.789" cy="95.789" rx="95.789" ry="95.789" transform="translate(558.843 391.249)" fill="#00f2fe"/><ellipse cx="89.697" cy="81.573" rx="89.697" ry="81.573" transform="translate(565 391.249)" fill="#fff" style="mix-blend-mode:overlay;isolation:isolate"/><ellipse cx="41.25" cy="20.674" rx="41.25" ry="20.674" transform="translate(614 397.249)" fill="#fff" opacity="0.71"/><g transform="translate(612.894 457.872)"><path d="M6839.662,301.111l20.813,7.936v8.086s.9,11.05-10.032,11.68-10.781-10.482-10.781-10.482Z" transform="translate(-6791.48 -248.382)" fill="#ea4941"/><path d="M74.254-16.512a4,4,0,0,1-3.442-1.956c-.322-.523-8.472-13.372-30.7-13.372-22.65,0-32.091,13.447-32.184,13.583a4,4,0,0,1-5.559,1.048,4,4,0,0,1-1.048-5.559c.476-.7,11.963-17.073,38.791-17.073,26.989,0,37.158,16.577,37.578,17.283a4,4,0,0,1-1.393,5.483A3.982,3.982,0,0,1,74.254-16.512Z" transform="translate(2.351 87.521)" fill="#323141"/><path d="M70.825-8.92a4,4,0,0,1-3.476-2.016c-.259-.429-7.133-11.417-29.23-11.417-22.375,0-30.253,9.616-30.33,9.713a4.022,4.022,0,0,1-5.6.7,3.978,3.978,0,0,1-.769-5.55c.395-.525,9.98-12.866,36.694-12.866,27.035,0,35.815,14.816,36.175,15.446a4,4,0,0,1-1.488,5.458A3.982,3.982,0,0,1,70.825-8.92Z" transform="translate(2.351 82.09)" fill="#323141" opacity="0.25"/><g transform="translate(0 0)"><path d="M19.965,23.965a3.988,3.988,0,0,1-2.828-1.172L-2.828,2.828a4,4,0,0,1,0-5.657,4,4,0,0,1,5.657,0L22.793,17.136a4,4,0,0,1-2.828,6.828Z" fill="#323141"/><path d="M0,23.965a3.988,3.988,0,0,1-2.828-1.172,4,4,0,0,1,0-5.657L17.136-2.828a4,4,0,0,1,5.657,0,4,4,0,0,1,0,5.657L2.828,22.793A3.988,3.988,0,0,1,0,23.965Z" fill="#323141"/></g><g transform="translate(63.722 0)"><path d="M19.965,23.965a3.988,3.988,0,0,1-2.828-1.172L-2.828,2.828a4,4,0,0,1,0-5.657,4,4,0,0,1,5.657,0L22.793,17.136a4,4,0,0,1-2.828,6.828Z" transform="translate(0)" fill="#323141"/><path d="M0,23.965a3.988,3.988,0,0,1-2.828-1.172,4,4,0,0,1,0-5.657L17.136-2.828a4,4,0,0,1,5.657,0,4,4,0,0,1,0,5.657L2.828,22.793A3.988,3.988,0,0,1,0,23.965Z" transform="translate(0)" fill="#323141"/></g></g></g><g transform="translate(41 10.668)"><rect width="188" height="74" rx="37" transform="translate(520 228.332)" fill="#010326"/><text transform="translate(613 279.332)" fill="aqua" font-size="36" font-family="Poppins-Bold, Poppins" font-weight="700"><tspan x="-57.654" y="0">OOPS!</tspan></text><path d="M21,0,42,36H0Z" transform="translate(635 338.332) rotate(180)" fill="#010326"/></g></g></svg>
\ No newline at end of file

From 3b82b761aede5348eb40ceba8f3370eff7df96c6 Mon Sep 17 00:00:00 2001
From: Nirmal Kumar <nirmalkc@gmail.com>
Date: Mon, 18 Apr 2022 18:01:57 +0530
Subject: [PATCH 2/2] fixing the hyperlink issue

---
 src/common/404/404.css | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/common/404/404.css b/src/common/404/404.css
index ac212242e1..5ea224850e 100644
--- a/src/common/404/404.css
+++ b/src/common/404/404.css
@@ -33,10 +33,31 @@
 }
 
 .page-404-link {
-    color: var(--color-brand-primary);
+    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-brand-primary-dark);
+    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); */
 }
\ No newline at end of file