@jxsuite/starters 0.34.0 → 0.35.0

package/sites/nonprofit/components/np-program-card.json

@@ -3,41 +3,78 @@
   "state": {
     "title": "",
     "summary": "",
+    "tag": "Program",
+    "href": "/programs/",
     "image": { "type": "string", "format": "image", "default": "" }
   },
   "style": {
     "display": "flex",
     "flexDirection": "column",
     "backgroundColor": "var(--color-bg-white)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)",
+    "borderRadius": "var(--radius-lg)",
     "overflow": "hidden",
-    "boxShadow": "0 4px 20px rgba(20,49,42,0.06)",
-    "transition": "transform 0.15s, box-shadow 0.15s",
+    "boxShadow": "var(--shadow-card)",
+    "transition": "transform 0.18s, box-shadow 0.18s",
     ":hover": {
-      "transform": "translateY(-3px)",
-      "boxShadow": "0 12px 32px rgba(20,49,42,0.12)"
+      "transform": "translateY(-5px)",
+      "boxShadow": "var(--shadow-float)"
     }
   },
   "children": [
     {
-      "tagName": "img",
-      "attributes": {
-        "src": "${state.image}",
-        "alt": "${state.title}",
-        "loading": "lazy"
-      },
+      "tagName": "div",
       "style": {
-        "width": "100%",
-        "aspectRatio": "16 / 10",
-        "objectFit": "cover",
-        "display": "block"
-      }
+        "position": "relative",
+        "aspectRatio": "16 / 11",
+        "overflow": "hidden"
+      },
+      "children": [
+        {
+          "tagName": "img",
+          "attributes": {
+            "src": "${state.image}",
+            "alt": "${state.title}",
+            "loading": "lazy"
+          },
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "width": "100%",
+            "height": "100%",
+            "objectFit": "cover",
+            "display": "block"
+          }
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "position": "absolute",
+            "left": "1rem",
+            "top": "1rem",
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.4rem",
+            "padding": "0.4rem 0.85rem",
+            "borderRadius": "999px",
+            "backgroundColor": "rgba(251,245,236,0.92)",
+            "backdropFilter": "blur(4px)",
+            "fontSize": "0.74rem",
+            "fontWeight": "800",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.08em",
+            "color": "var(--color-primary)"
+          },
+          "children": [
+            { "tagName": "span", "style": { "fontSize": "0.8rem" }, "textContent": "🌿" },
+            { "tagName": "span", "textContent": "${state.tag}" }
+          ]
+        }
+      ]
     },
     {
       "tagName": "div",
       "style": {
-        "padding": "1.5rem",
+        "padding": "1.6rem 1.6rem 1.75rem",
         "display": "flex",
         "flexDirection": "column",
         "flex": "1"
@@ -46,9 +83,11 @@
         {
           "tagName": "h3",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.3rem",
+            "fontFamily": "var(--font-display)",
+            "fontSize": "1.5rem",
             "fontWeight": "600",
+            "lineHeight": "1.15",
+            "color": "var(--color-primary-deep)",
             "margin": "0 0 0.6rem"
           },
           "textContent": "${state.title}"
@@ -56,12 +95,33 @@
         {
           "tagName": "p",
           "style": {
-            "margin": "0",
+            "margin": "0 0 1.35rem",
             "color": "var(--color-text-muted)",
-            "fontSize": "0.98rem",
-            "lineHeight": "1.65"
+            "fontSize": "1rem",
+            "fontWeight": "600",
+            "lineHeight": "1.65",
+            "flex": "1"
           },
           "textContent": "${state.summary}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.href}" },
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.45rem",
+            "color": "var(--color-accent)",
+            "fontWeight": "800",
+            "fontSize": "0.95rem",
+            "textDecoration": "none",
+            "transition": "gap 0.18s",
+            ":hover": { "gap": "0.85rem" }
+          },
+          "children": [
+            { "tagName": "span", "textContent": "Learn more" },
+            { "tagName": "span", "textContent": "→" }
+          ]
         }
       ]
     }

package/sites/nonprofit/components/np-section-header.json

@@ -3,49 +3,75 @@
   "state": {
     "eyebrow": "",
     "heading": "",
+    "headingAccent": "",
     "subheading": "",
     "align": "center"
   },
   "style": {
     "display": "block",
     "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 2.5rem",
+    "marginTop": "0",
+    "marginBottom": "clamp(2.25rem, 5vw, 3rem)",
+    "marginLeft": "${state.align === 'center' ? 'auto' : '0'}",
+    "marginRight": "${state.align === 'center' ? 'auto' : '0'}",
     "textAlign": "${state.align}"
   },
   "children": [
     {
       "tagName": "p",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
+        "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.5rem",
+        "padding": "0.35rem 0.9rem",
+        "borderRadius": "999px",
+        "backgroundColor": "var(--color-primary-soft)",
         "textTransform": "uppercase",
-        "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
-        "fontWeight": "600",
+        "letterSpacing": "0.14em",
+        "fontSize": "0.75rem",
+        "fontWeight": "800",
         "color": "var(--color-primary)",
-        "margin": "0 0 0.75rem"
+        "margin": "0 0 1rem"
       },
       "textContent": "${state.eyebrow}"
     },
     {
       "tagName": "h2",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
-        "fontWeight": "700",
-        "lineHeight": "1.15",
-        "letterSpacing": "-0.02em",
+        "fontFamily": "var(--font-display)",
+        "fontSize": "clamp(2rem, 4.4vw, 2.9rem)",
+        "fontWeight": "600",
+        "lineHeight": "1.1",
+        "letterSpacing": "-0.015em",
+        "color": "var(--color-primary-deep)",
         "margin": "0"
       },
-      "textContent": "${state.heading}"
+      "children": [
+        { "tagName": "span", "textContent": "${state.heading} " },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.headingAccent ? 'inline' : 'none'}",
+            "fontStyle": "italic",
+            "fontWeight": "500",
+            "color": "var(--color-accent)"
+          },
+          "textContent": "${state.headingAccent}"
+        }
+      ]
     },
     {
       "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"
+        "fontWeight": "600",
+        "margin": "1rem auto 0",
+        "maxWidth": "${state.align === 'center' ? '52ch' : 'none'}",
+        "marginLeft": "${state.align === 'center' ? 'auto' : '0'}",
+        "marginRight": "${state.align === 'center' ? 'auto' : '0'}"
       },
       "textContent": "${state.subheading}"
     }

package/sites/nonprofit/components/np-stat.json

@@ -3,33 +3,53 @@
   "state": {
     "number": "",
     "label": "",
-    "note": ""
+    "note": "",
+    "icon": ""
   },
   "style": {
-    "display": "block",
-    "textAlign": "center",
-    "padding": "0.5rem"
+    "display": "flex",
+    "flexDirection": "column",
+    "alignItems": "flex-start",
+    "gap": "0.35rem",
+    "padding": "1.6rem 1.6rem 1.75rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "borderRadius": "var(--radius)",
+    "boxShadow": "var(--shadow-card)"
   },
   "children": [
+    {
+      "tagName": "span",
+      "style": {
+        "display": "${state.icon ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "2.6rem",
+        "height": "2.6rem",
+        "borderRadius": "999px",
+        "backgroundColor": "var(--color-primary-soft)",
+        "fontSize": "1.3rem",
+        "marginBottom": "0.5rem"
+      },
+      "textContent": "${state.icon}"
+    },
     {
       "tagName": "div",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(2.5rem, 6vw, 3.75rem)",
+        "fontFamily": "var(--font-display)",
+        "fontSize": "clamp(2.4rem, 5vw, 3.4rem)",
         "fontWeight": "700",
         "lineHeight": "1",
-        "color": "var(--color-accent)",
-        "letterSpacing": "-0.02em"
+        "letterSpacing": "-0.02em",
+        "color": "var(--color-primary)"
       },
       "textContent": "${state.number}"
     },
     {
       "tagName": "div",
       "style": {
-        "margin": "0.6rem 0 0",
-        "fontWeight": "600",
-        "fontSize": "1.05rem",
-        "color": "inherit"
+        "fontWeight": "800",
+        "fontSize": "1.02rem",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.label}"
     },
@@ -37,9 +57,10 @@
       "tagName": "p",
       "style": {
         "display": "${state.note ? 'block' : 'none'}",
-        "margin": "0.35rem 0 0",
-        "fontSize": "0.9rem",
-        "opacity": "0.75",
+        "margin": "0.15rem 0 0",
+        "fontSize": "0.92rem",
+        "fontWeight": "600",
+        "color": "var(--color-text-muted)",
         "lineHeight": "1.55"
       },
       "textContent": "${state.note}"

package/sites/nonprofit/components/np-step.json

@@ -3,14 +3,22 @@
   "state": {
     "num": "",
     "title": "",
-    "text": ""
+    "text": "",
+    "badgeBg": "var(--color-primary-soft)",
+    "badgeColor": "var(--color-primary)",
+    "href": "",
+    "linkText": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
+    "display": "flex",
+    "flexDirection": "column",
+    "padding": "2rem 1.9rem 2.1rem",
     "backgroundColor": "var(--color-bg-white)",
     "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)"
+    "borderRadius": "var(--radius-lg)",
+    "boxShadow": "var(--shadow-card)",
+    "transition": "transform 0.18s",
+    ":hover": { "transform": "translateY(-4px)" }
   },
   "children": [
     {
@@ -19,24 +27,23 @@
         "display": "inline-flex",
         "alignItems": "center",
         "justifyContent": "center",
-        "width": "2.75rem",
-        "height": "2.75rem",
-        "borderRadius": "999px",
-        "backgroundColor": "var(--color-primary)",
-        "color": "var(--color-text-white)",
-        "fontFamily": "var(--font-heading)",
-        "fontWeight": "700",
-        "fontSize": "1.25rem",
-        "marginBottom": "1rem"
+        "width": "3.5rem",
+        "height": "3.5rem",
+        "borderRadius": "999px 999px 999px 6px",
+        "backgroundColor": "${state.badgeBg}",
+        "color": "${state.badgeColor}",
+        "fontSize": "1.6rem",
+        "marginBottom": "1.25rem"
       },
       "textContent": "${state.num}"
     },
     {
       "tagName": "h3",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
+        "fontFamily": "var(--font-display)",
+        "fontSize": "1.4rem",
         "fontWeight": "600",
+        "color": "var(--color-primary-deep)",
         "margin": "0 0 0.5rem"
       },
       "textContent": "${state.title}"
@@ -46,10 +53,32 @@
       "style": {
         "margin": "0",
         "color": "var(--color-text-muted)",
-        "fontSize": "0.98rem",
-        "lineHeight": "1.65"
+        "fontSize": "1rem",
+        "fontWeight": "600",
+        "lineHeight": "1.65",
+        "flex": "1"
       },
       "textContent": "${state.text}"
+    },
+    {
+      "tagName": "a",
+      "attributes": { "href": "${state.href}" },
+      "style": {
+        "display": "${state.linkText ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.45rem",
+        "marginTop": "1.35rem",
+        "color": "${state.badgeColor}",
+        "fontWeight": "800",
+        "fontSize": "0.95rem",
+        "textDecoration": "none",
+        "transition": "gap 0.18s",
+        ":hover": { "gap": "0.85rem" }
+      },
+      "children": [
+        { "tagName": "span", "textContent": "${state.linkText}" },
+        { "tagName": "span", "textContent": "→" }
+      ]
     }
   ]
 }

package/sites/nonprofit/components/np-team-member.json

@@ -7,49 +7,55 @@
     "bio": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
+    "display": "flex",
+    "flexDirection": "column",
+    "alignItems": "center",
+    "textAlign": "center",
+    "padding": "2rem 1.75rem 2.1rem",
     "backgroundColor": "var(--color-bg-cream)",
     "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)",
-    "textAlign": "center"
+    "borderRadius": "var(--radius-lg)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "width": "4.5rem",
-        "height": "4.5rem",
-        "margin": "0 auto 1rem",
-        "borderRadius": "999px",
+        "width": "4.75rem",
+        "height": "4.75rem",
+        "margin": "0 0 1.15rem",
+        "borderRadius": "58% 42% 47% 53% / 55% 50% 50% 45%",
         "backgroundColor": "var(--color-primary)",
         "color": "var(--color-text-white)",
         "display": "flex",
         "alignItems": "center",
         "justifyContent": "center",
-        "fontFamily": "var(--font-heading)",
+        "fontFamily": "var(--font-display)",
         "fontWeight": "700",
-        "fontSize": "1.4rem"
+        "fontSize": "1.55rem",
+        "boxShadow": "0 14px 26px -14px rgba(23,58,43,0.8)"
       },
       "textContent": "${state.initials}"
     },
     {
       "tagName": "h3",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
+        "fontFamily": "var(--font-display)",
+        "fontSize": "1.32rem",
         "fontWeight": "600",
-        "margin": "0 0 0.2rem"
+        "color": "var(--color-primary-deep)",
+        "margin": "0 0 0.15rem"
       },
       "textContent": "${state.name}"
     },
     {
       "tagName": "p",
       "style": {
-        "margin": "0 0 0.75rem",
-        "color": "var(--color-primary)",
-        "fontWeight": "600",
-        "fontSize": "0.9rem"
+        "margin": "0 0 0.85rem",
+        "color": "var(--color-accent)",
+        "fontWeight": "800",
+        "fontSize": "0.85rem",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.06em"
       },
       "textContent": "${state.role}"
     },
@@ -58,8 +64,9 @@
       "style": {
         "margin": "0",
         "color": "var(--color-text-muted)",
-        "fontSize": "0.95rem",
-        "lineHeight": "1.6"
+        "fontSize": "0.98rem",
+        "fontWeight": "600",
+        "lineHeight": "1.65"
       },
       "textContent": "${state.bio}"
     }