bugfix: style of card product card homepage

src/modules/products/components/vt-product-card/index.tsx

@@ -57,7 +57,7 @@ export default function ProductCard({
   const classes = {
     card: styles?.card ?? className ?? "",
     badge: {
-      container: styles?.badge?.container ?? "p-4",
+      container: styles?.badge?.container ?? " pb-4",
       text:
         styles?.badge?.text ??
         "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86] ",
@@ -68,9 +68,9 @@ export default function ProductCard({
     },
     subtitle: styles?.subtitle ?? "",
     content: styles?.content ?? "p-6 flex flex-col flex-1",
-    title: styles?.title ?? "mt-2 text-ui-fg-base",
-    price: styles?.price ?? "mt-2 flex items-baseline gap-2",
-    description: styles?.description ?? "txt-small text-[#285A86] my-4",
+    title: styles?.title ?? "",
+    price: styles?.price ?? "",
+    description: styles?.description ?? "",
     reviews: {
       container: styles?.reviews?.container ?? undefined,
       stars: styles?.reviews?.stars ?? "flex gap-1",
@@ -83,15 +83,18 @@ export default function ProductCard({
       count: styles?.reviews?.count,
     },
     button: {
-      addToCart: styles?.button?.addToCart ?? "flex-1",
-      moreInfo: styles?.button?.moreInfo ?? "w-full",
-      isShowIcon: styles?.button?.isShowIcon ?? true,
+      addToCart: styles?.button?.addToCart ?? "",
+      moreInfo: styles?.button?.moreInfo ?? "",
+      isShowIcon: styles?.button?.isShowIcon ?? false,
     },
   }
 
   return (
     <div className={clx(classes.card)}>
-      <LocalizedClientLink href={`/products/${product.handle}`} className="block">
+      <LocalizedClientLink
+        href={`/products/${product.handle}`}
+        className="block"
+      >
         <div className="relative">
           {badgeText && (
             <div className={classes.badge.container}>
@@ -118,7 +121,10 @@ export default function ProductCard({
           </LocalizedClientLink>
         )}
 
-        <LocalizedClientLink href={`/products/${product.handle}`} className="block">
+        <LocalizedClientLink
+          href={`/products/${product.handle}`}
+          className="block"
+        >
           <Heading
             level="h3"
             className={classes.title}
@@ -128,9 +134,11 @@ export default function ProductCard({
           </Heading>
         </LocalizedClientLink>
 
-        <div className={classes.price}>
-          {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
-        </div>
+        {classes.price && (
+          <div className={classes.price}>
+            {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
+          </div>
+        )}
 
         {(classes.reviews.rating !== undefined ||
           classes.reviews.count !== undefined) && (
@@ -182,25 +190,34 @@ export default function ProductCard({
           </div>
         )}
 
-        <Text className={clx(classes.description, "txt-small my-4")}>{description}</Text>
+        {classes.description && (
+          <Text className={clx(classes.description, "txt-small my-4")}>
+            {description}
+          </Text>
+        )}
 
         <div className="flex gap-3 mt-auto">
-          <Button
-            formAction={handleAddToCart}
-            disabled={!inStock}
-            variant="primary"
-            className={classes.button.addToCart}
-          >
-            Add to cart {classes.button.isShowIcon && <Plus />}
-          </Button>
-          <LocalizedClientLink
-            href={`/products/${product.handle}`}
-            className="flex-1"
-          >
-            <Button variant="secondary" className={classes.button.moreInfo}>
-              More Info {classes.button.isShowIcon && <ChevronRight />}
+          {classes.button?.addToCart && (
+            <Button
+              formAction={handleAddToCart}
+              disabled={!inStock}
+              variant="primary"
+              className={classes.button.addToCart}
+            >
+              Add to cart {classes.button.isShowIcon && <Plus />}
             </Button>
-          </LocalizedClientLink>
+          )}
+
+          {classes.button?.moreInfo && (
+            <LocalizedClientLink
+              href={`/products/${product.handle}`}
+              className="flex-1"
+            >
+              <Button variant="secondary" className={classes.button.moreInfo}>
+                More Info {classes.button.isShowIcon && <ChevronRight />}
+              </Button>
+            </LocalizedClientLink>
+          )}
         </div>
       </div>
     </div>