import Image from "next/image";
import Link from "next/link";

import cat1 from "../../../public/images/cat1.jpg";
import cat2 from "../../../public/images/cat2.jpg";
import cat3 from "../../../public/images/cat3.jpg";
import cat11 from "../../../public/images/cat11.png";
import cat12 from "../../../public/images/cat12.png";
import cat13 from "../../../public/images/cat13.png";
import cat14 from "../../../public/images/cat14.png";
import cat15 from "../../../public/images/cat15.png";
import PersianNumber from "@plugins/PersianNumber";
import { Swiper, SwiperSlide } from "swiper/react";
import CardNormal from "@comp/Cards/CardNormal/page";
import CardSurprise from "@comp/Cards/CardSurprise/page";
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
import Footer from "@comp/Footer/page";

const HeroSection = ({ data }) => {
  console.log(data);
  return (
    <div className=" ">
      <div className=" relative bg-primary-800 xs:h-auto lg:h-[600px] xs:mb-[60px] lg:mb-[190px] rounded-b-[50px] bg-hero-pattern">
        <div className="relative h-[150px]">
          <NavbarTransparent />
        </div>

        <div className="xs:pt-10 lg:pt-20">
          <h1 className="text-center font-bold text-white  xs:text-[30px] lg:text-[60px]">
            فروشگاه آشپرخانه بونسای{" "}
          </h1>
          <p className="mb-0 text-center text-gray-400">
            بونسای نبض آرام آشپزخانه
          </p>
        </div>
        <div className=" pt-20">
          <div className=" xs:hidden lg:block xs:w-10/12 lg:w-12/12 xl:11/12 mx-auto bg-header-1 xs:rounded-[60px] lg:rounded-[110px] h-[500px] group relative">
            <div className="">
              <svg
                class="absolute  inset-x-0 mx-auto h-[50px] rotate-180 block bottom-0 "
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 740 155.61"
              >
                <path
                  fill="white"
                  d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                ></path>
              </svg>
              <div></div>

              <div className="flex justify-center w-full">
                <div className="absolute flex bottom-2">
                  <span className=" w-[10px] h-[10px] rounded-full  block bg-red-100 bottom-0 inset-x-0 mx-[1px]  "></span>{" "}
                  <span className=" w-[30px] h-[10px] rounded-full  block bg-red-300 bottom-0 inset-x-0 mx-[1px]"></span>{" "}
                  <span className=" w-[10px] h-[10px] rounded-full  block bg-red-100 bottom-0 inset-x-0 mx-[1px] "></span>{" "}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* <div className=" xs:w-full lg:w-7/12 mx-auto">
          <div className="grid xs:grid-cols-1 lg:grid-cols-4 my-[60px] rtl">
            <div className="flex rtl ">
              <div className="ml-1">
                <svg
                  width="40"
                  height="40"
                  viewBox="0 0 195 234"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-55"
                >
                  <path
                    d="M97.5 223C108.859 223 120.107 220.855 130.602 216.686C141.097 212.518 150.632 206.409 158.665 198.707C166.697 191.005 173.069 181.861 177.416 171.798C181.763 161.735 184 150.949 184 140.057V93.9407C184.001 73.5647 176.18 53.9012 162.029 38.7007M11 112.354V140.057C10.9942 156.385 16.0145 172.351 25.4316 185.955C34.8487 199.559 48.2438 210.195 63.938 216.53M140.75 22.1121C120.883 11.1136 97.2729 8.13312 75.1139 13.8262C52.955 19.5192 34.062 33.4194 22.591 52.4692C17.8677 60.2912 14.5352 68.8126 12.73 77.6839"
                    stroke="black"
                    stroke-width="21.4286"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M88.5037 59.1046C94.8666 57.838 101.445 57.9569 107.753 59.4527C114.062 60.9484 119.94 63.7828 124.954 67.7469C129.968 71.711 133.99 76.7037 136.724 82.3569C139.458 88.01 140.834 94.1794 140.75 100.41V127.118M129.678 161.954C123.791 168.241 116.043 172.654 107.469 174.603C98.8954 176.551 89.9055 175.943 81.7025 172.858C73.4996 169.773 66.475 164.359 61.5688 157.341C56.6626 150.323 54.109 142.035 54.2497 133.587V100.41C54.2168 94.7128 55.394 89.0687 57.7097 83.8216M97.4997 102.235V129.938"
                    stroke="black"
                    stroke-opacity="0.46"
                    stroke-width="21.4286"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>

              <div className="text-right">
                <p className="mb-0 font-medium">امنیت در خرید</p>
                <small className="mb-0 relative top-[-5px] text-gray-500">
                  همه ساعت روز هفت روز
                </small>
              </div>
            </div>

            <div className="flex rtl mx-8">
              <div className="ml-1">
                <svg
                  width="40"
                  height="40"
                  viewBox="0 0 234 245"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-55"
                >
                  <path
                    d="M65.8285 163.318C66.1568 164.505 66.7156 165.616 67.4731 166.587C68.2306 167.557 69.1719 168.37 70.2433 168.977C71.3146 169.584 72.4951 169.974 73.7172 170.125C74.9393 170.276 76.1792 170.184 77.366 169.856C78.5528 169.528 79.6633 168.969 80.6342 168.211C81.605 167.454 82.4172 166.512 83.0242 165.441C83.6313 164.37 84.0214 163.189 84.1722 161.967C84.3231 160.745 84.2318 159.505 83.9035 158.318L65.8285 163.318ZM12.0035 31.5684C10.812 31.2204 9.56326 31.1124 8.32972 31.2508C7.09619 31.3892 5.90242 31.7712 4.81768 32.3746C3.73293 32.978 2.77882 33.7908 2.01068 34.7659C1.24255 35.7409 0.675695 36.8588 0.343006 38.0547C0.0103176 39.2505 -0.0815803 40.5006 0.0726454 41.7322C0.226871 42.9639 0.62415 44.1526 1.24143 45.2295C1.85871 46.3064 2.6837 47.25 3.66854 48.0056C4.65338 48.7611 5.77845 49.3136 6.97848 49.6309L12.0035 31.5684ZM224.353 169.068C225.574 168.786 226.726 168.262 227.741 167.527C228.755 166.792 229.613 165.861 230.261 164.789C230.91 163.718 231.338 162.527 231.518 161.287C231.699 160.047 231.63 158.783 231.314 157.571C230.998 156.359 230.442 155.222 229.679 154.228C228.917 153.234 227.963 152.403 226.873 151.783C225.784 151.164 224.582 150.77 223.337 150.624C222.093 150.477 220.832 150.582 219.628 150.931L224.353 169.068ZM99.466 191.993C103.341 205.993 94.841 220.781 79.791 224.693L84.5035 242.831C109.216 236.418 124.316 211.556 117.541 186.993L99.466 191.993ZM79.791 224.693C64.641 228.631 49.441 219.831 45.541 205.706L27.466 210.706C34.216 235.143 59.891 249.231 84.5035 242.831L79.791 224.693ZM45.541 205.706C41.666 191.706 50.166 176.918 65.216 173.006L60.5035 154.881C35.791 161.293 20.6785 186.143 27.466 210.706L45.541 205.706ZM65.216 173.006C80.366 169.068 95.566 177.868 99.466 191.993L117.541 186.993C110.791 162.556 85.116 148.468 60.5035 154.868L65.216 173.006ZM83.9035 158.318L57.0035 60.9434L38.9285 65.9434L65.8285 163.318L83.9035 158.318ZM33.3035 37.4684L12.0035 31.5684L6.97848 49.6309L28.291 55.5434L33.3035 37.4684ZM57.0035 60.9434C55.4175 55.3165 52.4008 50.1965 48.2473 46.0825C44.0938 41.9684 38.9452 39.0006 33.3035 37.4684L28.316 55.5434C33.6285 57.0184 37.5785 61.0559 38.9285 65.9434L57.0035 60.9434ZM110.878 198.568L224.353 169.068L219.641 150.931L106.153 180.431L110.878 198.568Z"
                    fill="black"
                  />
                  <path
                    d="M211.565 50.4561C205.503 28.5061 202.465 17.5311 193.565 12.5436C184.64 7.54358 173.328 10.4936 150.703 16.3811L126.703 22.6061C104.078 28.4811 92.7652 31.4311 87.6277 40.0811C82.4777 48.7186 85.5027 59.6936 91.5652 81.6311L98.0027 104.919C104.065 126.856 107.09 137.831 116.003 142.819C124.915 147.819 136.228 144.869 158.853 138.994L182.853 132.744C205.478 126.869 216.79 123.931 221.94 115.294C224.765 110.544 225.128 105.094 223.865 97.5061"
                    stroke="black"
                    stroke-opacity="0.44"
                    stroke-width="18.75"
                    stroke-linecap="round"
                  />
                </svg>
              </div>

              <div className="text-right">
                <p className="mb-0 font-medium">ارسال رایگان</p>
                <small className="mb-0 relative top-[-5px] text-gray-500">
                  بدون محدودیت قیمت{" "}
                </small>
              </div>
            </div>

            <div className="flex rtl mx-8">
              <div className="ml-1">
                <svg
                  width="40"
                  height="40"
                  viewBox="0 0 251 251"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-55"
                >
                  <path
                    d="M106.893 21.3234C109.238 18.7046 112.108 16.6097 115.318 15.1755C118.527 13.7413 122.003 13 125.518 13C129.033 13 132.509 13.7413 135.718 15.1755C138.927 16.6097 141.798 18.7046 144.143 21.3234L152.893 31.0984C155.394 33.8921 158.491 36.0875 161.955 37.5221C165.419 38.9567 169.162 39.5936 172.905 39.3859L186.03 38.6609C189.541 38.4674 193.053 39.0165 196.337 40.2724C199.621 41.5283 202.603 43.4628 205.088 45.9495C207.574 48.4362 209.507 51.4192 210.761 54.7037C212.016 57.9883 212.563 61.5004 212.368 65.0109L211.643 78.1234C211.437 81.865 212.075 85.6051 213.509 89.067C214.944 92.5289 217.138 95.624 219.93 98.1234L229.705 106.873C232.326 109.218 234.423 112.09 235.858 115.3C237.294 118.511 238.036 121.988 238.036 125.505C238.036 129.021 237.294 132.499 235.858 135.709C234.423 138.919 232.326 141.791 229.705 144.136L219.93 152.886C217.137 155.387 214.941 158.484 213.507 161.948C212.072 165.412 211.435 169.155 211.643 172.898L212.368 186.023C212.561 189.534 212.012 193.046 210.756 196.33C209.5 199.614 207.566 202.596 205.079 205.081C202.593 207.567 199.61 209.5 196.325 210.754C193.04 212.009 189.528 212.556 186.018 212.361L172.905 211.636C169.164 211.43 165.424 212.068 161.962 213.502C158.5 214.937 155.405 217.131 152.905 219.923L144.155 229.698C141.81 232.319 138.939 234.416 135.729 235.851C132.518 237.287 129.041 238.029 125.524 238.029C122.007 238.029 118.53 237.287 115.32 235.851C112.109 234.416 109.238 232.319 106.893 229.698L98.1429 219.923C95.6421 217.13 92.545 214.934 89.0808 213.5C85.6166 212.065 81.8741 211.428 78.1304 211.636L65.0054 212.361C61.4948 212.554 57.9829 212.005 54.699 210.749C51.4151 209.493 48.433 207.559 45.9475 205.072C43.4619 202.586 41.5289 199.603 40.2745 196.318C39.0201 193.034 38.4727 189.521 38.6679 186.011L39.3929 172.898C39.5987 169.157 38.9608 165.417 37.5263 161.955C36.0918 158.493 33.8974 155.398 31.1054 152.898L21.3304 144.148C18.7095 141.803 16.6129 138.932 15.1774 135.722C13.742 132.511 13 129.034 13 125.517C13 122 13.742 118.523 15.1774 115.313C16.6129 112.102 18.7095 109.231 21.3304 106.886L31.1054 98.1359C33.8991 95.6351 36.0945 92.538 37.5291 89.0738C38.9636 85.6096 39.6006 81.8671 39.3929 78.1234L38.6679 64.9984C38.4762 61.4888 39.0267 57.9783 40.2834 54.6959C41.5401 51.4135 43.4749 48.433 45.9614 45.9488C48.4479 43.4647 51.4303 41.5328 54.7139 40.2791C57.9975 39.0255 61.5085 38.4784 65.0179 38.6734L78.1304 39.3984C81.872 39.6042 85.6121 38.9663 89.074 37.5318C92.5358 36.0973 95.6309 33.9029 98.1304 31.1109L106.88 21.3359L106.893 21.3234Z"
                    stroke="black"
                    stroke-width="25"
                  />
                  <path
                    d="M94.2676 94.2607H94.3926V94.3857H94.2676V94.2607ZM156.768 156.761H156.893V156.886H156.768V156.761Z"
                    stroke="black"
                    stroke-width="37.5"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M163.018 88.0107L88.0176 163.011"
                    stroke="black"
                    stroke-width="25"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>

              <div className="text-right">
                <p className="mb-0 font-medium">اصالت کالا</p>
                <small className="mb-0 relative top-[-5px] text-gray-500">
                  تضمین برگشت پول{" "}
                </small>
              </div>
            </div>

            <div className="flex rtl mx-8">
              {" "}
              <div className="ml-1">
                <svg
                  width="40"
                  height="40"
                  viewBox="0 0 263 225"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-55"
                >
                  <path
                    d="M32.8125 0C24.1101 0 15.7641 3.45702 9.61056 9.61056C3.45702 15.7641 0 24.1101 0 32.8125V154.688C0 172.8 14.7 187.5 32.8125 187.5H75.6562C74.7665 181.282 74.7665 174.968 75.6562 168.75H32.8125C29.0829 168.75 25.506 167.268 22.8688 164.631C20.2316 161.994 18.75 158.417 18.75 154.688V32.8125C18.75 29.0829 20.2316 25.506 22.8688 22.8688C25.506 20.2316 29.0829 18.75 32.8125 18.75H229.688C233.417 18.75 236.994 20.2316 239.631 22.8688C242.268 25.506 243.75 29.0829 243.75 32.8125V118.819C250.781 122.156 257.119 126.694 262.5 132.188V32.8125C262.5 24.1101 259.043 15.7641 252.889 9.61056C246.736 3.45702 238.39 0 229.688 0H32.8125ZM122.175 115.125C121.674 111.248 119.778 107.685 116.841 105.104C113.904 102.523 110.128 101.1 106.219 101.1H53.5875C49.3208 101.1 45.2289 102.795 42.2119 105.812C39.1949 108.829 37.5 112.921 37.5 117.188C37.5006 124.17 39.8353 130.953 44.1329 136.456C48.4305 141.96 54.4444 145.869 61.2187 147.562L62.2125 147.825C68.4937 149.381 74.9062 150.113 81.3375 149.981C85.3102 141.629 90.9986 134.208 98.0319 128.203C105.065 122.197 113.304 117.741 122.175 115.125ZM150 65.625C150 63.1386 150.988 60.754 152.746 58.9959C154.504 57.2377 156.889 56.25 159.375 56.25H215.625C218.111 56.25 220.496 57.2377 222.254 58.9959C224.012 60.754 225 63.1386 225 65.625C225 68.1114 224.012 70.496 222.254 72.2541C220.496 74.0123 218.111 75 215.625 75H159.375C156.889 75 154.504 74.0123 152.746 72.2541C150.988 70.496 150 68.1114 150 65.625ZM79.8938 88.3875C83.2351 88.3875 86.5437 87.7294 89.6307 86.4507C92.7176 85.172 95.5225 83.2979 97.8852 80.9352C100.248 78.5725 102.122 75.7676 103.401 72.6806C104.679 69.5937 105.338 66.2851 105.338 62.9437C105.338 59.6024 104.679 56.2938 103.401 53.2068C102.122 50.1199 100.248 47.315 97.8852 44.9523C95.5225 42.5896 92.7176 40.7155 89.6307 39.4368C86.5437 38.1581 83.2351 37.5 79.8938 37.5C73.1457 37.5 66.6739 40.1807 61.9023 44.9523C57.1307 49.7239 54.45 56.1956 54.45 62.9437C54.45 69.6918 57.1307 76.1636 61.9023 80.9352C66.6739 85.7068 73.1457 88.3875 79.8938 88.3875ZM140.625 131.25C128.193 131.25 116.27 136.189 107.479 144.979C98.6886 153.77 93.75 165.693 93.75 178.125C93.75 190.557 98.6886 202.48 107.479 211.271C116.27 220.061 128.193 225 140.625 225H150C152.486 225 154.871 224.012 156.629 222.254C158.387 220.496 159.375 218.111 159.375 215.625C159.375 213.139 158.387 210.754 156.629 208.996C154.871 207.238 152.486 206.25 150 206.25H140.625C133.166 206.25 126.012 203.287 120.738 198.012C115.463 192.738 112.5 185.584 112.5 178.125C112.5 170.666 115.463 163.512 120.738 158.238C126.012 152.963 133.166 150 140.625 150H150C152.486 150 154.871 149.012 156.629 147.254C158.387 145.496 159.375 143.111 159.375 140.625C159.375 138.139 158.387 135.754 156.629 133.996C154.871 132.238 152.486 131.25 150 131.25H140.625ZM206.25 131.25C203.764 131.25 201.379 132.238 199.621 133.996C197.863 135.754 196.875 138.139 196.875 140.625C196.875 143.111 197.863 145.496 199.621 147.254C201.379 149.012 203.764 150 206.25 150H215.625C223.084 150 230.238 152.963 235.512 158.238C240.787 163.512 243.75 170.666 243.75 178.125C243.75 185.584 240.787 192.738 235.512 198.012C230.238 203.287 223.084 206.25 215.625 206.25H206.25C203.764 206.25 201.379 207.238 199.621 208.996C197.863 210.754 196.875 213.139 196.875 215.625C196.875 218.111 197.863 220.496 199.621 222.254C201.379 224.012 203.764 225 206.25 225H215.625C228.057 225 239.98 220.061 248.771 211.271C257.561 202.48 262.5 190.557 262.5 178.125C262.5 165.693 257.561 153.77 248.771 144.979C239.98 136.189 228.057 131.25 215.625 131.25H206.25ZM140.625 168.75C138.139 168.75 135.754 169.738 133.996 171.496C132.238 173.254 131.25 175.639 131.25 178.125C131.25 180.611 132.238 182.996 133.996 184.754C135.754 186.512 138.139 187.5 140.625 187.5H215.625C218.111 187.5 220.496 186.512 222.254 184.754C224.012 182.996 225 180.611 225 178.125C225 175.639 224.012 173.254 222.254 171.496C220.496 169.738 218.111 168.75 215.625 168.75H140.625Z"
                    fill="black"
                  />
                </svg>
              </div>
              <div className="text-right">
                <p className="mb-0 font-medium">پشتیبانی حرفه ای</p>
                <small className="mb-0 relative top-[-5px] text-gray-500">
                  همه ساعت روز هفت روز
                </small>
              </div>
            </div>
          </div>
        </div> */}
      </div>

      {/* <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10 ">
        <div className="grid xs:grid-cols-1 lg:grid-cols-4 mb-5 gap-4 mt-[240px]">
          <div className="bg-white rounded-3xl overflow-hidden relative">
            <div className="">
              <svg
                class="absolute  inset-x-0 mx-auto h-[30px] rotate-180 block bottom-0  "
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 740 155.61"
              >
                <path
                  fill="white"
                  d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                ></path>
              </svg>
              <div></div>

              <div className="flex justify-center w-full">
                <div className="absolute flex  bottom-0 ">
                  <div className="w-5 h-5 rounded-full bg-primary-600"></div>
                </div>
              </div>
            </div>
            <Image src={cat1} className="object-cover w-full" />
          </div>
          <div className="bg-white rounded-3xl overflow-hidden relative">
            <div className="">
              <svg
                class="absolute  inset-x-0 mx-auto h-[30px] rotate-180 block bottom-0  "
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 740 155.61"
              >
                <path
                  fill="white"
                  d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                ></path>
              </svg>
              <div></div>

              <div className="flex justify-center w-full">
                <div className="absolute flex  bottom-0 ">
                  <div className="w-5 h-5 rounded-full bg-primary-600"></div>
                </div>
              </div>
            </div>
            <Image src={cat2} className="object-cover w-full" />
          </div>
          <div className="bg-white rounded-3xl overflow-hidden relative">
            <div className="">
              <svg
                class="absolute  inset-x-0 mx-auto h-[30px] rotate-180 block bottom-0  "
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 740 155.61"
              >
                <path
                  fill="white"
                  d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                ></path>
              </svg>
              <div></div>

              <div className="flex justify-center w-full">
                <div className="absolute flex  bottom-0 ">
                  <div className="w-5 h-5 rounded-full bg-primary-600"></div>
                </div>
              </div>
            </div>
            <Image src={cat3} className="object-cover w-full" />
          </div>
          <div className="bg-white rounded-3xl overflow-hidden relative">
            <div className="">
              <svg
                class="absolute  inset-x-0 mx-auto h-[30px] rotate-180 block bottom-0  "
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 740 155.61"
              >
                <path
                  fill="white"
                  d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                ></path>
              </svg>
              <div></div>

              <div className="flex justify-center w-full">
                <div className="absolute flex  bottom-0 ">
                  <div className="w-5 h-5 rounded-full bg-primary-600"></div>
                </div>
              </div>
            </div>
            <Image src={cat1} className="object-cover w-full" />
          </div>
        </div>
      </div> */}

      <div className="lg:mt-[450px] ">
        <div className="text-center relative">
          <div className="absolute xs:mt-[-30px] lg:mt-[-45px] w-full z-0">
            <p className="xs:text-[40px] lg:text-[80px]  bet-text font-bold">
              Category Bonsai
            </p>
          </div>
          <h2 className="xs:text-[20px] lg:text-[40px] font-bold relative z-10">
            دسته بندی های <span className="text-green-800"> بونسای</span>
          </h2>
          <p className="mb-0 xs:text-[12px] lg:text-sm text-gray-400">
            با تصمین کمترین قیمت در تمامی دستنه بندی ها خرید کنید{" "}
          </p>
        </div>

        <div className="xs:px-3 md:px-20 md:container md:mx-auto xs:mt-5 lg:mt-10 mb-20  ">
          <div className="grid xs:grid-cols-2 lg:grid-cols-5">
            <div className=" mx-auto mt-10 group cursor-pointer">
              <Link
                href={`/categories/bdf6b13c-4be5-4a93-bcdb-612440bdbd6e/کرم مرطوب کننده دست و پا`}
              >
                <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                  <Image src={cat12} />
                </div>

                <div className="flex justify-center relative">
                  <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                    <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                      +
                      <PersianNumber number={25} />
                      {"   "} محصول
                    </p>
                  </div>
                </div>

                <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                  سینی های روسی{" "}
                </p>
              </Link>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat11} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat13} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat14} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat15} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat12} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat11} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat13} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat14} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
            <div className=" mx-auto mt-10 group cursor-pointer">
              <div className=" tr03 group-hover:-rotate-2 group-hover:scale-110 group-hover:contrast-150">
                <Image src={cat15} />
              </div>

              <div className="flex justify-center relative">
                <div className="bg-sky-900  p-1 rounded-full rtl absolute top-[-15px] px-5  ">
                  <p className="mb-0 text-center  text-gray-200 text-sm font-light">
                    +
                    <PersianNumber number={25} />
                    {"   "} محصول
                  </p>
                </div>
              </div>

              <p className="mb-0 text-center mt-4  text-gray-600 font-medium">
                سینی های روسی{" "}
              </p>
            </div>
          </div>
        </div>
      </div>

      <div className="relative mt-[120px]">
        <div className=" absolute bottom-[-10px]  w-full" data-negative="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1000 100"
            preserveAspectRatio="none"
          >
            <path
              fill="#14532d"
              d="M500,97C126.7,96.3,0.8,19.8,0,0v100l1000,0V1C1000,19.4,873.3,97.8,500,97z"
            ></path>
          </svg>{" "}
        </div>
      </div>

      <div className="relative ">
        <div className="">
          <svg
            class="absolute  inset-x-0 mx-auto h-[30px]  block top-0  "
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 740 155.61"
          >
            <path
              fill="white"
              d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
            ></path>
          </svg>
          <div></div>

          <div className="flex justify-center w-full">
            <div className="absolute flex  top-0 ">
              <div className="w-5 h-5 rounded-full bg-green-900"></div>
            </div>
          </div>
        </div>
        <div className="  bg-green-900 pb-20 xs:px-5 lg:px-20">
          <div className="text-center relative pt-[120px]">
            <div className="absolute xs:mt-[-30px] lg:mt-[-45px] w-full z-0">
              <p className="xs:text-[40px] lg:text-[80px]  bet-text-green font-bold">
                Suprise Bonsai
              </p>
            </div>
            <h2 className="xs:text-[20px] lg:text-[40px] font-bold relative z-10 text-white">
              پیشنهادات ویژه <span className="text-primary-400"> بونسای</span>
            </h2>
            <p className="mb-0 xs:text-[12px] lg:text-sm text-gray-400">
              هر روز از ساعت شش عصر تا 12 شب ویژه های بونسایی را مشاهده کنید{" "}
            </p>
          </div>

          <div className="mt-20">
            <Swiper
              spaceBetween={50}
              slidesPerView={6.2}
              // onSlideChange={() => console.log("slide change")}
              className="rtl relative mt-5"
              // dir="rtl"
              breakpoints={{
                320: {
                  slidesPerView: 1.4,
                },
                480: {
                  slidesPerView: 2,
                },
                768: {
                  slidesPerView: 3,
                },
                1024: {
                  slidesPerView: 4.5,
                },
                1440: {
                  slidesPerView: 6,
                },
              }}
            >
              {data?.products?.map((e, index) => (
                <SwiperSlide key={index}>
                  <CardSurprise data={e} priority />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
      </div>

      <div className="mt-[120px]">
        <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10 ">
          <div className="text-center relative mb-20">
            <div className="absolute xs:mt-[-30px] lg:mt-[-45px] w-full z-0">
              <p className="xs:text-[40px] lg:text-[80px]  bet-text font-bold">
                affordable gift
              </p>
            </div>
            <h2 className="xs:text-[30px] lg:text-[40px] font-bold relative z-10">
              هدیه های به صرفه
              <span className="text-green-800"> بونسای</span>
            </h2>
            <p className="mb-0 text-sm text-gray-400">
              با تصمین کمترین قیمت در تمامی دستنه بندی ها خرید کنید{" "}
            </p>
          </div>

          <div className="grid  xs:grid-cols-2 lg:grid-cols-5 gap-5">
            {data?.products?.map((e) => (
              <div className="relative">
                <CardNormal data={e} priority />
              </div>
            ))}
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default HeroSection;
