update

src/components/contactInfoSection/ContactInfoSection.js

@@ -25,7 +25,7 @@ const ContactInfoSection = ({
       <img
         src={customerSupport}
         alt=""
-        className="w-14 cursor-pointer customer-support"
+        className="w-14 cursor-pointer customer-support transition delay-150 duration-500 hover:animate-bounce"
       />
       <p
         className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}

src/components/productDesign/ProductDesign.js

@@ -224,7 +224,7 @@ const ProductDesign = ({
                   {/* add to cart */}
                   {addToCartHolder && (
                     <button
-                      className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
+                      className={`rounded-lg px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
                         priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                       }`}
                     >
@@ -258,7 +258,7 @@ const ProductDesign = ({
               )}
             </div>
             {/* dark hover effect */}
-            <div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-black group-hover:rounded group-hover:border transition duration-300 opacity-50"></div>
+            <div className="absolute right-0 bottom-0 h-full w-full group-hover:bg-blackBg group-hover:rounded group-hover:border transition duration-300 opacity-50"></div>
             <button className="group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition duration-300">
               افزودن به سبد خرید
             </button>

src/components/vodProductDesign/VodProductDesign.js

@@ -111,7 +111,7 @@ const VodProductDesign = ({
                 <img
                   src={whitePlayIcon}
                   alt=""
-                  className="playBtnImg w-5 h-5 group-hover:w-7 group-hover:h-7"
+                  className="playBtnImg w-5 h-5 group-hover:w-6 group-hover:h-6"
                 />
               </div>
               {/* select Color */}

tailwind.config.js

@@ -57,6 +57,7 @@ module.exports = {
       rangeFillBgColor: "#68A8E6",
       playButtonIcon: "#0D0D0D99",
       playButtonIcon2: "#E8E8E899",
+      blackBg: "#606060 ",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),