86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
import CardNormal from "@comp/Cards/CardNormal/page";
|
||
import TimerDown from "@comp/TimerDown/TimerDown";
|
||
import Link from "next/link";
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
|
||
const SurpriseSection = ({ data }) => {
|
||
return (
|
||
<section
|
||
className="mb-10 pb-10 xs:bg-red-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] mt-20"
|
||
id="offer"
|
||
>
|
||
<div className=" relative xs:hidden lg:block ">
|
||
<div className="w-full flex justify-end absolute ">
|
||
<svg
|
||
width="700"
|
||
height="400"
|
||
viewBox="0 0 1037 590"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mr-[20px]"
|
||
>
|
||
<path
|
||
d="M25.6693 0H1012C1025.81 0 1037 11.1929 1037 25V565C1037 578.807 1025.81 590 1012 590H371.096C362.569 590 354.631 585.654 350.036 578.472L4.60942 38.4715C-6.03513 21.8311 5.91551 0 25.6693 0Z"
|
||
fill="#EF3D59"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="xs:px-0 lg:px-20">
|
||
<div className="w-full rtl relative ">
|
||
<div className="pt-5 flex relative justify-between">
|
||
<p className="mb-0 text-white font-bold xs:text-sm lg:text-2xl xl:text-2xl">
|
||
پیشنهاد های ویژه امروز{" "}
|
||
</p>
|
||
<TimerDown />
|
||
</div>
|
||
</div>
|
||
<Swiper
|
||
spaceBetween={50}
|
||
slidesPerView={6.2}
|
||
// onSlideChange={() =>
|
||
// onSwiper={(swiper) =>
|
||
className="rtl relative mt-5"
|
||
breakpoints={{
|
||
320: {
|
||
slidesPerView: 1.4,
|
||
},
|
||
480: {
|
||
slidesPerView: 2,
|
||
},
|
||
768: {
|
||
slidesPerView: 3,
|
||
},
|
||
1024: {
|
||
slidesPerView: 4.5,
|
||
},
|
||
1440: {
|
||
slidesPerView: 6,
|
||
},
|
||
}}
|
||
>
|
||
{data?.map((e, index) => (
|
||
<SwiperSlide key={index}>
|
||
<CardNormal data={e} priority />
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
|
||
<Link
|
||
href={"/categories/0/همه%20محصولات?page=0&specialOffer=1"}
|
||
className="z-90 relative"
|
||
>
|
||
<div className="mx-5 mt-8">
|
||
<p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
|
||
مشاهده بیشتر{" "}
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default SurpriseSection;
|