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

export default function Learn() {
  return (
    <>
    <div className=" mx-6">
      <div className="w-full max-w-4xl text-center my-16 md:my-40">
        <h1 className="text-3xl md:text-7xl font-semibold tracking-tight text-black ">
          {Texts.learn_t}
        </h1>

        <h3 className="text-xl md:text-2xl font-base text-gray-800 tracking-tight my-10">
          {Texts.learn_subt}
        </h3>

        <button
          type="button"
          className="w-auto h-16 text-white bg-gradient-to-r from-orange-400 to-purple-800 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-full text-lg md:text-xl px-5 py-2.5 text-center inline-flex items-center justify-center mr-2 mb-2"
        >
          {Texts.join_us}
          <img src={ImagePath.circle_arrow} className="h-9 ml-6 arrow" />
        </button>

      </div>
      </div>
      <style jsx>
        {`
          button {
            background: linear-gradient(
              96.36deg,
              #ffff00 -15.3%,
              #ffd316 -8.64%,
              #ff9c32 0.8%,
              #ff6c4a 10.32%,
              #ff455d 19.7%,
              #ff276c 28.91%,
              #ff1177 37.92%,
              #ff047e 46.63%,
              #ff0080 54.68%,
              #0026ff 131.34%
            );
          }
        `}
      </style>
    </>
  );
}
