@jxsuite/starters 0.34.0 → 0.35.0

package/sites/shop/components/shp-product-card.json

@@ -3,6 +3,8 @@
   "state": {
     "title": "",
     "price": "",
+    "oldPrice": "",
+    "badge": "",
     "category": "",
     "href": "/products/",
     "image": { "type": "string", "format": "image", "default": "" }
@@ -25,17 +27,25 @@
         "overflow": "hidden",
         "textDecoration": "none",
         "color": "inherit",
-        "transition": "border-color 0.15s, box-shadow 0.15s, transform 0.15s",
+        "boxShadow": "var(--shadow-card)",
+        "transition": "border-color 0.18s, box-shadow 0.18s, transform 0.18s",
         ":hover": {
           "borderColor": "var(--color-primary)",
-          "boxShadow": "0 12px 30px rgba(15,23,42,0.1)",
-          "transform": "translateY(-4px)"
-        }
+          "boxShadow": "0 20px 44px -20px rgba(13,17,23,0.32)",
+          "transform": "translateY(-5px)"
+        },
+        ":hover img": { "transform": "scale(1.06)" },
+        ":hover .qadd": { "transform": "translateY(0)", "opacity": "1" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "position": "relative" },
+          "style": {
+            "position": "relative",
+            "aspectRatio": "1 / 1",
+            "overflow": "hidden",
+            "backgroundColor": "var(--color-panel)"
+          },
           "children": [
             {
               "tagName": "img",
@@ -45,48 +55,117 @@
                 "loading": "lazy"
               },
               "style": {
+                "position": "absolute",
+                "inset": "0",
                 "width": "100%",
-                "aspectRatio": "1 / 1",
+                "height": "100%",
                 "objectFit": "cover",
                 "display": "block",
-                "backgroundColor": "var(--color-bg-cream)"
+                "transition": "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
               }
             },
             {
               "tagName": "span",
               "style": {
+                "display": "${state.badge ? 'inline-flex' : 'none'}",
                 "position": "absolute",
-                "top": "0.75rem",
-                "left": "0.75rem",
-                "padding": "0.25rem 0.7rem",
+                "top": "0.8rem",
+                "left": "0.8rem",
+                "alignItems": "center",
+                "padding": "0.28rem 0.65rem",
                 "borderRadius": "999px",
-                "fontSize": "0.72rem",
-                "fontWeight": "600",
+                "fontSize": "0.68rem",
+                "fontWeight": "800",
                 "textTransform": "uppercase",
                 "letterSpacing": "0.06em",
-                "backgroundColor": "rgba(15,23,42,0.82)",
-                "color": "var(--color-text-white)"
+                "color": "var(--color-text-white)",
+                "backgroundColor": "${state.badge === 'Sale' ? 'var(--color-sale)' : (state.badge === 'New' ? 'var(--color-primary)' : 'var(--color-gold)')}",
+                "boxShadow": "0 6px 14px -6px rgba(13,17,23,0.5)"
               },
-              "textContent": "${state.category}"
+              "textContent": "${state.badge}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "position": "absolute",
+                "top": "0.8rem",
+                "right": "0.8rem",
+                "display": "inline-flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "width": "2rem",
+                "height": "2rem",
+                "borderRadius": "999px",
+                "backgroundColor": "rgba(255,255,255,0.92)",
+                "color": "var(--color-text-secondary)",
+                "fontSize": "0.95rem",
+                "boxShadow": "0 2px 8px rgba(13,17,23,0.18)"
+              },
+              "textContent": "♡"
+            },
+            {
+              "tagName": "div",
+              "attributes": { "class": "qadd" },
+              "style": {
+                "position": "absolute",
+                "left": "0.7rem",
+                "right": "0.7rem",
+                "bottom": "0.7rem",
+                "display": "flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "gap": "0.4rem",
+                "padding": "0.6rem 1rem",
+                "borderRadius": "999px",
+                "backgroundColor": "var(--color-ink)",
+                "color": "var(--color-text-white)",
+                "fontSize": "0.82rem",
+                "fontWeight": "700",
+                "opacity": "0",
+                "transform": "translateY(120%)",
+                "transition": "transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s",
+                "@--md": { "opacity": "1", "transform": "translateY(0)" }
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": { "color": "var(--color-brand-bright)", "fontSize": "0.95rem" },
+                  "textContent": "＋"
+                },
+                { "tagName": "span", "textContent": "Quick add" }
+              ]
             }
           ]
         },
         {
           "tagName": "div",
           "style": {
-            "padding": "1.15rem 1.25rem 1.35rem",
+            "padding": "1.1rem 1.2rem 1.3rem",
             "display": "flex",
             "flexDirection": "column",
-            "flex": "1",
-            "gap": "0.35rem"
+            "flex": "1"
           },
           "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontSize": "0.7rem",
+                "fontWeight": "700",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.1em",
+                "color": "var(--color-text-muted)",
+                "marginBottom": "0.4rem"
+              },
+              "textContent": "${state.category}"
+            },
             {
               "tagName": "h3",
               "style": {
                 "fontFamily": "var(--font-heading)",
                 "fontSize": "1.15rem",
-                "fontWeight": "600",
+                "fontWeight": "700",
+                "letterSpacing": "-0.01em",
+                "lineHeight": "1.2",
                 "margin": "0"
               },
               "textContent": "${state.title}"
@@ -95,31 +174,59 @@
               "tagName": "div",
               "style": {
                 "marginTop": "auto",
+                "paddingTop": "0.9rem",
                 "display": "flex",
-                "alignItems": "baseline",
+                "alignItems": "center",
                 "justifyContent": "space-between",
-                "gap": "0.75rem",
-                "paddingTop": "0.5rem"
+                "gap": "0.75rem"
               },
               "children": [
                 {
-                  "tagName": "span",
-                  "style": {
-                    "fontFamily": "var(--font-heading)",
-                    "fontSize": "1.3rem",
-                    "fontWeight": "700",
-                    "color": "var(--color-text-primary)"
-                  },
-                  "textContent": "${state.price}"
+                  "tagName": "div",
+                  "style": { "display": "flex", "alignItems": "baseline", "gap": "0.5rem" },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontSize": "1.35rem",
+                        "fontWeight": "800",
+                        "letterSpacing": "-0.02em",
+                        "color": "var(--color-text-primary)",
+                        "fontVariantNumeric": "tabular-nums"
+                      },
+                      "textContent": "${state.price}"
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "display": "${state.oldPrice ? 'inline' : 'none'}",
+                        "fontSize": "0.92rem",
+                        "fontWeight": "600",
+                        "color": "var(--color-text-muted)",
+                        "textDecoration": "line-through",
+                        "fontVariantNumeric": "tabular-nums"
+                      },
+                      "textContent": "${state.oldPrice}"
+                    }
+                  ]
                 },
                 {
                   "tagName": "span",
                   "style": {
-                    "fontSize": "0.9rem",
-                    "fontWeight": "600",
-                    "color": "var(--color-primary)"
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "width": "2rem",
+                    "height": "2rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-brand-tint)",
+                    "color": "var(--color-primary)",
+                    "fontSize": "0.95rem",
+                    "fontWeight": "800",
+                    "flexShrink": "0"
                   },
-                  "textContent": "View details →"
+                  "textContent": "→"
                 }
               ]
             }