@jxsuite/starters 3.4.0 → 3.5.0

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

@@ -0,0 +1,106 @@
+/- kdl-version 2
+
+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"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "2fr 1fr 1fr"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            div "${state.brand}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.35rem"
+                    fontWeight "700"
+                    marginBottom "0.75rem"
+                    letterSpacing "-0.02em"
+                }
+            }
+            p "${state.tagline}" {
+                style margin="0" opacity="0.7" maxWidth="36ch" lineHeight="1.7"
+            }
+        }
+        div {
+            div Product {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.08em"
+                    fontSize "0.75rem"
+                    opacity "0.55"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href="/features/" Features {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.8"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                }
+            }
+            a href="/pricing/" Pricing {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.8"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                }
+            }
+            a href="/contact/" Contact {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.8"
+                    textDecoration none
+                }
+            }
+        }
+        div {
+            div "Get in touch" {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.08em"
+                    fontSize "0.75rem"
+                    opacity "0.55"
+                    marginBottom "0.9rem"
+                }
+            }
+            p "${state.email}" {
+                style margin="0 0 0.4rem" opacity="0.8"
+            }
+            p "Remote-first · Worldwide" {
+                style margin="0" opacity="0.8"
+            }
+        }
+    }
+    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"
+        }
+        p "© Flowlark. Built with Jx." {
+            style margin="0"
+        }
+    }
+}

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

@@ -0,0 +1,217 @@
+/- kdl-version 2
+
+sa-hero {
+    state {
+        eyebrow ""
+        heading ""
+        headingAccent ""
+        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
+        color "var(--color-text-white)"
+        background "radial-gradient(ellipse 48% 42% at 15% 0%, rgba(124,116,255,0.38), transparent 60%), radial-gradient(ellipse 42% 40% at 88% 8%, rgba(34,211,238,0.20), transparent 62%), radial-gradient(ellipse 65% 55% at 50% 118%, rgba(244,114,182,0.16), transparent 60%), var(--color-bg)"
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            backgroundImage "radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px)"
+            backgroundSize "34px 34px"
+            opacity "0.6"
+            pointerEvents none
+        }
+    }
+    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
+        }
+        p {
+            style {
+                display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                alignItems center
+                gap "0.55rem"
+                padding "0.4rem 0.95rem"
+                borderRadius "999px"
+                border "1px solid var(--color-border)"
+                backgroundColor "rgba(255, 255, 255, 0.04)"
+                fontSize "0.8125rem"
+                fontWeight "500"
+                color "var(--color-text-primary)"
+                margin "0 0 1.75rem"
+            }
+            span {
+                style {
+                    width "0.5rem"
+                    height "0.5rem"
+                    borderRadius "999px"
+                    background "var(--grad-btn)"
+                    boxShadow "0 0 10px var(--glow)"
+                }
+            }
+            span "${state.eyebrow}"
+        }
+        h1 {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(2.6rem, 6.8vw, 5rem)"
+                fontWeight "700"
+                lineHeight "1.02"
+                letterSpacing "-0.04em"
+                margin "0 auto 1.5rem"
+                maxWidth "18ch"
+                color "var(--color-text-primary)"
+            }
+            span "${state.heading} "
+            span "${state.headingAccent}" {
+                style {
+                    background "var(--grad)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "#22d3ee"
+                }
+            }
+        }
+        p "${state.subheading}" {
+            style {
+                fontSize "clamp(1.05rem, 2vw, 1.3rem)"
+                lineHeight "1.65"
+                color "var(--color-text-muted)"
+                margin "0 auto 2.25rem"
+                maxWidth "52ch"
+            }
+        }
+        div {
+            style display=flex gap="0.75rem" justifyContent=center flexWrap=wrap
+            a href="${state.ctaHref}" "${state.cta}" {
+                style {
+                    display inline-block
+                    background "var(--grad-btn)"
+                    color "#ffffff"
+                    padding "0.9rem 2rem"
+                    borderRadius "999px"
+                    fontSize "1.02rem"
+                    fontWeight "600"
+                    textDecoration none
+                    boxShadow "0 10px 30px -8px var(--glow)"
+                    transition "transform 0.15s, box-shadow 0.15s"
+                    :hover transform="translateY(-2px)" boxShadow="0 16px 40px -8px var(--glow)"
+                }
+            }
+            a href="${state.cta2Href}" "${state.cta2}" {
+                style {
+                    display "${state.cta2 ? 'inline-block' : 'none'}"
+                    border "1px solid var(--color-border)"
+                    backgroundColor "rgba(255,255,255,0.03)"
+                    color "var(--color-text-primary)"
+                    padding "0.9rem 2rem"
+                    borderRadius "999px"
+                    fontSize "1.02rem"
+                    fontWeight "600"
+                    textDecoration none
+                    transition "background-color 0.15s, border-color 0.15s"
+                    :hover {
+                        backgroundColor "rgba(255, 255, 255, 0.07)"
+                        borderColor "var(--color-text-muted)"
+                    }
+                }
+            }
+        }
+        p "${state.note}" {
+            style {
+                display "${state.note ? 'block' : 'none'}"
+                fontSize "0.85rem"
+                color "var(--color-text-muted)"
+                margin "1.25rem 0 0"
+            }
+        }
+        div {
+            style {
+                display "${state.image ? 'block' : 'none'}"
+                position relative
+                maxWidth "1000px"
+                margin "3.5rem auto 0"
+            }
+            div {
+                style {
+                    position absolute
+                    inset "-1px"
+                    borderRadius "calc(var(--radius) + 2px)"
+                    padding "1px"
+                    background "linear-gradient(160deg, rgba(139,123,255,0.7), rgba(34,211,238,0.25) 40%, transparent 70%)"
+                    pointerEvents none
+                }
+            }
+            div {
+                style {
+                    position relative
+                    borderRadius "var(--radius)"
+                    overflow hidden
+                    border "1px solid var(--color-border)"
+                    backgroundColor "var(--color-bg-elev)"
+                    boxShadow "0 40px 90px -30px rgba(0,0,0,0.8), 0 0 80px -20px var(--glow)"
+                }
+                div {
+                    style {
+                        display flex
+                        alignItems center
+                        gap "0.5rem"
+                        padding "0.75rem 1rem"
+                        borderBottom "1px solid var(--color-border)"
+                        backgroundColor "var(--color-bg-elev2)"
+                    }
+                    span {
+                        style {
+                            width "0.7rem"
+                            height "0.7rem"
+                            borderRadius "999px"
+                            backgroundColor "#ff5f57"
+                        }
+                    }
+                    span {
+                        style {
+                            width "0.7rem"
+                            height "0.7rem"
+                            borderRadius "999px"
+                            backgroundColor "#febc2e"
+                        }
+                    }
+                    span {
+                        style {
+                            width "0.7rem"
+                            height "0.7rem"
+                            borderRadius "999px"
+                            backgroundColor "#28c840"
+                        }
+                    }
+                    span app.flowlark.com {
+                        style {
+                            marginLeft "0.75rem"
+                            fontSize "0.75rem"
+                            color "var(--color-text-muted)"
+                            fontFamily "var(--font-heading)"
+                        }
+                    }
+                }
+                img src="${state.image}" alt="${state.imageAlt}" loading=eager {
+                    style display=block width="100%" height=auto
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,98 @@
+/- kdl-version 2
+
+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)"
+    }
+    div {
+        style maxWidth="var(--max-width)" margin="0 auto" textAlign=center
+        p "${state.label}" {
+            style {
+                fontSize "0.8rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.12em"
+                color "var(--color-text-muted)"
+                margin "0 0 1.75rem"
+            }
+        }
+        div {
+            style {
+                display flex
+                flexWrap wrap
+                justifyContent center
+                alignItems center
+                gap "clamp(1.5rem, 5vw, 3.5rem)"
+            }
+            span "${state.logo1}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.2rem"
+                    fontWeight "600"
+                    color "var(--color-text-primary)"
+                    opacity "0.65"
+                }
+            }
+            span "${state.logo2}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.2rem"
+                    fontWeight "600"
+                    color "var(--color-text-primary)"
+                    opacity "0.65"
+                }
+            }
+            span "${state.logo3}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.2rem"
+                    fontWeight "600"
+                    color "var(--color-text-primary)"
+                    opacity "0.65"
+                }
+            }
+            span "${state.logo4}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.2rem"
+                    fontWeight "600"
+                    color "var(--color-text-primary)"
+                    opacity "0.65"
+                }
+            }
+            span "${state.logo5}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.2rem"
+                    fontWeight "600"
+                    color "var(--color-text-primary)"
+                    opacity "0.65"
+                    @--sm display=none
+                }
+            }
+            span "${state.logo6}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.2rem"
+                    fontWeight "600"
+                    color "var(--color-text-primary)"
+                    opacity "0.65"
+                    @--sm display=none
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,108 @@
+/- kdl-version 2
+
+sa-nav {
+    state brand=Flowlark
+    style {
+        display block
+        position sticky
+        top "0"
+        zIndex "50"
+        backgroundColor "rgba(10, 10, 20, 0.72)"
+        backdropFilter "blur(14px)"
+        borderBottom "1px solid var(--color-border)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "0.9rem 1.5rem"
+            display flex
+            alignItems center
+            justifyContent space-between
+            gap "1.5rem"
+        }
+        a href="/" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.6rem"
+                fontFamily "var(--font-heading)"
+                fontSize "1.3rem"
+                fontWeight "700"
+                color "var(--color-text-primary)"
+                textDecoration none
+                letterSpacing "-0.02em"
+            }
+            span ◆ {
+                style {
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    width "1.7rem"
+                    height "1.7rem"
+                    borderRadius "0.5rem"
+                    background "var(--grad-btn)"
+                    color "#ffffff"
+                    fontSize "1rem"
+                    boxShadow "0 0 18px var(--glow)"
+                }
+            }
+            span "${state.brand}"
+        }
+        nav {
+            style display=flex alignItems=center gap="1.7rem" {
+                @--sm gap="0.9rem"
+            }
+            a href="/features/" Features {
+                style {
+                    color "var(--color-text-muted)"
+                    textDecoration none
+                    fontWeight "500"
+                    fontSize "0.92rem"
+                    @--sm display=none
+                    transition "color 0.15s"
+                    :hover color="var(--color-text-primary)"
+                }
+            }
+            a href="/pricing/" Pricing {
+                style {
+                    color "var(--color-text-muted)"
+                    textDecoration none
+                    fontWeight "500"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-text-primary)"
+                }
+            }
+            a href="/contact/" Contact {
+                style {
+                    color "var(--color-text-muted)"
+                    textDecoration none
+                    fontWeight "500"
+                    fontSize "0.92rem"
+                    @--sm display=none
+                    transition "color 0.15s"
+                    :hover color="var(--color-text-primary)"
+                }
+            }
+            a href="/pricing/" "Get started" {
+                style {
+                    display inline-block
+                    background "var(--grad-btn)"
+                    color "#ffffff"
+                    padding "0.55rem 1.25rem"
+                    borderRadius "999px"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.92rem"
+                    boxShadow "0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px -8px var(--glow)"
+                    transition "transform 0.15s, box-shadow 0.15s"
+                    :hover {
+                        transform "translateY(-1px)"
+                        boxShadow "0 0 0 1px rgba(255,255,255,0.12), 0 12px 30px -8px var(--glow)"
+                    }
+                }
+            }
+        }
+    }
+}