bugfix: style of card product card homepage

config/nam.3bear.design.json

@@ -381,8 +381,8 @@
             "styles": {
               "container": "content-container py-12 small:py-20",
               "header": {
-                "container": "hidden",
+                "container": "ml-16",
-                "title": "hidden",
+                "title": "text-2xl mb-12",
                 "isShowViewAll": false
               },
               "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",

config/nam.drsquatch.design.json

@@ -301,6 +301,7 @@
                 "content": " flex flex-col flex-1",
                 "title": "mt-2 text-[#1f3521] text-[22px] font-bold",
                 "price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end",
+                "description": "mt-2",
                 "reviews": {
                   "container": "mt-3 flex items-center gap-2",
                   "stars": "flex gap-1",

config/nam.vibentec.design.json

@@ -342,6 +342,7 @@
                 "subtitle": "text-ui-fg-subtle text-[14px]",
                 "content": "flex flex-col flex-1 justify-between p-4",
                 "title": "text-ui-fg-subtle text-[18px]",
+                "description": "mt-2 text-ui-fg-subtle text-[14px]",
                 "price": "flex items-center gap-x-1 text-[#285A86] font-bold border-b pb-4",
                 "button": {
                   "addToCart": "w-fit h-[40px] bg-black text-white rounded-md",

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",
+    title: styles?.title ?? "",
-    price: styles?.price ?? "mt-2 flex items-baseline gap-2",
+    price: styles?.price ?? "",
-    description: styles?.description ?? "txt-small text-[#285A86] my-4",
+    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",
+      addToCart: styles?.button?.addToCart ?? "",
-      moreInfo: styles?.button?.moreInfo ?? "w-full",
+      moreInfo: styles?.button?.moreInfo ?? "",
-      isShowIcon: styles?.button?.isShowIcon ?? true,
+      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}>
+        {classes.price && (
-          {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
+          <div className={classes.price}>
-        </div>
+            {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
+          {classes.button?.addToCart && (
-            formAction={handleAddToCart}
+            <Button
-            disabled={!inStock}
+              formAction={handleAddToCart}
-            variant="primary"
+              disabled={!inStock}
-            className={classes.button.addToCart}
+              variant="primary"
-          >
+              className={classes.button.addToCart}
-            Add to cart {classes.button.isShowIcon && <Plus />}
+            >
-          </Button>
+              Add to cart {classes.button.isShowIcon && <Plus />}
-          <LocalizedClientLink
-            href={`/products/${product.handle}`}
-            className="flex-1"
-          >
-            <Button variant="secondary" className={classes.button.moreInfo}>
-              More Info {classes.button.isShowIcon && <ChevronRight />}
             </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>