@jxsuite/starters 0.34.0 → 0.35.1

package/sites/nonprofit/components/np-impact-band.json

@@ -0,0 +1,108 @@
+{
+  "tagName": "np-impact-band",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "headingAccent": ""
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "overflow": "hidden",
+    "backgroundColor": "var(--color-primary-deep)",
+    "color": "var(--color-text-white)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "top": "-9rem",
+        "left": "-7rem",
+        "width": "24rem",
+        "height": "24rem",
+        "borderRadius": "50%",
+        "background": "radial-gradient(circle at center, rgba(47,125,85,0.55) 0%, rgba(47,125,85,0) 70%)"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "bottom": "-11rem",
+        "right": "-8rem",
+        "width": "28rem",
+        "height": "28rem",
+        "borderRadius": "50%",
+        "background": "radial-gradient(circle at center, rgba(233,166,61,0.28) 0%, rgba(233,166,61,0) 70%)"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "2",
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "maxWidth": "var(--max-width-narrow)",
+            "margin": "0 auto clamp(2.25rem, 5vw, 3rem)",
+            "textAlign": "center"
+          },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+                "alignItems": "center",
+                "gap": "0.5rem",
+                "padding": "0.35rem 0.95rem",
+                "borderRadius": "999px",
+                "backgroundColor": "rgba(255,255,255,0.1)",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.16em",
+                "fontSize": "0.75rem",
+                "fontWeight": "800",
+                "color": "var(--color-gold)",
+                "margin": "0 0 1.1rem"
+              },
+              "textContent": "${state.eyebrow}"
+            },
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(2rem, 4.4vw, 2.9rem)",
+                "fontWeight": "600",
+                "lineHeight": "1.1",
+                "letterSpacing": "-0.01em",
+                "margin": "0"
+              },
+              "children": [
+                { "tagName": "span", "textContent": "${state.heading} " },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontStyle": "italic",
+                    "fontWeight": "500",
+                    "color": "var(--color-gold)"
+                  },
+                  "textContent": "${state.headingAccent}"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [{ "tagName": "slot" }]
+        }
+      ]
+    }
+  ]
+}

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

@@ -1,9 +1,12 @@
 {
   "tagName": "np-intro",
   "state": {
+    "eyebrow": "Our mission",
     "image": { "type": "string", "format": "image", "default": "" },
     "imageAlt": "",
-    "reverse": false
+    "reverse": false,
+    "signNumber": "17",
+    "signLabel": "years rooted in Rivertown"
   },
   "style": {
     "display": "block",
@@ -17,29 +20,95 @@
         "margin": "0 auto",
         "display": "grid",
         "gridTemplateColumns": "1fr 1fr",
-        "gap": "clamp(2rem, 5vw, 4rem)",
+        "gap": "clamp(2.5rem, 6vw, 5rem)",
         "alignItems": "center",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2.75rem" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "style": {
+            "position": "relative",
+            "order": "${state.reverse ? '2' : '1'}",
+            "@--md": { "order": "1", "maxWidth": "480px" }
+          },
           "children": [
             {
-              "tagName": "img",
-              "attributes": {
-                "src": "${state.image}",
-                "alt": "${state.imageAlt}",
-                "loading": "lazy"
-              },
+              "tagName": "div",
               "style": {
-                "width": "100%",
-                "height": "auto",
-                "borderRadius": "var(--radius)",
-                "display": "block",
-                "boxShadow": "0 12px 40px rgba(20,49,42,0.16)"
+                "position": "absolute",
+                "inset": "-1.1rem 1.25rem 1.25rem -1.1rem",
+                "borderRadius": "44% 56% 52% 48% / 55% 45% 55% 45%",
+                "backgroundColor": "var(--color-gold-soft)",
+                "opacity": "0.75"
               }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "relative",
+                "aspectRatio": "4 / 3.4",
+                "borderRadius": "var(--radius-lg)",
+                "overflow": "hidden",
+                "boxShadow": "var(--shadow-card)"
+              },
+              "children": [
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "${state.image}",
+                    "alt": "${state.imageAlt}",
+                    "loading": "lazy"
+                  },
+                  "style": {
+                    "position": "absolute",
+                    "inset": "0",
+                    "width": "100%",
+                    "height": "100%",
+                    "objectFit": "cover",
+                    "display": "block"
+                  }
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "absolute",
+                "right": "-0.75rem",
+                "bottom": "-1rem",
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.75rem",
+                "padding": "0.85rem 1.25rem",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "borderRadius": "1.1rem",
+                "boxShadow": "0 18px 34px -16px rgba(23,58,43,0.8)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-display)",
+                    "fontSize": "2rem",
+                    "fontWeight": "700",
+                    "lineHeight": "1"
+                  },
+                  "textContent": "${state.signNumber}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontSize": "0.82rem",
+                    "fontWeight": "700",
+                    "lineHeight": "1.2",
+                    "maxWidth": "12ch",
+                    "opacity": "0.92"
+                  },
+                  "textContent": "${state.signLabel}"
+                }
+              ]
             }
           ]
         },
@@ -47,11 +116,49 @@
           "tagName": "div",
           "style": {
             "order": "${state.reverse ? '1' : '2'}",
-            "fontSize": "1.08rem",
-            "lineHeight": "1.8",
-            "color": "var(--color-text-primary)"
+            "@--md": { "order": "2" }
           },
-          "children": [{ "tagName": "slot" }]
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "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.14em",
+                "fontSize": "0.75rem",
+                "fontWeight": "800",
+                "color": "var(--color-primary)",
+                "margin": "0 0 1.25rem"
+              },
+              "textContent": "${state.eyebrow}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "fontSize": "1.12rem",
+                "lineHeight": "1.8",
+                "color": "var(--color-text-secondary)",
+                "fontWeight": "500",
+                "& h3": {
+                  "fontFamily": "var(--font-display)",
+                  "fontSize": "clamp(1.8rem, 3.6vw, 2.5rem)",
+                  "fontWeight": "600",
+                  "lineHeight": "1.12",
+                  "letterSpacing": "-0.01em",
+                  "color": "var(--color-primary-deep)",
+                  "margin": "0 0 1.1rem"
+                },
+                "& p": { "margin": "0 0 1.1rem" },
+                "& strong": { "color": "var(--color-primary)", "fontWeight": "800" }
+              },
+              "children": [{ "tagName": "slot" }]
+            }
+          ]
         }
       ]
     }

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

@@ -1,133 +1,212 @@
 {
   "tagName": "np-nav",
   "state": {
-    "brand": "Rivertown Foundation"
+    "brand": "Rivertown Foundation",
+    "notice": "Every gift is matched 2× this month — until it's gone."
   },
   "style": {
     "display": "block",
     "position": "sticky",
     "top": "0",
-    "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.92)",
-    "backdropFilter": "blur(8px)",
-    "borderBottom": "1px solid var(--color-border)"
+    "zIndex": "50"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "padding": "0.9rem 1.5rem",
-        "display": "flex",
-        "alignItems": "center",
-        "justifyContent": "space-between",
-        "gap": "1.5rem"
+        "backgroundColor": "var(--color-primary-deep)",
+        "color": "var(--color-text-white)"
       },
       "children": [
         {
-          "tagName": "a",
-          "attributes": { "href": "/" },
+          "tagName": "div",
           "style": {
+            "maxWidth": "var(--max-width-wide)",
+            "margin": "0 auto",
+            "padding": "0.5rem 1.5rem",
             "display": "flex",
             "alignItems": "center",
+            "justifyContent": "center",
             "gap": "0.6rem",
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.3rem",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.82rem",
             "fontWeight": "700",
-            "color": "var(--color-text-primary)",
-            "textDecoration": "none",
-            "letterSpacing": "-0.01em"
+            "textAlign": "center"
           },
           "children": [
             {
               "tagName": "span",
               "style": {
-                "display": "inline-flex",
-                "alignItems": "center",
-                "justifyContent": "center",
-                "width": "2rem",
-                "height": "2rem",
-                "borderRadius": "0.5rem",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "fontSize": "1.1rem"
+                "flex": "none",
+                "fontSize": "0.95rem",
+                "lineHeight": "1"
               },
-              "textContent": "♥"
+              "textContent": "✦"
             },
             {
               "tagName": "span",
-              "textContent": "${state.brand}"
+              "style": { "color": "var(--color-gold-soft)" },
+              "textContent": "${state.notice}"
             }
           ]
-        },
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "backgroundColor": "rgba(251,245,236,0.88)",
+        "backdropFilter": "blur(10px)",
+        "borderBottom": "1px solid var(--color-border)"
+      },
+      "children": [
         {
-          "tagName": "nav",
+          "tagName": "div",
           "style": {
+            "maxWidth": "var(--max-width-wide)",
+            "margin": "0 auto",
+            "padding": "0.85rem 1.5rem",
             "display": "flex",
             "alignItems": "center",
-            "gap": "1.6rem",
-            "@--sm": { "gap": "0.9rem" }
+            "justifyContent": "space-between",
+            "gap": "1.5rem"
           },
           "children": [
             {
               "tagName": "a",
-              "attributes": { "href": "/programs/" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Programs"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/about/" },
+              "attributes": { "href": "/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.7rem",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "color": "var(--color-text-primary)"
               },
-              "textContent": "About"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "width": "2.5rem",
+                    "height": "2.5rem",
+                    "borderRadius": "999px 999px 999px 4px",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "fontSize": "1.2rem",
+                    "boxShadow": "0 8px 18px -8px rgba(47,125,85,0.8)"
+                  },
+                  "textContent": "❤"
+                },
+                {
+                  "tagName": "span",
+                  "style": { "display": "flex", "flexDirection": "column", "lineHeight": "1.05" },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontFamily": "var(--font-display)",
+                        "fontSize": "1.32rem",
+                        "fontWeight": "600",
+                        "letterSpacing": "-0.01em"
+                      },
+                      "textContent": "${state.brand}"
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontFamily": "var(--font-body)",
+                        "fontSize": "0.68rem",
+                        "fontWeight": "700",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.18em",
+                        "color": "var(--color-primary)",
+                        "@--sm": { "display": "none" }
+                      },
+                      "textContent": "Neighbors helping neighbors"
+                    }
+                  ]
+                }
+              ]
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "/get-involved/" },
+              "tagName": "nav",
               "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1.7rem",
+                "@--sm": { "gap": "0.9rem" }
               },
-              "textContent": "Get Involved"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/get-involved/" },
-              "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-accent)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.35rem",
-                "borderRadius": "999px",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "boxShadow": "0 4px 14px rgba(234,88,12,0.28)",
-                "transition": "background-color 0.15s, transform 0.15s",
-                ":hover": {
-                  "backgroundColor": "var(--color-accent-hover)",
-                  "transform": "translateY(-1px)"
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/programs/" },
+                  "style": {
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "fontWeight": "700",
+                    "fontSize": "0.96rem",
+                    "transition": "color 0.15s",
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Programs"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/about/" },
+                  "style": {
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "fontWeight": "700",
+                    "fontSize": "0.96rem",
+                    "transition": "color 0.15s",
+                    "@--md": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "About"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/get-involved/" },
+                  "style": {
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "fontWeight": "700",
+                    "fontSize": "0.96rem",
+                    "transition": "color 0.15s",
+                    "@--sm": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Get Involved"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/get-involved/" },
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "gap": "0.4rem",
+                    "backgroundColor": "var(--color-accent)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.6rem 1.5rem",
+                    "borderRadius": "999px",
+                    "textDecoration": "none",
+                    "fontWeight": "800",
+                    "fontSize": "0.96rem",
+                    "boxShadow": "0 10px 22px -8px rgba(242,106,61,0.75)",
+                    "transition": "background-color 0.15s, transform 0.15s",
+                    ":hover": {
+                      "backgroundColor": "var(--color-accent-hover)",
+                      "transform": "translateY(-1px)"
+                    }
+                  },
+                  "children": [
+                    { "tagName": "span", "style": { "fontSize": "0.9rem" }, "textContent": "❤" },
+                    { "tagName": "span", "textContent": "Donate" }
+                  ]
                 }
-              },
-              "textContent": "Donate"
+              ]
             }
           ]
         }