import Image from "next/image";
import Link from "next/link";
import yek from "../../../public/images/1.png";
import doo from "../../../public/images/2.png";
import see from "../../../public/images/3.png";
import chr from "../../../public/images/4.png";
import png from "../../../public/images/5.png";
import shs from "../../../public/images/6.png";

const HeroSection = () => {
  return (
    <div className=" xs:mt-[150px] md:mt-[60px] xl:mt-[180px] relative">
      <div className="text-center">
        <h1 className=" xs:text-3xl lg:text-5xl  xl:text-6xl text-white font-bold">
          وسمه ، بُن مضـــــــــــارع زیبایی
        </h1>
        <h2 className="text-gray-300 mt-4 xs:text-sm lg:text-lg xl:text-xl font-light ">
          پلتفرم زیبایی ایرانی راهی برای زیبایی بهتر
        </h2>
      </div>
      <div className="flex xs:flex-wrap justify-center  xs:mt-[50px] lg:mt-[100px] xl:mt-[180px] ">
        <div className="xs:m-2 lg:m-0">
          <Link
            href={`/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت پوست`}
          >
            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
              {" "}
              <div className="flex justify-center">
                <div className="absolute w-full">
                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                    <Image src={yek} alt="مراقبت پوست فروشگاه اینترنتی وسمه" />
                  </div>
                </div>
              </div>
            </div>
            <div className="text-center">
              <p className="mb-0 text-white text-sm mt-2">مراقبت پوست</p>
            </div>
          </Link>
        </div>

        <div className="xs:m-2 lg:m-0">
          <Link
            href={`/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e/آرایش لب`}
          >
            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
              {" "}
              <div className="flex justify-center">
                <div className="absolute w-full">
                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                    <Image src={doo} alt="آرایش لب فروشگاه اینترنتی وسمه" />
                  </div>
                </div>
              </div>
            </div>
            <div className="text-center">
              <p className="mb-0 text-white text-sm mt-2">آرایش لب</p>
            </div>
          </Link>
        </div>

        <div className="xs:m-2 lg:m-0">
          <Link
            href={`/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش ناخن`}
          >
            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2 group tr03">
              {" "}
              <div className="flex justify-center">
                <div className="absolute w-full">
                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px]  ">
                    <Image src={see} alt="آرایش ناخن فروشگاه اینترنتی وسمه" />{" "}
                  </div>
                </div>
              </div>
            </div>
            <div className="text-center">
              <p className="mb-0 text-white text-sm mt-2"> آرایش ناخن</p>
            </div>
          </Link>
        </div>

        <div className="xs:m-2 lg:m-0">
          <Link
            href={`/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت جنسی`}
          >
            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
              {" "}
              <div className="flex justify-center">
                <div className="absolute w-full">
                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                    <Image src={chr} alt="بهداشت جنسی فروشگاه اینترنتی وسمه" />
                  </div>
                </div>
              </div>
            </div>
            <div className="text-center">
              <p className="mb-0 text-white text-sm mt-2">بهداشت جنسی</p>
            </div>
          </Link>
        </div>

        <div className="xs:m-2 lg:m-0">
          <Link
            href={`/categories/2e11e55c-0941-49f8-9d22-dfa21088f639/آرایش چشم`}
          >
            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
              {" "}
              <div className="flex justify-center">
                <div className="absolute w-full">
                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                    <Image src={png} alt="آرایش چشم فروشگاه اینترنتی وسمه" />
                  </div>
                </div>
              </div>
            </div>
            <div className="text-center">
              <p className="mb-0 text-white text-sm mt-2">آرایش چشم</p>
            </div>
          </Link>
        </div>

        <div className="xs:m-2 lg:m-0">
          <Link
            href={`/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63/کرم پودر`}
          >
            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
              {" "}
              <div className="flex justify-center">
                <div className="absolute w-full">
                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                    <Image src={shs} alt="کرم پودر فروشگاه اینترنتی وسمه" />{" "}
                  </div>
                </div>
              </div>
            </div>
            <div className="text-center">
              <p className="mb-0 text-white text-sm mt-2">کرم پودر</p>
            </div>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default HeroSection;