add styles to product card, collection banner image view

components/product/ProductCard/ProductCard.tsx

@@ -7,6 +7,7 @@ import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
 import usePrice from '@framework/product/use-price'
 import ProductTag from '../ProductTag'
+
 interface Props {
   className?: string
   product: Product
@@ -53,6 +54,7 @@ const ProductCard: FC<Props> = ({
                 height={320}
                 width={320}
                 layout="fixed"
+                objectFit="cover"
                 {...imgProps}
               />
             )}

pages/index.tsx

@@ -38,23 +38,29 @@ export async function getStaticProps({
 }
 
 export default function Home({
-  products, categories
+  products,
+  categories,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
-      <div style={{
+      <div
+        style={{
           display: 'flex',
-        justifyContent: 'center'
+          justifyContent: 'center',
-      }}>
+          overflowX: 'hidden',
+          height: '30%',
+        }}
+      >
         {categories.slice(0, 3).map((category: any, i: number) => (
           <Link href={`/search/${category.slug}`}>
-          <a>
+            <a style={{ width: '33.33%' }}>
               <Image
                 quality="100"
                 src={category.assets[0].source}
                 height={category.assets[0].height}
-              width={category.assets[0].width}
+                width={category.assets[0].height}
-              layout="fixed"
+                layout="responsive"
+                objectFit="cover"
               />
             </a>
           </Link>