/* The 404 Section Displays the 404 page. */
import React from "react";
import NotFoundImage from "@/public/images/not-found-img.webp"
import Link from "next/link";
import Routes from "@/src/utils/RouteConstants";
import Image from "next/image";

const NotFound404: React.FC = () => {
  return (
    // main wrapper of 404 section
    <>
      <div className={`min-h-[100vh] bg-bgColor h-auto w-full flex flex-col justify-center items-center gap-[20px] md:gap-[40px]`}>
        <div className={`max-w-[550px] w-[90%] h-auto`}>
          <Image src={NotFoundImage} alt="404-image" className={`w-fill !h-full object-contain`} />
        </div>
        <h2 className={`!mb-0 text-center`}>The page you were looking for doesn't exists.</h2>
        <Link className="SecondaryBtn !w-fit" href={Routes.HOME}>Go to Home</Link>
      </div>
    </>
  );

};

export default NotFound404;