756 lines
41 KiB
JavaScript
756 lines
41 KiB
JavaScript
import TimerDown from "@comp/TimerDown/TimerDown";
|
|
import Image from "next/image";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import p1 from "../../../public/images/product/1.png";
|
|
import p2 from "../../../public/images/product/2.png";
|
|
import p3 from "../../../public/images/product/3.png";
|
|
import p4 from "../../../public/images/product/4.png";
|
|
|
|
const SurpriseSection = () => {
|
|
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">
|
|
<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">
|
|
<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={() => console.log("slide change")}
|
|
onSwiper={(swiper) => console.log(swiper)}
|
|
className="rtl relative mt-5"
|
|
breakpoints={{
|
|
320: {
|
|
slidesPerView: 1.6,
|
|
},
|
|
480: {
|
|
slidesPerView: 2,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
},
|
|
1024: {
|
|
slidesPerView: 4.5,
|
|
},
|
|
1440: {
|
|
slidesPerView: 6,
|
|
},
|
|
}}
|
|
>
|
|
<SwiperSlide>
|
|
<>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber number={35} />
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="w-full h-fit ">
|
|
<Image
|
|
src={p1}
|
|
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
|
لوسیون بدن سلامتی | maya
|
|
</p>
|
|
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
|
{" "}
|
|
3 عدد موجود انبار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
|
<div className="flex">
|
|
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
|
<div>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 145 183"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div> */}
|
|
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
|
<div>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 176 176"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[6px]"
|
|
>
|
|
<path
|
|
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full">
|
|
{2 == 2 ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber number={150000} style={"text-[13px]"} />
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber number={35} />
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="w-full h-fit ">
|
|
<Image
|
|
src={p2}
|
|
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
|
سلامتی | maya
|
|
</p>
|
|
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
|
{" "}
|
|
3 عدد موجود انبار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
|
<div className="flex">
|
|
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
|
<div>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 145 183"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div> */}
|
|
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
|
<div>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 176 176"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[6px]"
|
|
>
|
|
<path
|
|
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full">
|
|
{2 == 2 ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber number={150000} style={"text-[13px]"} />
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber number={35} />
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="w-full h-fit ">
|
|
<Image
|
|
src={p3}
|
|
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
|
لوسیو
|
|
</p>
|
|
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
|
{" "}
|
|
3 عدد موجود انبار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
|
<div className="flex">
|
|
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
|
<div>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 145 183"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div> */}
|
|
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
|
<div>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 176 176"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[6px]"
|
|
>
|
|
<path
|
|
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full">
|
|
{2 == 2 ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber number={150000} style={"text-[13px]"} />
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber number={35} />
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="w-full h-fit ">
|
|
<Image
|
|
src={p4}
|
|
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
|
لوسیون |mexicano milanono
|
|
</p>
|
|
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
|
{" "}
|
|
3 عدد موجود انبار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
|
<div className="flex">
|
|
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
|
<div>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 145 183"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div> */}
|
|
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
|
<div>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 176 176"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[6px]"
|
|
>
|
|
<path
|
|
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full">
|
|
{2 == 2 ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber number={150000} style={"text-[13px]"} />
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber number={35} />
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="w-full h-fit ">
|
|
<Image
|
|
src={p1}
|
|
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
|
لوسیون بدن سلامتی | maya
|
|
</p>
|
|
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
|
{" "}
|
|
3 عدد موجود انبار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
|
<div className="flex">
|
|
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
|
<div>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 145 183"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div> */}
|
|
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
|
<div>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 176 176"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[6px]"
|
|
>
|
|
<path
|
|
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full">
|
|
{2 == 2 ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber number={150000} style={"text-[13px]"} />
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber number={35} />
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="w-full h-fit ">
|
|
<Image
|
|
src={p1}
|
|
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
|
لوسیون بدن سلامتی | maya
|
|
</p>
|
|
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
|
{" "}
|
|
3 عدد موجود انبار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
|
<div className="flex">
|
|
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
|
<div>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 145 183"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div> */}
|
|
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
|
<div>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 176 176"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[6px]"
|
|
>
|
|
<path
|
|
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full">
|
|
{2 == 2 ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber number={150000} style={"text-[13px]"} />
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<>
|
|
<div
|
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
|
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
|
}`}
|
|
// key={index}
|
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
|
>
|
|
<div className="absolute m-3 ">
|
|
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
|
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
|
<PersianNumber number={35} />
|
|
<small className="text-[10px] ml-1">%</small>
|
|
</p>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="w-full h-fit ">
|
|
<Image
|
|
src={p1}
|
|
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="p-3 text-right">
|
|
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
|
لوسیون بدن سلامتی | maya
|
|
</p>
|
|
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
|
{" "}
|
|
3 عدد موجود انبار
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
|
<div className="flex">
|
|
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
|
<div>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 176 176"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[6px]"
|
|
>
|
|
<path
|
|
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full text-right rounded-full">
|
|
{2 == 2 ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber number={150000} style={"text-[13px]"} />
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber number={150000} />
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SurpriseSection;
|