@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -0,0 +1,348 @@
+/- kdl-version 2
+
+co-faq {
+    state {
+        open -1
+        toggle0 {
+            $expression {
+                operator "="
+                target (ref)"#/state/open"
+                value {
+                    operator -
+                    target 0
+                    value {
+                        operator *
+                        target operator="===" target=(ref)"#/state/open" value=0
+                        value 1
+                    }
+                }
+            }
+        }
+        toggle1 {
+            $expression {
+                operator "="
+                target (ref)"#/state/open"
+                value {
+                    operator -
+                    target 1
+                    value {
+                        operator *
+                        target operator="===" target=(ref)"#/state/open" value=1
+                        value 2
+                    }
+                }
+            }
+        }
+        toggle2 {
+            $expression {
+                operator "="
+                target (ref)"#/state/open"
+                value {
+                    operator -
+                    target 2
+                    value {
+                        operator *
+                        target operator="===" target=(ref)"#/state/open" value=2
+                        value 3
+                    }
+                }
+            }
+        }
+        toggle3 {
+            $expression {
+                operator "="
+                target (ref)"#/state/open"
+                value {
+                    operator -
+                    target 3
+                    value {
+                        operator *
+                        target operator="===" target=(ref)"#/state/open" value=3
+                        value 4
+                    }
+                }
+            }
+        }
+        toggle4 {
+            $expression {
+                operator "="
+                target (ref)"#/state/open"
+                value {
+                    operator -
+                    target 4
+                    value {
+                        operator *
+                        target operator="===" target=(ref)"#/state/open" value=4
+                        value 5
+                    }
+                }
+            }
+        }
+    }
+    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 type=button aria-label="Do I need prior coding experience?" onclick=(ref)"#/state/toggle0" {
+            style {
+                width "100%"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1rem"
+                padding "1.25rem 0.25rem"
+                border none
+                background transparent
+                cursor pointer
+                textAlign left
+                font inherit
+            }
+            span "Do I need prior coding experience?" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.1rem"
+                    fontWeight "700"
+                    color "${state.open === 0 ? 'var(--color-primary)' : 'var(--color-text-primary)'}"
+                    transition "color 0.15s"
+                }
+            }
+            span "${state.open === 0 ? '−' : '+'}" {
+                style {
+                    flex none
+                    width "1.75rem"
+                    height "1.75rem"
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    fontSize "1.4rem"
+                    color "var(--color-primary)"
+                    lineHeight "1"
+                }
+            }
+        }
+        div {
+            style display="${state.open === 0 ? 'block' : 'none'}" padding="0 0.25rem 1.35rem"
+            p "No. The program starts from absolute foundations and assumes no background. If you can use a web browser and are ready to put in the hours, you're ready for week one." {
+                style {
+                    margin "0"
+                    color "var(--color-text-muted)"
+                    fontSize "1rem"
+                    lineHeight "1.7"
+                    maxWidth "64ch"
+                }
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button type=button aria-label="How much time should I plan to commit?" onclick=(ref)"#/state/toggle1" {
+            style {
+                width "100%"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1rem"
+                padding "1.25rem 0.25rem"
+                border none
+                background transparent
+                cursor pointer
+                textAlign left
+                font inherit
+            }
+            span "How much time should I plan to commit?" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.1rem"
+                    fontWeight "700"
+                    color "${state.open === 1 ? 'var(--color-primary)' : 'var(--color-text-primary)'}"
+                    transition "color 0.15s"
+                }
+            }
+            span "${state.open === 1 ? '−' : '+'}" {
+                style {
+                    flex none
+                    width "1.75rem"
+                    height "1.75rem"
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    fontSize "1.4rem"
+                    color "var(--color-primary)"
+                    lineHeight "1"
+                }
+            }
+        }
+        div {
+            style display="${state.open === 1 ? 'block' : 'none'}" padding="0 0.25rem 1.35rem"
+            p "Around 20–25 hours per week across live sessions, guided projects, and independent practice. The pace is intensive but designed for people learning alongside other commitments." {
+                style {
+                    margin "0"
+                    color "var(--color-text-muted)"
+                    fontSize "1rem"
+                    lineHeight "1.7"
+                    maxWidth "64ch"
+                }
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button type=button aria-label="Is the program online or in person?" onclick=(ref)"#/state/toggle2" {
+            style {
+                width "100%"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1rem"
+                padding "1.25rem 0.25rem"
+                border none
+                background transparent
+                cursor pointer
+                textAlign left
+                font inherit
+            }
+            span "Is the program online or in person?" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.1rem"
+                    fontWeight "700"
+                    color "${state.open === 2 ? 'var(--color-primary)' : 'var(--color-text-primary)'}"
+                    transition "color 0.15s"
+                }
+            }
+            span "${state.open === 2 ? '−' : '+'}" {
+                style {
+                    flex none
+                    width "1.75rem"
+                    height "1.75rem"
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    fontSize "1.4rem"
+                    color "var(--color-primary)"
+                    lineHeight "1"
+                }
+            }
+        }
+        div {
+            style display="${state.open === 2 ? 'block' : 'none'}" padding="0 0.25rem 1.35rem"
+            p "Fully online. Live sessions run over video, and every module is project-based so you learn by building. Recordings are available if you miss a session." {
+                style {
+                    margin "0"
+                    color "var(--color-text-muted)"
+                    fontSize "1rem"
+                    lineHeight "1.7"
+                    maxWidth "64ch"
+                }
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button type=button aria-label="Will I get help when I'm stuck?" onclick=(ref)"#/state/toggle3" {
+            style {
+                width "100%"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1rem"
+                padding "1.25rem 0.25rem"
+                border none
+                background transparent
+                cursor pointer
+                textAlign left
+                font inherit
+            }
+            span "Will I get help when I'm stuck?" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.1rem"
+                    fontWeight "700"
+                    color "${state.open === 3 ? 'var(--color-primary)' : 'var(--color-text-primary)'}"
+                    transition "color 0.15s"
+                }
+            }
+            span "${state.open === 3 ? '−' : '+'}" {
+                style {
+                    flex none
+                    width "1.75rem"
+                    height "1.75rem"
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    fontSize "1.4rem"
+                    color "var(--color-primary)"
+                    lineHeight "1"
+                }
+            }
+        }
+        div {
+            style display="${state.open === 3 ? 'block' : 'none'}" padding="0 0.25rem 1.35rem"
+            p "Yes. You'll have live mentorship, small-group code review, and a community of peers. Getting unstuck quickly is a core part of how we teach." {
+                style {
+                    margin "0"
+                    color "var(--color-text-muted)"
+                    fontSize "1rem"
+                    lineHeight "1.7"
+                    maxWidth "64ch"
+                }
+            }
+        }
+    }
+    div {
+        style borderBottom="1px solid var(--color-border)"
+        button type=button aria-label="What will I have to show at the end?" onclick=(ref)"#/state/toggle4" {
+            style {
+                width "100%"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1rem"
+                padding "1.25rem 0.25rem"
+                border none
+                background transparent
+                cursor pointer
+                textAlign left
+                font inherit
+            }
+            span "What will I have to show at the end?" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.1rem"
+                    fontWeight "700"
+                    color "${state.open === 4 ? 'var(--color-primary)' : 'var(--color-text-primary)'}"
+                    transition "color 0.15s"
+                }
+            }
+            span "${state.open === 4 ? '−' : '+'}" {
+                style {
+                    flex none
+                    width "1.75rem"
+                    height "1.75rem"
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    fontSize "1.4rem"
+                    color "var(--color-primary)"
+                    lineHeight "1"
+                }
+            }
+        }
+        div {
+            style display="${state.open === 4 ? 'block' : 'none'}" padding="0 0.25rem 1.35rem"
+            p "A deployed full-stack capstone project, a portfolio of module builds, and the fundamentals to keep learning on your own — everything you need to apply for junior developer roles." {
+                style {
+                    margin "0"
+                    color "var(--color-text-muted)"
+                    fontSize "1rem"
+                    lineHeight "1.7"
+                    maxWidth "64ch"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,138 @@
+/- kdl-version 2
+
+co-footer {
+    state {
+        brand "Craft & Code Academy"
+        tagline "A project-based web development bootcamp with live mentorship and a portfolio-ready capstone."
+        email admissions@craftcode.academy
+        phone "(555) 240-7788"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-ink)"
+        color "var(--color-text-white)"
+        borderTop "1px solid var(--color-terminal-line)"
+        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 {
+                style display=flex alignItems=center gap="0.6rem" marginBottom="0.9rem"
+                span "</>" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "1.9rem"
+                        height "1.9rem"
+                        borderRadius "0.5rem"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        fontFamily "var(--font-mono)"
+                        fontSize "0.8rem"
+                        fontWeight "700"
+                    }
+                }
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.3rem"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style margin="0" color="rgba(255,255,255,0.6)" maxWidth="40ch" lineHeight="1.65"
+            }
+        }
+        div {
+            div "// admissions" {
+                style {
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.75rem"
+                    color "var(--color-accent)"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href=mailto:admissions@craftcode.academy "${state.email}" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.85rem"
+                    :hover color="var(--color-text-white)"
+                }
+            }
+            p "${state.phone}" {
+                style {
+                    margin "0"
+                    color "rgba(255,255,255,0.82)"
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.85rem"
+                }
+            }
+        }
+        div {
+            div "// explore" {
+                style {
+                    fontFamily "var(--font-mono)"
+                    fontSize "0.75rem"
+                    color "var(--color-accent)"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href="/curriculum/" Curriculum {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                    :hover color="var(--color-text-white)"
+                }
+            }
+            a href="/about/" About {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                    :hover color="var(--color-text-white)"
+                }
+            }
+            a href="/enroll/" Enroll {
+                style display=block color="rgba(255,255,255,0.82)" textDecoration=none {
+                    :hover color="var(--color-text-white)"
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "2.5rem auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid var(--color-terminal-line)"
+            fontFamily "var(--font-mono)"
+            fontSize "0.8rem"
+            color "rgba(255,255,255,0.5)"
+        }
+        p {
+            style margin="0"
+            span "$ " {
+                style color="var(--color-accent)"
+            }
+            span #"echo "© Craft & Code Academy — built with Jx""#
+        }
+    }
+}