80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
import CardNormal from "@comp/Cards/CardNormal/page";
|
|
import TimerDown from "@comp/TimerDown/TimerDown";
|
|
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>
|
|
|
|
{/* <div className="mx-5 mt-8">
|
|
<p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
|
|
مشاهده بیشتر{" "}
|
|
</p>
|
|
</div> */}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SurpriseSection;
|