digikala danovin added

src/components/Digikala/Banners.js

@@ -0,0 +1,57 @@
+import React from "react";
+
+import pic2 from "./pic2.jpg";
+import danovin from "./danovin.jpg";
+import greeeeen from "./greeeeen.jpg";
+
+const Banners = ({ mainBanner, leftBanner, midTopBanner, midBottomBanner }) => {
+  return (
+    <div
+      className="flex justify-between w-10/12 mx-auto my-10"
+      style={{
+        height: "400px",
+      }}
+    >
+      <div
+        className={`h-full w-1/2 rounded-xl flex items-center`}
+        style={{
+          background: mainBanner ? "" : "rgba(134,160,185,0.16)",
+        }}
+      >
+        <img src={danovin} className="rounded-xl h-full" />
+      </div>
+      <div className="flex h-full w-1/2 ">
+        <div className="flex flex-col w-1/2 h-full px-6 justify-center items-between">
+          <div
+            className={`${midTopBanner ? "" : "h-1/2 "} w-full rounded-xl mb-2`}
+            style={{
+              background: midTopBanner ? "" : "rgba(134,160,185,0.16)",
+            }}
+          >
+            <img src={pic2} className="rounded-xl" />
+          </div>
+          <div
+            className={`${
+              midBottomBanner ? "" : "h-1/2 "
+            } w-full rounded-xl mt-2`}
+            style={{
+              background: midBottomBanner ? "" : "rgba(134,160,185,0.16)",
+            }}
+          >
+            <img src={pic2} className="rounded-xl" />
+          </div>
+        </div>
+        <div
+          className=" h-full w-1/2 rounded-xl"
+          style={{
+            background: leftBanner ? "" : "rgba(134,160,185,0.16)",
+          }}
+        >
+          <img src={greeeeen} className="rounded-xl h-full" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Banners;

src/components/Digikala/Offer.js

@@ -5,12 +5,11 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 
-import "./index";
+import "./index.scss";
 
 import leftArrow from "./white-left-arrow.svg";
 import General from "./General.png";
 
-import oloom4 from "./oloom4.jpg";
 import o2 from "./o2.jpg";
 import o3 from "./o3.jpg";
 import r1 from "./r1.jpg";
@@ -39,11 +38,11 @@ const Offer = ({ products }) => {
           </button>
         </div>
         {/* left */}
-        <div className="w-10/12 flex flex-row items-center rounded-lg bg-white">
+        <div className="w-10/12 flex flex-row items-center rounded-lg bg-white cursor-pointer">
           <Swiper
             // spaceBetween={0}
             slidesPerView={5}
-            navigation
+            // navigation
             pagination={{ clickable: true }}
             scrollbar={{ draggable: true }}
             onSlideChange={() => console.log("slide change")}

src/components/Digikala/index.js

@@ -3,11 +3,13 @@ import ImageSlider from "./ImageSlider";
 import { SliderData } from "./SliderData";
 import Categories from "./Categories";
 import Offer from "./Offer";
+import Banners from "./Banners";
 
 const Digikala = () => {
   return (
     <div>
       <ImageSlider slides={SliderData} />
+      <Banners />
       <Categories />
       <Offer />
     </div>

src/components/Digikala/index.scss

@@ -1,11 +0,0 @@
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-.tabbar {
-  cursor: pointer;
-}
-.active2,
-.active2 li a {
-  cursor: move !important;
-}