Layout product grid

components/product/ProductCard/ProductCard.module.css

@@ -1,15 +1,10 @@
 .root {
   @apply relative max-h-full w-full box-border overflow-hidden
-  bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer inline-block bg-accent-1;
+  transition-transform ease-linear cursor-pointer inline-block;
   height: 100% !important;
 }
 
 .root:hover {
-  & .productImage {
-    transform: scale(1.2625);
-  }
-
   & .header .name span,
   & .header .price,
   & .wishlistButton {
@@ -69,22 +64,23 @@
 }
 
 .imageContainer {
-  @apply flex items-center justify-center overflow-hidden;
+  @apply relative flex items-center justify-center bg-primary-2 mb-4;
+  padding: 12% 15%;
 }
-
-.imageContainer > div {
-  min-width: 100%;
-}
-
-.imageContainer .productImage {
-  @apply transform transition-transform duration-500
-  object-cover scale-120;
+.imageContainerInner {
+  @apply relative w-full;
+  padding-bottom: 100%;
 }
 
 .root .wishlistButton {
   @apply top-0 right-0 z-30 absolute;
 }
 
+.typeIcon {
+  @apply absolute bg-accent-2 rounded-full p-1.5 -bottom-2 right-2.5;
+  font-size: 0;
+}
+
 /* Variant Simple */
 .simple .header .name {
   @apply pt-2 text-lg leading-10 -mt-1;

components/product/ProductCard/ProductCard.tsx

@@ -97,31 +97,35 @@ const ProductCard: FC<Props> = ({
 
         {variant === 'default' && (
           <>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0] as any}
-              />
-            )}
-            <ProductTag
-              name={product.name}
-              price={`${price} ${product.price?.currencyCode}`}
-            />
             <div className={s.imageContainer}>
-              {product?.images && (
+              <div className={s.imageContainerInner}>
+                {product?.images && (
+                  <Image
+                    alt={product.name || 'Product Image'}
+                    className={s.productImage}
+                    src={product.images[0]?.url || placeholderImg}
+                    quality="85"
+                    layout="fill"
+                    objectFit="contain"
+                    {...imgProps}
+                  />
+                )}
+              </div>
+              <div className={s.typeIcon}>
                 <Image
-                  alt={product.name || 'Product Image'}
-                  className={s.productImage}
-                  src={product.images[0]?.url || placeholderImg}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
+                  src="/icon-audiobook.svg"
+                  width={22}
+                  height={23}
                 />
-              )}
+              </div>
             </div>
+            <div className="font-bold line-clamp-3">
+              {product.name}
+            </div>
+            <div className="italic">
+              Author (missing data)
+            </div>
+            <div>{price}</div>
           </>
         )}
       </a>