Merge pull request #97 from meenarh/#84-Implement-Error-Page

Implements the design for the 404 page

src/assets/styles/footer.css

@@ -0,0 +1,54 @@
+@import url("https://fonts.cdnfonts.com/css/poppins");
+
+.footer {
+  background-color: #fff;
+  text-align: center;
+}
+
+.top {
+  background-color: #fff;
+  text-align: center;
+  padding: 40px;
+}
+
+.top img {
+  text-align: center;
+  margin: auto;
+  padding: auto;
+  width: 300px;
+  height: 150px;
+}
+
+.top h2 {
+  font-family: "Poppins", sans-serif;
+  padding: 10px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 48px;
+  color: #000000;
+}
+
+.top p {
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 30px;
+  padding: 10px;
+  padding-bottom: 50px;
+  text-align: center;
+  color: #000000;
+}
+
+.top button {
+  margin-top: 60px;
+  align-items: center;
+  padding: 18px 32px;
+  gap: 8px;
+  width: 305px;
+  height: 60px;
+  background: #d61b5e;
+  color: #fff;
+  border-radius: 4px;
+}

src/pages/ErrorPage/ErrorPage.js

@@ -1,12 +1,25 @@
-import { Header, Footer } from "../../layouts";
+import { Footer } from "../../layouts";
+import "../../assets/styles/footer.css";
+// eslint-disable-next-line import/no-unresolved
+import robotparts from "../../assets/images/Robot-Parts.png";
+import { Link } from "react-router-dom";
 
 const ErrorPage = () => {
   return (
-    <>
-      <Header />
-      <h2>404. An Error Occured</h2>
+    <div className="footer">
+      <div className="top">
+        <h2>Oops! 404 Error</h2>
+        <p>Please check your internet connection and try again.</p>
+
+        <img src={robotparts} alt="robot" />
+
+        <Link className="link" to={"/"}>
+          <button>Go Back</button>
+        </Link>
+      </div>
+
       <Footer />
-    </>
+    </div>
   );
 };