From 5dad46387796fba1cac1bd7e6f68ea79438cbf06 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 3 Sep 2023 23:53:07 +0530
Subject: [PATCH] feat: added 404 page for web app

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 apps/web/src/app/not-found.tsx | 66 ++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 apps/web/src/app/not-found.tsx

diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
new file mode 100644
index 000000000..c723d5255
--- /dev/null
+++ b/apps/web/src/app/not-found.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import { motion } from 'framer-motion';
+import { ChevronLeft } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export default function NotFound() {
+  const router = useRouter();
+  return (
+    <motion.div className={cn('relative')}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full origin-top-right items-center justify-center"
+          initial="initial"
+          animate="animate"
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
+            priority={true}
+          />
+        </motion.div>
+      </div>
+      <div className="container mx-auto flex min-h-screen items-center px-6 py-12">
+        <div>
+          <p className="font-medium leading-relaxed text-[#555E67]">404 Error</p>
+          <h1 className="mt-3 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">
+            Oops! You found a secret page
+          </h1>
+          <p className="mt-4 text-gray-500 dark:text-gray-400">
+            The page you are looking for may not exist :/
+          </p>
+          <div className="mt-6 flex items-center gap-x-3">
+            <Button
+              size="default"
+              className="dark:bg-documenso dark:hover:opacity-90"
+              onClick={() => {
+                void router.back();
+              }}
+            >
+              <ChevronLeft />
+              <span>Go back</span>
+            </Button>
+            <Button
+              size="default"
+              variant="secondary"
+              onClick={() => {
+                void router.push('/dashboard');
+              }}
+            >
+              <span>Dashboard</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}