update: style of show button icon product card

This commit is contained in:
Nam Doan
2025-12-22 15:01:18 +07:00
parent 6912f2605c
commit 005b10484b
8 changed files with 194 additions and 79 deletions
+46
View File
@@ -168,6 +168,52 @@
}
}
},
{
"VtFeaturedProducts": {
"config": {
"title": "drsquatch-best-seller",
"styles": {
"container": "content-container py-12 px-[100px] small:py-24",
"header": {
"container": "flex justify-center mb-8",
"title": "text-[28px] font-bold text-[#1f3521]",
"isShowViewAll": false
},
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
"productCard": {
"card": "shadow-none border-none",
"className": "relative overflow-hidden rounded-2xl bg-white shadow-elevation-card-rest h-full flex flex-col",
"badgeText": "LIMITED EDITION",
"badge": {
"container": "absolute z-[1] top-0 left-0 pt-4",
"text": "uppercase px-4 py-2 bg-[#3B6F47] text-white"
},
"thumbnail": {
"className": "rounded-none h-[300px] shadow-none",
"size": "full"
},
"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",
"reviews": {
"container": "mt-3 flex items-center gap-2",
"stars": "flex gap-1",
"star": "text-[#C4622C] text-xl leading-none",
"emptyStar": "text-[#C4622C] text-xl opacity-30 leading-none",
"text": "text-[#1f3521]",
"rating": 3.6,
"count": 59
},
"button": {
"addToCart": "mt-6 w-full bg-[#C4622C] hover:bg-[#C4622C]/90 shadow-none text-white rounded-none h-fit font-bold",
"moreInfo": "hidden"
}
}
}
}
}
},
{
"CartMismatchBanner": {
"config": {
+7
View File
@@ -142,6 +142,13 @@
}
}
},
{
"VtFeaturedProducts": {
"config": {
"title": "best-seller"
}
}
},
{
"CartMismatchBanner": {
"config": {
+12 -8
View File
@@ -188,7 +188,11 @@
"./banner-hero-1.webp",
"./banner-hero-2.webp"
],
"links": ["/", "/account", "/product"]
"links": [
"/",
"/account",
"/product"
]
}
},
"left": [
@@ -219,12 +223,12 @@
"container": "content-container py-12 px-[100px] small:py-24",
"header": {
"container": "flex justify-between mb-8",
"title": "txt-xlarge",
"link": ""
"title": "text-[56px] text-[#11314E]",
"isShowViewAll": false
},
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
"productCard": {
"className": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
"card": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
"badge": {
"container": "p-4",
"text": "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86]"
@@ -233,19 +237,19 @@
"className": "rounded-none h-[240px]",
"size": "full"
},
"subtitle": "text-ui-fg-subtle text-[14px]",
"content": "flex flex-col flex-1 justify-between p-4",
"title": "text-ui-fg-subtle text-[18px]",
"price": "flex items-center gap-x-1 text-[#285A86] font-bold",
"price": "flex items-center gap-x-1 text-[#285A86] font-bold border-b pb-4",
"button": {
"addToCart": "w-full h-[40px] bg-black text-white rounded-md",
"moreInfo": "w-full h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
"addToCart": "w-fit h-[40px] bg-black text-white rounded-md",
"moreInfo": "w-fit h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
}
}
}
}
}
},
{
"CartMismatchBanner": {
"config": {