feat: add custom 404 page

frontend/app/not-found.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Home, ArrowLeft, Search } from "lucide-react"
+
+export default function NotFound() {
+    return (
+        <div className="min-h-[60vh] flex flex-col items-center justify-center text-center px-4">
+            <div className="space-y-6 max-w-md">
+                <div className="text-8xl font-bold text-muted-foreground/30">404</div>
+
+                <div className="space-y-2">
+                    <h1 className="text-2xl font-bold">Page Not Found</h1>
+                    <p className="text-muted-foreground">
+                        The page you&apos;re looking for doesn&apos;t exist or may have been moved.
+                    </p>
+                </div>
+
+                <div className="flex flex-col sm:flex-row gap-3 justify-center pt-4">
+                    <Button asChild variant="default">
+                        <Link href="/">
+                            <Home className="mr-2 h-4 w-4" />
+                            Go Home
+                        </Link>
+                    </Button>
+                    <Button asChild variant="outline">
+                        <Link href="/shows">
+                            <Search className="mr-2 h-4 w-4" />
+                            Browse Shows
+                        </Link>
+                    </Button>
+                </div>
+
+                <p className="text-sm text-muted-foreground pt-4">
+                    Looking for a specific show? Try the{" "}
+                    <Link href="/shows" className="underline hover:text-foreground">
+                        shows page
+                    </Link>{" "}
+                    or use the search.
+                </p>
+            </div>
+        </div>
+    )
+}