From d74ffb14017b5e9dfe6ed414c2788cb888603f23 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 6 Nov 2020 15:42:01 -0300
Subject: [PATCH] Min images

---
 .../product/ProductCard/ProductCard.module.css     | 14 +++++---------
 components/product/ProductCard/ProductCard.tsx     |  4 ++--
 next.config.js                                     |  2 +-
 pages/index.tsx                                    |  8 ++++----
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 47b11a583..faf635560 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -125,15 +125,11 @@
 }
 
 .imageContainer {
-  & > div {
-    & > div {
-      height: 100%;
-      margin: 0 auto;
-    }
-  }
+  overflow: hidden;
+  @apply flex items-center justify-center;
 }
 
-.product-image {
-  height: 120% !important;
-  top: -10% !important;
+.image {
+  object-fit: cover;
+  transform: scale(1.2);
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 12db7c705..238a2e7b2 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -51,8 +51,8 @@ const ProductCard: FC<Props> = ({
               width={imgWidth}
               height={imgHeight}
               priority={priority}
-              quality="85"
               layout={imgLayout}
+              quality="85"
             />
           </div>
         ) : (
@@ -73,8 +73,8 @@ const ProductCard: FC<Props> = ({
             </div>
             <div className={s.imageContainer}>
               <Image
+                className={s.image}
                 alt={p.name}
-                className={cn('w-full object-cover', s['product-image'])}
                 src={src}
                 width={imgWidth}
                 height={imgHeight}
diff --git a/next.config.js b/next.config.js
index ba82fafa3..f4f3dc040 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    imagesSizes: [320, 480, 820, 1200, 1600],
+    imagesSizes: [320, 480, 820, 1280],
     domains: ['cdn11.bigcommerce.com'],
   },
   i18n: {
diff --git a/pages/index.tsx b/pages/index.tsx
index 8fbdd5e9e..d35164e56 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -91,8 +91,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? 1280 : 820}
-            imgHeight={i === 0 ? 1280 : 820}
+            imgWidth={i === 0 ? 1080 : 540}
+            imgHeight={i === 0 ? 1080 : 540}
             priority
           />
         ))}
@@ -125,8 +125,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The second image is the largest one in the grid
-            imgWidth={i === 1 ? 1280 : 820}
-            imgHeight={i === 1 ? 1280 : 820}
+            imgWidth={i === 1 ? 1080 : 540}
+            imgHeight={i === 1 ? 1080 : 540}
           />
         ))}
       </Grid>