@jxsuite/starters 0.34.0

package/sites/saas/components/sa-contact-form.json

@@ -0,0 +1,153 @@
+{
+  "tagName": "sa-contact-form",
+  "state": {
+    "heading": "Send us a message",
+    "note": "This is a demo form. Wire it to your CRM or email in pages/contact.md."
+  },
+  "style": {
+    "display": "block"
+  },
+  "children": [
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.5rem",
+        "fontWeight": "600",
+        "letterSpacing": "-0.01em",
+        "margin": "0 0 1.25rem"
+      },
+      "textContent": "${state.heading}"
+    },
+    {
+      "tagName": "form",
+      "attributes": { "action": "#", "method": "post" },
+      "style": { "display": "grid", "gap": "1rem", "alignContent": "start" },
+      "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",
+            "fontFamily": "inherit"
+          }
+        },
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "email",
+            "name": "email",
+            "placeholder": "Work email",
+            "required": "true",
+            "aria-label": "Work email"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "1fr 1fr",
+            "gap": "1rem",
+            "@--sm": { "gridTemplateColumns": "1fr" }
+          },
+          "children": [
+            {
+              "tagName": "input",
+              "attributes": {
+                "type": "text",
+                "name": "company",
+                "placeholder": "Company",
+                "aria-label": "Company"
+              },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit"
+              }
+            },
+            {
+              "tagName": "input",
+              "attributes": {
+                "type": "number",
+                "name": "team",
+                "min": "1",
+                "max": "10000",
+                "placeholder": "Team size",
+                "aria-label": "Team size"
+              },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "textarea",
+          "attributes": {
+            "name": "message",
+            "rows": "4",
+            "placeholder": "How can we help?",
+            "aria-label": "Message"
+          },
+          "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": "600",
+            "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": "0" },
+          "textContent": "${state.note}"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,102 @@
+{
+  "tagName": "sa-cta",
+  "state": {
+    "heading": "",
+    "text": "",
+    "cta": "Get started free",
+    "ctaHref": "/pricing/",
+    "cta2": "",
+    "cta2Href": "/contact/"
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "overflow": "hidden",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "background": "radial-gradient(ellipse 70% 60% at 50% 120%, rgba(99, 102, 241, 0.3), transparent 70%), var(--color-bg-dark)",
+    "padding": "clamp(3.5rem, 9vw, 6rem) 1.5rem",
+    "textAlign": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "10",
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto"
+      },
+      "children": [
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.9rem, 4vw, 2.9rem)",
+            "fontWeight": "700",
+            "letterSpacing": "-0.03em",
+            "lineHeight": "1.12",
+            "margin": "0 0 1rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.1rem",
+            "lineHeight": "1.7",
+            "color": "rgba(255, 255, 255, 0.72)",
+            "margin": "0 auto 2rem",
+            "maxWidth": "48ch"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "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.9rem 2.25rem",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1.05rem",
+                "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.9rem 2.25rem",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1.05rem",
+                "fontWeight": "600",
+                "textDecoration": "none",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "rgba(255, 255, 255, 0.1)" }
+              },
+              "textContent": "${state.cta2}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,413 @@
+{
+  "tagName": "sa-faq",
+  "state": {
+    "open": 0
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width-narrow)",
+    "margin": "0 auto",
+    "borderTop": "1px solid var(--color-border)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "borderBottom": "1px solid var(--color-border)" },
+      "children": [
+        {
+          "tagName": "button",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/open" },
+              "value": {
+                "operator": "||",
+                "target": {
+                  "operator": "&&",
+                  "target": { "operator": "===", "target": { "$ref": "#/state/open" }, "value": 0 },
+                  "value": -1
+                },
+                "value": 0
+              }
+            }
+          },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "width": "100%",
+            "padding": "1.4rem 0.25rem",
+            "border": "none",
+            "background": "transparent",
+            "cursor": "pointer",
+            "textAlign": "left",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.1rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [
+            { "tagName": "span", "textContent": "Can I change plans or cancel at any time?" },
+            {
+              "tagName": "span",
+              "style": {
+                "flexShrink": "0",
+                "color": "var(--color-primary)",
+                "fontSize": "1.1rem",
+                "transition": "transform 0.2s",
+                "transform": "${state.open === 0 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+              },
+              "textContent": "⌄"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.open === 0 ? 'block' : 'none'}",
+            "padding": "0 0.25rem 1.4rem",
+            "color": "var(--color-text-muted)",
+            "fontSize": "1rem",
+            "lineHeight": "1.7",
+            "maxWidth": "60ch"
+          },
+          "textContent": "Absolutely. Upgrade, downgrade, or cancel from your billing settings whenever you like. Changes are prorated automatically, so you only ever pay for what you use."
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "borderBottom": "1px solid var(--color-border)" },
+      "children": [
+        {
+          "tagName": "button",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/open" },
+              "value": {
+                "operator": "||",
+                "target": {
+                  "operator": "&&",
+                  "target": { "operator": "===", "target": { "$ref": "#/state/open" }, "value": 1 },
+                  "value": -1
+                },
+                "value": 1
+              }
+            }
+          },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "width": "100%",
+            "padding": "1.4rem 0.25rem",
+            "border": "none",
+            "background": "transparent",
+            "cursor": "pointer",
+            "textAlign": "left",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.1rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [
+            { "tagName": "span", "textContent": "Is there a free plan?" },
+            {
+              "tagName": "span",
+              "style": {
+                "flexShrink": "0",
+                "color": "var(--color-primary)",
+                "fontSize": "1.1rem",
+                "transition": "transform 0.2s",
+                "transform": "${state.open === 1 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+              },
+              "textContent": "⌄"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.open === 1 ? 'block' : 'none'}",
+            "padding": "0 0.25rem 1.4rem",
+            "color": "var(--color-text-muted)",
+            "fontSize": "1rem",
+            "lineHeight": "1.7",
+            "maxWidth": "60ch"
+          },
+          "textContent": "Yes. The Starter plan is free forever and includes up to three projects — no credit card required. It’s a great way to explore Flowlark before inviting your whole team."
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "borderBottom": "1px solid var(--color-border)" },
+      "children": [
+        {
+          "tagName": "button",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/open" },
+              "value": {
+                "operator": "||",
+                "target": {
+                  "operator": "&&",
+                  "target": { "operator": "===", "target": { "$ref": "#/state/open" }, "value": 2 },
+                  "value": -1
+                },
+                "value": 2
+              }
+            }
+          },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "width": "100%",
+            "padding": "1.4rem 0.25rem",
+            "border": "none",
+            "background": "transparent",
+            "cursor": "pointer",
+            "textAlign": "left",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.1rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [
+            { "tagName": "span", "textContent": "How does annual billing save me money?" },
+            {
+              "tagName": "span",
+              "style": {
+                "flexShrink": "0",
+                "color": "var(--color-primary)",
+                "fontSize": "1.1rem",
+                "transition": "transform 0.2s",
+                "transform": "${state.open === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+              },
+              "textContent": "⌄"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.open === 2 ? 'block' : 'none'}",
+            "padding": "0 0.25rem 1.4rem",
+            "color": "var(--color-text-muted)",
+            "fontSize": "1rem",
+            "lineHeight": "1.7",
+            "maxWidth": "60ch"
+          },
+          "textContent": "Choosing annual billing gives you roughly two months free — a 20% discount versus paying month to month. Toggle the switch above to compare the two side by side."
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "borderBottom": "1px solid var(--color-border)" },
+      "children": [
+        {
+          "tagName": "button",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/open" },
+              "value": {
+                "operator": "||",
+                "target": {
+                  "operator": "&&",
+                  "target": { "operator": "===", "target": { "$ref": "#/state/open" }, "value": 3 },
+                  "value": -1
+                },
+                "value": 3
+              }
+            }
+          },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "width": "100%",
+            "padding": "1.4rem 0.25rem",
+            "border": "none",
+            "background": "transparent",
+            "cursor": "pointer",
+            "textAlign": "left",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.1rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Do you offer discounts for startups or nonprofits?"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "flexShrink": "0",
+                "color": "var(--color-primary)",
+                "fontSize": "1.1rem",
+                "transition": "transform 0.2s",
+                "transform": "${state.open === 3 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+              },
+              "textContent": "⌄"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.open === 3 ? 'block' : 'none'}",
+            "padding": "0 0.25rem 1.4rem",
+            "color": "var(--color-text-muted)",
+            "fontSize": "1rem",
+            "lineHeight": "1.7",
+            "maxWidth": "60ch"
+          },
+          "textContent": "We do. Early-stage startups and registered nonprofits qualify for meaningful discounts on Pro and Scale. Reach out through the contact page and our team will get you set up."
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "borderBottom": "1px solid var(--color-border)" },
+      "children": [
+        {
+          "tagName": "button",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/open" },
+              "value": {
+                "operator": "||",
+                "target": {
+                  "operator": "&&",
+                  "target": { "operator": "===", "target": { "$ref": "#/state/open" }, "value": 4 },
+                  "value": -1
+                },
+                "value": 4
+              }
+            }
+          },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "width": "100%",
+            "padding": "1.4rem 0.25rem",
+            "border": "none",
+            "background": "transparent",
+            "cursor": "pointer",
+            "textAlign": "left",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.1rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [
+            { "tagName": "span", "textContent": "Is my data secure?" },
+            {
+              "tagName": "span",
+              "style": {
+                "flexShrink": "0",
+                "color": "var(--color-primary)",
+                "fontSize": "1.1rem",
+                "transition": "transform 0.2s",
+                "transform": "${state.open === 4 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+              },
+              "textContent": "⌄"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.open === 4 ? 'block' : 'none'}",
+            "padding": "0 0.25rem 1.4rem",
+            "color": "var(--color-text-muted)",
+            "fontSize": "1rem",
+            "lineHeight": "1.7",
+            "maxWidth": "60ch"
+          },
+          "textContent": "Security is built in, not bolted on. Data is encrypted in transit and at rest, and the Scale plan adds SSO, SCIM provisioning, and audit logs for teams with stricter compliance needs."
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "borderBottom": "1px solid var(--color-border)" },
+      "children": [
+        {
+          "tagName": "button",
+          "onclick": {
+            "$expression": {
+              "operator": "=",
+              "target": { "$ref": "#/state/open" },
+              "value": {
+                "operator": "||",
+                "target": {
+                  "operator": "&&",
+                  "target": { "operator": "===", "target": { "$ref": "#/state/open" }, "value": 5 },
+                  "value": -1
+                },
+                "value": 5
+              }
+            }
+          },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "width": "100%",
+            "padding": "1.4rem 0.25rem",
+            "border": "none",
+            "background": "transparent",
+            "cursor": "pointer",
+            "textAlign": "left",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.1rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [
+            { "tagName": "span", "textContent": "What kind of support do you offer?" },
+            {
+              "tagName": "span",
+              "style": {
+                "flexShrink": "0",
+                "color": "var(--color-primary)",
+                "fontSize": "1.1rem",
+                "transition": "transform 0.2s",
+                "transform": "${state.open === 5 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+              },
+              "textContent": "⌄"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "${state.open === 5 ? 'block' : 'none'}",
+            "padding": "0 0.25rem 1.4rem",
+            "color": "var(--color-text-muted)",
+            "fontSize": "1rem",
+            "lineHeight": "1.7",
+            "maxWidth": "60ch"
+          },
+          "textContent": "Every plan includes documentation and community help. Pro adds priority email support, and Scale includes a dedicated success manager plus guaranteed response times."
+        }
+      ]
+    }
+  ]
+}