From 059ef17e290dbfb910e7c9a35a8d33a04a99cd4f Mon Sep 17 00:00:00 2001
From: rikhall1515 <r15.hallberg@gmail.com>
Date: Thu, 25 Apr 2024 16:45:16 +0200
Subject: [PATCH] feat: add a not-found catch-all route

---
 app/(public)/[...not-found]/page.tsx | 44 ++++++++++++++++++++++++++++
 tsconfig.json                        |  3 +-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 app/(public)/[...not-found]/page.tsx

diff --git a/app/(public)/[...not-found]/page.tsx b/app/(public)/[...not-found]/page.tsx
new file mode 100644
index 0000000..ebfcc42
--- /dev/null
+++ b/app/(public)/[...not-found]/page.tsx
@@ -0,0 +1,44 @@
+import { FaArrowRight } from "react-icons/fa6";
+
+import Logo from "@/components/logo";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export default async function NotFound() {
+  return (
+    <>
+      <section
+        className={cn(
+          "h-full min-h-[40rem] w-full",
+          "py-8 m:py-16 lg:py-24",
+          "relative overflow-x-hidden overflow-y-visible",
+          "bg-dot-black/[0.2] dark:bg-dot-white/[0.2]"
+        )}
+      >
+        <div
+          className={cn(
+            "min-h-[40rem] w-full max-w-[103rem]",
+            "pxPage mx-auto",
+            "flex flex-col items-center justify-center py-[7rem]"
+          )}
+        >
+          <Logo className="mb-12 h-[8rem] w-[8rem]" length={128} />
+          <span className="mb-2">404</span>
+          <h1 className="mb-6">
+            <span className="special">Page</span>{" "}
+            <span className="special">could</span>{" "}
+            <span className="special">not</span>{" "}
+            <span className="special">be</span>{" "}
+            <span className="special">found</span>
+          </h1>
+          <p>This page does not exist. Try starting again from the homepage.</p>
+          <Button asChild>
+            <a href="/">Back to Home</a>
+            <FaArrowRight />
+          </Button>
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/tsconfig.json b/tsconfig.json
index e7edcba..3502c31 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,7 +30,8 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "lib/lighthouse/__tests__/index.test.mjs",
-    "lib/lighthouse/index.mjs"
+    "lib/lighthouse/index.mjs",
+    "app/(public)/[...not-found]"
   ],
   "exclude": ["node_modules", ".next"]
 }