web/components/LandingPage/BetweenSexualSection/page.jsx

117 lines
4.4 KiB
JavaScript

import Image from "next/image";
import Link from "next/link";
import between from "../../../public/images/between.jpg";
import w1 from "@img/w1.jpg";
import w2 from "@img/w2.jpg";
import w3 from "@img/w3.jpg";
import PersianNumber from "plugins/PersianNumber";
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-0 pl-5 xs:pb-4">
{/* <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> */}
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 mt-5 ">
<div className="bg-white p-1 rounded-3xl">
<Link
href={
"/categories/fac3ee2d-19dd-4229-a412-28a1d09cc948/شامپو-بدن"
}
>
<div>
<Image src={w1} className=" rounded-3xl" />
</div>
<div className="text-center p-4">
<p className="mb-0 text-base font-bold">
شامپو بدن بانوان{" "}
</p>
<div className="flex justify-center mt-2">
<p className="mb-0 bg-primary-500 rounded-3xl px-2 text-sm text-white">
تصمین بهترین قیمت
</p>
</div>
</div>
</Link>
</div>
<div className="bg-white p-1 rounded-3xl">
<Link
href={
"/categories/f3e79ed0-d608-470d-8656-7a98ff933c1e/نرم-کننده-مو"
}
>
<div>
<Image src={w2} className=" rounded-3xl" />
</div>
<div className="text-center p-4">
<p className="mb-0 text-base font-bold">نرم کننده مو </p>
<div className="flex justify-center mt-2">
<p className="mb-0 bg-primary-500 rounded-3xl px-2 text-sm text-white">
تصمین بهترین قیمت
</p>
</div>
</div>
</Link>
</div>
<div className="bg-white p-1 rounded-3xl">
<Link
href={
"/categories/8bf20569-c3e3-457f-b9ad-140ef449741b/ژل-بهداشتی-بانوان-و-آقایان"
}
>
<div>
<Image src={w3} className=" rounded-3xl" />
</div>
<div className="text-center p-3 pb-4">
<p className="mb-0 text-base font-bold">
ژل بهداشتی بانوان و آقایان{" "}
</p>
<div className="flex justify-center mt-2">
<p className="mb-0 bg-primary-500 rounded-3xl px-2 text-sm text-white">
تصمین بهترین قیمت
</p>
</div>
</div>
</Link>
</div>
</div>
{/* <p className="mt-3 mb-0 text-sm text-gray-500">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است
</p> */}
</div>
</div>
</div>
</section>
);
};
export default BetweenSexualSection;