re-init

src/app/not-found.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Link from "next/link";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Page Not Found",
+};
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] px-6 py-16 text-center">
+      <span className="text-7xl mb-6 block" aria-hidden="true">
+        🍃
+      </span>
+      <h1 className="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-3">
+        Page Not Found
+      </h1>
+      <p className="text-zinc-600 dark:text-zinc-400 max-w-md leading-relaxed mb-8">
+        This page doesn&apos;t seem to exist. Perhaps it wilted away, or the
+        URL got pruned. Let&apos;s get you back to healthy ground.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 rounded-lg bg-leaf-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-leaf-green-700 focus:outline-none focus:ring-2 focus:ring-leaf-green-500 focus:ring-offset-2"
+        >
+          🏠 Go home
+        </Link>
+        <Link
+          href="/browse"
+          className="inline-flex items-center gap-2 rounded-lg border border-zinc-300 dark:border-zinc-600 px-5 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-leaf-green-500 focus:ring-offset-2"
+        >
+          🌿 Browse plants
+        </Link>
+      </div>
+    </div>
+  );
+}