update

src/App.js

@@ -65,9 +65,9 @@ function App() {
         {/* <ProductImage /> */}
         {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
-        <AdvertisementDesign1 />
+        {/* <AdvertisementDesign1 /> */}
-        <AdvertisementDesign2 />
+        {/* <AdvertisementDesign2 /> */}
-        <AdvertisementDesign3 />
+        {/* <AdvertisementDesign3 /> */}
       </div>
     </Provider>
   );

src/components/Blogs/design2/BlogDesign2.js

@@ -8,6 +8,8 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
 import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
 
+import playBtn from "./play-button.svg";
+
 const BlogDesign2 = ({
   blogSubTitle,
   dateButton,
@@ -45,6 +47,7 @@ const BlogDesign2 = ({
           // minHeight: "300px",
           height: "calc(100vh/3)",
           maxHeight: "300px",
+          backgroundColor: "red",
         }}
       >
         {dateButton && (
@@ -100,6 +103,13 @@ const BlogDesign2 = ({
           }}
           className="absolute right-0 bottom-0 h-full w-full"
         ></div>
+        <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <div
+            className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
+          >
+            <img src={playBtn} alt="" />
+          </div>
+        </div>
       </div>
     </section>
   );

src/components/Blogs/design2/play-button.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.552" height="29.311" viewBox="0 0 27.552 29.311">
+  <path id="Vector" d="M0,14.659v-6C0,.919,5.472-2.2,12.16,1.648l5.188,3,5.188,3c6.688,3.851,6.688,10.174,0,14.024l-5.188,3-5.188,3C5.472,31.521,0,28.359,0,20.658Z" fill="#06bace"/>
+</svg>