import HeroImg from "../../assets/HeroImg.svg";
import Stars from "../../assets/Stars.svg";

const Hero = () => {
  return (
    <div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
      <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
        <img className="items-center" src={HeroImg} alt="hero"></img>
      </div>
      <div className="justify-center items-center lg:w-1/2 xl:w-1/2">
        <div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right 2xl:pr-40">
          <img
            src={Stars}
            alt="hero"
            className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
          ></img>
          <div>
            <h1 className="header-text">GROW YOUR</h1>
            <h1 className="header-text">BUSINESS</h1>
            <div>
              <img
                src={HeroImg}
                alt="heroSm"
                className="flex mt-6 lg:hidden"
              ></img>
            </div>
          </div>
          <h2 className="italic text-lg md:text-2xl 2xl:text-3xl mt-4 md:mt-10">
            We do all the digital footprint for you,
          </h2>
          <h2 className="italic text-lg md:text-2xl 2xl:text-3xl">
            so you can focus on what's important!
          </h2>
          <div className="flex mt-5 lg:mt-12 mx-10 sm:mx-40 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
            <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
              Yes, I want that!
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;
