update

src/components/productDesign/ProductDesign.js

@@ -39,6 +39,7 @@ const ProductDesign = ({
   horizontalImg,
   rangeWidth,
   addToCartHolder,
+  mainPriceTitle,
 }) => {
   const [progressFlag, setProgressFlag] = useState(false);
   useEffect(() => {
@@ -88,10 +89,10 @@ const ProductDesign = ({
         </p>
       </div>
       {/* product UI Design */}
-      <div className="flex flex-wrap sm:flex-nowrap justify-around">
+      <div className="flex flex-wrap sm:flex-nowrap justify-around ">
         <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
           <div
-            className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
+            className={`group w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 relative cursor-pointer ${productHolderBorder} ${productHolderBorderColor} hover:border-0`}
           >
             {/* product image */}
             <div className="w-full relative group">
@@ -161,9 +162,6 @@ const ProductDesign = ({
                   <ReactTooltip place="top" type="dark" effect="float" />
                 </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">
@@ -207,18 +205,20 @@ const ProductDesign = ({
                         priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
                       }`}
                     >
-                      <span className="text-xs text-borderColor ml-2">
-                        قیمت
-                      </span>
+                      {mainPriceTitle && (
+                        <span className="text-xs text-borderColor ml-2">
+                          قیمت
+                        </span>
+                      )}
                       {/* price with line on it */}
                       {discountPrice && (
-                        <p className="line-through text-xs text-borderColor mr-2">
-                          145<span>تومان</span>
+                        <p className="line-through text-xs text-borderColor">
+                          <span> قیمت</span> 140<span>تومان</span>
                         </p>
                       )}
                     </div>
                     <p className="text-sm text-productPrice font-semibold inline">
-                      145.000<span>تومان</span>
+                      130.000<span>تومان</span>
                     </p>
                   </div>
                   {/* add to cart */}
@@ -257,6 +257,11 @@ const ProductDesign = ({
                 </div>
               )}
             </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>
+            <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>
           </div>
         </div>
       </div>
@@ -283,6 +288,7 @@ ProductDesign.defaultProps = {
   discount: true,
   discountPricePercent: true,
   // product price
+  mainPriceTitle: false,
   discountPrice: true,
   priceHolder: true,
 

src/components/vodProductDesign/VodProductDesign.js

@@ -46,6 +46,7 @@ const VodProductDesign = ({
   priceStarAlignment,
   rangeWidth,
   playBtnBgColor,
+  mainPriceTitle,
 }) => {
   const [progressFlag, setProgressFlag] = useState(false);
   useEffect(() => {
@@ -199,15 +200,15 @@ const VodProductDesign = ({
                           </span>
                         )}
                         {discountPrice && (
-                          <p className="line-through text-xs text-borderColor mr-2">
-                            145<span>تومان</span>
+                          <p className="line-through text-xs text-borderColor">
+                            <span> قیمت</span> 140<span>تومان</span>
                           </p>
                         )}
                       </div>
                       <p
                         className={`text-sm font-semibold inline ${productPriceAmountTitle}`}
                       >
-                        145.000<span>تومان</span>
+                        111.000<span>تومان</span>
                       </p>
                     </div>
                     {/* add to cart */}
@@ -285,7 +286,7 @@ VodProductDesign.defaultProps = {
   discount: true,
   discountPricePercent: true,
   // product price
-  discountPrice: false,
+  discountPrice: true,
   priceHolder: true,
   priceTitle: false,