@jxsuite/starters 3.4.0 → 3.6.0

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

@@ -1,153 +0,0 @@
-{
-  "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

@@ -1,102 +0,0 @@
-{
-  "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

@@ -1,413 +0,0 @@
-{
-  "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."
-        }
-      ]
-    }
-  ]
-}