adding new styles

src/components/ProductCard/index.jsx

@@ -53,7 +53,7 @@ const ProductCard = ({
   const [localIsFavorite, setLocalIsFavorite] = useState(
     favoriteProducts.some((fav) => fav.product?.id === product.id),
   );
-
+  // const [isHovered, setIsHovered] = useState(false);
   const truncatedDesc = truncateDescription(
     product.description,
     descriptionMaxLength,
@@ -221,11 +221,18 @@ const ProductCard = ({
     navigate(`/product/${product.id}`);
   };
 
+  const [isHovered, setIsHovered] = useState(false);
+
   const { name, price_amount, old_price_amount, media = [], reviews } = product;
 
   return (
     <>
-      <div className={styles.productCard} onClick={handleCardClick}>
+      <div 
+        className={styles.productCard} 
+        onClick={handleCardClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
         <div className={styles.imageContainer}>
           {product.discount && (
             <span className={styles.discountBadge}>-{product.discount}%</span>
@@ -236,7 +243,7 @@ const ProductCard = ({
             </span>
           )}
 
-          <ImageCarousel images={media} altText={name} />
+          <ImageCarousel images={media} altText={name} isHovered={isHovered}/>
         </div>
         <div className={styles.productInfo}>
           <h3 className={styles.productName}>{name}</h3>