diff --git a/src/App.js b/src/App.js
index 87963f4..9ceaa59 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,26 +15,28 @@ import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
 import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection";
 import FooterDesign1 from "./components/footer/design1/FooterDesign1";
 import Testttt from "./components/testtttt/Testttt";
+import Design2D from "./components/Design2D/Design2D";
 
 function App() {
   return (
     <div className="App">
       <ProductDesign />
       <VodProductDesign />
-      <BookDesign />
-      <ButtonDesign />
-      <ProductTags />
-      <CounterDesign />
-      <BlogDesign1 />
-      <BlogDesign2 />
-      <BlogDesign3 />
-      <BlogDesign4 />
-      <BlogDesign5 />
-      <BlogDesign6 />
-      <HeaderDesign1 />
-      <ContactInfoSection />
-      <FooterDesign1 />
+      {/* <BookDesign /> */}
+      {/* <ButtonDesign /> */}
+      {/* <ProductTags /> */}
+      {/* <CounterDesign /> */}
+      {/* <BlogDesign1 /> */}
+      {/* <BlogDesign2 /> */}
+      {/* <BlogDesign3 /> */}
+      {/* <BlogDesign4 /> */}
+      {/* <BlogDesign5 /> */}
+      {/* <BlogDesign6 /> */}
+      {/* <HeaderDesign1 /> */}
+      {/* <ContactInfoSection /> */}
+      {/* <FooterDesign1 /> */}
       {/* <Testttt /> */}
+      {/* <Design2D /> */}
     </div>
   );
 }
diff --git a/src/components/Design2D/Design2D.js b/src/components/Design2D/Design2D.js
new file mode 100644
index 0000000..58bb9b4
--- /dev/null
+++ b/src/components/Design2D/Design2D.js
@@ -0,0 +1,44 @@
+import React from "react";
+
+const Design2D = ({ array }) => {
+  return (
+    <section className="flex items-center justify-around bg-white h-60">
+      {array.map((item, index) => (
+        <div
+          className={`flex flex-col h-full`}
+          style={{ flex: item.flex }}
+          key={index}
+        >
+          {item.items.map((item1, index) => (
+            <div
+              className={`flex ${item1.bg}`}
+              style={{ flex: item1.flex }}
+            ></div>
+          ))}
+        </div>
+      ))}
+    </section>
+  );
+};
+
+export default Design2D;
+
+Design2D.defaultProps = {
+  array: [
+    {
+      flex: 6,
+      items: [{ bg: "bg-red-500", flex: 1 }],
+    },
+    {
+      flex: 4,
+      items: [{ bg: "bg-green-500", flex: 1 }],
+    },
+    {
+      flex: 2,
+      items: [
+        { bg: "bg-blue-500", flex: 1 },
+        { bg: "bg-yellow-500", flex: 1 },
+      ],
+    },
+  ],
+};
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
index f998f88..89ac7f4 100644
--- a/src/components/productDesign/ProductDesign.js
+++ b/src/components/productDesign/ProductDesign.js
@@ -1,5 +1,3 @@
-import React, { useState } from "react";
-
 import "./ProductDesign.scss";
 
 import StarRating from "../starRating/StarRating";
@@ -41,8 +39,6 @@ const ProductDesign = ({
   rangeWidth,
   addToCartHolder,
 }) => {
-  const [isHovering, setIsHovering] = useState(false);
-
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
@@ -90,7 +86,7 @@ const ProductDesign = ({
             className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
           >
             {/* product image */}
-            <div className="w-full relative">
+            <div className="w-full relative group">
               {/* icons on image */}
               <div className="absolute left-2 top-2">
                 {discountPricePercent && (
@@ -112,14 +108,12 @@ const ProductDesign = ({
                 )}
               </div>
               {/* img */}
-              <div className="flex-shrink-0">
+              <div className="">
                 {verticalImg && (
                   <img
                     src={book}
                     alt=""
                     className="w-full rounded-lg cursor-pointer"
-                    onMouseEnter={() => setIsHovering(true)}
-                    onMouseLeave={() => setIsHovering(false)}
                   />
                 )}
                 {horizontalImg && (
@@ -159,25 +153,21 @@ const ProductDesign = ({
                   <ReactTooltip place="top" type="dark" effect="float" />
                 </div>
               )}
-              <div
-                className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${
-                  isHovering ? "" : "hidden"
-                }`}
-              >
-                <button>افزودن به سبد خرید</button>
-              </div>
+              <button className="group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition duration-300">
+                افزودن به سبد خرید
+              </button>
             </div>
             {/* product content */}
             <div className="px-2">
               <div className="mt-4">
                 <h2
-                  className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
+                  className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`}
                 >
                   نسخه چاپی علموم تجربه هفتم
                 </h2>
                 {productContent && (
                   <p
-                    className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
+                    className={`text-justify mt-2 text-sm leading-6 ${productExcerptTextColor}`}
                   >
                     این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
                     خوب دیگری نیز دارد.
@@ -226,7 +216,7 @@ const ProductDesign = ({
                   {/* add to cart */}
                   {addToCartHolder && (
                     <button
-                      className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
+                      className={`rounded-2xl 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" : ""
                       }`}
                     >
diff --git a/src/components/testtttt/Testttt.js b/src/components/testtttt/Testttt.js
index ce98b06..946e521 100644
--- a/src/components/testtttt/Testttt.js
+++ b/src/components/testtttt/Testttt.js
@@ -7,7 +7,7 @@ const Testttt = () => {
   return (
     <div className="p-20 relative">
       <button
-        className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer ${
+        className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer transition delay-500			 ${
           isHovering ? "" : "hidden"
         }`}
       >
diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js
index 214a095..0c07ad1 100644
--- a/src/components/vodProductDesign/VodProductDesign.js
+++ b/src/components/vodProductDesign/VodProductDesign.js
@@ -69,7 +69,7 @@ const VodProductDesign = ({
           >
             {/* product image */}
             <div
-              className="parent-img w-full relative flex items-center justify-center cursor-pointer"
+              className="group w-full relative flex items-center justify-center cursor-pointer"
               style={{
                 backgroundImage: `url(${watermelon})`,
                 backgroundSize: "100% 100%",
@@ -98,7 +98,9 @@ const VodProductDesign = ({
                 )}
               </div>
               {/* play button */}
-              <div className={`playBtnImg rounded-full p-4 ${playBtnBgColor}`}>
+              <div
+                className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`}
+              >
                 <img src={whitePlayIcon} alt="" className="w-5 h-5" />
               </div>
               {/* select Color */}
@@ -143,7 +145,7 @@ const VodProductDesign = ({
                   className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
                 >
                   <h2
-                    className={`leading-4 text-sm mb-2 ${productTitleColor} ${productTitleAlignment}`}
+                    className={`leading-4 text-base mb-2 ${productTitleColor} ${productTitleAlignment}`}
                   >
                     نسخه چاپی علموم تجربه هفتم
                   </h2>
@@ -157,7 +159,7 @@ const VodProductDesign = ({
                 </div>
                 {productContent && (
                   <p
-                    className={`text-justify text-xs leading-6 ${productExcerptTextColor}`}
+                    className={`text-justify text-sm leading-6 ${productExcerptTextColor}`}
                   >
                     این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
                     خوب دیگری نیز دارد.
@@ -201,7 +203,7 @@ const VodProductDesign = ({
                     {/* add to cart */}
                     {addToCartHolder && (
                       <button
-                        className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2  ${
+                        className={`rounded-2xl 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" : ""
                         }`}
                       >
@@ -246,7 +248,7 @@ const VodProductDesign = ({
     </section>
   );
 };
-
+// hover:-translate-y-2
 export default VodProductDesign;
 
 // text colors i used for product title: