improve image component styles

components/core/EnhancedImage/EnhancedImage.module.css

@@ -0,0 +1,14 @@
+.root {
+  @apply transform transition-transform duration-500;
+  height: 100%;
+  margin: auto;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  & div {
+    height: 100%;
+    margin: auto;
+  }
+}

components/core/EnhancedImage/EnhancedImage.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import { useInView } from 'react-intersection-observer'
 import Image from 'next/image'
+import s from './EnhancedImage.module.css'
 
 type Props = Omit<
   JSX.IntrinsicElements['img'],
@@ -33,7 +34,7 @@ const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
   })
 
   return (
-    <div ref={ref}>
+    <div ref={ref} className={s.root}>
       <Image {...props} />
     </div>
   )

components/product/ProductCard/ProductCard.module.css

@@ -122,9 +122,3 @@
 .wishlistButton {
   @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
-
-.product-image {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}

components/product/ProductCard/ProductCard.tsx

@@ -70,17 +70,15 @@ const ProductCard: FC<Props> = ({
             variant={p.variants.edges?.[0]!}
           />
         </div>
-        <div className={cn(s.imageContainer)}>
+        <EnhancedImage
-          <EnhancedImage
+          alt={p.name}
-            alt={p.name}
+          className="w-full object-cover"
-            className={cn('w-full object-cover', s['product-image'])}
+          src={src}
-            src={src}
+          width={imgWidth}
-            width={imgWidth}
+          height={imgHeight}
-            height={imgHeight}
+          priority={priority}
-            priority={priority}
+          quality="90"
-            quality="90"
+        />
-          />
-        </div>
       </a>
     </Link>
   )