import robotImage from "../../../assets/images/robot.png";
import Button from "../Button";

type Props = {};

const FirstSection = (props: Props) => {
  return (
    <div
      // style={{ backgroundImage: `url(${background})` }}
      className="min-h-screen flex bg-cover bg-center bg-no-repeat relative"
    >
      <div className="container flex mx-auto text-white z-20 mt-20">
        <div className="md:w-1/2 flex flex-col justify-center gap-10 pb-20">
          <h4 className="text-6xl font-bold">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </h4>
          <p className="w-3/4 font-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
            amet eveniet fugiat pariatur, illo in est officiis labore ad
            corrupti obcaecati asperiores! Quos ratione tempore dolorum
            temporibus tenetur quaerat.
          </p>

          <div className="flex w-2/3 flex-wrap gap-4">
            <Button>Telegram</Button>
            <Button>Telegram</Button>
            <Button>Telegram</Button>
            <Button>Telegram</Button>
            <Button>Telegram</Button>
          </div>
        </div>
        <div className="md:w-1/2 flex justify-center items-center">
          <img src={robotImage} className="w-4/5" />
        </div>
      </div>
      <div className="w-full h-full bg-black absolute opacity-75 z-10"></div>
    </div>
  );
};

export default FirstSection;