Untitled

'use client'
import Form from "@/components/form";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";

export default function Login() {
  const [imageError, setImageError] = useState(false);
  return (
    <>

      <div className="flex relative container-fluid items-center bg-[#111827] h-full form justify-center ">
        <div className=" z-10 w-full md:flex grid grid-cols-1 items-center">
          <div className="2xl:max-w-3xl xl:max-w-xl lg:max-w-md  max-w-sm mx-auto w-full flex flex-col lg:h-screen  justify-center items-start xl:pl-0 px-4 xl:py-0 lg:py-0 md:py-8 py-7">
            <div className="py-7 w-full 2xl:px-40 xl:px-16 overflow-x-auto form">
              <Link className="flex-none z-30 text-xl font-semibold text-white mb-3" href="/" aria-label="Brand">
                {/* <Image
                width={200}
                height={80}
                alt="logotop"
                className="lg:w-[130px] md:w-[120px] dark:block hidden w-[90px]"
                src="/images/Meta-logo.svg" /> */}
                <Image
                  width={200}
                  height={80}
                  alt="logotop"
                  className="lg:w-[180px] md:w-[150px] mb-3 w-[120px]"
                  src="/images/Meta-logo.svg" />
              </Link>
              <h3 className="text-xl lg:text-2xl dark:text-white xl:mb-3 mb-2 text-white font-bold">Register</h3>
              <p className="text-sm text-gray-200">
                Register today and seize your chance to <span className="font-bold text-yellow-300">WIN!</span>
              </p>
              <Form type="register" />
            </div>
          </div>
          <div className="lg:w-[57%] md:w-[52%] lg:block hidden h-screen">
            <div className="absolute lg:w-[57%] md:w-[52%] right-0 top-0 bottom-0">
              <Image
                className="w-[100%] lg:h-screen"
                src={imageError ? '/images/Sign-in.webp' : '/images/Sign-in.webp'}
                fill={true}
                alt="formiamge"
                onError={() => setImageError(true)}
              />
            </div>
          </div>
        </div>
      </div>

    </>
  );
}