39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
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't seem to exist. Perhaps it wilted away, or the
|
|
URL got pruned. Let'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>
|
|
);
|
|
}
|