@jxsuite/starters 0.34.0

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

@@ -0,0 +1,66 @@
+{
+  "tagName": "re-agent-card",
+  "state": {
+    "name": "",
+    "role": "",
+    "phone": "",
+    "image": { "type": "string", "format": "image", "default": "" }
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "overflow": "hidden",
+    "textAlign": "center"
+  },
+  "children": [
+    {
+      "tagName": "img",
+      "attributes": { "src": "${state.image}", "alt": "${state.name}", "loading": "lazy" },
+      "style": {
+        "width": "100%",
+        "aspectRatio": "1 / 1",
+        "objectFit": "cover",
+        "display": "block"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": { "padding": "1.25rem" },
+      "children": [
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.15rem",
+            "fontWeight": "700",
+            "margin": "0 0 0.25rem"
+          },
+          "textContent": "${state.name}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0 0 0.75rem",
+            "color": "var(--color-primary)",
+            "fontSize": "0.85rem",
+            "fontWeight": "700",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.08em"
+          },
+          "textContent": "${state.role}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0",
+            "color": "var(--color-text-muted)",
+            "fontSize": "0.95rem"
+          },
+          "textContent": "${state.phone}"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,132 @@
+{
+  "tagName": "re-contact-form",
+  "state": {
+    "note": "This is a demo form. Wire it to your CRM or email in pages/contact.md."
+  },
+  "style": { "display": "block" },
+  "children": [
+    {
+      "tagName": "form",
+      "attributes": { "action": "#", "method": "post" },
+      "style": { "display": "grid", "gap": "1rem", "marginTop": "1.5rem" },
+      "children": [
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "text",
+            "name": "name",
+            "placeholder": "Your name",
+            "required": "true",
+            "aria-label": "Your name"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem"
+          }
+        },
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "email",
+            "name": "email",
+            "placeholder": "Email address",
+            "required": "true",
+            "aria-label": "Email address"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "1rem" },
+          "children": [
+            {
+              "tagName": "input",
+              "attributes": {
+                "type": "text",
+                "name": "intent",
+                "placeholder": "Buying or selling?",
+                "aria-label": "Buying or selling"
+              },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem"
+              }
+            },
+            {
+              "tagName": "input",
+              "attributes": {
+                "type": "text",
+                "name": "area",
+                "placeholder": "Preferred area",
+                "aria-label": "Preferred area"
+              },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "textarea",
+          "attributes": {
+            "name": "notes",
+            "rows": "4",
+            "placeholder": "What are you looking for? Budget, bedrooms, timing…",
+            "aria-label": "Notes"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit"
+          }
+        },
+        {
+          "tagName": "button",
+          "attributes": { "type": "submit" },
+          "textContent": "Send Message",
+          "style": {
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.85rem 1.5rem",
+            "border": "none",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem",
+            "fontWeight": "700",
+            "cursor": "pointer",
+            "justifySelf": "start",
+            "transition": "background-color 0.15s",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "fontSize": "0.85rem",
+        "color": "var(--color-text-muted)",
+        "margin": "1rem 0 0"
+      },
+      "textContent": "${state.note}"
+    }
+  ]
+}

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

@@ -0,0 +1,63 @@
+{
+  "tagName": "re-cta",
+  "state": {
+    "heading": "",
+    "text": "",
+    "cta": "Contact an Agent",
+    "ctaHref": "/contact/"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
+    "textAlign": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "children": [
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
+            "fontWeight": "800",
+            "lineHeight": "1.15",
+            "letterSpacing": "-0.02em",
+            "margin": "0 0 1rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.1rem",
+            "lineHeight": "1.7",
+            "opacity": "0.85",
+            "margin": "0 0 2rem"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.ctaHref}" },
+          "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)" }
+          },
+          "textContent": "${state.cta}"
+        }
+      ]
+    }
+  ]
+}

package/sites/real-estate/components/re-detail-row.json

@@ -0,0 +1,26 @@
+{
+  "tagName": "re-detail-row",
+  "state": {
+    "label": "",
+    "value": ""
+  },
+  "style": {
+    "display": "flex",
+    "justifyContent": "space-between",
+    "gap": "1rem",
+    "padding": "0.55rem 0",
+    "borderTop": "1px solid rgba(255, 255, 255, 0.15)"
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "style": { "fontWeight": "600" },
+      "textContent": "${state.label}"
+    },
+    {
+      "tagName": "span",
+      "style": { "opacity": "0.8" },
+      "textContent": "${state.value}"
+    }
+  ]
+}

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

@@ -0,0 +1,53 @@
+{
+  "tagName": "re-feature",
+  "state": {
+    "icon": "",
+    "title": "",
+    "text": ""
+  },
+  "style": {
+    "display": "block",
+    "padding": "1.75rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "borderRadius": "var(--radius)",
+    "border": "1px solid var(--color-border)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "inline-flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "3rem",
+        "height": "3rem",
+        "borderRadius": "0.75rem",
+        "backgroundColor": "var(--color-bg-cream)",
+        "fontSize": "1.5rem",
+        "marginBottom": "1rem",
+        "lineHeight": "1"
+      },
+      "textContent": "${state.icon}"
+    },
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.2rem",
+        "fontWeight": "700",
+        "margin": "0 0 0.5rem"
+      },
+      "textContent": "${state.title}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "margin": "0",
+        "color": "var(--color-text-muted)",
+        "fontSize": "0.98rem",
+        "lineHeight": "1.65"
+      },
+      "textContent": "${state.text}"
+    }
+  ]
+}

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

@@ -0,0 +1,151 @@
+{
+  "tagName": "re-footer",
+  "state": {
+    "brand": "Northshore Realty",
+    "tagline": "Helping buyers and sellers find their place on the north shore since 2004.",
+    "address": "45 Lakeshore Drive, Bayport",
+    "phone": "(555) 204-7788",
+    "license": "License #RE-0294187"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "padding": "3.5rem 1.5rem 2rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "2fr 1fr 1fr",
+        "gap": "2.5rem",
+        "@--md": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.4rem",
+                "fontWeight": "800",
+                "marginBottom": "0.75rem"
+              },
+              "textContent": "${state.brand}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0 0 0.75rem", "opacity": "0.75", "maxWidth": "38ch" },
+              "textContent": "${state.tagline}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.5", "fontSize": "0.8rem" },
+              "textContent": "${state.license}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.08em",
+                "fontSize": "0.75rem",
+                "opacity": "0.6",
+                "marginBottom": "0.75rem"
+              },
+              "textContent": "Office"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
+              "textContent": "${state.address}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.85" },
+              "textContent": "${state.phone}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.08em",
+                "fontSize": "0.75rem",
+                "opacity": "0.6",
+                "marginBottom": "0.75rem"
+              },
+              "textContent": "Explore"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/listings/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.85",
+                "textDecoration": "none",
+                "marginBottom": "0.35rem"
+              },
+              "textContent": "Listings"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/about/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.85",
+                "textDecoration": "none",
+                "marginBottom": "0.35rem"
+              },
+              "textContent": "About"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.85",
+                "textDecoration": "none"
+              },
+              "textContent": "Contact"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "2.5rem auto 0",
+        "paddingTop": "1.5rem",
+        "borderTop": "1px solid rgba(255, 255, 255, 0.15)",
+        "fontSize": "0.85rem",
+        "opacity": "0.6"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": { "margin": "0" },
+          "textContent": "© Northshore Realty. Equal Housing Opportunity. Built with Jx."
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,183 @@
+{
+  "tagName": "re-hero",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "cta": "Browse Listings",
+    "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"
+  },
+  "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",
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "4rem 1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "maxWidth": "680px", "width": "100%" },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.18em",
+                "fontSize": "0.8rem",
+                "fontWeight": "700",
+                "marginBottom": "1rem",
+                "color": "#a5f3fc"
+              },
+              "textContent": "${state.eyebrow}"
+            },
+            {
+              "tagName": "h1",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(2.5rem, 6vw, 4.25rem)",
+                "fontWeight": "800",
+                "lineHeight": "1.08",
+                "margin": "0 0 1.25rem",
+                "letterSpacing": "-0.03em"
+              },
+              "textContent": "${state.heading}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "clamp(1.1rem, 2vw, 1.35rem)",
+                "lineHeight": "1.6",
+                "margin": "0 0 2rem",
+                "opacity": "0.92",
+                "maxWidth": "52ch"
+              },
+              "textContent": "${state.subheading}"
+            },
+            {
+              "tagName": "form",
+              "attributes": { "action": "/listings/", "method": "get" },
+              "style": {
+                "display": "flex",
+                "gap": "0.5rem",
+                "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" }
+              },
+              "children": [
+                {
+                  "tagName": "input",
+                  "attributes": {
+                    "type": "text",
+                    "name": "location",
+                    "placeholder": "City or neighborhood",
+                    "aria-label": "Search by city or neighborhood"
+                  },
+                  "style": {
+                    "flex": "1",
+                    "border": "none",
+                    "outline": "none",
+                    "padding": "0.75rem 0.9rem",
+                    "fontSize": "1rem",
+                    "color": "var(--color-text-primary)",
+                    "backgroundColor": "transparent",
+                    "minWidth": "0"
+                  }
+                },
+                {
+                  "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)" }
+                  },
+                  "children": [
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "" },
+                      "textContent": "Any beds"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "2" },
+                      "textContent": "2+ beds"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "3" },
+                      "textContent": "3+ beds"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "4" },
+                      "textContent": "4+ beds"
+                    }
+                  ]
+                },
+                {
+                  "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": "p",
+              "style": {
+                "margin": "1rem 0 0",
+                "fontSize": "0.85rem",
+                "opacity": "0.75"
+              },
+              "textContent": "Popular: Bayport · Maplewood · Lakeview · Harbor Hills"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}