"use client";

import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";

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>
        <svg
          className="absolute bottom-0 left-0 text-neutral-100 dark:text-neutral-800"
          fill="none"
          height="193"
          viewBox="0 0 557 193"
          width="557"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M532.397 459.432C547.052 349.092 522.275 239.841 460.008 189.274C387.521 130.408 264.226 151.071 93.1851 342.128C166.688 -373.233 -189.02 381.602 -103.19 43.7707"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="40"
          />
        </svg>

        <svg
          className="absolute right-0 bottom-0 text-neutral-100 dark:text-neutral-800"
          fill="none"
          height="193"
          viewBox="0 0 494 193"
          width="494"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_491_1093)">
            <path
              d="M-38.5313 459.432C-53.1867 349.092 -28.4102 239.841 33.8573 189.274C106.345 130.408 229.64 151.071 400.68 342.128C327.177 -373.233 682.885 381.602 597.055 43.7707"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_491_1093">
              <rect fill="white" height="193" width="494" />
            </clipPath>
          </defs>
        </svg>
      </div>

      <div className="relative z-10 flex w-full max-w-sm flex-col items-center justify-center rounded-3xl border border-neutral-200 bg-white px-5 py-10 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
        <div className="mx-auto mb-6 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-3 text-center font-medium text-2xl text-neutral-900 tracking-tight sm:text-3xl dark:text-neutral-100">
          Sorry, page not found.
        </h1>

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

        <Button className="w-fit rounded-xl bg-neutral-900 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 -translate-x-1/2">
        <p className="text-neutral-500 text-sm dark:text-neutral-500">
          ©2025 Cnippet Collection
        </p>
      </div>
    </section>
  );
}
404

Page not found
