From fd6350b3973a72365c7175d8c4cd5f2694ecbb77 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 3 Sep 2023 23:30:48 +0530
Subject: [PATCH 1/5] feat: added 404 page for marketing app

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

diff --git a/apps/marketing/src/app/not-found.tsx b/apps/marketing/src/app/not-found.tsx
new file mode 100644
index 000000000..2935c5698
--- /dev/null
+++ b/apps/marketing/src/app/not-found.tsx
@@ -0,0 +1,65 @@
+'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%]"
+          />
+        </motion.div>
+      </div>
+      <div className="container mx-auto flex min-h-screen items-center px-6 py-12">
+        <div className="mx-auto flex max-w-sm flex-col items-center text-center">
+          <h1 className="mt-3 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">
+            404 Page not found
+          </h1>
+          <p className="mt-4 text-gray-500 dark:text-gray-400">
+            Sorry, the page you are looking for doesn't exist or has been moved.
+          </p>
+
+          <div className="mt-6 flex w-full shrink-0 items-center gap-x-3 sm:w-auto">
+            <Button
+              size="default"
+              onClick={() => {
+                void router.back();
+              }}
+              className="dark:bg-documenso dark:hover:opacity-90"
+            >
+              <ChevronLeft />
+              <span>Go back</span>
+            </Button>
+            <Button
+              size="default"
+              onClick={() => {
+                void router.push('/');
+              }}
+              variant="secondary"
+            >
+              <span>Home</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

From 118483b6cc40a2c5ce4989de9384e0300b7bdccf Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 3 Sep 2023 23:52:51 +0530
Subject: [PATCH 2/5] chore: updated 404 page for marketing app

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 apps/marketing/src/app/not-found.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/marketing/src/app/not-found.tsx b/apps/marketing/src/app/not-found.tsx
index 2935c5698..7dfaf9dba 100644
--- a/apps/marketing/src/app/not-found.tsx
+++ b/apps/marketing/src/app/not-found.tsx
@@ -25,6 +25,7 @@ export default function NotFound() {
             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>

From 12c45fb882c6700eea2fbf3199ac0ae70fe805dd Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 3 Sep 2023 23:53:07 +0530
Subject: [PATCH 3/5] 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>
+  );
+}

From 2524458b0c10914c487bedd40674afd9b60032fa Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 3 Sep 2023 23:59:02 +0530
Subject: [PATCH 4/5] chore: updated wording

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 apps/web/src/app/not-found.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index c723d5255..07124c6ca 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -31,7 +31,7 @@ export default function NotFound() {
       </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>
+          <p className="font-medium leading-relaxed text-[#555E67]">404 Page not found</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>

From d524ea77abe2bc0bb40dac159a1e3d2f063a5793 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Tue, 5 Sep 2023 13:15:45 +1000
Subject: [PATCH 5/5] fix: update styling

---
 apps/marketing/src/app/not-found.tsx          | 51 ++++++------
 apps/web/src/app/not-found.tsx                | 78 +++++--------------
 apps/web/src/components/motion.tsx            |  7 --
 .../web/src/components/partials/not-found.tsx | 66 ++++++++++++++++
 4 files changed, 110 insertions(+), 92 deletions(-)
 delete mode 100644 apps/web/src/components/motion.tsx
 create mode 100644 apps/web/src/components/partials/not-found.tsx

diff --git a/apps/marketing/src/app/not-found.tsx b/apps/marketing/src/app/not-found.tsx
index 7dfaf9dba..9f87cdc88 100644
--- a/apps/marketing/src/app/not-found.tsx
+++ b/apps/marketing/src/app/not-found.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { motion } from 'framer-motion';
@@ -13,54 +14,52 @@ import backgroundPattern from '~/assets/background-pattern.png';
 
 export default function NotFound() {
   const router = useRouter();
+
   return (
-    <motion.div className={cn('relative')}>
+    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
       <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"
+          className="flex h-full w-full items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
         >
           <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}
+            priority
           />
         </motion.div>
       </div>
-      <div className="container mx-auto flex min-h-screen items-center px-6 py-12">
-        <div className="mx-auto flex max-w-sm flex-col items-center text-center">
-          <h1 className="mt-3 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">
-            404 Page not found
-          </h1>
-          <p className="mt-4 text-gray-500 dark:text-gray-400">
-            Sorry, the page you are looking for doesn't exist or has been moved.
+
+      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
+        <div>
+          <p className="text-muted-foreground font-semibold">404 Page not found</p>
+
+          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+          <p className="text-muted-foreground mt-4 text-sm">
+            The page you are looking for was moved, removed, renamed or might never have existed.
           </p>
 
-          <div className="mt-6 flex w-full shrink-0 items-center gap-x-3 sm:w-auto">
+          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
             <Button
-              size="default"
+              variant="ghost"
+              className="w-32"
               onClick={() => {
                 void router.back();
               }}
-              className="dark:bg-documenso dark:hover:opacity-90"
             >
-              <ChevronLeft />
-              <span>Go back</span>
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
             </Button>
-            <Button
-              size="default"
-              onClick={() => {
-                void router.push('/');
-              }}
-              variant="secondary"
-            >
-              <span>Home</span>
+
+            <Button className="w-32" asChild>
+              <Link href="/">Home</Link>
             </Button>
           </div>
         </div>
       </div>
-    </motion.div>
+    </div>
   );
 }
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index 07124c6ca..c8dc15086 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -1,66 +1,26 @@
-'use client';
+import Link from 'next/link';
 
-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 { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { Button } from '@documenso/ui/primitives/button';
 
-import backgroundPattern from '~/assets/background-pattern.png';
+import NotFoundPartial from '~/components/partials/not-found';
+
+export default async function NotFound() {
+  const session = await getServerComponentSession();
 
-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 Page not found</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>
+    <NotFoundPartial>
+      {session && (
+        <Button className="w-32" asChild>
+          <Link href="/documents">Documents</Link>
+        </Button>
+      )}
+
+      {!session && (
+        <Button className="w-32" asChild>
+          <Link href="/signin">Sign In</Link>
+        </Button>
+      )}
+    </NotFoundPartial>
   );
 }
diff --git a/apps/web/src/components/motion.tsx b/apps/web/src/components/motion.tsx
deleted file mode 100644
index 2e9d19eae..000000000
--- a/apps/web/src/components/motion.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export * from 'framer-motion';
-
-export const MotionDiv = motion.div;
diff --git a/apps/web/src/components/partials/not-found.tsx b/apps/web/src/components/partials/not-found.tsx
new file mode 100644
index 000000000..0b5c2ad18
--- /dev/null
+++ b/apps/web/src/components/partials/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 type NotFoundPartialProps = {
+  children?: React.ReactNode;
+};
+
+export default function NotFoundPartial({ children }: NotFoundPartialProps) {
+  const router = useRouter();
+
+  return (
+    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
+            priority
+          />
+        </motion.div>
+      </div>
+
+      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
+        <div>
+          <p className="text-muted-foreground font-semibold">404 Page not found</p>
+
+          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+          <p className="text-muted-foreground mt-4 text-sm">
+            The page you are looking for was moved, removed, renamed or might never have existed.
+          </p>
+
+          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+            <Button
+              variant="ghost"
+              className="w-32"
+              onClick={() => {
+                void router.back();
+              }}
+            >
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}