@jxsuite/starters 3.4.0 → 3.5.0

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

@@ -0,0 +1,354 @@
+/- kdl-version 2
+
+co-hero {
+    state {
+        eyebrow ""
+        heading ""
+        headingAccent ""
+        subheading ""
+        cta "Enroll Now"
+        ctaHref "/enroll/"
+        cta2 ""
+        cta2Href "/curriculum/"
+        note ""
+        o1 ""
+        o2 ""
+        o3 ""
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-bg-white)"
+        backgroundImage "radial-gradient(ellipse 45% 50% at 88% 0%, rgba(79,70,229,0.12), transparent 60%), radial-gradient(ellipse 40% 45% at 5% 95%, rgba(34,211,238,0.08), transparent 60%)"
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            backgroundImage "radial-gradient(circle, rgba(15,20,36,0.05) 1px, transparent 1px)"
+            backgroundSize "30px 30px"
+            opacity "0.6"
+            pointerEvents none
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "2"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(3rem, 7vw, 5.5rem) 1.5rem clamp(3.5rem, 7vw, 6rem)"
+            display grid
+            gridTemplateColumns "1.02fr 0.98fr"
+            gap "clamp(2.5rem, 5vw, 4.5rem)"
+            alignItems center
+            @--lg gridTemplateColumns="1fr" gap="3rem"
+        }
+        div {
+            p {
+                style {
+                    display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    gap "0.55rem"
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.8rem"
+                    fontWeight "600"
+                    color "var(--color-primary)"
+                    backgroundColor "var(--color-indigo-050)"
+                    border "1px solid var(--color-indigo-line)"
+                    padding "0.4rem 0.85rem"
+                    borderRadius "999px"
+                    margin "0 0 1.5rem"
+                }
+                span {
+                    style {
+                        width "0.45rem"
+                        height "0.45rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-accent)"
+                        boxShadow "0 0 0 3px rgba(163,230,53,0.25)"
+                    }
+                }
+                span "${state.eyebrow}"
+            }
+            h1 {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.4rem, 5.4vw, 4rem)"
+                    fontWeight "800"
+                    lineHeight "1.04"
+                    letterSpacing "-0.035em"
+                    margin "0 0 1.35rem"
+                    color "var(--color-text-primary)"
+                }
+                span "${state.heading} "
+                span {
+                    style position=relative color="var(--color-primary)" whiteSpace=nowrap
+                    span "${state.headingAccent}"
+                }
+            }
+            p "${state.subheading}" {
+                style {
+                    fontSize "clamp(1.05rem, 1.6vw, 1.22rem)"
+                    lineHeight "1.6"
+                    color "var(--color-text-muted)"
+                    margin "0 0 1.85rem"
+                    maxWidth "50ch"
+                }
+            }
+            div {
+                style display=flex gap="0.75rem" flexWrap=wrap marginBottom="1.65rem"
+                a href="${state.ctaHref}" "${state.cta}" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.5rem"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        padding "0.9rem 1.9rem"
+                        borderRadius "999px"
+                        fontSize "1.02rem"
+                        fontWeight "600"
+                        textDecoration none
+                        boxShadow "0 14px 30px -12px rgba(79,70,229,0.9)"
+                        transition "transform 0.15s, background-color 0.15s"
+                        :hover {
+                            backgroundColor "var(--color-primary-hover)"
+                            transform "translateY(-2px)"
+                        }
+                    }
+                }
+                a href="${state.cta2Href}" "${state.cta2}" {
+                    style {
+                        display "${state.cta2 ? 'inline-flex' : 'none'}"
+                        alignItems center
+                        gap "0.5rem"
+                        border "1px solid var(--color-border-strong)"
+                        backgroundColor "var(--color-bg-white)"
+                        color "var(--color-text-primary)"
+                        padding "0.9rem 1.7rem"
+                        borderRadius "999px"
+                        fontSize "1.02rem"
+                        fontWeight "600"
+                        textDecoration none
+                        transition "border-color 0.15s, color 0.15s"
+                        :hover borderColor="var(--color-primary)" color="var(--color-primary)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display "${state.o1 ? 'flex' : 'none'}"
+                    flexWrap wrap
+                    gap "0.55rem"
+                    marginBottom "1.35rem"
+                }
+                span {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.45rem"
+                        fontFamily "var(--font-mono)"
+                        fontSize "0.8rem"
+                        fontWeight "500"
+                        color "var(--color-text-primary)"
+                        backgroundColor "var(--color-bg-cream)"
+                        border "1px solid var(--color-border)"
+                        padding "0.4rem 0.8rem"
+                        borderRadius "0.5rem"
+                    }
+                    span ✔ {
+                        style color="#65a30d" fontWeight="700"
+                    }
+                    span "${state.o1}"
+                }
+                span {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.45rem"
+                        fontFamily "var(--font-mono)"
+                        fontSize "0.8rem"
+                        fontWeight "500"
+                        color "var(--color-text-primary)"
+                        backgroundColor "var(--color-bg-cream)"
+                        border "1px solid var(--color-border)"
+                        padding "0.4rem 0.8rem"
+                        borderRadius "0.5rem"
+                    }
+                    span ✔ {
+                        style color="#65a30d" fontWeight="700"
+                    }
+                    span "${state.o2}"
+                }
+                span {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.45rem"
+                        fontFamily "var(--font-mono)"
+                        fontSize "0.8rem"
+                        fontWeight "500"
+                        color "var(--color-text-primary)"
+                        backgroundColor "var(--color-bg-cream)"
+                        border "1px solid var(--color-border)"
+                        padding "0.4rem 0.8rem"
+                        borderRadius "0.5rem"
+                    }
+                    span ✔ {
+                        style color="#65a30d" fontWeight="700"
+                    }
+                    span "${state.o3}"
+                }
+            }
+            p {
+                style {
+                    display "${state.note ? 'flex' : 'none'}"
+                    alignItems center
+                    gap "0.5rem"
+                    margin "0"
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.82rem"
+                    color "var(--color-text-muted)"
+                }
+                span ▸ {
+                    style color="var(--color-primary)"
+                }
+                span "${state.note}"
+            }
+        }
+        div {
+            style position=relative
+            div {
+                style {
+                    position absolute
+                    inset "-12% -8% -14% -8%"
+                    background "radial-gradient(circle at 60% 40%, rgba(79,70,229,0.28), transparent 65%)"
+                    filter "blur(12px)"
+                    pointerEvents none
+                }
+            }
+            div {
+                style {
+                    position relative
+                    borderRadius "0.9rem"
+                    overflow hidden
+                    backgroundColor "var(--color-terminal)"
+                    border "1px solid var(--color-terminal-line)"
+                    boxShadow "0 40px 80px -32px rgba(11,16,32,0.75)"
+                }
+                div {
+                    style {
+                        display flex
+                        alignItems center
+                        gap "0.5rem"
+                        padding "0.75rem 1rem"
+                        borderBottom "1px solid var(--color-terminal-line)"
+                        backgroundColor "var(--color-terminal-2)"
+                    }
+                    span {
+                        style {
+                            width "0.72rem"
+                            height "0.72rem"
+                            borderRadius "999px"
+                            backgroundColor "#ff5f57"
+                        }
+                    }
+                    span {
+                        style {
+                            width "0.72rem"
+                            height "0.72rem"
+                            borderRadius "999px"
+                            backgroundColor "#febc2e"
+                        }
+                    }
+                    span {
+                        style {
+                            width "0.72rem"
+                            height "0.72rem"
+                            borderRadius "999px"
+                            backgroundColor "#28c840"
+                        }
+                    }
+                    span "~/craft-code — start-here.sh" {
+                        style {
+                            marginLeft "0.75rem"
+                            fontFamily "var(--font-mono)"
+                            fontSize "0.75rem"
+                            color "var(--color-text-faint)"
+                        }
+                    }
+                }
+                div {
+                    style {
+                        padding "1.35rem 1.5rem 1.6rem"
+                        fontFamily "var(--font-mono)"
+                        fontSize "0.9rem"
+                        lineHeight "2"
+                        color "rgba(255,255,255,0.92)"
+                    }
+                    div {
+                        span "$ " {
+                            style color="var(--color-accent)"
+                        }
+                        span "enroll "
+                        span "--track " {
+                            style color="var(--color-accent-cyan)"
+                        }
+                        span web-dev {
+                            style color="#fcd34d"
+                        }
+                    }
+                    div "# 14 weeks · 6 guided modules · live cohort" {
+                        style color="var(--color-text-faint)"
+                    }
+                    div {
+                        span "✔ " {
+                            style color="var(--color-accent)" fontWeight="700"
+                        }
+                        span "mentorship + small-group code review"
+                    }
+                    div {
+                        span "✔ " {
+                            style color="var(--color-accent)" fontWeight="700"
+                        }
+                        span "build real, portfolio-ready projects"
+                    }
+                    div {
+                        span "✔ " {
+                            style color="var(--color-accent)" fontWeight="700"
+                        }
+                        span "deploy a full-stack capstone"
+                    }
+                    div {
+                        style marginTop="0.35rem"
+                        span "$ " {
+                            style color="var(--color-accent)"
+                        }
+                        span "./ship-your-career.sh"
+                    }
+                    div {
+                        style display=flex alignItems=center gap="0.4rem"
+                        span → {
+                            style color="var(--color-primary-light)"
+                        }
+                        span "92% hired within 6 months" {
+                            style color="#ffffff" fontWeight="600"
+                        }
+                        span {
+                            style {
+                                display inline-block
+                                width "0.62rem"
+                                height "1.15rem"
+                                backgroundColor "var(--color-accent)"
+                                marginLeft "0.15rem"
+                                borderRadius "1px"
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,128 @@
+/- kdl-version 2
+
+co-instructor-card {
+    state {
+        name ""
+        role ""
+        bio ""
+        image type=string format=image default=""
+    }
+    style {
+        display grid
+        gridTemplateColumns "auto 1fr"
+        gap "clamp(1.75rem, 4vw, 2.75rem)"
+        alignItems center
+        maxWidth "var(--max-width-narrow)"
+        margin "0 auto"
+        padding "clamp(1.75rem, 4vw, 2.5rem)"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        boxShadow "0 24px 60px -32px rgba(15,20,36,0.35)"
+        @--sm gridTemplateColumns="1fr" textAlign=center justifyItems=center
+    }
+    div {
+        style position=relative flex=none
+        div {
+            style {
+                position absolute
+                inset "-0.6rem -0.6rem 0.4rem 0.4rem"
+                borderRadius "0.9rem"
+                backgroundColor "var(--color-indigo-050)"
+                border "1px solid var(--color-indigo-line)"
+            }
+        }
+        img src="${state.image}" alt="${state.name}" loading=lazy {
+            style {
+                position relative
+                width "155px"
+                height "185px"
+                objectFit cover
+                borderRadius "0.7rem"
+                display block
+                border "1px solid var(--color-border)"
+            }
+        }
+        div "// lead instructor" {
+            style {
+                position relative
+                marginTop "0.65rem"
+                textAlign center
+                fontFamily "var(--font-mono)"
+                fontSize "0.72rem"
+                color "var(--color-text-faint)"
+            }
+        }
+    }
+    div {
+        h3 "${state.name}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.55rem"
+                fontWeight "800"
+                letterSpacing "-0.02em"
+                margin "0 0 0.3rem"
+                color "var(--color-text-primary)"
+            }
+        }
+        div "${state.role}" {
+            style {
+                fontFamily "var(--font-mono)"
+                color "var(--color-primary)"
+                fontWeight "500"
+                fontSize "0.85rem"
+                marginBottom "0.95rem"
+            }
+        }
+        p "${state.bio}" {
+            style {
+                margin "0 0 1.25rem"
+                color "var(--color-text-muted)"
+                fontSize "1rem"
+                lineHeight "1.7"
+            }
+        }
+        div {
+            style {
+                display flex
+                flexWrap wrap
+                gap "0.5rem"
+                justifyContent "${state.name ? 'flex-start' : 'flex-start'}"
+                @--sm justifyContent=center
+            }
+            span "10+ yrs shipping" {
+                style {
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.75rem"
+                    color "var(--color-text-primary)"
+                    backgroundColor "var(--color-bg-cream)"
+                    border "1px solid var(--color-border)"
+                    padding "0.3rem 0.7rem"
+                    borderRadius "0.5rem"
+                }
+            }
+            span "mentored 500+ devs" {
+                style {
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.75rem"
+                    color "var(--color-text-primary)"
+                    backgroundColor "var(--color-bg-cream)"
+                    border "1px solid var(--color-border)"
+                    padding "0.3rem 0.7rem"
+                    borderRadius "0.5rem"
+                }
+            }
+            span "ex-Staff Engineer" {
+                style {
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.75rem"
+                    color "var(--color-text-primary)"
+                    backgroundColor "var(--color-bg-cream)"
+                    border "1px solid var(--color-border)"
+                    padding "0.3rem 0.7rem"
+                    borderRadius "0.5rem"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+/- kdl-version 2
+
+co-mentor {
+    state name="" role="" initials=""
+    style {
+        display flex
+        alignItems center
+        gap "0.95rem"
+        padding "1.1rem 1.25rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        transition "border-color 0.15s"
+        :hover borderColor="var(--color-primary-light)"
+    }
+    div "${state.initials}" {
+        style {
+            flex none
+            display flex
+            alignItems center
+            justifyContent center
+            width "3rem"
+            height "3rem"
+            borderRadius "0.7rem"
+            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.name}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.02rem"
+                fontWeight "700"
+                color "var(--color-text-primary)"
+            }
+        }
+        div "${state.role}" {
+            style {
+                fontFamily "var(--font-mono)"
+                fontSize "0.78rem"
+                color "var(--color-text-muted)"
+                marginTop "0.15rem"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,101 @@
+/- kdl-version 2
+
+co-module-card {
+    state order="" title="" summary="" duration=""
+    style display=grid gridTemplateColumns="3rem 1fr" gap="1.25rem" {
+        @--sm gridTemplateColumns="2.5rem 1fr" gap="0.9rem"
+    }
+    div {
+        style display=flex flexDirection=column alignItems=center
+        div {
+            style {
+                position relative
+                zIndex "2"
+                flex none
+                display flex
+                alignItems center
+                justifyContent center
+                width "3rem"
+                height "3rem"
+                borderRadius "0.7rem"
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                fontFamily "var(--font-mono)"
+                fontWeight "700"
+                fontSize "1.05rem"
+                boxShadow "0 8px 18px -8px rgba(79,70,229,0.8)"
+                @--sm width="2.5rem" height="2.5rem" fontSize="0.95rem"
+            }
+            span "0" {
+                style opacity="0.55" fontSize="0.7em"
+            }
+            span "${state.order}"
+        }
+        div {
+            style {
+                width "2px"
+                flex "1"
+                marginTop "0.35rem"
+                backgroundColor "var(--color-indigo-line)"
+            }
+        }
+    }
+    div {
+        style paddingBottom="1.5rem"
+        div {
+            style {
+                padding "1.35rem 1.5rem"
+                backgroundColor "var(--color-bg-white)"
+                border "1px solid var(--color-border)"
+                borderRadius "var(--radius)"
+                transition "border-color 0.15s, box-shadow 0.15s"
+                :hover {
+                    borderColor "var(--color-primary-light)"
+                    boxShadow "0 14px 34px -18px rgba(79,70,229,0.35)"
+                }
+            }
+            div {
+                style {
+                    display flex
+                    justifyContent space-between
+                    alignItems baseline
+                    gap "1rem"
+                    flexWrap wrap
+                }
+                h3 "${state.title}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.22rem"
+                        fontWeight "700"
+                        letterSpacing "-0.01em"
+                        margin "0"
+                        color "var(--color-text-primary)"
+                    }
+                }
+                span "${state.duration}" {
+                    style {
+                        display "${state.duration ? 'inline-block' : 'none'}"
+                        flex none
+                        fontFamily "var(--font-mono)"
+                        fontSize "0.74rem"
+                        fontWeight "600"
+                        color "var(--color-primary)"
+                        backgroundColor "var(--color-indigo-050)"
+                        border "1px solid var(--color-indigo-line)"
+                        padding "0.25rem 0.65rem"
+                        borderRadius "999px"
+                    }
+                }
+            }
+            p "${state.summary}" {
+                style {
+                    display "${state.summary ? 'block' : 'none'}"
+                    margin "0.55rem 0 0"
+                    color "var(--color-text-muted)"
+                    fontSize "0.98rem"
+                    lineHeight "1.65"
+                }
+            }
+        }
+    }
+}