feat: Add custom 404 not found component to enhance user experience

Author: tommerty

src/routes/__root.tsx

@@ -49,6 +49,21 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 		],
 	}),
 
+	notFoundComponent: () => {
+		return (
+			<div className="flex min-h-screen flex-col items-center justify-center gap-4 p-4">
+				<h1 className="text-4xl font-bold">404</h1>
+				<p className="text-muted-foreground">Page not found</p>
+				<a
+					href="/"
+					className="text-primary underline underline-offset-4 hover:text-primary/80"
+				>
+					Go back home
+				</a>
+			</div>
+		);
+	},
+
 	shellComponent: RootDocument,
 });