@jxsuite/starters 0.34.0

package/sites/saas/components/sa-feature-card.json

@@ -0,0 +1,59 @@
+{
+  "tagName": "sa-feature-card",
+  "state": {
+    "icon": "",
+    "title": "",
+    "text": ""
+  },
+  "style": {
+    "display": "block",
+    "padding": "1.75rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "borderRadius": "var(--radius)",
+    "border": "1px solid var(--color-border)",
+    "transition": "border-color 0.15s, box-shadow 0.15s",
+    ":hover": {
+      "borderColor": "var(--color-primary)",
+      "boxShadow": "0 12px 32px rgba(99, 102, 241, 0.12)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "inline-flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "2.75rem",
+        "height": "2.75rem",
+        "borderRadius": "0.6rem",
+        "backgroundColor": "var(--color-accent-soft)",
+        "fontSize": "1.4rem",
+        "lineHeight": "1",
+        "marginBottom": "1rem"
+      },
+      "textContent": "${state.icon}"
+    },
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.2rem",
+        "fontWeight": "600",
+        "letterSpacing": "-0.01em",
+        "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/saas/components/sa-feature-split.json

@@ -0,0 +1,60 @@
+{
+  "tagName": "sa-feature-split",
+  "state": {
+    "image": { "type": "string", "format": "image", "default": "" },
+    "imageAlt": "",
+    "reverse": false
+  },
+  "style": {
+    "display": "block",
+    "padding": "clamp(3rem, 7vw, 5rem) 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "1fr 1fr",
+        "gap": "clamp(2rem, 5vw, 4rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.image}",
+                "alt": "${state.imageAlt}",
+                "loading": "lazy"
+              },
+              "style": {
+                "width": "100%",
+                "height": "auto",
+                "borderRadius": "var(--radius)",
+                "display": "block",
+                "border": "1px solid var(--color-border)",
+                "boxShadow": "0 18px 48px rgba(20, 20, 43, 0.12)"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "order": "${state.reverse ? '1' : '2'}",
+            "fontSize": "1.05rem",
+            "lineHeight": "1.75",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [{ "tagName": "slot" }]
+        }
+      ]
+    }
+  ]
+}

package/sites/saas/components/sa-footer.json

@@ -0,0 +1,145 @@
+{
+  "tagName": "sa-footer",
+  "state": {
+    "brand": "Flowlark",
+    "tagline": "The product platform for teams that ship. Plan, build, and scale without the busywork.",
+    "email": "hello@flowlark.app"
+  },
+  "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.35rem",
+                "fontWeight": "700",
+                "marginBottom": "0.75rem",
+                "letterSpacing": "-0.02em"
+              },
+              "textContent": "${state.brand}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.7", "maxWidth": "36ch", "lineHeight": "1.7" },
+              "textContent": "${state.tagline}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.08em",
+                "fontSize": "0.75rem",
+                "opacity": "0.55",
+                "marginBottom": "0.9rem"
+              },
+              "textContent": "Product"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/features/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.8",
+                "textDecoration": "none",
+                "marginBottom": "0.4rem"
+              },
+              "textContent": "Features"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/pricing/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.8",
+                "textDecoration": "none",
+                "marginBottom": "0.4rem"
+              },
+              "textContent": "Pricing"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.8",
+                "textDecoration": "none"
+              },
+              "textContent": "Contact"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.08em",
+                "fontSize": "0.75rem",
+                "opacity": "0.55",
+                "marginBottom": "0.9rem"
+              },
+              "textContent": "Get in touch"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0 0 0.4rem", "opacity": "0.8" },
+              "textContent": "${state.email}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.8" },
+              "textContent": "Remote-first · Worldwide"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "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.55"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": { "margin": "0" },
+          "textContent": "© Flowlark. Built with Jx."
+        }
+      ]
+    }
+  ]
+}

package/sites/saas/components/sa-hero.json

@@ -0,0 +1,160 @@
+{
+  "tagName": "sa-hero",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "cta": "Get started free",
+    "ctaHref": "/pricing/",
+    "cta2": "",
+    "cta2Href": "/features/",
+    "note": "",
+    "image": { "type": "string", "format": "image", "default": "" },
+    "imageAlt": "Product dashboard preview"
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "overflow": "hidden",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "background": "radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99, 102, 241, 0.35), transparent 70%), var(--color-bg-dark)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "10",
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "clamp(4.5rem, 11vw, 8rem) 1.5rem clamp(3rem, 7vw, 5rem)",
+        "textAlign": "center"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+            "alignItems": "center",
+            "gap": "0.5rem",
+            "padding": "0.375rem 0.9rem",
+            "borderRadius": "999px",
+            "border": "1px solid rgba(255, 255, 255, 0.18)",
+            "backgroundColor": "rgba(255, 255, 255, 0.06)",
+            "fontSize": "0.8125rem",
+            "fontWeight": "500",
+            "color": "rgba(255, 255, 255, 0.85)",
+            "margin": "0 0 1.75rem"
+          },
+          "textContent": "${state.eyebrow}"
+        },
+        {
+          "tagName": "h1",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(2.5rem, 6.5vw, 4.5rem)",
+            "fontWeight": "700",
+            "lineHeight": "1.05",
+            "letterSpacing": "-0.04em",
+            "margin": "0 auto 1.5rem",
+            "maxWidth": "16ch"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "clamp(1.05rem, 2vw, 1.3rem)",
+            "lineHeight": "1.65",
+            "color": "rgba(255, 255, 255, 0.72)",
+            "margin": "0 auto 2.25rem",
+            "maxWidth": "52ch"
+          },
+          "textContent": "${state.subheading}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "gap": "0.75rem",
+            "justifyContent": "center",
+            "flexWrap": "wrap"
+          },
+          "children": [
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.ctaHref}" },
+              "style": {
+                "display": "inline-block",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "padding": "0.85rem 2rem",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1.02rem",
+                "fontWeight": "600",
+                "textDecoration": "none",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+              },
+              "textContent": "${state.cta}"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.cta2Href}" },
+              "style": {
+                "display": "${state.cta2 ? 'inline-block' : 'none'}",
+                "border": "1px solid rgba(255, 255, 255, 0.28)",
+                "color": "var(--color-text-white)",
+                "padding": "0.85rem 2rem",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1.02rem",
+                "fontWeight": "600",
+                "textDecoration": "none",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "rgba(255, 255, 255, 0.1)" }
+              },
+              "textContent": "${state.cta2}"
+            }
+          ]
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.note ? 'block' : 'none'}",
+            "fontSize": "0.85rem",
+            "color": "rgba(255, 255, 255, 0.5)",
+            "margin": "1.25rem 0 0"
+          },
+          "textContent": "${state.note}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.image ? 'block' : 'none'}",
+            "maxWidth": "960px",
+            "margin": "3.5rem auto 0"
+          },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.image}",
+                "alt": "${state.imageAlt}",
+                "loading": "eager"
+              },
+              "style": {
+                "display": "block",
+                "width": "100%",
+                "height": "auto",
+                "borderRadius": "var(--radius)",
+                "border": "1px solid rgba(255, 255, 255, 0.12)",
+                "boxShadow": "0 32px 80px rgba(0, 0, 0, 0.5)"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/saas/components/sa-logo-cloud.json

@@ -0,0 +1,119 @@
+{
+  "tagName": "sa-logo-cloud",
+  "state": {
+    "label": "Trusted by fast-moving teams everywhere",
+    "logo1": "◈ Northwind",
+    "logo2": "✦ Lumen",
+    "logo3": "▲ Apex",
+    "logo4": "❖ Corva",
+    "logo5": "⬡ Hivebase",
+    "logo6": "◐ Halcyon"
+  },
+  "style": {
+    "display": "block",
+    "padding": "clamp(2.5rem, 5vw, 3.5rem) 1.5rem",
+    "borderTop": "1px solid var(--color-border)",
+    "borderBottom": "1px solid var(--color-border)",
+    "backgroundColor": "var(--color-bg-cream)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "maxWidth": "var(--max-width)", "margin": "0 auto", "textAlign": "center" },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "0.8rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.12em",
+            "color": "var(--color-text-muted)",
+            "margin": "0 0 1.75rem"
+          },
+          "textContent": "${state.label}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexWrap": "wrap",
+            "justifyContent": "center",
+            "alignItems": "center",
+            "gap": "clamp(1.5rem, 5vw, 3.5rem)"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.2rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.65"
+              },
+              "textContent": "${state.logo1}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.2rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.65"
+              },
+              "textContent": "${state.logo2}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.2rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.65"
+              },
+              "textContent": "${state.logo3}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.2rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.65"
+              },
+              "textContent": "${state.logo4}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.2rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.65",
+                "@--sm": { "display": "none" }
+              },
+              "textContent": "${state.logo5}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.2rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.65",
+                "@--sm": { "display": "none" }
+              },
+              "textContent": "${state.logo6}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/saas/components/sa-nav.json

@@ -0,0 +1,130 @@
+{
+  "tagName": "sa-nav",
+  "state": {
+    "brand": "Flowlark"
+  },
+  "style": {
+    "display": "block",
+    "position": "sticky",
+    "top": "0",
+    "zIndex": "50",
+    "backgroundColor": "rgba(255, 255, 255, 0.85)",
+    "backdropFilter": "blur(10px)",
+    "borderBottom": "1px solid var(--color-border)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "0.9rem 1.5rem",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "/" },
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.55rem",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.3rem",
+            "fontWeight": "700",
+            "color": "var(--color-text-primary)",
+            "textDecoration": "none",
+            "letterSpacing": "-0.02em"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "width": "1.6rem",
+                "height": "1.6rem",
+                "borderRadius": "0.45rem",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "fontSize": "1rem"
+              },
+              "textContent": "◆"
+            },
+            { "tagName": "span", "textContent": "${state.brand}" }
+          ]
+        },
+        {
+          "tagName": "nav",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "1.6rem",
+            "@--sm": { "gap": "0.9rem" }
+          },
+          "children": [
+            {
+              "tagName": "a",
+              "attributes": { "href": "/features/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.95rem",
+                "@--sm": { "display": "none" },
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Features"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/pricing/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.95rem",
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Pricing"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.95rem",
+                "@--sm": { "display": "none" },
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Contact"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/pricing/" },
+              "style": {
+                "display": "inline-block",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "padding": "0.55rem 1.2rem",
+                "borderRadius": "var(--radius)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.95rem",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+              },
+              "textContent": "Get started"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}