page

import Image from "next/image";

export default function Home() {
  return (
    <main className="flex flex-row items-center h-screen w-full overscroll-none sm:flex sm:flex-col ">
      <div className=" lg: flex lg: flex-row lg: items-center lg: w-screen lg: h-screen lg: overflow-hidden">
        <div className="p-0 flex h-screen w-1/2 justify-center align-middle items-center">
          <div className="sm: w-[40.45px] sm: h-[36.56px] 2xl: w-[693px] 2xl: h-[444px] 2xl:items-center 2xl: flex 2xl: justify-center">
            <Image
              src={"/twitter.png"}
              alt="Twitter's logo"
              width={341.57}
              height={308.75}
              className="w-[40.45px] h-[36.56px] sm:w-[341.57px] sm:h-[308.75px] sm: self-start xl: self-center"
            />
          </div>
        </div>
        <div className="p-4 flex h-screen w-1/2 justify-center align-middle items-center">
          <div className="p-5 w-full align-middle">
            <div className="w-fit h-fit">
              <h2 className="text-[64px] m-12 ml-0 mr-0 w-fit">
                Happening now
              </h2>
              <h2 className="text-[31px] w-full mb-8">
                Join today.
              </h2>
              <div className=" w-full h-fit ">
                <div className="flex flex-row ">
                  <div className="flex flex-row outline outline-1 pl-4 pr-4 rounded-3xl w-[300px] h-[40px] justify-center mb-2">
                    <Image className=" object-scale-down w-5 h-5 self-center mr-2" src={"/google.png"} alt="Google Logo" width={32 } height={32} />
                    <h1 className=" text-[14px] self-center">
                      Sign up with Google
                    </h1>
                  </div>
                    
                </div>
              </div>
              <div className=" w-full h-fit ">
                <div className="flex flex-row ">
                  <div className="flex flex-row outline outline-1 pl-4 pr-4 rounded-3xl w-[300px] h-[40px] justify-center">
                    <Image className=" object-scale-down w-5 h-5 self-center mr-2" src={"/apple-logo.png"} alt="Google Logo" width={32 } height={32} />
                    <h1 className=" text-[14px] self-center">
                      Sign up with Apple
                    </h1>
                  </div>
                    
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-col w-full align-middle items-center pt-3 pb-3 pl-4 pr-4">
        <nav className="flex flex-row ">
          <span>
            About
          </span>
          <span>
            Download the X app
          </span>
          <span>
            Help Center
          </span>
          <span>
            Terms of Service
          </span>
          <span>
            Privacy Policy
          </span>
          <span>
            Cookie Policy
          </span>
          <span>
            Accessibility
          </span>
          <span>
            Ads info
          </span>
          <span>
            Blog
          </span>
          <span>
            Status
          </span>
          <span>
            Careers 
          </span>
          <span>
            Brand Resources
          </span>
          <span>
            Advertising
          </span>
          <span>
            Marketing
          </span>
          <span>
            X for Business
          </span>
          <span>
            Developers
          </span>
          <span>
            Directory
          </span>
          <span>
            Settings
          </span>
          <span>
            © 2024 X, Corp.
          </span>
        </nav>
      </div>
    </main>
  );
}