82 lines
2.8 KiB
JavaScript
82 lines
2.8 KiB
JavaScript
import CardNormal from "@comp/Cards/CardNormal/page";
|
|
import Image from "next/image";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import khane from "../../../public/images/khane.jpg";
|
|
import CardSurprise from "@comp/Cards/CardSurprise/page";
|
|
import Link from "next/link";
|
|
|
|
const HomeSection = ({ data }) => {
|
|
return (
|
|
<section className="xs:mb-0 lg:mb-20">
|
|
<div className=" xs:px-5 lg:px-20 mt-10">
|
|
<div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
|
|
<div className="rounded-3xl overflow-hidden relative z-10 h-fit">
|
|
<div className="w-full">
|
|
<Image
|
|
src={khane}
|
|
className="object-cover"
|
|
alt="لوازم بهداشتی منزل وسمه"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="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-3 xl:pt-10 pl-5 xs:pb-10 lg:pb-0">
|
|
<div className="xs:block lg:flex">
|
|
<h2 className="xs:text-2xl lg:text-xl xl:text-3xl font-bold">
|
|
لوازم بهداشتی منزل وسمه
|
|
</h2>
|
|
|
|
<p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 xs:mr-0 lg:mr-2 xs:mt-2 lg:mt-0 xs:text-sm lg:text-sm xl:text-base ">
|
|
به صرفه شـــــــــــــو
|
|
</p>
|
|
</div>
|
|
|
|
<Swiper
|
|
spaceBetween={50}
|
|
slidesPerView={6.2}
|
|
// onSlideChange={() => console.log("slide change")}
|
|
// onSwiper={(swiper) => console.log(swiper)}
|
|
className="rtl relative mt-4"
|
|
breakpoints={{
|
|
320: {
|
|
slidesPerView: 1.3,
|
|
},
|
|
480: {
|
|
slidesPerView: 2,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
},
|
|
1024: {
|
|
slidesPerView: 3.4,
|
|
},
|
|
1440: {
|
|
slidesPerView: 3.8,
|
|
},
|
|
}}
|
|
>
|
|
{data?.map((e, index) => (
|
|
<SwiperSlide key={index}>
|
|
<CardSurprise data={e} priority />
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href={"/categories/89631880-a1a3-4759-8fcd-d9284a8f97ed/شوینده-ظروف"}
|
|
className="z-90 relative"
|
|
>
|
|
<div className="mx-5">
|
|
<p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
|
|
مشاهده بیشتر{" "}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HomeSection;
|