update

src/App.js

@@ -66,7 +66,7 @@ function App() {
         {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         <AdvertisementDesign1 />
-        {/* <AdvertisementDesign2 /> */}
+        <AdvertisementDesign2 />
         {/* <AdvertisementDesign3 /> */}
       </div>
     </Provider>

src/components/Advertisement/design1/index.js

@@ -12,27 +12,27 @@ const AdvertisementDesign1 = () => {
             width: "calc(100vw / 10)",
             height: "calc(100vw / 10)",
             left: "20%",
-            top: "30%",
+            top: "15%",
           }}
-          className="rounded-full absolute bg-blue-300 bg-opacity-30 backdrop-filter backdrop-blur-md z-30"
+          className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30"
         ></div>
         <div
           style={{
             width: "calc(100vw / 7)",
             height: "calc(100vw / 7)",
             right: "25%",
-            bottom: "5%",
+            bottom: "4%",
           }}
-          className="rounded-full absolute bg-purple-300 bg-opacity-30 backdrop-filter backdrop-blur-md"
+          className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md"
         ></div>
         <div
           style={{
             width: "calc(100vw / 8)",
             height: "calc(100vw / 8)",
             right: "3%",
-            top: "20%",
+            top: "15%",
           }}
-          className="rounded-full absolute bg-green-300 bg-opacity-40 backdrop-filter backdrop-blur-md"
+          className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md"
         ></div>
         <div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50">
           <h2 className="text-lg">تبلیغات دانوینی</h2>

src/components/Advertisement/design2/index.js

@@ -18,16 +18,34 @@ const AdvertisementDesign2 = () => {
           </button>
         </div>
         <div
-          style={{ backgroundColor: "#00FFFF33" }}
-          className="rounded-full w-32 h-32 absolute left-1/4 top-1/3 transform -translate-x-1/2 -translate-y-1/2 z-20 backdrop-filter backdrop-blur-md"
+          style={{
+            backgroundColor: "#00FFFF33",
+            width: "calc(100vw / 15)",
+            height: "calc(100vw / 15)",
+            left: "20%",
+            top: "15%",
+          }}
+          className="rounded-full absolute z-20 backdrop-filter backdrop-blur-md"
         ></div>
         <div
-          style={{ backgroundColor: "#6E6EEF33" }}
-          className="rounded-full w-44 h-44 absolute left-1/4 -bottom-2/4 transform -translate-x-1/2 -translate-y-1/2 z-10 backdrop-filter backdrop-blur-md"
+          style={{
+            backgroundColor: "#6E6EEF66",
+            width: "calc(100vw / 10)",
+            height: "calc(100vw / 10)",
+            left: "7%",
+            bottom: "-15%",
+          }}
+          className="rounded-full absolute z-10 backdrop-filter backdrop-blur-md"
         ></div>
         <div
-          style={{ backgroundColor: "white" }}
-          className="rounded-full w-44 h-44 absolute left-0 top-2 backdrop-filter backdrop-blur-md"
+          style={{
+            backgroundColor: "white",
+            width: "calc(100vw / 12)",
+            height: "calc(100vw / 12)",
+            left: "0%",
+            top: "10%",
+          }}
+          className="rounded-full absolute backdrop-filter backdrop-blur-md"
         ></div>
       </div>
     </section>