adding new styles

src/components/ProductCard/ProductCard.module.scss

@@ -5,14 +5,14 @@
   border-radius: 8px;
   padding: 1rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s ease;
+  transition: all 0.3s ease;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
   &:hover {
-    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
     cursor: pointer;
   }
   @media screen and (max-width: 426px) {

src/components/ProductCard/imageCarousel/ImageCarousel.module.scss

@@ -5,7 +5,6 @@
   overflow: hidden;
   touch-action: pan-y;
 }
-
 .productImage {
   width: 99%;
   height: auto;
@@ -31,6 +30,11 @@
   max-width: 100%;
   margin: auto;
   object-fit: contain;
+  transition: transform 0.3s ease;
+}
+
+.hovered {
+  transform: scale(1.05);
 }
 
 /* Style for images inside detail view */

src/components/ProductCard/imageCarousel/index.jsx

@@ -6,6 +6,7 @@ const ImageCarousel = ({
   altText,
   showThumbnails = false,
   isDetailView = false,
+  isHovered = false,
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -220,7 +221,8 @@ const ImageCarousel = ({
             isDetailView ? styles.detailImage : styles.cardImage
           }`}
           onClick={isDetailView ? openModal : undefined}
-          style={{ cursor: isDetailView ? "pointer" : "default" }}
+          style={{ cursor: isDetailView ? "pointer" : "default" , transform: isHovered ? "scale(1.05)" : "none" }}
+          
         />
         {isDetailView && renderModal()}
       </div>
@@ -450,7 +452,7 @@ const ImageCarousel = ({
             alt={altText || "Product image"}
             className={`${styles.productImage} ${
               isDetailView ? styles.detailImage : styles.cardImage
-            }`}
+            } ${isHovered ? styles.hovered : ''}`}
           />
         </div>
 

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>