web/components/LandingPage/BetweenSexualSection/page.jsx

import Image from "next/image";
import Link from "next/link";
import between from "../../../public/images/between.jpg";
import between1 from "../../../public/images/between1.png";
import between2 from "../../../public/images/between2.png";

const BetweenSexualSection = () => {
  return (
    <section>
      <div className="mt-10  xs:px-5 lg:px-20">
        <div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
          <div className="relative z-10 overflow-hidden  rounded-3xl">
            <div className="w-full">
              <Image
                src={between}
                className="object-cover "
                alt="بهداشت جنسی آقایان و بانوان"
              />
            </div>
          </div>

          <div className="bg-gray-100 relative xs:left-[0px] lg:left-[30px] xs:top-[-35px] lg:top-0 col-span-2 z-0 rounded-3xl  xs:pr-5 lg:pr-[55px] xs:pt-[55px] lg:pt-10 pl-5">
            <div className="xs:block lg:flex">
              <h2 className="font-bold xs:text-2xl lg:text-3xl">
                لوازم بهداشتی وسمه
              </h2>

              <p className="px-3 py-1 mb-0 rounded-full w-fit bg-sky-200 xs:mr-0 lg:mr-2 xs:mt-2 lg:mt-0 xs:text-sm lg:text-base ">
                به صرفه زیبا شـــــــــــــو
              </p>
            </div>

            {/* <p className="mt-3 mb-0 text-sm text-gray-500">
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
              استفاده از طراحان گرافیک است
            </p> */}

            <div className="mt-10  xs:block lg:flex">
              <Link
                href={`/categories/8bf20569-c3e3-457f-b9ad-140ef449741b/ژل-بهداشتی-بانوان-و-آقایان`}
                className="w-full mx-3"
              >
                <div className="w-full p-3 mx-1 bg-pink-300 rounded-3xl lg:my-0 ">
                  <div className="flex justify-end ">
                    <div className="absolute mt-[-43px] ">
                      <div className="xs:w-[140px] lg:w-[150px]">
                        <Image
                          src={between1}
                          className=" object-cover xs:w-[140px] lg:w-[150px]"
                          alt="لوازم بهداشت بانوان وسمه"
                        />
                      </div>
                    </div>
                  </div>
                  <h3 className="xs:text-lg lg:text-xl ">
                    بهداشت روزانه بانوان
                  </h3>

                  <p className="px-3 py-1 mt-2 mb-0 text-sm rounded-full w-fit bg-sky-200">
                    شروع خرید{" "}
                  </p>
                </div>
              </Link>

              <Link
                href={`/categories/70cffd9e-f475-4245-87bb-5f175d286901/لوازم-اصلاح`}
                className="w-full mx-3"
              >
                <div className="w-full p-3 mx-1 bg-sky-300 rounded-3xl xs:my-3 lg:my-0 ">
                  <div className="flex justify-end">
                    <div className="absolute mt-[-43px]">
                      <div className="xs:w-[140px] lg:w-[150px]">
                        <Image
                          src={between2}
                          className="object-cover "
                          alt="لوازم بهداشت آقایان وسمه"
                        />
                      </div>
                    </div>
                  </div>
                  <h3 className="xs:text-lg lg:text-xl ">
                    بهداشت روزانه آقایان
                  </h3>

                  <p className="px-3 py-1 mt-2 mb-0 text-sm rounded-full w-fit bg-sky-200">
                    شروع خرید{" "}
                  </p>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default BetweenSexualSection;