---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Hero from "@/components/widgets/Hero.astro";

const metadata = {
  title: "404 - Page Not Found",
  description: "The page you're looking for doesn't exist.",
  ignoreTitleTemplate: true,
};
---

<BaseLayout {metadata}>
  <Hero
    title={`<h1 class="bg-linear-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent text-[12rem] font-extrabold tracking-tighter mb-4">404</h1>`}
    description="We're sorry, we can't find the page you're looking for. It may have been moved or deleted."
    actions={[
      {
        variant: "primary",
        text: "Back to Home",
        href: "/",
        icon: "lucide:home",
      },
      {
        variant: "secondary",
        text: "Contact",
        href: "/contact",
        icon: "lucide:phone",
      },
    ]}
  />
</BaseLayout>
