@jxsuite/starters 3.4.0 → 3.6.0

package/sites/course/components/co-nav.jxn

@@ -0,0 +1,172 @@
+/- kdl-version 2
+
+co-nav {
+    state brand="Craft & Code"
+    style display=block position=sticky top="0" zIndex="50"
+    div {
+        style {
+            backgroundColor "var(--color-ink)"
+            color "var(--color-text-white)"
+            borderBottom "1px solid var(--color-terminal-line)"
+        }
+        div {
+            style {
+                maxWidth "var(--max-width)"
+                margin "0 auto"
+                padding "0.5rem 1.5rem"
+                display flex
+                alignItems center
+                justifyContent center
+                gap "1rem"
+                flexWrap wrap
+                fontFamily "var(--font-mono)"
+                fontSize "0.78rem"
+                letterSpacing "0.01em"
+            }
+            span {
+                style display=inline-flex alignItems=center gap="0.5rem"
+                span {
+                    style {
+                        width "0.5rem"
+                        height "0.5rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-accent)"
+                        boxShadow "0 0 0 3px rgba(163,230,53,0.2)"
+                        flex none
+                    }
+                }
+                span {
+                    style color="rgba(255,255,255,0.92)"
+                    span next_cohort {
+                        style color="var(--color-accent)"
+                    }
+                    span " = " {
+                        style color="rgba(255,255,255,0.5)"
+                    }
+                    span "Sept 8, 2026"
+                }
+            }
+            span · {
+                style color="var(--color-terminal-line)" {
+                    @--sm display=none
+                }
+            }
+            span "6 of 24 seats left" {
+                style color="rgba(255,255,255,0.7)" {
+                    @--sm display=none
+                }
+            }
+            span · {
+                style color="var(--color-terminal-line)" {
+                    @--sm display=none
+                }
+            }
+            a href="/enroll/" "apply →" {
+                style color="var(--color-accent-cyan)" textDecoration=none fontWeight="600" {
+                    :hover textDecoration=underline
+                }
+            }
+        }
+    }
+    div {
+        style {
+            backgroundColor "rgba(255, 255, 255, 0.85)"
+            backdropFilter "blur(10px)"
+            borderBottom "1px solid var(--color-border)"
+        }
+        div {
+            style {
+                maxWidth "var(--max-width)"
+                margin "0 auto"
+                padding "0.85rem 1.5rem"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1.5rem"
+            }
+            a href="/" {
+                style display=flex alignItems=center gap="0.65rem" textDecoration=none
+                span "</>" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2rem"
+                        height "2rem"
+                        borderRadius "0.5rem"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        fontFamily "var(--font-mono)"
+                        fontSize "0.85rem"
+                        fontWeight "700"
+                        boxShadow "0 6px 16px -6px rgba(79,70,229,0.7)"
+                    }
+                }
+                span {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.2rem"
+                        fontWeight "800"
+                        color "var(--color-text-primary)"
+                        letterSpacing "-0.02em"
+                    }
+                    span "${state.brand}"
+                    span " Academy" {
+                        style color="var(--color-primary)"
+                    }
+                }
+            }
+            nav {
+                style display=flex alignItems=center gap="1.9rem" {
+                    @--sm gap="1rem"
+                }
+                a href="/curriculum/" Curriculum {
+                    style {
+                        fontFamily "var(--font-mono)"
+                        textTransform uppercase
+                        letterSpacing "0.08em"
+                        color "var(--color-text-muted)"
+                        textDecoration none
+                        fontWeight "500"
+                        fontSize "0.78rem"
+                        @--sm display=none
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/about/" About {
+                    style {
+                        fontFamily "var(--font-mono)"
+                        textTransform uppercase
+                        letterSpacing "0.08em"
+                        color "var(--color-text-muted)"
+                        textDecoration none
+                        fontWeight "500"
+                        fontSize "0.78rem"
+                        @--sm display=none
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/enroll/" Enroll {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.4rem"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        padding "0.55rem 1.3rem"
+                        borderRadius "999px"
+                        textDecoration none
+                        fontWeight "600"
+                        fontSize "0.9rem"
+                        boxShadow "0 8px 20px -8px rgba(79,70,229,0.8)"
+                        transition "transform 0.15s, background-color 0.15s"
+                        :hover {
+                            backgroundColor "var(--color-primary-hover)"
+                            transform "translateY(-1px)"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/course/components/co-outcome-card.jxn

@@ -0,0 +1,57 @@
+/- kdl-version 2
+
+co-outcome-card {
+    state number="" icon="" title="" text=""
+    style {
+        display block
+        position relative
+        padding "1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        transition "transform 0.15s, box-shadow 0.15s, border-color 0.15s"
+        :hover {
+            transform "translateY(-4px)"
+            boxShadow "0 18px 40px -18px rgba(79,70,229,0.4)"
+            borderColor "var(--color-primary-light)"
+        }
+    }
+    div {
+        style display=flex alignItems=center justifyContent=space-between marginBottom="1.1rem"
+        div "${state.icon}" {
+            style {
+                display inline-flex
+                alignItems center
+                justifyContent center
+                width "2.9rem"
+                height "2.9rem"
+                borderRadius "0.65rem"
+                backgroundColor "var(--color-indigo-050)"
+                border "1px solid var(--color-indigo-line)"
+                fontSize "1.45rem"
+                lineHeight "1"
+            }
+        }
+        span "${state.number}" {
+            style {
+                fontFamily "var(--font-mono)"
+                fontSize "0.85rem"
+                fontWeight "600"
+                color "var(--color-text-faint)"
+            }
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.18rem"
+            fontWeight "700"
+            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"
+    }
+}

package/sites/course/components/co-outcomes.jxn

@@ -0,0 +1,179 @@
+/- kdl-version 2
+
+co-outcomes {
+    state kicker=outcomes heading="" n1="" l1="" n2="" l2="" n3="" l3="" n4="" l4=""
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-ink)"
+        color "var(--color-text-white)"
+        padding "clamp(3rem, 6vw, 4.5rem) 1.5rem"
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            backgroundImage "radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)"
+            backgroundSize "28px 28px"
+            opacity "0.5"
+            pointerEvents none
+        }
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            background "radial-gradient(ellipse 55% 90% at 50% -10%, rgba(79,70,229,0.35), transparent 60%)"
+            pointerEvents none
+        }
+    }
+    div {
+        style position=relative zIndex="2" maxWidth="var(--max-width)" margin="0 auto"
+        div {
+            style textAlign=center marginBottom="2.75rem"
+            p {
+                style {
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.8rem"
+                    fontWeight "600"
+                    color "var(--color-accent)"
+                    margin "0 0 0.85rem"
+                    letterSpacing "0.02em"
+                }
+                span "$ " {
+                    style color="rgba(255,255,255,0.4)"
+                }
+                span "${state.kicker}"
+            }
+            h2 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(1.7rem, 3.4vw, 2.4rem)"
+                    fontWeight "800"
+                    letterSpacing "-0.03em"
+                    lineHeight "1.15"
+                    margin "0 auto"
+                    maxWidth "22ch"
+                }
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(4, 1fr)"
+                border "1px solid var(--color-terminal-line)"
+                borderRadius "0.9rem"
+                backgroundColor "rgba(20,28,57,0.5)"
+                overflow hidden
+                @--sm gridTemplateColumns="repeat(2, 1fr)"
+            }
+            div {
+                style {
+                    padding "clamp(1.5rem, 3vw, 2.25rem) 1.25rem"
+                    textAlign center
+                    borderRight "1px solid var(--color-terminal-line)"
+                    @--sm borderBottom="1px solid var(--color-terminal-line)"
+                }
+                div "${state.n1}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(2.1rem, 4.5vw, 3rem)"
+                        fontWeight "800"
+                        lineHeight "1"
+                        letterSpacing "-0.03em"
+                        color "var(--color-text-white)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div "${state.l1}" {
+                    style {
+                        marginTop "0.65rem"
+                        fontSize "0.85rem"
+                        fontWeight "500"
+                        color "rgba(255,255,255,0.6)"
+                        lineHeight "1.4"
+                    }
+                }
+            }
+            div {
+                style {
+                    padding "clamp(1.5rem, 3vw, 2.25rem) 1.25rem"
+                    textAlign center
+                    borderRight "1px solid var(--color-terminal-line)"
+                    @--sm borderRight=none borderBottom="1px solid var(--color-terminal-line)"
+                }
+                div "${state.n2}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(2.1rem, 4.5vw, 3rem)"
+                        fontWeight "800"
+                        lineHeight "1"
+                        letterSpacing "-0.03em"
+                        color "var(--color-accent)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div "${state.l2}" {
+                    style {
+                        marginTop "0.65rem"
+                        fontSize "0.85rem"
+                        fontWeight "500"
+                        color "rgba(255,255,255,0.6)"
+                        lineHeight "1.4"
+                    }
+                }
+            }
+            div {
+                style {
+                    padding "clamp(1.5rem, 3vw, 2.25rem) 1.25rem"
+                    textAlign center
+                    borderRight "1px solid var(--color-terminal-line)"
+                }
+                div "${state.n3}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(2.1rem, 4.5vw, 3rem)"
+                        fontWeight "800"
+                        lineHeight "1"
+                        letterSpacing "-0.03em"
+                        color "var(--color-text-white)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div "${state.l3}" {
+                    style {
+                        marginTop "0.65rem"
+                        fontSize "0.85rem"
+                        fontWeight "500"
+                        color "rgba(255,255,255,0.6)"
+                        lineHeight "1.4"
+                    }
+                }
+            }
+            div {
+                style padding="clamp(1.5rem, 3vw, 2.25rem) 1.25rem" textAlign=center
+                div "${state.n4}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(2.1rem, 4.5vw, 3rem)"
+                        fontWeight "800"
+                        lineHeight "1"
+                        letterSpacing "-0.03em"
+                        color "var(--color-accent-cyan)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div "${state.l4}" {
+                    style {
+                        marginTop "0.65rem"
+                        fontSize "0.85rem"
+                        fontWeight "500"
+                        color "rgba(255,255,255,0.6)"
+                        lineHeight "1.4"
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/course/components/co-pricing.jxn

@@ -0,0 +1,145 @@
+/- kdl-version 2
+
+co-pricing {
+    state {
+        badge ""
+        plan "Full Program"
+        price ""
+        period ""
+        description ""
+        cta "Enroll Now"
+        ctaHref "/enroll/"
+        note ""
+    }
+    style {
+        display block
+        maxWidth "460px"
+        margin "0 auto"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border-strong)"
+        borderRadius "1rem"
+        overflow hidden
+        boxShadow "0 30px 70px -34px rgba(15,20,36,0.5)"
+    }
+    div {
+        style {
+            display "${state.badge ? 'flex' : 'none'}"
+            alignItems center
+            justifyContent center
+            gap "0.5rem"
+            backgroundColor "var(--color-primary)"
+            color "var(--color-text-white)"
+            padding "0.65rem 1rem"
+            fontFamily "var(--font-mono)"
+            fontSize "0.78rem"
+            fontWeight "600"
+            letterSpacing "0.02em"
+        }
+        span {
+            style {
+                width "0.45rem"
+                height "0.45rem"
+                borderRadius "999px"
+                backgroundColor "var(--color-accent)"
+            }
+        }
+        span "${state.badge}"
+    }
+    div {
+        style padding="clamp(1.85rem, 4vw, 2.5rem)"
+        div "${state.plan}" {
+            style {
+                fontFamily "var(--font-mono)"
+                fontSize "0.8rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.08em"
+                color "var(--color-text-muted)"
+                marginBottom "0.75rem"
+            }
+        }
+        div {
+            style display=flex alignItems=baseline gap="0.5rem" flexWrap=wrap
+            span "${state.price}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.5rem, 6vw, 3.25rem)"
+                    fontWeight "800"
+                    letterSpacing "-0.03em"
+                    lineHeight "1"
+                    color "var(--color-text-primary)"
+                }
+            }
+            span "${state.period}" {
+                style {
+                    display "${state.period ? 'inline' : 'none'}"
+                    fontFamily "var(--font-mono)"
+                    color "var(--color-text-muted)"
+                    fontSize "0.9rem"
+                    fontWeight "500"
+                }
+            }
+        }
+        p "${state.description}" {
+            style {
+                display "${state.description ? 'block' : 'none'}"
+                margin "0.85rem 0 1.5rem"
+                color "var(--color-text-muted)"
+                fontSize "1rem"
+                lineHeight "1.65"
+            }
+        }
+        div {
+            style {
+                margin "0 0 1.75rem"
+                paddingTop "1.5rem"
+                borderTop "1px solid var(--color-border)"
+                fontSize "0.98rem"
+                lineHeight "1.6"
+                "& ul" listStyle=none margin="0" padding="0"
+                "& li" {
+                    position relative
+                    paddingLeft "1.7rem"
+                    marginBottom "0.65rem"
+                    color "var(--color-text-primary)"
+                }
+                "& li::before" {
+                    content '✔'
+                    position absolute
+                    left "0"
+                    top "0"
+                    color "#65a30d"
+                    fontWeight "700"
+                    fontFamily "var(--font-mono)"
+                }
+            }
+            slot
+        }
+        a href="${state.ctaHref}" "${state.cta}" {
+            style {
+                display block
+                textAlign center
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.95rem 1.5rem"
+                borderRadius "999px"
+                fontSize "1.05rem"
+                fontWeight "600"
+                textDecoration none
+                boxShadow "0 14px 30px -14px rgba(79,70,229,0.9)"
+                transition "background-color 0.15s, transform 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)" transform="translateY(-1px)"
+            }
+        }
+        p "${state.note}" {
+            style {
+                display "${state.note ? 'block' : 'none'}"
+                margin "1rem 0 0"
+                textAlign center
+                fontFamily "var(--font-mono)"
+                fontSize "0.78rem"
+                color "var(--color-text-muted)"
+            }
+        }
+    }
+}

package/sites/course/components/co-section-header.jxn

@@ -0,0 +1,55 @@
+/- kdl-version 2
+
+co-section-header {
+    state eyebrow="" index="" heading="" subheading="" align=center
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        margin "0 auto 2.75rem"
+        textAlign "${state.align}"
+    }
+    div {
+        style {
+            display "${state.eyebrow ? 'flex' : 'none'}"
+            alignItems center
+            gap "0.6rem"
+            justifyContent "${state.align === 'center' ? 'center' : 'flex-start'}"
+            fontFamily "var(--font-mono)"
+            fontSize "0.8rem"
+            fontWeight "600"
+            margin "0 0 0.9rem"
+        }
+        span "//" {
+            style color="var(--color-text-faint)"
+        }
+        span "${state.eyebrow}" {
+            style color="var(--color-primary)" letterSpacing="0.02em"
+        }
+        span "· ${state.index}" {
+            style display="${state.index ? 'inline' : 'none'}" color="var(--color-text-faint)"
+        }
+    }
+    h2 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(1.9rem, 3.8vw, 2.65rem)"
+            fontWeight "800"
+            lineHeight "1.12"
+            letterSpacing "-0.03em"
+            margin "0"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.1rem"
+            lineHeight "1.65"
+            color "var(--color-text-muted)"
+            margin "1rem 0 0"
+            maxWidth "${state.align === 'center' ? '60ch' : 'none'}"
+            marginLeft "${state.align === 'center' ? 'auto' : '0'}"
+            marginRight "${state.align === 'center' ? 'auto' : '0'}"
+        }
+    }
+}

package/sites/course/components/co-testimonial-card.jxn

@@ -0,0 +1,69 @@
+/- kdl-version 2
+
+co-testimonial-card {
+    state quote="" author="" role=""
+    style {
+        display flex
+        flexDirection column
+        padding "1.85rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        boxShadow "0 8px 26px -18px rgba(15,20,36,0.4)"
+    }
+    div {
+        style display=flex alignItems=center gap="0.6rem" marginBottom="1rem"
+        span ★★★★★ {
+            style color="#eab308" fontSize="0.95rem" letterSpacing="0.1em"
+        }
+        span "hired ✔" {
+            style fontFamily="var(--font-mono)" fontSize="0.7rem" color="#65a30d" fontWeight="600"
+        }
+    }
+    p "“${state.quote}”" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.08rem"
+            lineHeight "1.55"
+            fontWeight "500"
+            letterSpacing "-0.01em"
+            margin "0 0 1.35rem"
+            color "var(--color-text-primary)"
+            flex "1"
+        }
+    }
+    div {
+        style {
+            display flex
+            alignItems center
+            gap "0.75rem"
+            paddingTop "1rem"
+            borderTop "1px solid var(--color-border)"
+        }
+        div ❯ {
+            style {
+                flex none
+                display flex
+                alignItems center
+                justifyContent center
+                width "2.4rem"
+                height "2.4rem"
+                borderRadius "999px"
+                backgroundColor "var(--color-indigo-050)"
+                border "1px solid var(--color-indigo-line)"
+                color "var(--color-primary)"
+                fontFamily "var(--font-mono)"
+                fontWeight "700"
+                fontSize "1rem"
+            }
+        }
+        div {
+            div "${state.author}" {
+                style fontWeight="700" fontSize="0.95rem" color="var(--color-text-primary)"
+            }
+            div "${state.role}" {
+                style fontSize="0.85rem" color="var(--color-text-muted)"
+            }
+        }
+    }
+}