import Button from "../../../../components/button";

import Rocket3D from "../../../../assets/ui/Rocket.png";

const Intro = () => {
  return (
    <div className="relative w-full h-full md:pt-20 mb-6 md:mb-10 gap-6 grid grid-cols-1 py-8 md:grid-cols-2">
      <div className="w-full h-full flex flex-col max-md:gap-5 gap-8 justify-center mx-auto items-center">
        <h1 className="text-start flex flex-col gap-3 md:gap-4 text-3xl md:text-4xl lg:text-5xl">
          <span className="inline-block">بزرگترین فروشگاه</span>
          <span className="text-secondTheme font-bold max-md:text-center">
            کاهش پینگ در ایران
          </span>
        </h1>
        <p className="text-center text-xl text-gray-600">
          سال ها تجربه پشت یک کانفیگ شماست
        </p>
        <Button extra="max-md:!hidden">همین الان میخرم</Button>
      </div>
      <div className="w-full h-full flex justify-center py-4 mx-auto items-center max-md:hidden">
        <img
          src={Rocket3D}
          alt="intro"
          className="w-60 md:w-72 lg:w-[25rem] animate-bounce"
        />
      </div>
    </div>
  );
};

export default Intro;