@jxsuite/starters 0.34.0

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

@@ -0,0 +1,427 @@
+{
+  "tagName": "sa-pricing",
+  "state": {
+    "billing": "monthly",
+    "starterMonthly": "0",
+    "starterAnnual": "0",
+    "proMonthly": "29",
+    "proAnnual": "24",
+    "scaleMonthly": "79",
+    "scaleAnnual": "63"
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto",
+    "padding": "0 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "flexDirection": "column",
+        "alignItems": "center",
+        "gap": "0.6rem",
+        "marginBottom": "2.75rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "display": "inline-flex",
+            "padding": "0.3rem",
+            "borderRadius": "999px",
+            "backgroundColor": "var(--color-bg-cream)",
+            "border": "1px solid var(--color-border)"
+          },
+          "children": [
+            {
+              "tagName": "button",
+              "textContent": "Monthly",
+              "onclick": {
+                "$expression": {
+                  "operator": "=",
+                  "target": { "$ref": "#/state/billing" },
+                  "value": "monthly"
+                }
+              },
+              "style": {
+                "padding": "0.5rem 1.25rem",
+                "border": "none",
+                "borderRadius": "999px",
+                "cursor": "pointer",
+                "fontSize": "0.9rem",
+                "fontWeight": "600",
+                "fontFamily": "inherit",
+                "transition": "background-color 0.15s, color 0.15s, box-shadow 0.15s",
+                "backgroundColor": "${state.billing === 'monthly' ? 'var(--color-bg-white)' : 'transparent'}",
+                "color": "${state.billing === 'monthly' ? 'var(--color-text-primary)' : 'var(--color-text-muted)'}",
+                "boxShadow": "${state.billing === 'monthly' ? '0 1px 4px rgba(20, 20, 43, 0.1)' : 'none'}"
+              }
+            },
+            {
+              "tagName": "button",
+              "textContent": "Annual",
+              "onclick": {
+                "$expression": {
+                  "operator": "=",
+                  "target": { "$ref": "#/state/billing" },
+                  "value": "annual"
+                }
+              },
+              "style": {
+                "padding": "0.5rem 1.25rem",
+                "border": "none",
+                "borderRadius": "999px",
+                "cursor": "pointer",
+                "fontSize": "0.9rem",
+                "fontWeight": "600",
+                "fontFamily": "inherit",
+                "transition": "background-color 0.15s, color 0.15s, box-shadow 0.15s",
+                "backgroundColor": "${state.billing === 'annual' ? 'var(--color-bg-white)' : 'transparent'}",
+                "color": "${state.billing === 'annual' ? 'var(--color-text-primary)' : 'var(--color-text-muted)'}",
+                "boxShadow": "${state.billing === 'annual' ? '0 1px 4px rgba(20, 20, 43, 0.1)' : 'none'}"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0",
+            "fontSize": "0.85rem",
+            "fontWeight": "600",
+            "color": "var(--color-primary)"
+          },
+          "textContent": "${state.billing === 'annual' ? 'You’re saving 20% with annual billing' : 'Switch to annual and save 20%'}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "grid",
+        "gridTemplateColumns": "repeat(3, 1fr)",
+        "gap": "1.25rem",
+        "alignItems": "stretch",
+        "@--md": { "gridTemplateColumns": "1fr", "maxWidth": "420px", "margin": "0 auto" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "padding": "2rem",
+            "borderRadius": "var(--radius)",
+            "border": "1px solid var(--color-border)",
+            "backgroundColor": "var(--color-bg-white)"
+          },
+          "children": [
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "600",
+                "margin": "0 0 0.35rem"
+              },
+              "textContent": "Starter"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.25rem",
+                "color": "var(--color-text-muted)",
+                "fontSize": "0.92rem",
+                "lineHeight": "1.55"
+              },
+              "textContent": "For individuals and side projects getting off the ground."
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "0.25rem",
+                "marginBottom": "0.25rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "2.75rem",
+                    "fontWeight": "700",
+                    "letterSpacing": "-0.03em",
+                    "lineHeight": "1"
+                  },
+                  "textContent": "$${state.billing === 'monthly' ? state.starterMonthly : state.starterAnnual}"
+                },
+                {
+                  "tagName": "span",
+                  "style": { "color": "var(--color-text-muted)", "fontSize": "0.95rem" },
+                  "textContent": "/mo"
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.5rem",
+                "fontSize": "0.82rem",
+                "color": "var(--color-text-muted)"
+              },
+              "textContent": "${state.billing === 'annual' ? 'per user · billed annually' : 'per user · billed monthly'}"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "block",
+                "textAlign": "center",
+                "padding": "0.7rem 1rem",
+                "borderRadius": "var(--radius)",
+                "border": "1px solid var(--color-border)",
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.95rem",
+                "marginBottom": "1.5rem",
+                "transition": "border-color 0.15s",
+                ":hover": { "borderColor": "var(--color-primary)" }
+              },
+              "textContent": "Start for free"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "flexDirection": "column", "gap": "0.6rem" },
+              "children": [
+                { "tagName": "sa-check-item", "state": { "text": "Up to 3 projects" } },
+                { "tagName": "sa-check-item", "state": { "text": "Community support" } },
+                { "tagName": "sa-check-item", "state": { "text": "1 GB storage" } }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "relative",
+            "display": "flex",
+            "flexDirection": "column",
+            "padding": "2rem",
+            "borderRadius": "var(--radius)",
+            "border": "2px solid var(--color-primary)",
+            "backgroundColor": "var(--color-bg-white)",
+            "boxShadow": "0 20px 48px rgba(99, 102, 241, 0.18)"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "position": "absolute",
+                "top": "-0.75rem",
+                "left": "2rem",
+                "padding": "0.25rem 0.75rem",
+                "borderRadius": "999px",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "letterSpacing": "0.05em",
+                "textTransform": "uppercase"
+              },
+              "textContent": "Most popular"
+            },
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "600",
+                "margin": "0 0 0.35rem"
+              },
+              "textContent": "Pro"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.25rem",
+                "color": "var(--color-text-muted)",
+                "fontSize": "0.92rem",
+                "lineHeight": "1.55"
+              },
+              "textContent": "For growing teams that need automation and insight."
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "0.25rem",
+                "marginBottom": "0.25rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "2.75rem",
+                    "fontWeight": "700",
+                    "letterSpacing": "-0.03em",
+                    "lineHeight": "1",
+                    "color": "var(--color-primary)"
+                  },
+                  "textContent": "$${state.billing === 'monthly' ? state.proMonthly : state.proAnnual}"
+                },
+                {
+                  "tagName": "span",
+                  "style": { "color": "var(--color-text-muted)", "fontSize": "0.95rem" },
+                  "textContent": "/mo"
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.5rem",
+                "fontSize": "0.82rem",
+                "color": "var(--color-text-muted)"
+              },
+              "textContent": "${state.billing === 'annual' ? 'per user · billed annually' : 'per user · billed monthly'}"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "block",
+                "textAlign": "center",
+                "padding": "0.7rem 1rem",
+                "borderRadius": "var(--radius)",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.95rem",
+                "marginBottom": "1.5rem",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+              },
+              "textContent": "Start 14-day trial"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "flexDirection": "column", "gap": "0.6rem" },
+              "children": [
+                { "tagName": "sa-check-item", "state": { "text": "Unlimited projects" } },
+                { "tagName": "sa-check-item", "state": { "text": "Automations & workflows" } },
+                { "tagName": "sa-check-item", "state": { "text": "Analytics dashboard" } },
+                { "tagName": "sa-check-item", "state": { "text": "Priority email support" } }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "padding": "2rem",
+            "borderRadius": "var(--radius)",
+            "border": "1px solid var(--color-border)",
+            "backgroundColor": "var(--color-bg-white)"
+          },
+          "children": [
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "600",
+                "margin": "0 0 0.35rem"
+              },
+              "textContent": "Scale"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.25rem",
+                "color": "var(--color-text-muted)",
+                "fontSize": "0.92rem",
+                "lineHeight": "1.55"
+              },
+              "textContent": "For organizations that need control, security, and SLAs."
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "0.25rem",
+                "marginBottom": "0.25rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "2.75rem",
+                    "fontWeight": "700",
+                    "letterSpacing": "-0.03em",
+                    "lineHeight": "1"
+                  },
+                  "textContent": "$${state.billing === 'monthly' ? state.scaleMonthly : state.scaleAnnual}"
+                },
+                {
+                  "tagName": "span",
+                  "style": { "color": "var(--color-text-muted)", "fontSize": "0.95rem" },
+                  "textContent": "/mo"
+                }
+              ]
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.5rem",
+                "fontSize": "0.82rem",
+                "color": "var(--color-text-muted)"
+              },
+              "textContent": "${state.billing === 'annual' ? 'per user · billed annually' : 'per user · billed monthly'}"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "block",
+                "textAlign": "center",
+                "padding": "0.7rem 1rem",
+                "borderRadius": "var(--radius)",
+                "border": "1px solid var(--color-border)",
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.95rem",
+                "marginBottom": "1.5rem",
+                "transition": "border-color 0.15s",
+                ":hover": { "borderColor": "var(--color-primary)" }
+              },
+              "textContent": "Talk to sales"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "flexDirection": "column", "gap": "0.6rem" },
+              "children": [
+                { "tagName": "sa-check-item", "state": { "text": "Everything in Pro" } },
+                { "tagName": "sa-check-item", "state": { "text": "SSO & SCIM provisioning" } },
+                { "tagName": "sa-check-item", "state": { "text": "Advanced permissions" } },
+                { "tagName": "sa-check-item", "state": { "text": "99.9% uptime SLA" } }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/saas/components/sa-section-header.json

@@ -0,0 +1,55 @@
+{
+  "tagName": "sa-section-header",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "align": "center"
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width-narrow)",
+    "margin": "0 auto 3rem",
+    "textAlign": "${state.align}"
+  },
+  "children": [
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.eyebrow ? 'block' : 'none'}",
+        "fontFamily": "var(--font-heading)",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.12em",
+        "fontSize": "0.8rem",
+        "fontWeight": "600",
+        "color": "var(--color-primary)",
+        "margin": "0 0 0.75rem"
+      },
+      "textContent": "${state.eyebrow}"
+    },
+    {
+      "tagName": "h2",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
+        "fontWeight": "700",
+        "lineHeight": "1.15",
+        "letterSpacing": "-0.03em",
+        "margin": "0"
+      },
+      "textContent": "${state.heading}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.subheading ? 'block' : 'none'}",
+        "fontSize": "1.1rem",
+        "lineHeight": "1.7",
+        "color": "var(--color-text-muted)",
+        "margin": "1rem auto 0",
+        "maxWidth": "56ch"
+      },
+      "textContent": "${state.subheading}"
+    }
+  ]
+}

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

@@ -0,0 +1,40 @@
+{
+  "tagName": "sa-stat",
+  "state": {
+    "value": "0",
+    "label": ""
+  },
+  "style": {
+    "display": "flex",
+    "flexDirection": "column",
+    "gap": "0.4rem",
+    "padding": "1.75rem",
+    "borderRadius": "var(--radius)",
+    "border": "1px solid var(--color-border)",
+    "backgroundColor": "var(--color-bg-cream)",
+    "textAlign": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "clamp(2.25rem, 5vw, 3.25rem)",
+        "fontWeight": "700",
+        "letterSpacing": "-0.03em",
+        "lineHeight": "1",
+        "color": "var(--color-primary)"
+      },
+      "textContent": "${state.value}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "fontSize": "0.9rem",
+        "color": "var(--color-text-muted)",
+        "lineHeight": "1.5"
+      },
+      "textContent": "${state.label}"
+    }
+  ]
+}

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

@@ -0,0 +1,57 @@
+{
+  "tagName": "sa-testimonial-card",
+  "state": {
+    "quote": "",
+    "author": "",
+    "company": ""
+  },
+  "style": {
+    "display": "flex",
+    "flexDirection": "column",
+    "gap": "1.25rem",
+    "padding": "1.9rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "boxShadow": "0 4px 24px rgba(20, 20, 43, 0.05)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "color": "var(--color-primary)",
+        "fontSize": "1rem",
+        "letterSpacing": "0.15em"
+      },
+      "textContent": "★★★★★"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.12rem",
+        "lineHeight": "1.6",
+        "fontWeight": "500",
+        "margin": "0",
+        "flex": "1",
+        "color": "var(--color-text-primary)"
+      },
+      "textContent": "“${state.quote}”"
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "fontWeight": "600", "color": "var(--color-text-primary)" },
+          "textContent": "${state.author}"
+        },
+        {
+          "tagName": "div",
+          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+          "textContent": "${state.company}"
+        }
+      ]
+    }
+  ]
+}

package/sites/saas/content/testimonials/marcus-bell.md

@@ -0,0 +1,8 @@
+---
+quote: The automations alone pay for the subscription. Work that used to eat a full day every week now just happens in the background.
+author: Marcus Bell
+company: Head of Ops, Lumen
+order: 2
+---
+
+Marcus automated status updates and handoffs, reclaiming roughly a day per week across the team.

package/sites/saas/content/testimonials/nadia-okafor.md

@@ -0,0 +1,8 @@
+---
+quote: Flowlark replaced three tools and a spreadsheet. Our team finally has one place to plan and ship — and onboarding a new hire takes an afternoon, not a week.
+author: Nadia Okafor
+company: VP Product, Northwind
+order: 1
+---
+
+Nadia's team consolidated planning, tracking, and reporting into Flowlark within their first sprint.

package/sites/saas/content/testimonials/priya-raman.md

@@ -0,0 +1,8 @@
+---
+quote: We scaled from 12 to 90 people without changing how we work. Flowlark grew with us instead of getting in the way.
+author: Priya Raman
+company: COO, Apex Labs
+order: 3
+---
+
+Priya credits Flowlark's permissions and workflows for keeping a fast-growing org aligned.

package/sites/saas/content/testimonials/theo-lindqvist.md

@@ -0,0 +1,8 @@
+---
+quote: Clean, fast, and genuinely a joy to use. Our engineers actually keep it open all day — that never happened with our old tracker.
+author: Theo Lindqvist
+company: Engineering Lead, Corva
+order: 4
+---
+
+Theo's engineering team adopted Flowlark as their daily driver within two weeks.

package/sites/saas/images.json

@@ -0,0 +1,30 @@
+{
+  "site": "saas",
+  "thumbnail": "hero",
+  "images": [
+    {
+      "role": "hero",
+      "query": "software dashboard abstract technology",
+      "orientation": "landscape",
+      "photoId": 27141316
+    },
+    {
+      "role": "feature-1",
+      "query": "team collaboration software",
+      "orientation": "landscape",
+      "photoId": 6804068
+    },
+    {
+      "role": "feature-2",
+      "query": "data analytics dashboard",
+      "orientation": "landscape",
+      "photoId": 97080
+    },
+    {
+      "role": "feature-3",
+      "query": "mobile app interface",
+      "orientation": "landscape",
+      "photoId": 3850263
+    }
+  ]
+}

package/sites/saas/layouts/base.json

@@ -0,0 +1,22 @@
+{
+  "tagName": "div",
+  "$elements": [
+    { "$ref": "../components/sa-nav.json" },
+    { "$ref": "../components/sa-footer.json" }
+  ],
+  "style": {
+    "minHeight": "100vh",
+    "display": "flex",
+    "flexDirection": "column",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "children": [
+    { "tagName": "sa-nav" },
+    {
+      "tagName": "main",
+      "style": { "flex": "1" },
+      "children": [{ "tagName": "slot" }]
+    },
+    { "tagName": "sa-footer" }
+  ]
+}