added custom 404 page, added redirect to 404 page on unauthorized access to code-page

Author: ES-Legacy

app/code-area/page.tsx

@@ -11,6 +11,7 @@ import { cn } from "@/lib/utils";
 import useCodeAreaStore from "@/data-store/code-area-store";
 import { useStepperStore } from "@/data-store/stepper-store";
 import validateUser from "@/lib/validate-user";
+import { notFound } from "next/navigation";
 
 type MosaicKey = "EDITOR" | "PREVIEW";
 
@@ -30,11 +31,7 @@ const CodeArea = () => {
     const { email, check, progress, challenge } = useStepperStore();
 
     if (validateUser("Code", email, check, challenge, progress)) {
-        return (
-            <p>
-                error, no bypassing the required form to enter the coding area!
-            </p>
-        );
+        notFound();
     } else {
         return (
             <div className='h-screen'>

app/not-found.tsx

@@ -0,0 +1,43 @@
+"use client";
+import Link from "next/link";
+import { Navigation } from "@/components/landing/navigation";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function NotFound() {
+    const router = useRouter();
+
+    useEffect(() => {
+        const delay = 5000;
+
+        const redirectTimer = setTimeout(() => {
+            router.push("/");
+        }, delay);
+        return () => clearTimeout(redirectTimer);
+    }, [router]);
+
+    return (
+        <main className='mx-auto flex h-screen w-full flex-col overflow-clip bg-gradient-to-b from-[#493b6c] via-[#14243a] to-[#000000]'>
+            <Navigation />
+
+            <section className='m-auto flex max-w-screen-lg flex-col items-center px-4'>
+                <h1 className='mb-8 text-4xl font-bold !leading-[1.208]  text-orange-500 sm:text-[42px] lg:text-[40px] xl:text-5xl'>
+                    404 - Page Not Found
+                </h1>
+                <p className='text-body-color dark:text-dark-6 mb-4 text-base'>
+                    The page you are looking for either does not exist, or you
+                    are not allowed to access it!
+                </p>
+                <p className='text-body-color dark:text-dark-6 mb-14 text-base'>
+                    You should be auto-redirect within the next 5 seconds. If
+                    you are not, click the button below.
+                </p>
+
+                <Link href='/'>
+                    <Button>Return Home</Button>
+                </Link>
+            </section>
+        </main>
+    );
+}

app/page.tsx

@@ -24,7 +24,7 @@ export default function Home() {
                     <Hero />
                 </div>
             </section>
-            <section>
+            <section id='about'>
                 <AboutTailspin />
             </section>
             <section

components/landing/navigation.tsx

@@ -7,18 +7,20 @@ import { TailspinLogo } from "../ui/spinning-logo";
 export const Navigation = () => {
     return (
         <nav className='fixed top-0 z-[1] flex h-16 w-full items-center'>
-            <Link href='#landing'>
+            <Link href='/#landing'>
                 <div className='mx-5'>
                     <TailspinLogo outershellClassname='animate-spin h-10 w-10' />
                 </div>
             </Link>
-            <Button
-                variant='ghost'
-                className='mx-3 font-semibold text-muted-foreground'
-            >
-                About
-            </Button>
-            <Link href='#stepper'>
+            <Link href='/#about'>
+                <Button
+                    variant='ghost'
+                    className='mx-3 font-semibold text-muted-foreground'
+                >
+                    About
+                </Button>
+            </Link>
+            <Link href='/#stepper'>
                 <Button
                     variant='ghost'
                     className='mx-3 font-semibold text-muted-foreground'