Broken Links and 404 Pages: How to Find, Fix, and Prevent Them

// src/app/not-found.tsx (Next.js App Router 404 Page)
import Link from "next/link";
import { Search, Compass, BookOpen } from "lucide-react";

export default function NotFound() {
  return (
    <main className="min-h-[70vh] flex flex-col items-center justify-center px-4 text-center">
      <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-sm font-semibold mb-4">
        HTTP 404 // Page Not Found
      </div>
      <h1 className="text-4xl sm:text-5xl font-extrabold text-white tracking-tight mb-4">
        Lost in the Architecture?
      </h1>
      <p className="text-lg text-slate-400 max-w-md mb-8">
        The resource you are looking for has been relocated, archived, or never existed.
      </p>

      {/* Helpful Navigation Links */}
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Link
          href="/"
          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition"
        >
          <Compass className="w-4 h-4" /> Return to Homepage
        </Link>
        <Link
          href="/blog"
          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-800 text-slate-200 border border-slate-700 hover:bg-slate-700 transition"
        >
          <BookOpen className="w-4 h-4" /> Browse Technical Guides
        </Link>
      </div>
    </main>
  );
}