✨ feat(error page): error 404 page

public/assets/images/Error404SVG.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledIllustration = styled.svg`
+  width: 100%;
+  max-width: 400px;
+  display: block;
+  margin: 0 auto;
+`;
+
+function Error404SVG() {
+  return (
+    <StyledIllustration
+      width="514"
+      height="164"
+      viewBox="0 0 514 164"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <svg
+        width="514"
+        height="164"
+        viewBox="0 0 514 164"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="101" cy="22" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="101" cy="142" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="21" cy="102" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="141" cy="102" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="193" cy="82" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="313" cy="82" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="253" cy="22" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="253" cy="142" r="20" stroke="#667085" strokeWidth="2" />
+        <path
+          d="M1 102C1 90.9543 9.9543 82 21 82H141C152.046 82 161 90.9543 161 102C161 113.046 152.046 122 141 122H21C9.9543 122 1 113.046 1 102Z"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+        <path
+          d="M101 162C89.9543 162 81 153.046 81 142L81 22C81 10.9543 89.9543 2 101 2C112.046 2 121 10.9543 121 22L121 142C121 153.046 112.046 162 101 162Z"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+        <path
+          d="M7.14214 115.995C-0.668351 108.184 -0.668351 95.5211 7.14214 87.7106L86.7107 8.1421C94.5212 0.331614 107.184 0.331607 114.995 8.14209C122.805 15.9526 122.805 28.6159 114.995 36.4264L35.4264 115.995C27.6159 123.805 14.9526 123.805 7.14214 115.995Z"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+        <circle cx="453" cy="22" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="453" cy="142" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="373" cy="102" r="20" stroke="#667085" strokeWidth="2" />
+        <circle cx="493" cy="102" r="20" stroke="#667085" strokeWidth="2" />
+        <path
+          d="M353 102C353 90.9543 361.954 82 373 82H493C504.046 82 513 90.9543 513 102C513 113.046 504.046 122 493 122H373C361.954 122 353 113.046 353 102Z"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+        <path
+          d="M453 162C441.954 162 433 153.046 433 142L433 22C433 10.9543 441.954 2 453 2C464.046 2 473 10.9543 473 22L473 142C473 153.046 464.046 162 453 162Z"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+        <path
+          d="M359.142 115.995C351.332 108.184 351.332 95.5211 359.142 87.7106L438.711 8.1421C446.521 0.331614 459.184 0.331607 466.995 8.14209C474.805 15.9526 474.805 28.6159 466.995 36.4264L387.426 115.995C379.616 123.805 366.953 123.805 359.142 115.995Z"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+        <circle cx="253" cy="82" r="80" stroke="#667085" strokeWidth="2" />
+        <circle cx="253" cy="82" r="40" stroke="#667085" strokeWidth="2" />
+        <line
+          x1="8.74228e-08"
+          y1="1"
+          x2="513"
+          y2="1.00004"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+        <line
+          x1="-8.74228e-08"
+          y1="163"
+          x2="513"
+          y2="163"
+          stroke="#667085"
+          strokeWidth="2"
+        />
+      </svg>
+    </StyledIllustration>
+  );
+}
+
+export default Error404SVG;

src/pages/404.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import dynamic from 'next/dynamic';
+import Error404SVG from '../../public/assets/images/Error404SVG';
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+`;
+
+const Heading = styled.h1`
+  font-size: 4.25rem;
+  font-weight: bold;
+  color: #333;
+  margin-top: 3rem;
+  font-family: 'Marker Felt', Fantasy;
+  margin-bottom: 1rem;
+`;
+
+const SubHeading = styled.p`
+  font-size: 1.7rem;
+  color: #333;
+  font-weight: bold;
+  font-family: 'Marker Felt', Fantasy;
+`;
+
+const StyledLink = styled.a`
+  font-size: 1rem;
+  display: inline-block;
+  background-color: #007bff;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.3s ease;
+  margin-top: 1rem;
+  text-decoration: none;
+  font-family: 'Marker Felt', Fantasy;
+`;
+
+function Custom404(): JSX.Element {
+  return (
+    <Container>
+      <Content>
+        <Error404SVG />
+
+        <Heading>PAGE NOT FOUND</Heading>
+        <SubHeading>
+          SORRY, THE PAGE YOU ARE LOOKING FOR COULD NOT BE FOUND
+        </SubHeading>
+
+        <div>
+          <StyledLink href="/">Go to Home</StyledLink>
+        </div>
+      </Content>
+    </Container>
+  );
+}
+
+export default dynamic(() => Promise.resolve(Custom404), { ssr: false });