update data.js

src/components/Banners/index.js

@@ -0,0 +1,55 @@
+import React from "react";
+
+const Banners = ({ mainBanner, leftBanner, midTopBanner, midBottomBanner }) => {
+  return (
+    <div className="w-full h-[400px] flex justify-between">
+      <div
+        className={`w-1/2 h-full flex items-center rounded-xl ${
+          mainBanner ? "" : "bg-[rgba(134,160,185,0.16)]"
+        }`}
+      >
+        <img src={mainBanner} alt="" className="h-full rounded-xl" />
+      </div>
+      <div className=" w-1/2 h-full flex">
+        <div className="w-1/2 h-full flex flex-col items-between justify-center px-6">
+          <div
+            className={`${
+              midTopBanner ? "" : "h-1/2 "
+            } w-full mb-2 rounded-xl ${
+              midTopBanner ? "" : "bg-[rgba(134,160,185,0.16)]"
+            }`}
+          >
+            <img
+              src={midTopBanner}
+              alt="mid-top-banner"
+              className="rounded-xl"
+            />
+          </div>
+          <div
+            className={`${
+              midBottomBanner ? "" : "h-1/2 "
+            } w-full mt-2 rounded-xl ${
+              midBottomBanner ? "" : "bg-[rgba(134,160,185,0.16)]"
+            }`}
+          >
+            <img
+              src={midBottomBanner}
+              alt="mid-bottom-banner"
+              className="rounded-xl"
+            />
+          </div>
+        </div>
+        <div
+          className=" w-1/2 h-full rounded-xl"
+          style={{
+            background: leftBanner ? "" : "rgba(134,160,185,0.16)",
+          }}
+        >
+          <img src={leftBanner} alt="left-banner" className="rounded-xl" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Banners;

src/redux/data.js

@@ -5,6 +5,7 @@ import AddToCartCard from "../components/AddToCart";
 import Advertisements from "../components/Advertisements";
 import Alert from "../components/Alert";
 import Toast from "../components/Toast";
+import Banners from "../components/Banners";
 
 // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 // import ProductDesign from "./components/productDesign/ProductDesign";
@@ -166,6 +167,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Banners",
+    author: "Keshavarzi",
+    props: [],
+    content: {
+      name: "Banners Container",
+      component: <Banners />,
+      code: null,
+    },
+  },
 ];
 
 export default components;