@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -3,122 +3,197 @@
   "state": {
     "eyebrow": "",
     "heading": "",
+    "headingAccent": "",
     "text": "",
     "cta": "Donate Now",
     "ctaHref": "/get-involved/",
     "cta2": "",
     "cta2Href": "/get-involved/",
+    "reassurance": "Secure & tax-deductible · 94¢ of every dollar goes straight to programs",
     "bg": { "type": "string", "format": "image", "default": "" }
   },
   "style": {
     "display": "block",
-    "position": "relative",
-    "backgroundColor": "var(--color-bg-dark)",
-    "backgroundImage": "url('${state.bg}')",
-    "backgroundSize": "cover",
-    "backgroundPosition": "center",
-    "color": "var(--color-text-white)"
+    "padding": "clamp(3rem, 7vw, 5rem) 1.5rem",
+    "backgroundColor": "var(--color-bg-cream)"
   },
   "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "position": "absolute",
-        "inset": "0",
-        "background": "linear-gradient(180deg, rgba(20,49,42,0.86) 0%, rgba(20,49,42,0.92) 100%)"
-      }
-    },
     {
       "tagName": "div",
       "style": {
         "position": "relative",
-        "zIndex": "10",
-        "maxWidth": "var(--max-width-narrow)",
+        "overflow": "hidden",
+        "maxWidth": "var(--max-width-wide)",
         "margin": "0 auto",
-        "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
-        "textAlign": "center"
+        "borderRadius": "var(--radius-lg)",
+        "background": "linear-gradient(135deg, #21563c 0%, var(--color-primary-deep) 55%, #12301f 100%)",
+        "color": "var(--color-text-white)"
       },
       "children": [
         {
-          "tagName": "p",
-          "style": {
-            "display": "${state.eyebrow ? 'block' : 'none'}",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.16em",
-            "fontSize": "0.8rem",
-            "fontWeight": "600",
-            "color": "#bbf7d0",
-            "margin": "0 0 0.9rem"
-          },
-          "textContent": "${state.eyebrow}"
-        },
-        {
-          "tagName": "h2",
+          "tagName": "div",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
-            "fontWeight": "700",
-            "lineHeight": "1.15",
-            "margin": "0 0 1rem"
-          },
-          "textContent": "${state.heading}"
+            "position": "absolute",
+            "top": "-8rem",
+            "right": "-6rem",
+            "width": "26rem",
+            "height": "26rem",
+            "borderRadius": "50%",
+            "background": "radial-gradient(circle at center, rgba(233,166,61,0.35) 0%, rgba(233,166,61,0) 70%)"
+          }
         },
         {
-          "tagName": "p",
+          "tagName": "div",
           "style": {
-            "fontSize": "1.1rem",
-            "lineHeight": "1.7",
-            "opacity": "0.9",
-            "margin": "0 0 2rem"
-          },
-          "textContent": "${state.text}"
+            "position": "absolute",
+            "bottom": "-10rem",
+            "left": "-7rem",
+            "width": "24rem",
+            "height": "24rem",
+            "borderRadius": "50%",
+            "background": "radial-gradient(circle at center, rgba(242,106,61,0.3) 0%, rgba(242,106,61,0) 70%)"
+          }
         },
         {
           "tagName": "div",
           "style": {
-            "display": "flex",
-            "gap": "0.75rem",
-            "flexWrap": "wrap",
-            "justifyContent": "center"
+            "position": "relative",
+            "zIndex": "2",
+            "maxWidth": "var(--max-width-narrow)",
+            "margin": "0 auto",
+            "padding": "clamp(3rem, 7vw, 4.75rem) 1.5rem",
+            "textAlign": "center"
           },
           "children": [
             {
-              "tagName": "a",
-              "attributes": { "href": "${state.ctaHref}" },
+              "tagName": "p",
               "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-accent)",
-                "color": "var(--color-text-white)",
-                "padding": "0.95rem 2.5rem",
+                "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+                "alignItems": "center",
+                "gap": "0.5rem",
+                "padding": "0.35rem 0.95rem",
                 "borderRadius": "999px",
-                "fontSize": "1.05rem",
+                "backgroundColor": "rgba(255,255,255,0.12)",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.14em",
+                "fontSize": "0.75rem",
+                "fontWeight": "800",
+                "color": "var(--color-gold)",
+                "margin": "0 0 1.25rem"
+              },
+              "textContent": "${state.eyebrow}"
+            },
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(2.1rem, 4.6vw, 3.2rem)",
                 "fontWeight": "600",
-                "textDecoration": "none",
-                "boxShadow": "0 8px 24px rgba(234,88,12,0.4)",
-                "transition": "background-color 0.15s, transform 0.15s",
-                ":hover": {
-                  "backgroundColor": "var(--color-accent-hover)",
-                  "transform": "translateY(-1px)"
-                }
+                "lineHeight": "1.08",
+                "letterSpacing": "-0.015em",
+                "margin": "0 0 1.15rem"
               },
-              "textContent": "${state.cta}"
+              "children": [
+                { "tagName": "span", "textContent": "${state.heading} " },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontStyle": "italic",
+                    "fontWeight": "500",
+                    "color": "var(--color-gold)"
+                  },
+                  "textContent": "${state.headingAccent}"
+                }
+              ]
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "${state.cta2Href}" },
+              "tagName": "p",
               "style": {
-                "display": "${state.cta2 ? 'inline-block' : 'none'}",
-                "border": "1px solid rgba(255,255,255,0.6)",
-                "color": "var(--color-text-white)",
-                "padding": "0.95rem 2rem",
-                "borderRadius": "999px",
-                "fontSize": "1.05rem",
+                "fontSize": "1.14rem",
                 "fontWeight": "600",
-                "textDecoration": "none",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "rgba(255,255,255,0.14)" }
+                "lineHeight": "1.65",
+                "color": "rgba(255,255,255,0.85)",
+                "margin": "0 auto 2rem",
+                "maxWidth": "52ch"
+              },
+              "textContent": "${state.text}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "gap": "0.85rem",
+                "flexWrap": "wrap",
+                "justifyContent": "center"
+              },
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.ctaHref}" },
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "gap": "0.5rem",
+                    "backgroundColor": "var(--color-accent)",
+                    "color": "var(--color-text-white)",
+                    "padding": "1rem 2.5rem",
+                    "borderRadius": "999px",
+                    "fontSize": "1.05rem",
+                    "fontWeight": "800",
+                    "textDecoration": "none",
+                    "boxShadow": "0 18px 36px -14px rgba(242,106,61,0.85)",
+                    "transition": "background-color 0.15s, transform 0.15s",
+                    ":hover": {
+                      "backgroundColor": "var(--color-accent-hover)",
+                      "transform": "translateY(-2px)"
+                    }
+                  },
+                  "children": [
+                    { "tagName": "span", "style": { "fontSize": "0.95rem" }, "textContent": "❤" },
+                    { "tagName": "span", "textContent": "${state.cta}" }
+                  ]
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.cta2Href}" },
+                  "style": {
+                    "display": "${state.cta2 ? 'inline-flex' : 'none'}",
+                    "alignItems": "center",
+                    "gap": "0.5rem",
+                    "border": "1px solid rgba(255,255,255,0.55)",
+                    "color": "var(--color-text-white)",
+                    "padding": "1rem 2rem",
+                    "borderRadius": "999px",
+                    "fontSize": "1.05rem",
+                    "fontWeight": "800",
+                    "textDecoration": "none",
+                    "transition": "background-color 0.15s",
+                    ":hover": { "backgroundColor": "rgba(255,255,255,0.14)" }
+                  },
+                  "textContent": "${state.cta2}"
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.reassurance ? 'flex' : 'none'}",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "gap": "0.5rem",
+                "margin": "1.75rem 0 0",
+                "fontSize": "0.88rem",
+                "fontWeight": "700",
+                "color": "rgba(255,255,255,0.72)"
               },
-              "textContent": "${state.cta2}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": { "color": "var(--color-gold)" },
+                  "textContent": "🔒"
+                },
+                { "tagName": "span", "textContent": "${state.reassurance}" }
+              ]
             }
           ]
         }

package/sites/nonprofit/components/np-donate-tier.json

@@ -4,6 +4,7 @@
     "amount": "",
     "title": "",
     "text": "",
+    "icon": "",
     "featured": false,
     "cta": "Give this amount",
     "ctaHref": "/get-involved/"
@@ -11,59 +12,80 @@
   "style": {
     "display": "flex",
     "flexDirection": "column",
-    "padding": "1.75rem",
-    "backgroundColor": "var(--color-bg-white)",
-    "borderRadius": "var(--radius)",
-    "border": "${state.featured ? '2px solid var(--color-accent)' : '1px solid var(--color-border)'}",
-    "boxShadow": "${state.featured ? '0 12px 32px rgba(234,88,12,0.14)' : '0 4px 20px rgba(20,49,42,0.05)'}"
+    "position": "relative",
+    "padding": "2rem 1.9rem 2.1rem",
+    "backgroundColor": "${state.featured ? 'var(--color-primary-deep)' : 'var(--color-bg-white)'}",
+    "color": "${state.featured ? 'var(--color-text-white)' : 'var(--color-text-primary)'}",
+    "borderRadius": "var(--radius-lg)",
+    "border": "${state.featured ? '2px solid var(--color-gold)' : '1px solid var(--color-border)'}",
+    "boxShadow": "${state.featured ? 'var(--shadow-float)' : 'var(--shadow-card)'}",
+    "transform": "${state.featured ? 'translateY(-0.5rem)' : 'none'}"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "display": "${state.featured ? 'inline-block' : 'none'}",
+        "display": "${state.featured ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.35rem",
         "alignSelf": "flex-start",
-        "backgroundColor": "var(--color-accent)",
-        "color": "var(--color-text-white)",
+        "backgroundColor": "var(--color-gold)",
+        "color": "var(--color-primary-deep)",
         "fontSize": "0.72rem",
-        "fontWeight": "600",
+        "fontWeight": "800",
         "textTransform": "uppercase",
         "letterSpacing": "0.08em",
-        "padding": "0.25rem 0.7rem",
+        "padding": "0.3rem 0.8rem",
         "borderRadius": "999px",
-        "marginBottom": "0.9rem"
+        "marginBottom": "1rem"
       },
-      "textContent": "Most popular"
+      "textContent": "★ Most loved"
     },
     {
       "tagName": "div",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "2.5rem",
+        "display": "inline-flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "3rem",
+        "height": "3rem",
+        "borderRadius": "999px",
+        "backgroundColor": "${state.featured ? 'rgba(255,255,255,0.12)' : 'var(--color-primary-soft)'}",
+        "fontSize": "1.5rem",
+        "marginBottom": "1.1rem"
+      },
+      "textContent": "${state.icon}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "fontFamily": "var(--font-display)",
+        "fontSize": "2.6rem",
         "fontWeight": "700",
         "lineHeight": "1",
-        "color": "var(--color-primary)"
+        "color": "${state.featured ? 'var(--color-gold)' : 'var(--color-primary)'}"
       },
       "textContent": "${state.amount}"
     },
     {
       "tagName": "h3",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.15rem",
+        "fontFamily": "var(--font-display)",
+        "fontSize": "1.3rem",
         "fontWeight": "600",
-        "margin": "0.9rem 0 0.4rem"
+        "margin": "0.85rem 0 0.4rem"
       },
       "textContent": "${state.title}"
     },
     {
       "tagName": "p",
       "style": {
-        "margin": "0 0 1.5rem",
-        "color": "var(--color-text-muted)",
-        "fontSize": "0.95rem",
+        "margin": "0 0 1.6rem",
+        "fontSize": "0.98rem",
+        "fontWeight": "600",
         "lineHeight": "1.6",
-        "flex": "1"
+        "flex": "1",
+        "color": "${state.featured ? 'rgba(255,255,255,0.82)' : 'var(--color-text-muted)'}"
       },
       "textContent": "${state.text}"
     },
@@ -71,19 +93,24 @@
       "tagName": "a",
       "attributes": { "href": "${state.ctaHref}" },
       "style": {
-        "display": "block",
-        "textAlign": "center",
-        "backgroundColor": "${state.featured ? 'var(--color-accent)' : 'var(--color-primary)'}",
-        "color": "var(--color-text-white)",
-        "padding": "0.75rem 1.25rem",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "gap": "0.4rem",
+        "backgroundColor": "${state.featured ? 'var(--color-gold)' : 'var(--color-accent)'}",
+        "color": "${state.featured ? 'var(--color-primary-deep)' : 'var(--color-text-white)'}",
+        "padding": "0.85rem 1.25rem",
         "borderRadius": "999px",
         "textDecoration": "none",
-        "fontWeight": "600",
-        "fontSize": "0.98rem",
-        "transition": "opacity 0.15s",
-        ":hover": { "opacity": "0.9" }
+        "fontWeight": "800",
+        "fontSize": "1rem",
+        "transition": "transform 0.15s, opacity 0.15s",
+        ":hover": { "transform": "translateY(-1px)", "opacity": "0.94" }
       },
-      "textContent": "${state.cta}"
+      "children": [
+        { "tagName": "span", "style": { "fontSize": "0.9rem" }, "textContent": "❤" },
+        { "tagName": "span", "textContent": "${state.cta}" }
+      ]
     }
   ]
 }

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

@@ -6,8 +6,9 @@
     "text": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
+    "display": "flex",
+    "flexDirection": "column",
+    "padding": "1.9rem 1.75rem 2rem",
     "backgroundColor": "var(--color-bg-cream)",
     "borderRadius": "var(--radius)",
     "border": "1px solid var(--color-border)"
@@ -19,22 +20,24 @@
         "display": "inline-flex",
         "alignItems": "center",
         "justifyContent": "center",
-        "width": "3rem",
-        "height": "3rem",
+        "width": "3.1rem",
+        "height": "3.1rem",
         "borderRadius": "999px",
-        "backgroundColor": "rgba(21,128,61,0.1)",
+        "backgroundColor": "var(--color-bg-white)",
+        "border": "1px solid var(--color-border)",
         "fontSize": "1.5rem",
         "lineHeight": "1",
-        "marginBottom": "1rem"
+        "marginBottom": "1.1rem"
       },
       "textContent": "${state.icon}"
     },
     {
       "tagName": "h3",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.25rem",
+        "fontFamily": "var(--font-display)",
+        "fontSize": "1.35rem",
         "fontWeight": "600",
+        "color": "var(--color-primary-deep)",
         "margin": "0 0 0.5rem"
       },
       "textContent": "${state.title}"
@@ -44,7 +47,8 @@
       "style": {
         "margin": "0",
         "color": "var(--color-text-muted)",
-        "fontSize": "0.98rem",
+        "fontSize": "1rem",
+        "fontWeight": "600",
         "lineHeight": "1.65"
       },
       "textContent": "${state.text}"