404 1

"use client";

import Link from "next/link";
import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

const navLinks = [
  { href: "/", label: "Home Page" },
  { href: "/services", label: "Services Page" },
  { href: "/pricing", label: "Pricing Page" },
];

export default function Component() {
  return (
    <section className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-gray-50 px-6 dark:bg-background">
      <div className="relative z-10 flex flex-col items-center text-center">
        <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-600 shadow-lg">
          <Icons.pageCrosseText className="size-10 text-white" />
        </div>

        <h1 className="mb-4 font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
          Page not found
        </h1>

        <p className="mb-8 max-w-md text-neutral-600 dark:text-neutral-400">
          The page you are looking for doesn't exist or has been moved.
        </p>

        <Button className="rounded-lg bg-neutral-900 px-6 py-2 font-medium text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200">
          Go Back to Home
        </Button>
      </div>

      <div className="absolute bottom-8 left-1/2 z-10 w-full max-w-full -translate-x-1/2 px-4">
        <nav className="flex flex-wrap items-center justify-center gap-4">
          {navLinks.map((link, index) => (
            <div className="flex items-center gap-4" key={link.label}>
              <Link
                className="text-neutral-900 text-sm transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
                href={link.href}
              >
                {link.label}
              </Link>
              {index < navLinks.length - 1 && (
                <Separator orientation="vertical" />
              )}
            </div>
          ))}
        </nav>
      </div>
    </section>
  );
}