web/components/LandingPage/CategoriesHero/page.jsx

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";
import React from "react";

const CategoriesHero = () => {
  return (
    <div className="flex xs:flex-wrap justify-center  mt-10">
      <div className="xs:m-2 lg:m-0">
        <Link
          href={`/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت پوست`}
        >
          <div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px]  rounded-full mx-2">
            {" "}
            <div className="flex justify-center relative">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image
                    src={yek}
                    alt="مراقبت پوست فروشگاه اینترنتی وسمه"
                    property
                    loading="eager"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-black 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-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px]  rounded-full mx-2">
            {" "}
            <div className="flex justify-center relative">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image
                    src={doo}
                    alt="آرایش لب فروشگاه اینترنتی وسمه"
                    property
                    loading="eager"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-black 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-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2 group tr03">
            {" "}
            <div className="flex justify-center relative">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px]  ">
                  <Image
                    src={see}
                    alt="آرایش ناخن فروشگاه اینترنتی وسمه"
                    property
                    loading="eager"
                  />{" "}
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-black 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-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
            {" "}
            <div className="flex justify-center relative">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image
                    src={chr}
                    alt="بهداشت جنسی فروشگاه اینترنتی وسمه"
                    property
                    loading="eager"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-black 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-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
            {" "}
            <div className="flex justify-center relative">
              <div className="absolute w-full">
                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image
                    src={png}
                    alt="آرایش چشم فروشگاه اینترنتی وسمه"
                    property
                    loading="eager"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-black 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-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px]  rounded-full mx-2">
            {" "}
            <div className="flex justify-center relative">
              <div className="absolute  w-full">
                <div className="xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
                  <Image
                    src={shs}
                    alt="کرم پودر فروشگاه اینترنتی وسمه"
                    property
                    loading="eager"
                  />{" "}
                </div>
              </div>
            </div>
          </div>
          <div className="text-center">
            <p className="mb-0 text-black text-sm mt-2">کرم پودر</p>
          </div>
        </Link>
      </div>
    </div>
  );
};

export default CategoriesHero;