@jxsuite/starters 0.34.0 → 0.35.0

package/sites/real-estate/components/re-nav.json

@@ -1,15 +1,15 @@
 {
   "tagName": "re-nav",
   "state": {
-    "brand": "Northshore Realty"
+    "brand": "Northshore"
   },
   "style": {
     "display": "block",
     "position": "sticky",
     "top": "0",
     "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.9)",
-    "backdropFilter": "blur(8px)",
+    "backgroundColor": "rgba(255, 255, 255, 0.86)",
+    "backdropFilter": "blur(14px)",
     "borderBottom": "1px solid var(--color-border)"
   },
   "children": [
@@ -18,26 +18,21 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "1rem 1.5rem",
+        "padding": "0.85rem 1.5rem",
         "display": "flex",
         "alignItems": "center",
-        "justifyContent": "space-between",
-        "gap": "1.5rem"
+        "gap": "1.25rem"
       },
       "children": [
         {
           "tagName": "a",
           "attributes": { "href": "/" },
           "style": {
-            "display": "flex",
+            "display": "inline-flex",
             "alignItems": "center",
-            "gap": "0.5rem",
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.35rem",
-            "fontWeight": "800",
-            "color": "var(--color-text-primary)",
+            "gap": "0.6rem",
             "textDecoration": "none",
-            "letterSpacing": "-0.02em"
+            "marginRight": "0.5rem"
           },
           "children": [
             {
@@ -46,16 +41,49 @@
                 "display": "inline-flex",
                 "alignItems": "center",
                 "justifyContent": "center",
-                "width": "1.75rem",
-                "height": "1.75rem",
-                "borderRadius": "0.4rem",
-                "backgroundColor": "var(--color-primary)",
+                "width": "2rem",
+                "height": "2rem",
+                "borderRadius": "0.55rem",
+                "background": "linear-gradient(150deg, var(--color-accent-bright), var(--color-primary))",
                 "color": "var(--color-text-white)",
-                "fontSize": "1rem"
+                "fontSize": "1.05rem",
+                "boxShadow": "0 6px 16px -6px rgba(15,118,110,0.6)"
               },
               "textContent": "⌂"
             },
-            { "tagName": "span", "textContent": "${state.brand}" }
+            {
+              "tagName": "span",
+              "style": {
+                "display": "flex",
+                "flexDirection": "column",
+                "lineHeight": "1"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.15rem",
+                    "fontWeight": "800",
+                    "letterSpacing": "-0.03em",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.brand} Realty"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontSize": "0.62rem",
+                    "fontWeight": "700",
+                    "letterSpacing": "0.22em",
+                    "textTransform": "uppercase",
+                    "color": "var(--color-text-muted)",
+                    "marginTop": "0.2rem"
+                  },
+                  "textContent": "North Shore MLS"
+                }
+              ]
+            }
           ]
         },
         {
@@ -63,53 +91,124 @@
           "style": {
             "display": "flex",
             "alignItems": "center",
-            "gap": "1.75rem",
-            "@--sm": { "gap": "1rem" }
+            "gap": "1.4rem",
+            "marginLeft": "0.5rem",
+            "@--md": { "display": "none" }
           },
           "children": [
             {
               "tagName": "a",
               "attributes": { "href": "/listings/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-text-secondary)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.92rem",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Buy"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/listings/" },
+              "style": {
+                "color": "var(--color-text-secondary)",
                 "textDecoration": "none",
                 "fontWeight": "600",
-                "fontSize": "0.95rem",
+                "fontSize": "0.92rem",
+                "transition": "color 0.15s",
                 ":hover": { "color": "var(--color-primary)" }
               },
               "textContent": "Listings"
             },
             {
               "tagName": "a",
-              "attributes": { "href": "/about/" },
+              "attributes": { "href": "/#neighborhoods" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-text-secondary)",
                 "textDecoration": "none",
                 "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
+                "fontSize": "0.92rem",
+                "transition": "color 0.15s",
                 ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "About"
+              "textContent": "Neighborhoods"
             },
             {
               "tagName": "a",
-              "attributes": { "href": "/contact/" },
+              "attributes": { "href": "/about/" },
               "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.25rem",
-                "borderRadius": "var(--radius)",
+                "color": "var(--color-text-secondary)",
                 "textDecoration": "none",
-                "fontWeight": "700",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "fontWeight": "600",
+                "fontSize": "0.92rem",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "Contact"
+              "textContent": "About"
             }
           ]
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "/listings/", "aria-label": "Search homes" },
+          "style": {
+            "marginLeft": "auto",
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.55rem",
+            "padding": "0.5rem 0.9rem 0.5rem 0.75rem",
+            "borderRadius": "999px",
+            "border": "1px solid var(--color-border-strong)",
+            "backgroundColor": "var(--color-bg-white)",
+            "color": "var(--color-text-muted)",
+            "textDecoration": "none",
+            "fontSize": "0.88rem",
+            "fontWeight": "600",
+            "transition": "border-color 0.15s, color 0.15s",
+            "@--sm": { "display": "none" },
+            ":hover": { "borderColor": "var(--color-primary)", "color": "var(--color-primary)" }
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "width": "1.5rem",
+                "height": "1.5rem",
+                "borderRadius": "999px",
+                "backgroundColor": "var(--color-teal-tint)",
+                "color": "var(--color-primary)",
+                "fontSize": "0.85rem"
+              },
+              "textContent": "⌕"
+            },
+            { "tagName": "span", "textContent": "Search homes" }
+          ]
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "/contact/" },
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.6rem 1.15rem",
+            "borderRadius": "999px",
+            "textDecoration": "none",
+            "fontWeight": "700",
+            "fontSize": "0.9rem",
+            "transition": "background-color 0.15s, transform 0.15s",
+            ":hover": {
+              "backgroundColor": "var(--color-primary-hover)",
+              "transform": "translateY(-1px)"
+            }
+          },
+          "textContent": "List with us"
         }
       ]
     }

package/sites/real-estate/components/re-neighborhood.json

@@ -0,0 +1,135 @@
+{
+  "tagName": "re-neighborhood",
+  "state": {
+    "name": "",
+    "count": "",
+    "price": "",
+    "href": "/listings/",
+    "image": { "type": "string", "format": "image", "default": "" }
+  },
+  "style": { "display": "block", "minWidth": "0" },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": { "href": "${state.href}" },
+      "style": {
+        "position": "relative",
+        "display": "block",
+        "overflow": "hidden",
+        "borderRadius": "var(--radius)",
+        "textDecoration": "none",
+        "color": "var(--color-text-white)",
+        "aspectRatio": "4 / 5",
+        "backgroundColor": "var(--color-bg-dark)",
+        ":hover img": { "transform": "scale(1.07)" },
+        ":hover .re-nb-go": { "transform": "translateX(0.2rem)" }
+      },
+      "children": [
+        {
+          "tagName": "img",
+          "attributes": { "src": "${state.image}", "alt": "${state.name}", "loading": "lazy" },
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "width": "100%",
+            "height": "100%",
+            "objectFit": "cover",
+            "display": "block",
+            "transition": "transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "background": "linear-gradient(to top, rgba(11,18,32,0.9) 0%, rgba(11,18,32,0.35) 45%, rgba(11,18,32,0.05) 75%)"
+          }
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "position": "absolute",
+            "top": "0.85rem",
+            "right": "0.85rem",
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.3rem",
+            "padding": "0.28rem 0.6rem",
+            "borderRadius": "999px",
+            "backgroundColor": "rgba(255,255,255,0.16)",
+            "border": "1px solid rgba(255,255,255,0.25)",
+            "backdropFilter": "blur(6px)",
+            "fontSize": "0.72rem",
+            "fontWeight": "700",
+            "fontVariantNumeric": "tabular-nums"
+          },
+          "textContent": "${state.count} listings"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "left": "0",
+            "right": "0",
+            "bottom": "0",
+            "padding": "1.15rem"
+          },
+          "children": [
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-display)",
+                "fontSize": "1.35rem",
+                "fontWeight": "500",
+                "letterSpacing": "-0.01em",
+                "margin": "0 0 0.3rem",
+                "color": "var(--color-text-white)"
+              },
+              "textContent": "${state.name}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "center",
+                "justifyContent": "space-between",
+                "gap": "0.5rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontSize": "0.82rem",
+                    "fontWeight": "600",
+                    "color": "rgba(255,255,255,0.82)",
+                    "fontVariantNumeric": "tabular-nums"
+                  },
+                  "textContent": "Median ${state.price}"
+                },
+                {
+                  "tagName": "span",
+                  "attributes": { "class": "re-nb-go" },
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "width": "1.7rem",
+                    "height": "1.7rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-accent-bright)",
+                    "color": "var(--color-ink)",
+                    "fontSize": "0.85rem",
+                    "fontWeight": "800",
+                    "transition": "transform 0.2s"
+                  },
+                  "textContent": "→"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/real-estate/components/re-section-header.json

@@ -4,37 +4,52 @@
     "eyebrow": "",
     "heading": "",
     "subheading": "",
-    "align": "center"
+    "align": "left"
   },
   "style": {
     "display": "block",
-    "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 2.5rem",
+    "maxWidth": "${state.align === 'center' ? 'var(--max-width-narrow)' : 'var(--max-width)'}",
+    "margin": "${state.align === 'center' ? '0 auto 2.75rem' : '0 auto 2.5rem'}",
+    "padding": "0 1.5rem",
     "textAlign": "${state.align}"
   },
   "children": [
     {
       "tagName": "p",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
+        "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.6rem",
         "textTransform": "uppercase",
-        "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
+        "letterSpacing": "0.14em",
+        "fontSize": "0.74rem",
         "fontWeight": "700",
         "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": "2px",
+            "backgroundColor": "var(--color-accent)",
+            "borderRadius": "2px"
+          }
+        },
+        { "tagName": "span", "textContent": "${state.eyebrow}" }
+      ]
     },
     {
       "tagName": "h2",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
-        "fontWeight": "800",
-        "lineHeight": "1.15",
-        "letterSpacing": "-0.02em",
-        "margin": "0"
+        "fontFamily": "var(--font-display)",
+        "fontSize": "clamp(1.9rem, 3.6vw, 2.8rem)",
+        "fontWeight": "500",
+        "lineHeight": "1.1",
+        "letterSpacing": "-0.015em",
+        "margin": "0",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.heading}"
     },
@@ -42,10 +57,11 @@
       "tagName": "p",
       "style": {
         "display": "${state.subheading ? 'block' : 'none'}",
-        "fontSize": "1.1rem",
-        "lineHeight": "1.7",
+        "fontSize": "1.08rem",
+        "lineHeight": "1.65",
         "color": "var(--color-text-muted)",
-        "margin": "1rem 0 0"
+        "margin": "${state.align === 'center' ? '1rem auto 0' : '1rem 0 0'}",
+        "maxWidth": "56ch"
       },
       "textContent": "${state.subheading}"
     }

package/sites/real-estate/components/re-stat.json

@@ -6,29 +6,30 @@
   },
   "style": {
     "display": "block",
-    "textAlign": "center",
-    "padding": "1rem"
+    "padding": "0.5rem 0"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(2.25rem, 5vw, 3rem)",
+        "fontSize": "clamp(2.4rem, 5vw, 3.25rem)",
         "fontWeight": "800",
         "lineHeight": "1",
-        "color": "var(--color-primary)",
-        "letterSpacing": "-0.02em"
+        "letterSpacing": "-0.03em",
+        "color": "var(--color-text-white)",
+        "fontVariantNumeric": "tabular-nums"
       },
       "textContent": "${state.value}"
     },
     {
       "tagName": "div",
       "style": {
-        "marginTop": "0.5rem",
-        "fontSize": "0.95rem",
-        "color": "var(--color-text-muted)",
-        "fontWeight": "600"
+        "marginTop": "0.6rem",
+        "fontSize": "0.9rem",
+        "color": "rgba(255,255,255,0.62)",
+        "fontWeight": "600",
+        "lineHeight": "1.4"
       },
       "textContent": "${state.label}"
     }

package/sites/real-estate/components/re-step.json

@@ -7,27 +7,29 @@
   },
   "style": {
     "display": "block",
-    "position": "relative",
-    "paddingLeft": "3.5rem"
+    "padding": "1.75rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "position": "absolute",
-        "left": "0",
-        "top": "0",
         "display": "flex",
         "alignItems": "center",
         "justifyContent": "center",
-        "width": "2.5rem",
-        "height": "2.5rem",
-        "borderRadius": "999px",
-        "backgroundColor": "var(--color-primary)",
-        "color": "var(--color-text-white)",
+        "width": "2.75rem",
+        "height": "2.75rem",
+        "borderRadius": "0.7rem",
+        "backgroundColor": "var(--color-teal-tint)",
+        "border": "1px solid var(--color-accent-soft)",
+        "color": "var(--color-primary)",
         "fontFamily": "var(--font-heading)",
         "fontWeight": "800",
-        "fontSize": "1.1rem"
+        "fontSize": "1.2rem",
+        "fontVariantNumeric": "tabular-nums",
+        "marginBottom": "1.1rem"
       },
       "textContent": "${state.number}"
     },
@@ -37,7 +39,8 @@
         "fontFamily": "var(--font-heading)",
         "fontSize": "1.2rem",
         "fontWeight": "700",
-        "margin": "0.3rem 0 0.4rem"
+        "letterSpacing": "-0.01em",
+        "margin": "0 0 0.5rem"
       },
       "textContent": "${state.title}"
     },

package/sites/real-estate/components/re-testimonial.json

@@ -6,47 +6,84 @@
     "role": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
+    "display": "flex",
+    "flexDirection": "column",
+    "padding": "1.85rem",
     "backgroundColor": "var(--color-bg-white)",
     "border": "1px solid var(--color-border)",
     "borderRadius": "var(--radius)",
-    "boxShadow": "0 4px 20px rgba(15,23,42,0.05)"
+    "boxShadow": "var(--shadow-card)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "color": "var(--color-primary)",
-        "fontSize": "1.1rem",
-        "marginBottom": "0.75rem",
-        "letterSpacing": "0.1em"
+        "color": "var(--color-accent-bright)",
+        "fontSize": "0.95rem",
+        "marginBottom": "1rem",
+        "letterSpacing": "0.14em"
       },
       "textContent": "★★★★★"
     },
     {
       "tagName": "p",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.12rem",
-        "lineHeight": "1.6",
-        "fontWeight": "500",
-        "margin": "0 0 1.25rem"
+        "fontFamily": "var(--font-display)",
+        "fontStyle": "italic",
+        "fontSize": "1.2rem",
+        "lineHeight": "1.5",
+        "fontWeight": "400",
+        "color": "var(--color-text-primary)",
+        "margin": "0 0 1.5rem",
+        "flex": "1"
       },
       "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.5rem",
+            "height": "2.5rem",
+            "borderRadius": "999px",
+            "backgroundColor": "var(--color-teal-tint)",
+            "color": "var(--color-primary)",
+            "fontFamily": "var(--font-heading)",
+            "fontWeight": "800",
+            "fontSize": "1rem"
+          },
+          "textContent": "${state.author.charAt(0)}"
         },
         {
           "tagName": "div",
-          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
-          "textContent": "${state.role}"
+          "children": [
+            {
+              "tagName": "div",
+              "style": { "fontWeight": "700", "fontSize": "0.95rem" },
+              "textContent": "${state.author}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "fontSize": "0.85rem",
+                "color": "var(--color-text-muted)",
+                "fontWeight": "500"
+              },
+              "textContent": "${state.role}"
+            }
+          ]
         }
       ]
     }