fix conflicts

components/product/ProductCard/ProductCard.module.css

@@ -87,9 +87,11 @@
   }
 
   & .productTitle {
-    width: 18vw;
     margin-top: -7px;
     font-size: 1rem;
+    & span {
+      line-height: 3;
+    }
   }
 
   & .productPrice {
@@ -98,13 +100,12 @@
 }
 
 .productTitle {
-  @apply pt-4 leading-8;
-  width: 400px;
+  @apply pt-2 max-w-full w-full;
   font-size: 2rem;
   letter-spacing: 0.4px;
 
   & span {
-    @apply inline p-4 bg-primary text-primary font-bold;
+    @apply py-4 px-6 bg-primary text-primary font-bold;
     font-size: inherit;
     letter-spacing: inherit;
     box-decoration-break: clone;
@@ -113,10 +114,22 @@
 }
 
 .productPrice {
-  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
   letter-spacing: 0.4px;
 }
 
 .wishlistButton {
   @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
 }
+
+.imageContainer {
+  @apply absolute z-10 inset-0 flex items-center justify-center;
+
+  & > div {
+    @apply h-full;
+    & > div {
+      @apply h-full;
+      padding-bottom: 0 !important;
+    }
+  }
+}

components/product/ProductCard/ProductCard.tsx

@@ -1,30 +1,46 @@
-import cn from 'classnames'
-import s from './ProductCard.module.css'
 import { FC, ReactNode, Component } from 'react'
+import cn from 'classnames'
+import Image from 'next/image'
+import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import { Heart } from '@components/icon'
-import Link from 'next/link'
+import s from './ProductCard.module.css'
 
 interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
   product: ProductNode
   variant?: 'slim' | 'simple'
+  imgWidth: number
+  imgHeight: number
+  priority?: boolean
 }
 
-const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
+const ProductCard: FC<Props> = ({
+  className,
+  product: p,
+  variant,
+  imgWidth,
+  imgHeight,
+  priority,
+}) => {
+  const src = p.images.edges?.[0]?.node.urlOriginal!
+
   if (variant === 'slim') {
     return (
       <div className="relative overflow-hidden box-border">
-        <img
-          className="object-scale-down h-48"
-          src={p.images.edges?.[0]?.node.urlSmall}
-        />
-        <div className="absolute inset-0 flex items-center justify-end mr-8">
+        <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
           <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
             {p.name}
           </span>
         </div>
+        <Image
+          src={src}
+          width={imgWidth}
+          height={imgHeight}
+          priority={priority}
+          quality="90"
+        />
       </div>
     )
   }
@@ -34,15 +50,9 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >
-        <div className="absolute z-10 inset-0 flex items-center justify-center">
-          <img
-            className={cn('w-full object-cover', s['product-image'])}
-            src={p.images.edges?.[0]?.node.urlXL}
-          />
-        </div>
         <div className={s.squareBg} />
-        <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          <div className="absolute top-0 left-0">
+        <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+          <div className="absolute top-0 left-0 pr-16 max-w-full">
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
             </h3>
@@ -52,6 +62,16 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
             <Heart />
           </div>
         </div>
+        <div className={cn(s.imageContainer)}>
+          <Image
+            className={cn('w-full object-cover', s['product-image'])}
+            src={src}
+            width={imgWidth}
+            height={imgHeight}
+            priority={priority}
+            quality="90"
+          />
+        </div>
       </a>
     </Link>
   )

components/product/ProductSlider/ProductSlider.module.css

@@ -28,6 +28,7 @@
 
 .positionIndicatorsContainer {
   @apply hidden;
+
   @screen sm {
     @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
   }
@@ -35,14 +36,6 @@
 
 .positionIndicator {
   @apply rounded-full p-2;
-
-  /* :hover .dot {
-    @apply bg-hover-2;
-  }
-
-  :focus .dot {
-    @apply outline-none;
-  } */
 }
 
 .dot {

components/product/ProductSlider/ProductSlider.tsx

@@ -1,5 +1,4 @@
 import { useKeenSlider } from 'keen-slider/react'
-import Image from 'next/image'
 import React, { Children, FC, isValidElement, useState } from 'react'
 import cn from 'classnames'
 

components/product/ProductView/ProductView.module.css

@@ -8,15 +8,15 @@
 
 .productDisplay {
   @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
-  margin-right: -2rem;
-  margin-left: -2rem;
-  min-height: 400px;
+  min-height: 600px;
 
   @screen md {
     min-height: 700px;
   }
 
   @screen lg {
+    margin-right: -2rem;
+    margin-left: -2rem;
     @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
@@ -28,7 +28,11 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-6 z-20;
+  @apply absolute top-6 left-0 z-20 pr-16;
+
+  @screen lg {
+    @apply left-6 pr-16;
+  }
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -43,16 +47,16 @@
   @screen lg {
     & .name,
     & .price {
-      @apply bg-hover-1 text-white;
+      @apply bg-violet-light text-white;
     }
   }
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
 
   @screen lg {
-    @apply col-span-5 pl-12 pt-20;
+    @apply col-span-6 pt-20;
   }
 }
 
@@ -60,6 +64,15 @@
   @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
 }
 
+.imageContainer {
+  & > div {
+    @apply h-full;
+    & > div {
+      @apply h-full;
+    }
+  }
+}
+
 .img {
   @apply w-full h-auto max-h-full object-cover;
 }

components/product/ProductView/ProductView.tsx

@@ -1,14 +1,17 @@
-import cn from 'classnames'
-import { NextSeo } from 'next-seo'
-import s from './ProductView.module.css'
 import { FC, useState } from 'react'
+import cn from 'classnames'
+import Image from 'next/image'
+import { NextSeo } from 'next-seo'
+
+import s from './ProductView.module.css'
+import { Heart } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
+
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
-import { Heart } from '@components/icon'
 
 interface Props {
   className?: string
@@ -52,7 +55,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
           description: product.description,
           images: [
             {
-              url: product.images.edges?.[0]?.node.urlXL || '',
+              url: product.images.edges?.[0]?.node.urlOriginal!,
               width: 800,
               height: 600,
               alt: product.name,
@@ -73,14 +76,17 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
           <div className={s.sliderContainer}>
             <ProductSlider>
-              {/** TODO: Change with Image Component  **/}
               {product.images.edges?.map((image, i) => (
-                <img
-                  key={image?.node.urlSmall}
-                  className={s.img}
-                  src={image?.node.urlXL}
-                  loading={i === 0 ? 'eager' : 'lazy'}
-                />
+                <div key={image?.node.urlXL} className={s.imageContainer}>
+                  <Image
+                    className={s.img}
+                    src={image?.node.urlXL!}
+                    width={1050}
+                    height={1050}
+                    priority={i === 0}
+                    quality="90"
+                  />
+                </div>
               ))}
             </ProductSlider>
           </div>
@@ -92,12 +98,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
               <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
-                  {opt.values.map((v: any) => {
+                  {opt.values.map((v: any, i: number) => {
                     const active = choices[opt.displayName]
 
                     return (
                       <Swatch
-                        key={v.entityId}
+                        key={`${v.entityId}-${i}`}
                         active={v.label === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}