@jxsuite/starters 0.34.0 → 0.35.1

package/sites/real-estate/components/re-agent-band.json

@@ -0,0 +1,240 @@
+{
+  "tagName": "re-agent-band",
+  "state": {
+    "eyebrow": "Your north shore team",
+    "heading": "",
+    "text": "",
+    "phone": "(555) 204-7788",
+    "cta": "Book a call",
+    "ctaHref": "/contact/",
+    "cta2": "Meet the team",
+    "cta2Href": "/about/",
+    "img1": { "type": "string", "format": "image", "default": "/images/agent-1.jpg" },
+    "img2": { "type": "string", "format": "image", "default": "/images/agent-2.jpg" },
+    "img3": { "type": "string", "format": "image", "default": "/images/agent-3.jpg" }
+  },
+  "style": {
+    "display": "block",
+    "padding": "clamp(2.5rem, 6vw, 4rem) 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "position": "relative",
+        "overflow": "hidden",
+        "borderRadius": "var(--radius-lg)",
+        "background": "radial-gradient(ellipse 60% 90% at 8% 0%, rgba(20,184,166,0.28), transparent 60%), radial-gradient(ellipse 50% 80% at 100% 100%, rgba(13,148,136,0.22), transparent 60%), var(--color-bg-dark)",
+        "border": "1px solid var(--color-bg-ink-soft)",
+        "padding": "clamp(2rem, 4vw, 3.25rem)",
+        "display": "grid",
+        "gridTemplateColumns": "auto 1fr",
+        "gap": "clamp(1.5rem, 4vw, 3.5rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "1.75rem" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "display": "flex", "flexDirection": "column", "gap": "1rem" },
+          "children": [
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "alignItems": "center" },
+              "children": [
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "${state.img1}",
+                    "alt": "Northshore Realty agent",
+                    "loading": "lazy",
+                    "width": "72",
+                    "height": "72"
+                  },
+                  "style": {
+                    "width": "4.5rem",
+                    "height": "4.5rem",
+                    "borderRadius": "999px",
+                    "objectFit": "cover",
+                    "border": "3px solid var(--color-bg-dark)",
+                    "boxShadow": "0 6px 18px rgba(0,0,0,0.4)"
+                  }
+                },
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "${state.img2}",
+                    "alt": "Northshore Realty agent",
+                    "loading": "lazy",
+                    "width": "72",
+                    "height": "72"
+                  },
+                  "style": {
+                    "width": "4.5rem",
+                    "height": "4.5rem",
+                    "borderRadius": "999px",
+                    "objectFit": "cover",
+                    "border": "3px solid var(--color-bg-dark)",
+                    "marginLeft": "-1.1rem",
+                    "boxShadow": "0 6px 18px rgba(0,0,0,0.4)"
+                  }
+                },
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "${state.img3}",
+                    "alt": "Northshore Realty agent",
+                    "loading": "lazy",
+                    "width": "72",
+                    "height": "72"
+                  },
+                  "style": {
+                    "width": "4.5rem",
+                    "height": "4.5rem",
+                    "borderRadius": "999px",
+                    "objectFit": "cover",
+                    "border": "3px solid var(--color-bg-dark)",
+                    "marginLeft": "-1.1rem",
+                    "boxShadow": "0 6px 18px rgba(0,0,0,0.4)"
+                  }
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "gap": "0.4rem",
+                "color": "var(--color-accent-bright)",
+                "fontWeight": "700",
+                "fontSize": "0.9rem"
+              },
+              "children": [
+                { "tagName": "span", "textContent": "★★★★★" },
+                {
+                  "tagName": "span",
+                  "style": { "color": "rgba(255,255,255,0.6)", "fontWeight": "600" },
+                  "textContent": "4.9 · 220 reviews"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.16em",
+                "fontSize": "0.74rem",
+                "fontWeight": "700",
+                "color": "var(--color-accent-bright)",
+                "margin": "0 0 0.8rem"
+              },
+              "textContent": "${state.eyebrow}"
+            },
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(1.75rem, 3.4vw, 2.6rem)",
+                "fontWeight": "500",
+                "lineHeight": "1.1",
+                "letterSpacing": "-0.015em",
+                "margin": "0 0 0.9rem",
+                "color": "var(--color-text-white)"
+              },
+              "textContent": "${state.heading}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "1.05rem",
+                "lineHeight": "1.65",
+                "color": "rgba(255,255,255,0.72)",
+                "margin": "0 0 1.75rem",
+                "maxWidth": "48ch"
+              },
+              "textContent": "${state.text}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1.25rem",
+                "flexWrap": "wrap"
+              },
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.ctaHref}" },
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "gap": "0.5rem",
+                    "backgroundColor": "var(--color-accent-bright)",
+                    "color": "var(--color-ink)",
+                    "padding": "0.85rem 1.6rem",
+                    "borderRadius": "999px",
+                    "fontSize": "1rem",
+                    "fontWeight": "700",
+                    "textDecoration": "none",
+                    "transition": "transform 0.15s, box-shadow 0.15s",
+                    "boxShadow": "0 12px 30px -12px rgba(20,184,166,0.7)",
+                    ":hover": {
+                      "transform": "translateY(-2px)",
+                      "boxShadow": "0 18px 40px -12px rgba(20,184,166,0.8)"
+                    }
+                  },
+                  "children": [
+                    { "tagName": "span", "textContent": "${state.cta}" },
+                    { "tagName": "span", "textContent": "→" }
+                  ]
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "tel:+15552047788" },
+                  "style": {
+                    "display": "inline-flex",
+                    "flexDirection": "column",
+                    "textDecoration": "none"
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontSize": "0.72rem",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.12em",
+                        "color": "rgba(255,255,255,0.5)",
+                        "fontWeight": "700"
+                      },
+                      "textContent": "Call us"
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontSize": "1.2rem",
+                        "fontWeight": "800",
+                        "color": "var(--color-text-white)",
+                        "fontVariantNumeric": "tabular-nums",
+                        "letterSpacing": "-0.01em"
+                      },
+                      "textContent": "${state.phone}"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/real-estate/components/re-agent-card.json

@@ -12,53 +12,80 @@
     "border": "1px solid var(--color-border)",
     "borderRadius": "var(--radius)",
     "overflow": "hidden",
-    "textAlign": "center"
+    "transition": "transform 0.2s, box-shadow 0.2s",
+    ":hover": { "transform": "translateY(-3px)", "boxShadow": "var(--shadow-card)" },
+    ":hover img": { "transform": "scale(1.04)" }
   },
   "children": [
     {
-      "tagName": "img",
-      "attributes": { "src": "${state.image}", "alt": "${state.name}", "loading": "lazy" },
+      "tagName": "div",
       "style": {
-        "width": "100%",
+        "position": "relative",
+        "overflow": "hidden",
         "aspectRatio": "1 / 1",
-        "objectFit": "cover",
-        "display": "block"
-      }
+        "backgroundColor": "var(--color-bg-tint)"
+      },
+      "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.5s cubic-bezier(0.22, 1, 0.36, 1)"
+          }
+        }
+      ]
     },
     {
       "tagName": "div",
       "style": { "padding": "1.25rem" },
       "children": [
         {
-          "tagName": "h3",
+          "tagName": "p",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.15rem",
+            "margin": "0 0 0.5rem",
+            "color": "var(--color-primary)",
+            "fontSize": "0.72rem",
             "fontWeight": "700",
-            "margin": "0 0 0.25rem"
+            "textTransform": "uppercase",
+            "letterSpacing": "0.1em"
           },
-          "textContent": "${state.name}"
+          "textContent": "${state.role}"
         },
         {
-          "tagName": "p",
+          "tagName": "h3",
           "style": {
-            "margin": "0 0 0.75rem",
-            "color": "var(--color-primary)",
-            "fontSize": "0.85rem",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.2rem",
             "fontWeight": "700",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.08em"
+            "letterSpacing": "-0.01em",
+            "margin": "0 0 0.6rem"
           },
-          "textContent": "${state.role}"
+          "textContent": "${state.name}"
         },
         {
-          "tagName": "p",
+          "tagName": "a",
+          "attributes": { "href": "tel:${state.phone}" },
           "style": {
-            "margin": "0",
-            "color": "var(--color-text-muted)",
-            "fontSize": "0.95rem"
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.4rem",
+            "color": "var(--color-text-secondary)",
+            "fontSize": "0.92rem",
+            "fontWeight": "600",
+            "textDecoration": "none",
+            "fontVariantNumeric": "tabular-nums",
+            ":hover": { "color": "var(--color-primary)" }
           },
-          "textContent": "${state.phone}"
+          "children": [
+            { "tagName": "span", "style": { "fontSize": "0.85rem" }, "textContent": "☎" },
+            { "tagName": "span", "textContent": "${state.phone}" }
+          ]
         }
       ]
     }

package/sites/real-estate/components/re-contact-form.json

@@ -8,7 +8,7 @@
     {
       "tagName": "form",
       "attributes": { "action": "#", "method": "post" },
-      "style": { "display": "grid", "gap": "1rem", "marginTop": "1.5rem" },
+      "style": { "display": "grid", "gap": "0.9rem", "marginTop": "1.5rem" },
       "children": [
         {
           "tagName": "input",
@@ -21,10 +21,18 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
+            "padding": "0.8rem 0.95rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-white)",
+            "outline": "none",
+            "transition": "border-color 0.15s, box-shadow 0.15s",
+            ":focus": {
+              "borderColor": "var(--color-primary)",
+              "boxShadow": "0 0 0 3px var(--color-accent-soft)"
+            }
           }
         },
         {
@@ -38,15 +46,28 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
+            "padding": "0.8rem 0.95rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-white)",
+            "outline": "none",
+            "transition": "border-color 0.15s, box-shadow 0.15s",
+            ":focus": {
+              "borderColor": "var(--color-primary)",
+              "boxShadow": "0 0 0 3px var(--color-accent-soft)"
+            }
           }
         },
         {
           "tagName": "div",
-          "style": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "1rem" },
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "1fr 1fr",
+            "gap": "0.9rem",
+            "@--sm": { "gridTemplateColumns": "1fr" }
+          },
           "children": [
             {
               "tagName": "input",
@@ -58,10 +79,18 @@
               },
               "style": {
                 "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
+                "padding": "0.8rem 0.95rem",
+                "border": "1px solid var(--color-border-strong)",
+                "borderRadius": "var(--radius-sm)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit",
+                "backgroundColor": "var(--color-bg-white)",
+                "outline": "none",
+                "transition": "border-color 0.15s, box-shadow 0.15s",
+                ":focus": {
+                  "borderColor": "var(--color-primary)",
+                  "boxShadow": "0 0 0 3px var(--color-accent-soft)"
+                }
               }
             },
             {
@@ -74,10 +103,18 @@
               },
               "style": {
                 "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
+                "padding": "0.8rem 0.95rem",
+                "border": "1px solid var(--color-border-strong)",
+                "borderRadius": "var(--radius-sm)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit",
+                "backgroundColor": "var(--color-bg-white)",
+                "outline": "none",
+                "transition": "border-color 0.15s, box-shadow 0.15s",
+                ":focus": {
+                  "borderColor": "var(--color-primary)",
+                  "boxShadow": "0 0 0 3px var(--color-accent-soft)"
+                }
               }
             }
           ]
@@ -92,29 +129,41 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
+            "padding": "0.8rem 0.95rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
             "fontSize": "1rem",
-            "fontFamily": "inherit"
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-white)",
+            "outline": "none",
+            "resize": "vertical",
+            "transition": "border-color 0.15s, box-shadow 0.15s",
+            ":focus": {
+              "borderColor": "var(--color-primary)",
+              "boxShadow": "0 0 0 3px var(--color-accent-soft)"
+            }
           }
         },
         {
           "tagName": "button",
           "attributes": { "type": "submit" },
-          "textContent": "Send Message",
+          "textContent": "Request a call",
           "style": {
             "backgroundColor": "var(--color-primary)",
             "color": "var(--color-text-white)",
-            "padding": "0.85rem 1.5rem",
+            "padding": "0.9rem 1.6rem",
             "border": "none",
-            "borderRadius": "var(--radius)",
+            "borderRadius": "999px",
             "fontSize": "1rem",
+            "fontFamily": "inherit",
             "fontWeight": "700",
             "cursor": "pointer",
             "justifySelf": "start",
-            "transition": "background-color 0.15s",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+            "transition": "background-color 0.15s, transform 0.15s",
+            ":hover": {
+              "backgroundColor": "var(--color-primary-hover)",
+              "transform": "translateY(-1px)"
+            }
           }
         }
       ]

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

@@ -4,11 +4,15 @@
     "heading": "",
     "text": "",
     "cta": "Contact an Agent",
-    "ctaHref": "/contact/"
+    "ctaHref": "/contact/",
+    "cta2": "",
+    "cta2Href": "/listings/"
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
+    "position": "relative",
+    "overflow": "hidden",
+    "background": "radial-gradient(ellipse 55% 80% at 50% 120%, rgba(20,184,166,0.22), transparent 65%), var(--color-bg-dark)",
     "color": "var(--color-text-white)",
     "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
     "textAlign": "center"
@@ -16,46 +20,107 @@
   "children": [
     {
       "tagName": "div",
-      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "style": {
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto",
+        "position": "relative",
+        "zIndex": "2"
+      },
       "children": [
         {
-          "tagName": "h2",
+          "tagName": "p",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
-            "fontWeight": "800",
-            "lineHeight": "1.15",
-            "letterSpacing": "-0.02em",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.18em",
+            "fontSize": "0.74rem",
+            "fontWeight": "700",
+            "color": "var(--color-accent-bright)",
             "margin": "0 0 1rem"
           },
+          "textContent": "Northshore Realty"
+        },
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-display)",
+            "fontSize": "clamp(2rem, 4.4vw, 3rem)",
+            "fontWeight": "500",
+            "lineHeight": "1.1",
+            "letterSpacing": "-0.015em",
+            "margin": "0 0 1rem",
+            "color": "var(--color-text-white)"
+          },
           "textContent": "${state.heading}"
         },
         {
           "tagName": "p",
           "style": {
-            "fontSize": "1.1rem",
-            "lineHeight": "1.7",
-            "opacity": "0.85",
-            "margin": "0 0 2rem"
+            "fontSize": "1.12rem",
+            "lineHeight": "1.65",
+            "color": "rgba(255,255,255,0.74)",
+            "margin": "0 auto 2.25rem",
+            "maxWidth": "50ch"
           },
           "textContent": "${state.text}"
         },
         {
-          "tagName": "a",
-          "attributes": { "href": "${state.ctaHref}" },
+          "tagName": "div",
           "style": {
-            "display": "inline-block",
-            "backgroundColor": "var(--color-primary)",
-            "color": "var(--color-text-white)",
-            "padding": "0.9rem 2.25rem",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1.05rem",
-            "fontWeight": "700",
-            "textDecoration": "none",
-            "transition": "background-color 0.15s",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+            "display": "flex",
+            "gap": "0.75rem",
+            "justifyContent": "center",
+            "flexWrap": "wrap"
           },
-          "textContent": "${state.cta}"
+          "children": [
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.ctaHref}" },
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "gap": "0.5rem",
+                "backgroundColor": "var(--color-accent-bright)",
+                "color": "var(--color-ink)",
+                "padding": "0.9rem 2rem",
+                "borderRadius": "999px",
+                "fontSize": "1.02rem",
+                "fontWeight": "700",
+                "textDecoration": "none",
+                "transition": "transform 0.15s, box-shadow 0.15s",
+                "boxShadow": "0 14px 34px -14px rgba(20,184,166,0.8)",
+                ":hover": {
+                  "transform": "translateY(-2px)",
+                  "boxShadow": "0 20px 44px -14px rgba(20,184,166,0.9)"
+                }
+              },
+              "children": [
+                { "tagName": "span", "textContent": "${state.cta}" },
+                { "tagName": "span", "textContent": "→" }
+              ]
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.cta2Href}" },
+              "style": {
+                "display": "${state.cta2 ? 'inline-flex' : 'none'}",
+                "alignItems": "center",
+                "border": "1px solid rgba(255,255,255,0.22)",
+                "backgroundColor": "rgba(255,255,255,0.04)",
+                "color": "var(--color-text-white)",
+                "padding": "0.9rem 2rem",
+                "borderRadius": "999px",
+                "fontSize": "1.02rem",
+                "fontWeight": "600",
+                "textDecoration": "none",
+                "transition": "background-color 0.15s, border-color 0.15s",
+                ":hover": {
+                  "backgroundColor": "rgba(255,255,255,0.09)",
+                  "borderColor": "rgba(255,255,255,0.4)"
+                }
+              },
+              "textContent": "${state.cta2}"
+            }
+          ]
         }
       ]
     }