main Completed

src/components/Product/index.js

@@ -37,18 +37,18 @@ const ProductDesign = ({
   rangeWidth,
   addToCartHolder,
   productName,
-  productGrade,
   productPrice,
   productImg,
   writeGHEIMAT,
-  numberOfRegards
+  numberOfRegards,
+  productHolderHoverBorder
 }) => {
   const [isHovering, setIsHovering] = useState(false);
   return (
     <div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
       <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4">
         <div
-          className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
+          className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
         >
           {/* product image */}
           <div className="w-full relative">

src/views/Products/layouts/Main.js

@@ -86,6 +86,8 @@ export const Main = ({ isMobile,
                 numberOfRegards={160}
                 productTitleColor='text-blue5F'
                 productCatTextColor='text-blueC0'
+                productHolderBorder=''
+                productHolderHoverBorder='shadow-md'
               />
             </Link>
           ))}