update

src/App.js

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

src/components/Advertisement/design3/index.js

@@ -12,16 +12,16 @@ const AdvertisementDesign3 = ({ features }) => {
         style={{ backgroundColor: "#E3F2FF" }}
       >
         <div className="flex flex-col justify-center p-10 w-8/12">
-          <h2 className="text-lg text-productPrice">تبلیغات دانوینی</h2>
-          <p className="text-sm text-justify leading-6 mt-2 text-productPrice">
+          <h2 className="text-lg text-productPrice  z-50">تبلیغات دانوینی</h2>
+          <p className="text-sm text-justify leading-6 mt-2 text-productPrice  z-50">
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
             استفاده از طراحان گرافیک است.
           </p>
           <div className="mt-3">
             {features.map((feature, i) => (
               <div className="flex flex-row items-center mt-2">
-                <img src={feature.icon} alt="" className="w-6 h-6" />
-                <p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light">
+                <img src={feature.icon} alt="" className="w-6 h-6  z-50" />
+                <p className="text-sm mr-2 text-justify leading-6 text-productPrice font-light  z-50">
                   {feature.title}
                 </p>
               </div>
@@ -29,16 +29,34 @@ const AdvertisementDesign3 = ({ features }) => {
           </div>
         </div>
         <div
-          style={{ backgroundColor: "#00FFFF22" }}
-          className="rounded-full w-20 h-20 sm:w-32 sm:h-32 absolute left-1/4 top-1/3 transform -translate-x-1/2 -translate-y-1/2 z-20"
+          style={{
+            backgroundColor: "#00FFFF22",
+            width: "calc(100vw / 15)",
+            height: "calc(100vw / 15)",
+            left: "8%",
+            top: "20%",
+          }}
+          className="rounded-full absolute z-20 bg-opacity-30 backdrop-filter backdrop-blur-md"
         ></div>
         <div
-          style={{ backgroundColor: "#6E6EEF22" }}
-          className="rounded-full w-44 h-44 absolute left-1/3 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          style={{
+            backgroundColor: "#6E6EEF22",
+            width: "calc(100vw / 10)",
+            height: "calc(100vw / 10)",
+            left: "17%",
+            top: "10%",
+          }}
+          className="rounded-full absolute bg-opacity-30 backdrop-filter backdrop-blur-md"
         ></div>
         <div
-          style={{ backgroundColor: "#06BACE22" }}
-          className="rounded-full w-44 h-44 absolute left-1/4 top-2/3 transform -translate-x-1/2 -translate-y-1/2"
+          style={{
+            backgroundColor: "#06BACE22",
+            width: "calc(100vw / 11)",
+            height: "calc(100vw / 11)",
+            left: "12%",
+            bottom: "2%",
+          }}
+          className="rounded-full absolute"
         ></div>
         <div className="absolute bottom-5 left-10">
           <button className="border-2 border-blue-500 text-blue-500  ml-4 rounded p-2 text-sm">