@jxsuite/starters 3.4.0 → 3.5.0

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

@@ -0,0 +1,94 @@
+/- kdl-version 2
+
+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
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.5rem"
+            fontWeight "600"
+            letterSpacing "-0.01em"
+            margin "0 0 1.25rem"
+        }
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start
+        input 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
+            }
+        }
+        input 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
+            }
+        }
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="1rem" {
+                @--sm gridTemplateColumns="1fr"
+            }
+            input 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
+                }
+            }
+            input 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
+                }
+            }
+        }
+        textarea 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
+            }
+        }
+        button type=submit "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)"
+            }
+        }
+        p "${state.note}" {
+            style fontSize="0.85rem" color="var(--color-text-muted)" margin="0"
+        }
+    }
+}

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

@@ -0,0 +1,68 @@
+/- kdl-version 2
+
+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
+    }
+    div {
+        style position=relative zIndex="10" maxWidth="var(--max-width-narrow)" margin="0 auto"
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(1.9rem, 4vw, 2.9rem)"
+                fontWeight "700"
+                letterSpacing "-0.03em"
+                lineHeight "1.12"
+                margin "0 0 1rem"
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontSize "1.1rem"
+                lineHeight "1.7"
+                color "rgba(255, 255, 255, 0.72)"
+                margin "0 auto 2rem"
+                maxWidth "48ch"
+            }
+        }
+        div {
+            style display=flex gap="0.75rem" justifyContent=center flexWrap=wrap
+            a href="${state.ctaHref}" "${state.cta}" {
+                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)"
+                }
+            }
+            a href="${state.cta2Href}" "${state.cta2}" {
+                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)"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,347 @@
+/- kdl-version 2
+
+sa-faq {
+    state open=0
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        margin "0 auto"
+        borderTop "1px solid var(--color-border)"
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button {
+            (on)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)"
+            }
+            span "Can I change plans or cancel at any time?"
+            span ⌄ {
+                style {
+                    flexShrink "0"
+                    color "var(--color-primary)"
+                    fontSize "1.1rem"
+                    transition "transform 0.2s"
+                    transform "${state.open === 0 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+                }
+            }
+        }
+        div "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." {
+            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"
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button {
+            (on)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)"
+            }
+            span "Is there a free plan?"
+            span ⌄ {
+                style {
+                    flexShrink "0"
+                    color "var(--color-primary)"
+                    fontSize "1.1rem"
+                    transition "transform 0.2s"
+                    transform "${state.open === 1 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+                }
+            }
+        }
+        div "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." {
+            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"
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button {
+            (on)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)"
+            }
+            span "How does annual billing save me money?"
+            span ⌄ {
+                style {
+                    flexShrink "0"
+                    color "var(--color-primary)"
+                    fontSize "1.1rem"
+                    transition "transform 0.2s"
+                    transform "${state.open === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+                }
+            }
+        }
+        div "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." {
+            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"
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button {
+            (on)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)"
+            }
+            span "Do you offer discounts for startups or nonprofits?"
+            span ⌄ {
+                style {
+                    flexShrink "0"
+                    color "var(--color-primary)"
+                    fontSize "1.1rem"
+                    transition "transform 0.2s"
+                    transform "${state.open === 3 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+                }
+            }
+        }
+        div "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." {
+            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"
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button {
+            (on)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)"
+            }
+            span "Is my data secure?"
+            span ⌄ {
+                style {
+                    flexShrink "0"
+                    color "var(--color-primary)"
+                    fontSize "1.1rem"
+                    transition "transform 0.2s"
+                    transform "${state.open === 4 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+                }
+            }
+        }
+        div "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." {
+            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"
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button {
+            (on)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)"
+            }
+            span "What kind of support do you offer?"
+            span ⌄ {
+                style {
+                    flexShrink "0"
+                    color "var(--color-primary)"
+                    fontSize "1.1rem"
+                    transition "transform 0.2s"
+                    transform "${state.open === 5 ? 'rotate(180deg)' : 'rotate(0deg)'}"
+                }
+            }
+        }
+        div "Every plan includes documentation and community help. Pro adds priority email support, and Scale includes a dedicated success manager plus guaranteed response times." {
+            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"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,57 @@
+/- kdl-version 2
+
+sa-feature-card {
+    state icon="" title="" text="" col="2"
+    style {
+        display flex
+        flexDirection column
+        gridColumn "span ${state.col}"
+        padding "1.9rem"
+        backgroundColor "var(--color-bg-elev)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        position relative
+        overflow hidden
+        transition "border-color 0.18s, transform 0.18s, box-shadow 0.18s"
+        @--md gridColumn="span 1"
+        :hover {
+            borderColor "rgba(124, 116, 255, 0.5)"
+            transform "translateY(-3px)"
+            boxShadow "0 18px 44px -20px var(--glow)"
+        }
+    }
+    div "${state.icon}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "2.9rem"
+            height "2.9rem"
+            borderRadius "0.7rem"
+            background "linear-gradient(150deg, rgba(124,116,255,0.28), rgba(34,211,238,0.14))"
+            border "1px solid var(--color-border)"
+            fontSize "1.45rem"
+            lineHeight "1"
+            marginBottom "1.1rem"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.22rem"
+            fontWeight "600"
+            letterSpacing "-0.01em"
+            margin "0 0 0.5rem"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.text}" {
+        style {
+            margin "0"
+            color "var(--color-text-muted)"
+            fontSize "0.98rem"
+            lineHeight "1.65"
+            maxWidth "46ch"
+        }
+    }
+}

package/sites/saas/components/sa-feature-split.jxn

@@ -0,0 +1,43 @@
+/- kdl-version 2
+
+sa-feature-split {
+    state {
+        image type=string format=image default=""
+        imageAlt ""
+        reverse #false
+    }
+    style display=block padding="clamp(3rem, 7vw, 5rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1fr 1fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            style order="${state.reverse ? '2' : '1'}"
+            img 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)"
+                }
+            }
+        }
+        div {
+            style {
+                order "${state.reverse ? '1' : '2'}"
+                fontSize "1.05rem"
+                lineHeight "1.75"
+                color "var(--color-text-primary)"
+            }
+            slot
+        }
+    }
+}