feat: add 404 page with centered layout

not-found.tsx renders oversized Fraunces heading with a back link. Body gets flex flex-col min-h-screen so main can flex-1 to fill available height without pushing the footer off screen.
2026-05-18 20:46:22 +03:00
parent b88263a65a
commit 540df57f8d
2 changed files with 14 additions and 1 deletions
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
-      <body className={`${fraunces.variable} ${publicSans.variable}`}>
+      <body className={`${fraunces.variable} ${publicSans.variable} flex flex-col min-h-screen`}>
        {children}
        <Footer />
      </body>
@@ -0,0 +1,13 @@
+import { Link } from '$shared/ui';
+
+/**
+ * Custom 404 page — shown for any unmatched route.
+ */
+export default function NotFound() {
+  return (
+    <main className="flex-1 flex flex-col items-center justify-center gap-6">
+      <h1 className="font-heading text-[clamp(8rem,20vw,18rem)] leading-none">404</h1>
+      <Link href="/">Back to main</Link>
+    </main>
+  );
+}