Banners Fixed

src/components/Banners/index.js

@@ -8,7 +8,7 @@ const Banners = ({
 }) => {
     return (
         <div className="flex w-full justify-between" style={{
-            height: '400px'
+            // height: '400px'
         }}>
             <div className={`h-full w-1/2 rounded-xl flex items-center`} style={{
                 background: mainBanner ? '' : 'rgba(134,160,185,0.16)',

src/components/Design2D/index.js

@@ -0,0 +1,70 @@
+import React from "react";
+
+const Design2D = ({ array }) => {
+  return (
+    <section className="flex items-center justify-around" 
+    style={{height: '420px'}}
+    >
+      {array.map((item, index) => (
+        <div
+          className={`flex flex-col justify-center h-full`}
+          style={{ flex: item.flex,
+            // display:'-webkit-box',
+            // display:'flex',
+            // maxHeight: '400px',
+            // minHeight: '400px'
+          
+          }}
+          key={index}
+        >
+          {item.items.map((item1, index) => (
+            <div
+              className={`flex p-2 ${item1.bg}`}
+              style={{ flex: item1.flex }}
+              key={index}
+            >
+              <div className="bg-gray-200 w-full h-full flex items-center rounded-xl justify-center"
+              style={{
+                backgroundImage: `url(${item1.image})`,
+                backgroundSize: 'cover',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center'
+              }}
+              >
+                {/* <p>inside div</p> */}
+                {/* <img src={item1.image} className=' rounded-xl' style={{
+                  objectFit: 'cover',
+                  display: 'block',
+                  minWidth: '100%'
+                }}/> */}
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </section>
+  );
+};
+
+export default Design2D;
+
+Design2D.defaultProps = {
+  array: [
+    {
+      flex: 5,
+      items: [{ bg: "bg-red-500", flex: 1 }],
+    },
+    {
+      flex: 3,
+      items: [
+        { bg: "bg-blue-500", flex: 1 },
+        { bg: "bg-yellow-500", flex: 1 },
+      ],
+    },
+    {
+      flex: 3,
+      items: [{ bg: "bg-green-500", flex: 1 }],
+    },
+    
+  ],
+};

src/views/Home/Desktop/index.js

@@ -10,6 +10,7 @@ import { book, publicApi } from "../../../redux/actions";
 import Part2 from "./Part2";
 import HomeImg from '../../../assets/images/HomeImg.svg';
 import Part4 from "./Part4";
+import Design2D from "../../../components/Design2D";
 
 const DesktopHome = (
 {
@@ -18,17 +19,48 @@ const DesktopHome = (
 }
 
 ) =>{
-
+const banners = [
+  {
+    flex: 4,
+    items: [{ bg:'',
+     flex: 1,
+    image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg'
+    }],
+  },
+  {
+    flex: 2,
+    items: [
+      {  bg:'',
+       flex: 1,
+      image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?'
+      },
+      {  bg:'',
+       flex: 1,
+      image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg'
+      },
+    ],
+  },
+  {
+    flex: 2,
+    items: [{  bg:'',
+     flex: 1,
+     image: 'https://dkstatics-public.digikala.com/digikala-adservice-banners/54d75e08cb0a72920ac3b2338232bf5ca70ccc74_1641638418.jpg'
+     }],
+  },
+]
     
 return (
 
     <div className="flex flex-col items-center w-11/12 justify-center my-10">
-        <Banners
+        {/* <Banners
           mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg'
           midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?'
-          leftBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/54d75e08cb0a72920ac3b2338232bf5ca70ccc74_1641638418.jpg'
+          leftBanner=
           midTopBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/fe8f275f4e4b5e6eb2f66cf65f3895398e049b40_1625578273.jpg'
-        />
+        /> */}
+        <div className="w-full">
+        <Design2D array={banners} />
+        </div>
         <SalesContainer books={books} grades={grades}/>
         <Part2  grades={grades}/>
         <div className="mb-16">