Custom 404 Page

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

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>
+    )
+}

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;
+  }
+}