@jxsuite/starters 0.34.0 → 0.35.1

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

@@ -4,176 +4,529 @@
     "eyebrow": "",
     "heading": "",
     "subheading": "",
-    "cta": "Browse Listings",
+    "cta": "Search homes",
     "ctaHref": "/listings/",
     "bg": { "type": "string", "format": "image", "default": "" }
   },
   "style": {
     "display": "block",
     "position": "relative",
-    "minHeight": "82vh",
-    "color": "var(--color-text-white)",
-    "backgroundImage": "url('${state.bg}')",
-    "backgroundSize": "cover",
-    "backgroundPosition": "center"
+    "overflow": "hidden",
+    "borderBottom": "1px solid var(--color-border)",
+    "backgroundColor": "var(--color-bg-white)",
+    "backgroundImage": "linear-gradient(90deg, var(--color-bg-white) 0%, var(--color-bg-white) 38%, rgba(255,255,255,0.72) 52%, rgba(255,255,255,0.18) 72%, rgba(11,18,32,0.04) 100%), url('${state.bg}')",
+    "backgroundSize": "cover, cover",
+    "backgroundPosition": "center, right center",
+    "backgroundRepeat": "no-repeat",
+    "@--md": {
+      "backgroundImage": "none",
+      "backgroundColor": "var(--color-bg-cream)"
+    }
   },
   "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "position": "absolute",
-        "inset": "0",
-        "background": "linear-gradient(180deg, rgba(15,23,42,0.45) 0%, rgba(15,23,42,0.78) 100%)"
-      }
-    },
     {
       "tagName": "div",
       "style": {
         "position": "relative",
-        "zIndex": "10",
-        "display": "flex",
-        "alignItems": "center",
-        "minHeight": "82vh",
+        "zIndex": "2",
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "4rem 1.5rem"
+        "padding": "clamp(3rem, 6vw, 5.5rem) 1.5rem clamp(3.5rem, 7vw, 6rem)",
+        "display": "grid",
+        "gridTemplateColumns": "1.02fr 0.98fr",
+        "gap": "clamp(2rem, 5vw, 4rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2.25rem" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "maxWidth": "680px", "width": "100%" },
           "children": [
             {
               "tagName": "p",
               "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.18em",
+                "display": "inline-flex",
+                "alignItems": "center",
+                "gap": "0.55rem",
+                "padding": "0.4rem 0.85rem",
+                "borderRadius": "999px",
+                "border": "1px solid var(--color-border)",
+                "backgroundColor": "var(--color-bg-white)",
+                "boxShadow": "0 1px 2px rgba(15,23,42,0.04)",
                 "fontSize": "0.8rem",
-                "fontWeight": "700",
-                "marginBottom": "1rem",
-                "color": "#a5f3fc"
+                "fontWeight": "600",
+                "color": "var(--color-text-secondary)",
+                "margin": "0 0 1.5rem"
               },
-              "textContent": "${state.eyebrow}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "0.5rem",
+                    "height": "0.5rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-accent-bright)",
+                    "boxShadow": "0 0 0 3px var(--color-accent-soft)"
+                  }
+                },
+                { "tagName": "span", "textContent": "${state.eyebrow}" }
+              ]
             },
             {
               "tagName": "h1",
               "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "clamp(2.5rem, 6vw, 4.25rem)",
-                "fontWeight": "800",
-                "lineHeight": "1.08",
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(2.6rem, 5.4vw, 4.3rem)",
+                "fontWeight": "500",
+                "lineHeight": "1.04",
+                "letterSpacing": "-0.02em",
                 "margin": "0 0 1.25rem",
-                "letterSpacing": "-0.03em"
+                "color": "var(--color-text-primary)",
+                "maxWidth": "14ch"
               },
               "textContent": "${state.heading}"
             },
             {
               "tagName": "p",
               "style": {
-                "fontSize": "clamp(1.1rem, 2vw, 1.35rem)",
+                "fontSize": "clamp(1.05rem, 1.6vw, 1.22rem)",
                 "lineHeight": "1.6",
+                "color": "var(--color-text-secondary)",
                 "margin": "0 0 2rem",
-                "opacity": "0.92",
-                "maxWidth": "52ch"
+                "maxWidth": "46ch"
               },
               "textContent": "${state.subheading}"
             },
             {
-              "tagName": "form",
-              "attributes": { "action": "/listings/", "method": "get" },
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "stretch",
+                "gap": "0",
+                "flexWrap": "wrap"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": { "paddingRight": "1.4rem" },
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "1.55rem",
+                        "fontWeight": "800",
+                        "letterSpacing": "-0.02em",
+                        "color": "var(--color-text-primary)",
+                        "fontVariantNumeric": "tabular-nums"
+                      },
+                      "textContent": "20 yrs"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "0.82rem",
+                        "color": "var(--color-text-muted)",
+                        "fontWeight": "600"
+                      },
+                      "textContent": "on the north shore"
+                    }
+                  ]
+                },
+                {
+                  "tagName": "div",
+                  "style": { "padding": "0 1.4rem", "borderLeft": "1px solid var(--color-border)" },
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "1.55rem",
+                        "fontWeight": "800",
+                        "letterSpacing": "-0.02em",
+                        "color": "var(--color-text-primary)",
+                        "fontVariantNumeric": "tabular-nums"
+                      },
+                      "textContent": "1,400+"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "0.82rem",
+                        "color": "var(--color-text-muted)",
+                        "fontWeight": "600"
+                      },
+                      "textContent": "homes closed"
+                    }
+                  ]
+                },
+                {
+                  "tagName": "div",
+                  "style": { "padding": "0 1.4rem", "borderLeft": "1px solid var(--color-border)" },
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "1.55rem",
+                        "fontWeight": "800",
+                        "letterSpacing": "-0.02em",
+                        "color": "var(--color-primary)",
+                        "fontVariantNumeric": "tabular-nums"
+                      },
+                      "textContent": "98%"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "0.82rem",
+                        "color": "var(--color-text-muted)",
+                        "fontWeight": "600"
+                      },
+                      "textContent": "of asking price"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "form",
+          "attributes": { "action": "/listings/", "method": "get" },
+          "style": {
+            "backgroundColor": "var(--color-bg-white)",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius-lg)",
+            "boxShadow": "var(--shadow-float)",
+            "padding": "clamp(1.25rem, 2vw, 1.6rem)"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "gap": "0.35rem",
+                "padding": "0.3rem",
+                "borderRadius": "999px",
+                "backgroundColor": "var(--color-bg-tint)",
+                "marginBottom": "1.25rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "flex": "1",
+                    "textAlign": "center",
+                    "padding": "0.5rem 0.5rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-bg-white)",
+                    "color": "var(--color-text-primary)",
+                    "fontWeight": "700",
+                    "fontSize": "0.88rem",
+                    "boxShadow": "0 1px 3px rgba(15,23,42,0.12)"
+                  },
+                  "textContent": "For Sale"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "flex": "1",
+                    "textAlign": "center",
+                    "padding": "0.5rem 0.5rem",
+                    "borderRadius": "999px",
+                    "color": "var(--color-text-muted)",
+                    "fontWeight": "600",
+                    "fontSize": "0.88rem"
+                  },
+                  "textContent": "For Rent"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "flex": "1",
+                    "textAlign": "center",
+                    "padding": "0.5rem 0.5rem",
+                    "borderRadius": "999px",
+                    "color": "var(--color-text-muted)",
+                    "fontWeight": "600",
+                    "fontSize": "0.88rem"
+                  },
+                  "textContent": "Sold"
+                }
+              ]
+            },
+            {
+              "tagName": "label",
+              "style": {
+                "display": "block",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.1em",
+                "color": "var(--color-text-muted)",
+                "marginBottom": "0.5rem"
+              },
+              "textContent": "Location"
+            },
+            {
+              "tagName": "div",
               "style": {
                 "display": "flex",
+                "alignItems": "center",
                 "gap": "0.5rem",
+                "padding": "0 0.85rem",
+                "border": "1px solid var(--color-border-strong)",
+                "borderRadius": "var(--radius-sm)",
                 "backgroundColor": "var(--color-bg-white)",
-                "padding": "0.6rem",
-                "borderRadius": "calc(var(--radius) + 0.25rem)",
-                "boxShadow": "0 20px 50px rgba(15,23,42,0.35)",
-                "@--sm": { "flexDirection": "column" }
+                "marginBottom": "1rem"
               },
               "children": [
+                {
+                  "tagName": "span",
+                  "style": { "color": "var(--color-primary)", "fontSize": "1rem" },
+                  "textContent": "📍"
+                },
                 {
                   "tagName": "input",
                   "attributes": {
                     "type": "text",
                     "name": "location",
-                    "placeholder": "City or neighborhood",
-                    "aria-label": "Search by city or neighborhood"
+                    "placeholder": "City, neighborhood, or ZIP",
+                    "aria-label": "Search by city, neighborhood, or ZIP"
                   },
                   "style": {
                     "flex": "1",
                     "border": "none",
                     "outline": "none",
-                    "padding": "0.75rem 0.9rem",
-                    "fontSize": "1rem",
+                    "padding": "0.8rem 0",
+                    "fontSize": "0.98rem",
+                    "fontFamily": "inherit",
                     "color": "var(--color-text-primary)",
                     "backgroundColor": "transparent",
                     "minWidth": "0"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "grid",
+                "gridTemplateColumns": "repeat(3, 1fr)",
+                "gap": "0.6rem",
+                "marginBottom": "1.25rem",
+                "@--sm": { "gridTemplateColumns": "1fr" }
+              },
+              "children": [
                 {
-                  "tagName": "select",
-                  "attributes": { "name": "beds", "aria-label": "Minimum bedrooms" },
-                  "style": {
-                    "border": "none",
-                    "borderLeft": "1px solid var(--color-border)",
-                    "outline": "none",
-                    "padding": "0.75rem 0.9rem",
-                    "fontSize": "1rem",
-                    "color": "var(--color-text-muted)",
-                    "backgroundColor": "transparent",
-                    "@--sm": { "borderLeft": "none", "borderTop": "1px solid var(--color-border)" }
-                  },
+                  "tagName": "div",
                   "children": [
                     {
-                      "tagName": "option",
-                      "attributes": { "value": "" },
-                      "textContent": "Any beds"
+                      "tagName": "label",
+                      "style": {
+                        "display": "block",
+                        "fontSize": "0.72rem",
+                        "fontWeight": "700",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.1em",
+                        "color": "var(--color-text-muted)",
+                        "marginBottom": "0.5rem"
+                      },
+                      "textContent": "Max price"
                     },
                     {
-                      "tagName": "option",
-                      "attributes": { "value": "2" },
-                      "textContent": "2+ beds"
-                    },
+                      "tagName": "select",
+                      "attributes": { "name": "price", "aria-label": "Maximum price" },
+                      "style": {
+                        "width": "100%",
+                        "border": "1px solid var(--color-border-strong)",
+                        "borderRadius": "var(--radius-sm)",
+                        "padding": "0.72rem 0.7rem",
+                        "fontSize": "0.92rem",
+                        "fontFamily": "inherit",
+                        "fontWeight": "600",
+                        "color": "var(--color-text-primary)",
+                        "backgroundColor": "var(--color-bg-white)",
+                        "cursor": "pointer"
+                      },
+                      "children": [
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "" },
+                          "textContent": "Any price"
+                        },
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "400000" },
+                          "textContent": "$400k"
+                        },
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "700000" },
+                          "textContent": "$700k"
+                        },
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "1200000" },
+                          "textContent": "$1.2M"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tagName": "div",
+                  "children": [
                     {
-                      "tagName": "option",
-                      "attributes": { "value": "3" },
-                      "textContent": "3+ beds"
+                      "tagName": "label",
+                      "style": {
+                        "display": "block",
+                        "fontSize": "0.72rem",
+                        "fontWeight": "700",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.1em",
+                        "color": "var(--color-text-muted)",
+                        "marginBottom": "0.5rem"
+                      },
+                      "textContent": "Beds"
                     },
                     {
-                      "tagName": "option",
-                      "attributes": { "value": "4" },
-                      "textContent": "4+ beds"
+                      "tagName": "select",
+                      "attributes": { "name": "beds", "aria-label": "Minimum bedrooms" },
+                      "style": {
+                        "width": "100%",
+                        "border": "1px solid var(--color-border-strong)",
+                        "borderRadius": "var(--radius-sm)",
+                        "padding": "0.72rem 0.7rem",
+                        "fontSize": "0.92rem",
+                        "fontFamily": "inherit",
+                        "fontWeight": "600",
+                        "color": "var(--color-text-primary)",
+                        "backgroundColor": "var(--color-bg-white)",
+                        "cursor": "pointer"
+                      },
+                      "children": [
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "" },
+                          "textContent": "Any"
+                        },
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "2" },
+                          "textContent": "2+"
+                        },
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "3" },
+                          "textContent": "3+"
+                        },
+                        { "tagName": "option", "attributes": { "value": "4" }, "textContent": "4+" }
+                      ]
                     }
                   ]
                 },
                 {
-                  "tagName": "button",
-                  "attributes": { "type": "submit" },
-                  "style": {
-                    "backgroundColor": "var(--color-primary)",
-                    "color": "var(--color-text-white)",
-                    "border": "none",
-                    "padding": "0.75rem 1.75rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "1rem",
-                    "fontWeight": "700",
-                    "cursor": "pointer",
-                    "whiteSpace": "nowrap",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "var(--color-primary-hover)" }
-                  },
-                  "textContent": "${state.cta}"
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "label",
+                      "style": {
+                        "display": "block",
+                        "fontSize": "0.72rem",
+                        "fontWeight": "700",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.1em",
+                        "color": "var(--color-text-muted)",
+                        "marginBottom": "0.5rem"
+                      },
+                      "textContent": "Baths"
+                    },
+                    {
+                      "tagName": "select",
+                      "attributes": { "name": "baths", "aria-label": "Minimum bathrooms" },
+                      "style": {
+                        "width": "100%",
+                        "border": "1px solid var(--color-border-strong)",
+                        "borderRadius": "var(--radius-sm)",
+                        "padding": "0.72rem 0.7rem",
+                        "fontSize": "0.92rem",
+                        "fontFamily": "inherit",
+                        "fontWeight": "600",
+                        "color": "var(--color-text-primary)",
+                        "backgroundColor": "var(--color-bg-white)",
+                        "cursor": "pointer"
+                      },
+                      "children": [
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "" },
+                          "textContent": "Any"
+                        },
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "1" },
+                          "textContent": "1+"
+                        },
+                        {
+                          "tagName": "option",
+                          "attributes": { "value": "2" },
+                          "textContent": "2+"
+                        },
+                        { "tagName": "option", "attributes": { "value": "3" }, "textContent": "3+" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "button",
+              "attributes": { "type": "submit" },
+              "style": {
+                "display": "flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "gap": "0.55rem",
+                "width": "100%",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "border": "none",
+                "padding": "0.95rem 1.5rem",
+                "borderRadius": "var(--radius-sm)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit",
+                "fontWeight": "700",
+                "cursor": "pointer",
+                "boxShadow": "0 12px 28px -12px rgba(15,118,110,0.7)",
+                "transition": "background-color 0.15s, transform 0.15s",
+                ":hover": {
+                  "backgroundColor": "var(--color-primary-hover)",
+                  "transform": "translateY(-1px)"
                 }
+              },
+              "children": [
+                { "tagName": "span", "style": { "fontSize": "1.05rem" }, "textContent": "⌕" },
+                { "tagName": "span", "textContent": "${state.cta}" }
               ]
             },
             {
               "tagName": "p",
               "style": {
-                "margin": "1rem 0 0",
-                "fontSize": "0.85rem",
-                "opacity": "0.75"
+                "margin": "1.05rem 0 0",
+                "fontSize": "0.82rem",
+                "color": "var(--color-text-muted)",
+                "textAlign": "center"
               },
-              "textContent": "Popular: Bayport · Maplewood · Lakeview · Harbor Hills"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": { "fontWeight": "700", "color": "var(--color-text-secondary)" },
+                  "textContent": "Popular: "
+                },
+                {
+                  "tagName": "span",
+                  "textContent": "Bayport · Maplewood · Lakeview · Harbor Hills"
+                }
+              ]
             }
           ]
         }

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

@@ -24,7 +24,7 @@
       "children": [
         {
           "tagName": "div",
-          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "style": { "order": "${state.reverse ? '2' : '1'}", "position": "relative" },
           "children": [
             {
               "tagName": "img",
@@ -36,9 +36,10 @@
               "style": {
                 "width": "100%",
                 "height": "auto",
-                "borderRadius": "var(--radius)",
+                "borderRadius": "var(--radius-lg)",
                 "display": "block",
-                "boxShadow": "0 12px 40px rgba(15,23,42,0.14)"
+                "border": "1px solid var(--color-border)",
+                "boxShadow": "var(--shadow-card)"
               }
             }
           ]
@@ -48,8 +49,8 @@
           "style": {
             "order": "${state.reverse ? '1' : '2'}",
             "fontSize": "1.08rem",
-            "lineHeight": "1.8",
-            "color": "var(--color-text-primary)"
+            "lineHeight": "1.75",
+            "color": "var(--color-text-secondary)"
           },
           "children": [{ "tagName": "slot" }]
         }