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

export default function AboutSection() {
  return (
    <>
      <div className="w-full max-w-5xl text-center my-16 md:my-40 px-6">
        <h1 className="text-3xl md:text-7xl font-semibold tracking-tight text-black ">
          {Texts.about_sec_title}
        </h1>
        <div className="w-full max-w-5xl flex items-center justify-center my-10">
          <h3 className="max-w-3xl text-base md:text-2xl font-normal tracking-tight text-black ">
            {Texts.about_sec_subtitle}
          </h3>
        </div>

        <button
          type="button"
          className="w-full max-w-xs h-16 text-white bg-gradient-to-r from-pink-300 to-purple-300 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-base md:text-xl px-5 py-2.5 text-center inline-flex items-center justify-center mr-2 mb-2"
        >
          {Texts.learn_about_us}
          <img src={ImagePath.circle_arrow} className="h-9 ml-6 arrow animate-pulse" />
        </button>

        {/* <ul className="flex flex-wrap justify-around items-center mt-40 hidden md:flex">
          <li>
            <img
              src={ImagePath.google}
              className="h-9 mr-3"
              alt="FlowBite Logo"
            />
          </li>
          <li>
            <img
              src={ImagePath.airbnb}
              className="h-9 mr-3"
              alt="FlowBite Logo"
            />
          </li>
          <li>
            <img
              src={ImagePath.creative}
              className="h-9 mr-3"
              alt="FlowBite Logo"
            />
          </li>{" "}
          <li>
            <img
              src={ImagePath.shopify}
              className="h-9 mr-3"
              alt="FlowBite Logo"
            />
          </li>{" "}
          <li>
            <img
              src={ImagePath.amazon}
              className="h-9 mr-3"
              alt="FlowBite Logo"
            />
          </li>
        </ul> */}
      </div>
      <style jsx>
        {`
          .text-7xl {
            line-height: 150%;
          }
          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>
    </>
  );
}
