import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";

export default function JoinClub() {
  return (
    <>
    <div className=" mx-6">
      <div className="bg w-full max-w-screen-2xl text-center px-10 md:px-10 py-20 flex flex-col items-center content-center justify-between rounded-2xl md:rounded-3xl">
        <h1 className="text-2xl md:text-7xl font-semibold tracking-tight text-white dark:text-white">
          {Texts.join_club_t}
        </h1>
        <h6 className="text-base md:text-2xl md:px-28 py-10 text-white"> {Texts.join_club_subt}</h6>
        <button
          type="button"
          className="bg-black max-w-fit h-16 text-white  focus:ring-4 focus:outline-none font-medium rounded-full text-lg md:text-xl px-5 py-2.5 text-center inline-flex items-center justify-center hover:bg-gray-900"
        >
          {Texts.join_club}
          <img src={ImagePath.circle_arrow} className="h-9 ml-6 arrow animate-pulse" />
        </button>
      </div>
      </div>
      <style jsx>{`
        h5 {
          line-height: 66px;
        }
        .bg {
          background: linear-gradient(
            101.32deg,
            #ffff00 2.49%,
            #ffd316 7.51%,
            #ff9c32 14.64%,
            #ff6c4a 21.82%,
            #ff455d 28.9%,
            #ff276c 35.85%,
            #ff1177 42.64%,
            #ff047e 49.21%,
            #ff0080 55.29%,
            #0026ff 113.13%
          );
        }
        .rounded-3xl {
          border-radius: 70px;
        }
      `}</style>
    </>
  );
}
