@jxsuite/starters 0.34.0 → 0.35.0

package/sites/home-services/components/hs-review.json

@@ -6,47 +6,107 @@
     "role": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
+    "position": "relative",
+    "display": "flex",
+    "flexDirection": "column",
+    "height": "100%",
+    "padding": "1.9rem 1.75rem",
     "backgroundColor": "var(--color-bg-white)",
     "border": "1px solid var(--color-border)",
     "borderRadius": "var(--radius)",
-    "boxShadow": "0 4px 20px rgba(28,25,23,0.05)"
+    "boxShadow": "var(--shadow-card)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "color": "var(--color-primary)",
-        "fontSize": "1.1rem",
-        "marginBottom": "0.75rem",
-        "letterSpacing": "0.1em"
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1rem",
+        "marginBottom": "0.9rem"
       },
-      "textContent": "★★★★★"
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "color": "var(--color-primary)",
+            "fontSize": "1.05rem",
+            "letterSpacing": "0.14em"
+          },
+          "textContent": "★★★★★"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "2.4rem",
+            "lineHeight": "0.6",
+            "color": "var(--color-bg-concrete)",
+            "fontWeight": "700"
+          },
+          "textContent": "”"
+        }
+      ]
     },
     {
       "tagName": "p",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.15rem",
+        "flex": "1",
+        "fontSize": "1.05rem",
         "lineHeight": "1.6",
-        "fontWeight": "500",
-        "margin": "0 0 1.25rem"
+        "color": "var(--color-text-primary)",
+        "margin": "0 0 1.35rem"
       },
       "textContent": "“${state.quote}”"
     },
     {
       "tagName": "div",
+      "style": {
+        "display": "flex",
+        "alignItems": "center",
+        "gap": "0.75rem",
+        "paddingTop": "1.1rem",
+        "borderTop": "1px solid var(--color-border)"
+      },
       "children": [
         {
           "tagName": "div",
-          "style": { "fontWeight": "700" },
-          "textContent": "${state.author}"
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "width": "2.4rem",
+            "height": "2.4rem",
+            "borderRadius": "var(--radius-sm)",
+            "backgroundColor": "var(--color-primary-soft)",
+            "color": "var(--color-primary)",
+            "fontFamily": "var(--font-heading)",
+            "fontWeight": "700",
+            "fontSize": "1.05rem"
+          },
+          "textContent": "★"
         },
         {
           "tagName": "div",
-          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
-          "textContent": "${state.role}"
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.02em",
+                "fontSize": "1rem"
+              },
+              "textContent": "${state.author}"
+            },
+            {
+              "tagName": "div",
+              "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)" },
+              "textContent": "${state.role}"
+            }
+          ]
         }
       ]
     }

package/sites/home-services/components/hs-section-header.json

@@ -9,32 +9,48 @@
   "style": {
     "display": "block",
     "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 2.5rem",
+    "margin": "0 auto 2.75rem",
     "textAlign": "${state.align}"
   },
   "children": [
     {
       "tagName": "p",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
+        "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.5rem",
         "textTransform": "uppercase",
-        "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
-        "fontWeight": "700",
+        "fontFamily": "var(--font-heading)",
+        "letterSpacing": "0.14em",
+        "fontSize": "0.82rem",
+        "fontWeight": "600",
         "color": "var(--color-primary)",
-        "margin": "0 0 0.75rem"
+        "margin": "0 0 0.9rem"
       },
-      "textContent": "${state.eyebrow}"
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "width": "1.6rem",
+            "height": "0.2rem",
+            "backgroundColor": "var(--color-primary)",
+            "display": "inline-block"
+          }
+        },
+        { "tagName": "span", "textContent": "${state.eyebrow}" }
+      ]
     },
     {
       "tagName": "h2",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
-        "fontWeight": "800",
-        "lineHeight": "1.12",
-        "letterSpacing": "-0.03em",
-        "margin": "0"
+        "fontSize": "clamp(2rem, 4.4vw, 3rem)",
+        "fontWeight": "700",
+        "textTransform": "uppercase",
+        "lineHeight": "1.05",
+        "letterSpacing": "0.01em",
+        "margin": "0",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.heading}"
     },
@@ -42,10 +58,11 @@
       "tagName": "p",
       "style": {
         "display": "${state.subheading ? 'block' : 'none'}",
-        "fontSize": "1.1rem",
+        "fontSize": "1.12rem",
         "lineHeight": "1.7",
         "color": "var(--color-text-muted)",
-        "margin": "1rem 0 0"
+        "margin": "1rem auto 0",
+        "maxWidth": "58ch"
       },
       "textContent": "${state.subheading}"
     }

package/sites/home-services/components/hs-service-card.json

@@ -8,18 +8,20 @@
     "href": "/services/"
   },
   "style": {
+    "position": "relative",
     "display": "flex",
     "flexDirection": "column",
-    "height": "100%",
-    "padding": "1.75rem",
+    "padding": "1.9rem 1.75rem",
     "backgroundColor": "var(--color-bg-white)",
-    "borderRadius": "var(--radius)",
     "border": "1px solid var(--color-border)",
-    "boxShadow": "0 4px 20px rgba(28,25,23,0.05)",
-    "transition": "transform 0.15s, box-shadow 0.15s",
+    "borderTop": "4px solid var(--color-steel)",
+    "borderRadius": "var(--radius)",
+    "boxShadow": "var(--shadow-card)",
+    "transition": "transform 0.16s, box-shadow 0.16s, border-top-color 0.16s",
     ":hover": {
-      "transform": "translateY(-3px)",
-      "boxShadow": "0 14px 34px rgba(28,25,23,0.12)"
+      "transform": "translateY(-4px)",
+      "boxShadow": "0 22px 46px -22px rgba(14,26,35,0.4)",
+      "borderTopColor": "var(--color-primary)"
     }
   },
   "children": [
@@ -29,13 +31,15 @@
         "display": "flex",
         "alignItems": "center",
         "justifyContent": "center",
-        "width": "3.25rem",
-        "height": "3.25rem",
-        "borderRadius": "0.75rem",
-        "backgroundColor": "rgba(234, 88, 12, 0.1)",
-        "fontSize": "1.6rem",
+        "width": "3.6rem",
+        "height": "3.6rem",
+        "borderRadius": "var(--radius-sm)",
+        "backgroundColor": "var(--color-steel)",
+        "color": "var(--color-text-white)",
+        "fontSize": "1.85rem",
         "lineHeight": "1",
-        "marginBottom": "1.1rem"
+        "marginBottom": "1.2rem",
+        "clipPath": "polygon(0 0, 100% 0, 100% 82%, 84% 100%, 0 100%)"
       },
       "textContent": "${state.icon}"
     },
@@ -43,21 +47,21 @@
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.3rem",
-        "fontWeight": "700",
-        "letterSpacing": "-0.01em",
-        "margin": "0 0 0.5rem"
+        "fontSize": "1.4rem",
+        "fontWeight": "600",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.02em",
+        "margin": "0 0 0.55rem"
       },
       "textContent": "${state.name}"
     },
     {
       "tagName": "p",
       "style": {
-        "flex": "1",
         "margin": "0",
         "color": "var(--color-text-muted)",
-        "fontSize": "0.98rem",
-        "lineHeight": "1.65"
+        "fontSize": "1rem",
+        "lineHeight": "1.6"
       },
       "textContent": "${state.summary}"
     },
@@ -65,11 +69,17 @@
       "tagName": "a",
       "attributes": { "href": "${state.href}" },
       "style": {
-        "display": "${state.cta ? 'inline-block' : 'none'}",
-        "marginTop": "1.1rem",
+        "display": "${state.cta ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.4rem",
+        "marginTop": "auto",
+        "paddingTop": "1.25rem",
         "color": "var(--color-primary)",
-        "fontWeight": "700",
-        "fontSize": "0.95rem",
+        "fontFamily": "var(--font-heading)",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.05em",
+        "fontWeight": "600",
+        "fontSize": "0.9rem",
         "textDecoration": "none",
         ":hover": { "color": "var(--color-primary-hover)" }
       },

package/sites/home-services/components/hs-stat.json

@@ -0,0 +1,54 @@
+{
+  "tagName": "hs-stat",
+  "state": {
+    "value": "",
+    "label": "",
+    "icon": ""
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "padding": "0.5rem 1.5rem 0.5rem 0",
+    "@--sm": { "padding": "0.5rem 0" }
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "${state.icon ? 'block' : 'none'}",
+        "fontSize": "1.4rem",
+        "lineHeight": "1",
+        "marginBottom": "0.6rem",
+        "opacity": "0.85"
+      },
+      "textContent": "${state.icon}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "clamp(2.6rem, 5.2vw, 3.7rem)",
+        "fontWeight": "700",
+        "lineHeight": "0.95",
+        "letterSpacing": "0.01em",
+        "color": "var(--color-primary)",
+        "fontVariantNumeric": "tabular-nums"
+      },
+      "textContent": "${state.value}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "marginTop": "0.6rem",
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "0.86rem",
+        "fontWeight": "500",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.08em",
+        "color": "var(--color-text-steel-muted)",
+        "lineHeight": "1.35"
+      },
+      "textContent": "${state.label}"
+    }
+  ]
+}

package/sites/home-services/components/hs-step.json

@@ -6,46 +6,73 @@
     "text": ""
   },
   "style": {
+    "position": "relative",
     "display": "block",
-    "padding": "0.25rem"
+    "padding": "1.75rem 1.5rem 1.6rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "overflow": "hidden"
   },
   "children": [
+    {
+      "tagName": "span",
+      "style": {
+        "position": "absolute",
+        "top": "-0.75rem",
+        "right": "0.5rem",
+        "fontFamily": "var(--font-heading)",
+        "fontWeight": "700",
+        "fontSize": "5.5rem",
+        "lineHeight": "1",
+        "color": "var(--color-bg-concrete)",
+        "pointerEvents": "none",
+        "userSelect": "none"
+      },
+      "textContent": "${state.number}"
+    },
     {
       "tagName": "div",
       "style": {
-        "display": "flex",
+        "position": "relative",
+        "display": "inline-flex",
         "alignItems": "center",
         "justifyContent": "center",
-        "width": "2.75rem",
-        "height": "2.75rem",
-        "borderRadius": "50%",
+        "minWidth": "2.4rem",
+        "height": "2.4rem",
+        "padding": "0 0.6rem",
         "backgroundColor": "var(--color-primary)",
         "color": "var(--color-text-white)",
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
-        "fontWeight": "800",
-        "marginBottom": "1rem"
+        "fontWeight": "700",
+        "fontSize": "1.15rem",
+        "borderRadius": "var(--radius-sm)",
+        "marginBottom": "1rem",
+        "clipPath": "polygon(0 0, 100% 0, 100% 74%, 82% 100%, 0 100%)"
       },
       "textContent": "${state.number}"
     },
     {
       "tagName": "h3",
       "style": {
+        "position": "relative",
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
-        "fontWeight": "700",
-        "letterSpacing": "-0.01em",
-        "margin": "0 0 0.4rem"
+        "fontSize": "1.28rem",
+        "fontWeight": "600",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.02em",
+        "margin": "0 0 0.45rem"
       },
       "textContent": "${state.title}"
     },
     {
       "tagName": "p",
       "style": {
+        "position": "relative",
         "margin": "0",
         "color": "var(--color-text-muted)",
         "fontSize": "0.98rem",
-        "lineHeight": "1.65"
+        "lineHeight": "1.6"
       },
       "textContent": "${state.text}"
     }