Custom Not Found Page

// app/not-found.tsx
import Link from 'next/link';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '404 — Page Not Found',
  description: 'The page you are looking for does not exist.',
};

const popularLinks = [
  { href: '/', label: 'Home' },
  { href: '/search', label: 'Search Snippets' },
  { href: '/react', label: 'React Snippets' },
  { href: '/nodejs', label: 'Node.js Snippets' },
];

export default function NotFound() {
  return (
    <main className="min-h-[60vh] flex items-center justify-center px-4">
      <div className="text-center max-w-md">
        <p className="text-7xl font-bold text-gray-700">404</p>
        <h1 className="mt-4 text-2xl font-bold text-white">Page Not Found</h1>
        <p className="mt-2 text-gray-400">
          The page you&apos;re looking for doesn&apos;t exist or has been moved.
        </p>

        <div className="mt-8 flex flex-col gap-2">
          <p className="text-sm text-gray-500 uppercase tracking-wide">Popular Pages</p>
          <div className="flex flex-wrap justify-center gap-2">
            {popularLinks.map(({ href, label }) => (
              <Link
                key={href}
                href={href}
                className="px-4 py-2 bg-[#111] border border-white/10 rounded-lg
                  text-gray-300 hover:text-white hover:border-white/20
                  transition-colors text-sm"
              >
                {label}
              </Link>
            ))}
          </div>
        </div>

        <Link
          href="/"
          className="inline-block mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg
            hover:bg-blue-500 transition-colors font-medium"
        >
          Go Home
        </Link>
      </div>
    </main>
  );
}