import React from "react";

const Perks = () => {
  return (
    <div className=" relative mb-20 overflow-hidden px-4 md:px-0 py-6  ">
      <div className=" max-w-4xl mx-auto p-5 mt-4 flex items-center flex-col md:flex-row gap-4 justify-between w-full">
        <div className="flex relative uppercase items-center ">
          <div className="absolute bottom-0 left-1/2  -translate-x-1/2 -translate-y-1/2 w-[150px] h-5 bg-white blur-3xl rounded-full opacity-50"></div>
          <img src="images/affliate/boxB.svg" className="w-32 md:w-56" alt="" />
          <img
            src="images/affliate/perk1.svg"
            className="w-10 md:w-18 mt-10 relative z-20 -ml-10 md:-ml-28"
            alt=""
          />
          <img
            src="images/affliate/perk2.svg"
            className="w-8 md:w-12 mt-7 md:mt-20 -ml-3"
            alt=""
          />
        </div>
        <div className="flex relative flex-col items-center">
          <div className="flex flex-col z-[9999] relative justify-center">
            <h1 className="uppercase mb-5 text-sm md:text-3xl font-extrabold italic tracking-wider">
              perks & stuff
            </h1>
            <p className="flex items-center mb-3 font-onest text-xs md:text-base gap-3">
              <span className="bg-white  rounded-full h-1 w-1"></span>
              <span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </span>
            </p>
             <p className="flex items-center mb-3 font-onest text-xs md:text-base gap-3">
              <span className="bg-white  rounded-full h-1 w-1"></span>
              <span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </span>
            </p>
             <p className="flex items-center font-onest text-xs md:text-base gap-3">
              <span className="bg-white  rounded-full h-1 w-1"></span>
              <span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Perks;
