import Image from "next/image";
import Link from "next/link";

interface IProps {}

const NotFoundPage = ({}: IProps) => {
  return (
    <div className="flex flex-col gap-24">
      <section className="w-full flex items-center justify-center mt-8">
        <Image
          src={"/404.svg"}
          alt="404"
          width={700}
          height={1000}
        />
      </section>
      <section>
        <div>
          <Image
            src={"/cable.svg"}
            width={2000}
            height={3000}
            alt="not connected cable"
          />
        </div>
      </section>
      <section className="flex items-center flex-col justify-center gap-10 mt-10">
        <h1 className="font-bold text-2xl">Page not found</h1>
        <p className="font-semibold text-[16px] text-[#77707f]">
          Sorry, the page you're looking for does not exist or has been removed.{" "}
          <br />
          You can navigate to Home using
          <Link
            href="/"
            className="text-(--primary) mx-1">
            This
          </Link>
          link.
        </p>
      </section>
    </div>
  );
};

export default NotFoundPage;