From 2182da64e72a14e19a5ddaed0897246b316a8bb4 Mon Sep 17 00:00:00 2001
From: Samridh Mankala <samridhsai@gmail.com>
Date: Sun, 14 Apr 2024 23:10:47 -0400
Subject: [PATCH] Added Custom 404 Error Page

---
 src/app/404error.css  | 196 ++++++++++++++++++++++++++++++++++++++++++
 src/app/not-found.tsx |  20 +++++
 2 files changed, 216 insertions(+)
 create mode 100644 src/app/404error.css
 create mode 100644 src/app/not-found.tsx

diff --git a/src/app/404error.css b/src/app/404error.css
new file mode 100644
index 0000000..e93a6cb
--- /dev/null
+++ b/src/app/404error.css
@@ -0,0 +1,196 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
+@import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
+
+.error-container {
+  text-align: center;
+  font-size: 106px;
+  font-family: 'Catamaran', sans-serif;
+  font-weight: 800;
+  margin: 70px 100px;
+}
+
+.error-container > span {
+  display: inline-block;
+  position: relative;
+}
+
+/* Number Four */
+.error-container > span.four {
+  width: 136px;
+  height: 43px;
+  border-radius: 999px;
+  background:
+    linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),
+    linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%),
+    linear-gradient(to right, #3fcaff, #8a5fff);
+}
+
+.error-container > span.four:before,
+.error-container > span.four:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-radius: 999px;
+}
+
+.error-container > span.four:before {
+  width: 43px;
+  height: 156px;
+  left: 60px;
+  bottom: -43px;
+  background:
+    linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%),
+    linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
+    linear-gradient(to top, #1e88e5, #64b5f6, #1976d2);
+}
+
+.error-container > span.four:after {
+  width: 137px;
+  height: 43px;
+  transform: rotate(-49.5deg);
+  left: -18px;
+  bottom: 36px;
+  background: linear-gradient(to right, #1e88e5, #64b5f6, #1976d2);
+}
+
+/* Number Zero */
+.error-container > span.zero {
+  vertical-align: text-top;
+  width: 156px;
+  height: 156px;
+  border-radius: 999px;
+  background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%),
+    linear-gradient(to top right, #1e88e5, #1e88e5, #64b5f6, #1976d2, #ec407a, #8a5fff, #8a5fff);
+  overflow: hidden;
+  animation: bgshadow 5s infinite;
+}
+
+.error-container > span.zero:before {
+  content: '';
+  display: block;
+  position: absolute;
+  transform: rotate(45deg);
+  width: 90px;
+  height: 90px;
+  background-color: transparent;
+  left: 0px;
+  bottom: 0px;
+  background:
+    linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%),
+    linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
+}
+
+.error-container > span.zero:after {
+  content: '';
+  display: block;
+  position: absolute;
+  border-radius: 999px;
+  width: 70px;
+  height: 70px;
+  left: 43px;
+  bottom: 43px;
+  background: #FFFFFF;
+  box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
+}
+
+/* Space background with stars */
+body {
+    background-color: #000000; /* Apply black background here */
+    background-image: radial-gradient(circle, #0f0f0f 1%, #000000 100%);
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .stars {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0; /* Ensure stars are behind other elements */
+  }
+  
+  .stars:before,
+  .stars:after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    background: #FFFFFF;
+    z-index: 1; /* Ensure stars are above the background */
+  }
+  
+  .stars:before {
+    width: 2px;
+    height: 2px;
+  }
+  
+  .stars:after {
+    width: 3px;
+    height: 3px;
+  }
+  
+  .stars:before,
+  .stars:after {
+    animation: twinkle 3s infinite;
+  }
+  
+  @keyframes twinkle {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+  
+
+.screen-reader-text {
+    position: absolute;
+    top: -9999em;
+    left: -9999em;
+}
+
+@keyframes bgshadow {
+  0% {
+    box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4);
+  }
+  45% {
+    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
+  }
+  55% {
+    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
+  }
+  100% {
+    box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* Demo stuff */
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html, button, input, select, textarea {
+    font-family: 'Montserrat', Helvetica, sans-serif;
+    color: #bbb;
+}
+
+h1 {
+  text-align: center;
+  margin: 30px 15px;
+}
+
+.zoom-area { 
+  max-width: 490px;
+  margin: 30px auto 30px;
+  font-size: 19px;
+  text-align: center;
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..1c00a0e
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,20 @@
+import './404error.css';
+
+function NotFoundPage() {
+    return (
+        <div>
+            <title>404 Error Page</title>
+            <link rel="stylesheet" href="404error.css"/>
+
+            <h1>Uhh...</h1>
+            <p className="zoom-area">Page not found</p>
+            <section className="error-container">
+                <span className="four"><span className="screen-reader-text">4</span></span>
+                <span className="zero"><span className="screen-reader-text">0</span></span>
+                <span className="four"><span className="screen-reader-text">4</span></span>
+            </section>
+        </div>
+    ); 
+}
+
+export default NotFoundPage;