feat(updated 404 page): modified to include constants and urls

src/app/(dashboard)/app/_components/side-menu.tsx

@@ -12,6 +12,7 @@ import { CreateModulePopover } from './create-module-popover';
 import type { IconNames } from '@/primitives/icon';
 import { Icon } from '@/primitives/icon';
 import { Button } from '@/primitives/button';
+import { constants } from '@/constants';
 
 const iconSize = 15;
 
@@ -94,7 +95,11 @@ export async function SideMenu() {
           className="justify-start gap-3 font-normal"
           asChild
         >
-          <a href="mailto:[email protected]">
+          <a
+            href={constants.feedback}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <MessageSquareMore size={15} strokeWidth={1.5} /> Feedback
           </a>
         </Button>
@@ -103,7 +108,7 @@ export async function SideMenu() {
           className="justify-start gap-3 font-normal"
           asChild
         >
-          <a href="mailto:[email protected]">
+          <a href={constants.support} target="_blank" rel="noopener noreferrer">
             <CircleHelpIcon size={15} strokeWidth={1.5} /> Help & Support
           </a>
         </Button>

src/app/not-found.tsx

@@ -2,31 +2,39 @@ import { Button } from '@/primitives/button';
 import { Footer } from './(site)/_components/footer';
 import { Navbar } from './(site)/_components/navbar';
 import Link from 'next/link';
+import { constants } from '@/constants';
 
 export default function NotFoundPage() {
   return (
     <div className="flex min-h-dvh flex-col">
       <div className="absolute left-0 top-0 z-[-1] h-56 w-full bg-gradient-to-b from-indigo-subtle to-background" />
       <Navbar />
       <div className="container flex flex-1">
-        <main className="mb-4 flex flex-1 flex-col items-center justify-center gap-4">
-          <div className="w-full overflow-hidden rounded-lg md:w-3/4 lg:w-1/2">
-            <div className="relative h-0 w-full pb-[56.25%]">
-              <iframe
-                title="anybody there gif"
-                height="100%"
-                src="https://giphy.com/embed/3wtMhcftw2RhR2Wl3s/video"
-                className="absolute left-0 top-0"
-                width="100%"
-              ></iframe>
-            </div>
+        <main className="mb-4 flex flex-1 flex-col items-center justify-center gap-6">
+          <div className="relative">
+            <h1 className="text-9xl font-bold text-gray-foreground">404</h1>
           </div>
-          <p className="text-balance text-center text-base text-foreground-muted md:text-lg">
-            According to our very accurate records, this page does not exist.
+          <h2 className="text-4xl font-medium text-gray-foreground">
+            Oops! Page not found
+          </h2>
+          <p className="max-w-prose text-balance text-center text-lg text-foreground-muted">
+            It looks like this page has gone on an adventure. Maybe it&apos;s
+            hanging out with all those missing socks from the laundry.
           </p>
-          <Button asChild size="lg">
-            <Link href="/">Return home</Link>
-          </Button>
+          <div className="flex gap-4">
+            <Button asChild size="lg">
+              <Link href="/">Return home</Link>
+            </Button>
+            <Button asChild size="lg" variant="outline">
+              <a
+                href={constants.support}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Contact support
+              </a>
+            </Button>
+          </div>
         </main>
       </div>
       <Footer />

src/constants.tsx

@@ -16,6 +16,8 @@ export const constants = {
   domain: 'https://enoflow.vercel.app',
   discord: 'https://discord',
   twitter: 'https://x.com',
+  feedback: 'mailto:[email protected]',
+  support: 'mailto:[email protected]',
 };
 
 export const features = (iconSize: number) => [