feat: add fallback pages for App Router

finances-web/src/app/error.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+
+import { H1 } from "@/components/typography/h1";
+import { Large } from "@/components/typography/large";
+import { Lead } from "@/components/typography/lead";
+import { Button } from "@/components/ui/button";
+
+interface ErrorProps {
+  error: Error;
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  return (
+    <div className="container flex h-screen max-w-screen-lg flex-col items-center justify-center gap-5 bg-background text-center">
+      <H1>Ops, algo deu errado!</H1>
+
+      <Large className="my-10 text-red-500">{error.message}</Large>
+
+      <Lead>
+        Lamentamos, mas ocorreu um erro inesperado. Tente novamente mais tarde
+        ou entre em contato com o suporte se o problema persistir.
+      </Lead>
+
+      <Button onClick={reset}>
+        <Link href="/" prefetch={false}>
+          Voltar para o início
+        </Link>
+      </Button>
+    </div>
+  );
+}

finances-web/src/app/loading.tsx

@@ -0,0 +1,10 @@
+import { LucideLoaderCircle } from "lucide-react";
+
+export default function Loading() {
+  return (
+    <div className="flex h-screen w-full flex-col items-center justify-center bg-background">
+      <LucideLoaderCircle className="size-12 animate-spin" />
+      <p className="text-lg font-medium text-foreground">Carregando...</p>
+    </div>
+  );
+}

finances-web/src/app/not-found.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+import { H1 } from "@/components/typography/h1";
+import { Lead } from "@/components/typography/lead";
+import { P } from "@/components/typography/p";
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <div className="container flex h-screen flex-col items-center justify-center gap-4 bg-background">
+      <Lead className="text-9xl">404</Lead>
+      <H1 className="text-center">Oops! Página não encontrada.</H1>
+      <P className="text-center">
+        A página que você procura não existe ou foi movida.
+      </P>
+      <Button>
+        <Link href="/" prefetch={false}>
+          Voltar para o início
+        </Link>
+      </Button>
+    </div>
+  );
+}