update App.js and ProductDesign.js

src/App.js

@@ -91,7 +91,7 @@ function App() {
   return (
     <Provider store={store}>
       <div className="App">
-        <ProductDesign />
+        {/* <ProductDesign /> */}
         {/* <VodProductDesign /> */}
         {/* <VodProduct /> */}
         {/* <VodProductNew /> */}
@@ -137,7 +137,7 @@ function App() {
         {/* <ReligiousTimes /> */}
         {/* <DistributedData /> */}
         {/* <CardDesign1 /> */}
-        {/* <CardDesign2 /> */}
+        <CardDesign2 />
         {/* *************************************************** mini components ***************************************************  */}
         <Button />
         {/* <ButtonDesign /> */}

src/components/productDesign/ProductDesign.js

@@ -15,6 +15,7 @@ import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
 import RedDotIcon from "../../assets/icons/redDotIcon.svg";
 import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
 import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
+import Button from "../Button";
 
 const ProductDesign = ({
   colors,
@@ -260,9 +261,10 @@ const ProductDesign = ({
             </div>
             {/* dark hover effect */}
             <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>
+            <Button
+              className={`group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs opacity-0 absolute left-1/2 bottom-1/2 transform -translate-x-1/2 -translate-y-1/2`}
+              text={"افزودن به سبد خرید"}
+            />
           </div>
         </div>
       </div>