From 7eb2217b0026c459040f30bd8ebea624f5f2f95b Mon Sep 17 00:00:00 2001
From: Sushil Magare <sushilmagare10>
Date: Mon, 18 Sep 2023 22:18:14 +0530
Subject: [PATCH] custom 404 Page

---
 packages/app/src/app/not-found.tsx  | 12 ++++++++++++
 packages/app/src/app/typing.tsx     | 24 ++++++++++++++++++++++++
 packages/app/src/styles/globals.css | 14 ++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 packages/app/src/app/not-found.tsx
 create mode 100644 packages/app/src/app/typing.tsx

diff --git a/packages/app/src/app/not-found.tsx b/packages/app/src/app/not-found.tsx
new file mode 100644
index 00000000..900061d7
--- /dev/null
+++ b/packages/app/src/app/not-found.tsx
@@ -0,0 +1,12 @@
+import { Typing } from "./typing"
+
+function Notfound() {
+    return (
+        <div className=" flex h-[80vh] items-center justify-center">
+            <Typing />
+        </div>
+    )
+
+}
+
+export default Notfound
\ No newline at end of file
diff --git a/packages/app/src/app/typing.tsx b/packages/app/src/app/typing.tsx
new file mode 100644
index 00000000..6b58e5a5
--- /dev/null
+++ b/packages/app/src/app/typing.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+
+const text = "Page Not Found"
+
+export const Typing = () => {
+    const [typingText, setTypingText] = useState("")
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setTypingText(text.slice(0, typingText.length + 1))
+        }, 300)
+
+        return () => clearTimeout(timeout)
+    }, [typingText])
+
+    return (
+        <div className="flex flex-col text-center gap-8">
+            <span className=" text-primary text-8xl font-bold ">404</span>
+            <span className=" text-primary blinking-cursor text-4xl font-bold ">{typingText}</span>
+        </div>
+    )
+}
diff --git a/packages/app/src/styles/globals.css b/packages/app/src/styles/globals.css
index 58978abb..054a8158 100644
--- a/packages/app/src/styles/globals.css
+++ b/packages/app/src/styles/globals.css
@@ -106,3 +106,17 @@
     margin: 0;
   }
 }
+
+@layer utilities {
+  .blinking-cursor:after {
+    content: "|";
+    @apply text-primary;
+    animation: blink 1s step-start infinite;
+  }
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}