import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";
import Image from "next/image";
import ToolkitCard from "../ToolkitCard";

export default function Story() {
  return (
    <>
    <div className=" mx-6">
      <div className=" my-6 md:my-20 w-full max-w-screen-2xl">
        <div className="text-center  w-full">
          <h1 className="my-10 md:my-20 text-3xl md:text-7xl font-semibold tracking-tight text-gray-900 dark:text-white">
            {Texts.story_t}
          </h1>
        </div>
        <div className=" text-white w-full max-w-screen-2xl bg-white rounded-2xl md:rounded-5xl dark:bg-gray-800 dark:border-gray-700">
         
            <Image
              width={0}
              height={0}
              className="w-full rounded-t-2xl md:rounded-t-5xl"
              src={ImagePath.about}
              alt=""
              // style={{
              //   borderTopLeftRadius: "70px",
              //   borderTopRightRadius: "70px",
              // }}
            />
          <div className="p-4 lg:p-20 mt-8">
            <p className="mb-3 text-lg font-normal text-gray-900 tracking-tight leading-8 dark:text-gray-400">
              {Texts.story_sub}
            </p>
            <div className="flex items-center mt-8 md:mt-16 flex-col md:flex-row ">
              <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"
              >
                {Texts.join_club}
                <img src={ImagePath.circle_arrow} className="h-9 ml-6 arrow" />
              </button>
              <div>
                <p className="md:ml-8 mt-6 md:mt-0 text-lg font-normal text-gray-900 dark:text-white ">
                  <span className="text-transparent bg-clip-text bg-gradient-to-r to-purple-500 from-orange-500">
                    Join our community to contribute to and
                  </span>
                </p>
                <p className="md:ml-8 text-lg font-normal text-gray-900 dark:text-white ">
                  <span className="text-transparent bg-clip-text bg-gradient-to-r to-purple-500 from-orange-500">
                    benefit from this cognitive revolution
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <style jsx>{`
        .rounded-3xl {
          border-radius: 70px;
        }
        .rounded-3xl {
          border-top-left-radius: 70px !important;
          border-top-right-radius: 70px !important;
        }
      `}</style>
    </>
  );
}
