@jxsuite/starters 3.4.0 → 3.5.0

package/sites/museum/pages/visit.jxn

@@ -0,0 +1,266 @@
+/- kdl-version 2
+
+$element .title="Plan your visit — Atrium" .description="Hours, admission, transport and access for Atrium, the city museum of art and history. Free entry, Tuesday to Sunday, 10:00 to 18:00." {
+    state {
+        tourPrice {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 12
+                    - #null
+                    - style=currency currency=CAD
+                }
+            }
+        }
+        membership {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 45
+                    - #null
+                    - style=currency currency=CAD
+                }
+            }
+        }
+        trams {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatList"
+                value {
+                    - "2" "6" "11"
+                }
+            }
+        }
+        closedFrom {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - "2026-12-24"
+                    - #null
+                    - day=numeric month=long
+                }
+            }
+        }
+        closedTo {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - "2026-12-26"
+                    - #null
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+    }
+    mu-pagehead {
+        $props {
+            kicker Visit
+            title "Ten to six, six days a week"
+            standfirst "There is no ticket desk, because there is no ticket. Walk in from the quay side, leave your bag at the counter if it is bigger than a satchel, and start wherever you like."
+            metaLabel Address
+            metaValue "2 Quai des Écluses, Old Harbour"
+        }
+    }
+    mu-band {
+        $props index="01" label=Hours tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(2, minmax(0, 1fr))"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term "Tue – Fri"
+                        value "10:00 – 18:00"
+                        note "Last entry to the reading room at 17:00."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "Sat – Sun"
+                        value "10:00 – 18:00"
+                        note "The courtyard stays open until 19:00 from May to September."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term Monday
+                        value Closed
+                        note "Conservation day. The café on the quay side stays open."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "Winter closure"
+                        value "From ${state.closedFrom} to ${state.closedTo}"
+                        note "The only three consecutive days the hall is shut all year."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="02" label=Admission tone=card
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1fr) minmax(0, 1fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                rowGap "1.5rem"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                style {
+                    border "2px solid var(--color-ink)"
+                    backgroundColor "var(--color-pigment)"
+                    color "var(--color-card)"
+                    padding "clamp(1.5rem, 3.5vw, 2.25rem)"
+                }
+                p "General admission" {
+                    style {
+                        margin "0 0 0.9rem"
+                        fontFamily "var(--font-label)"
+                        fontSize "0.66rem"
+                        letterSpacing "var(--label-tracking)"
+                        textTransform "var(--label-case)"
+                        opacity "0.8"
+                    }
+                }
+                p Free {
+                    style {
+                        margin "0"
+                        fontFamily "var(--font-display)"
+                        fontSize "clamp(2.4rem, 6vw, 3.6rem)"
+                        fontWeight "700"
+                        lineHeight "calc(1 * var(--leading-scale))"
+                        letterSpacing "var(--display-tracking)"
+                    }
+                }
+                p "Written into the founding subscription of 1897 and never changed. No ticket, no booking, no members-only hour." {
+                    style margin="1.1rem 0 0" lineHeight="1.65" maxWidth="34ch"
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term "Guided tour"
+                        value "${state.tourPrice}"
+                        note "Ninety minutes, Saturdays at 11:00 and 15:00. Book at the desk."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term Membership
+                        value "${state.membership}"
+                        note "A year of tours, the quarterly, and a vote at the annual meeting."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term Schools
+                        value "No charge, ever"
+                        note "Including the coach. Write to the education desk six weeks ahead."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="03" label="Getting here" tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(2, minmax(0, 1fr))"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term Tram
+                        value "Lines ${state.trams}"
+                        note "Stop: Écluses. The hall is the glass roof on your left as you step down."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "On foot"
+                        value "Eleven minutes from the old town gate"
+                        note "Follow the quay; the last stretch is cobbled and uneven."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term "By bicycle"
+                        value "Forty racks under the north canopy"
+                        note "Covered, lit, and in view of the front desk."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "By car"
+                        value "No museum car park"
+                        note "Public parking at Bassin Nord, six minutes' walk over the lock bridge."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="04" label=Access tone=card
+        div {
+            style maxWidth="var(--measure)"
+            p "Every gallery is reachable step-free from the quay-side entrance, including the courtyard and the reading room. The only exception is the customs-house walk, which has four stone steps and no handrail; a level route around it is signed at the entrance." {
+                style margin="0 0 1.5rem" lineHeight="1.75"
+            }
+            mu-fact {
+                $props {
+                    term Step-free
+                    value "All galleries and the reading room"
+                    note "Two lifts, both large enough for a wheelchair and a companion."
+                }
+            }
+            mu-fact {
+                $props {
+                    term Seating
+                    value "A bench in every room"
+                    note "Folding stools at the desk, free to borrow, no deposit."
+                }
+            }
+            mu-fact {
+                $props {
+                    term "Quiet hour"
+                    value "Wednesdays, 10:00 – 11:00"
+                    note "Lights up, sound off, and half the usual visitor numbers."
+                }
+            }
+            mu-fact {
+                $props {
+                    term "Assistance dogs"
+                    value "Welcome everywhere"
+                    note "Water bowls at both entrances and in the courtyard."
+                }
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "Before you come"
+            heading "See what is hanging this week."
+            text "Three exhibitions are open, and the programme lists what changes next."
+            label "What's on"
+            href "/exhibitions/"
+        }
+    }
+}

package/sites/museum/project.jxn

@@ -4,7 +4,7 @@ project Atrium
 
 url "https://example.com"
 
-defaults layout="./layouts/base.json" lang=en
+defaults layout="./layouts/base.jxn" lang=en
 
 i18n {
     defaultLocale en

package/sites/nonprofit/components/np-contact-form.jxn

@@ -0,0 +1,97 @@
+/- kdl-version 2
+
+np-contact-form {
+    state heading="Send us a message"
+    style {
+        display block
+        padding "clamp(1.75rem, 4vw, 2.5rem)"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius-lg)"
+        boxShadow "var(--shadow-card)"
+    }
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.75rem"
+            fontWeight "600"
+            color "var(--color-primary-deep)"
+            margin "0 0 1.5rem"
+        }
+    }
+    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.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        input type=email name=email placeholder="Email address" required="true" aria-label="Email address" {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        select name=interest aria-label="I'm interested in" {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                backgroundColor "var(--color-bg-cream)"
+                fontFamily inherit
+            }
+            option value=general "General question"
+            option value=volunteer "I want to volunteer"
+            option value=donate "I want to donate or fundraise"
+            option value=partner "Partnership or sponsorship"
+        }
+        textarea name=message rows="4" placeholder="How can we help?" aria-label=Message {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        button type=submit "Send message" {
+            style {
+                display inline-flex
+                alignItems center
+                justifyContent center
+                gap "0.4rem"
+                backgroundColor "var(--color-accent)"
+                color "var(--color-text-white)"
+                padding "0.95rem 1.75rem"
+                border none
+                borderRadius "999px"
+                fontSize "1rem"
+                fontFamily inherit
+                fontWeight "800"
+                cursor pointer
+                justifySelf start
+                boxShadow "0 12px 26px -12px rgba(242,106,61,0.8)"
+                transition "background-color 0.15s, transform 0.15s"
+                :hover backgroundColor="var(--color-accent-hover)" transform="translateY(-1px)"
+            }
+        }
+        p "This is a demo form. Wire it to your email or CRM in pages/contact.md." {
+            style fontSize="0.85rem" fontWeight="600" color="var(--color-text-muted)" margin="0"
+        }
+    }
+}

package/sites/nonprofit/components/np-contact-info.jxn

@@ -0,0 +1,104 @@
+/- kdl-version 2
+
+np-contact-info {
+    state {
+        line1 "240 Riverside Avenue"
+        line2 "Rivertown, CA 90210"
+        phone "(555) 204-7788"
+        phoneHref tel:+15552047788
+        email hello@rivertownfoundation.org
+        emailHref mailto:hello@rivertownfoundation.org
+    }
+    style display=block
+    div {
+        style {
+            padding "2rem"
+            backgroundColor "var(--color-primary-deep)"
+            color "var(--color-text-white)"
+            borderRadius "var(--radius-lg)"
+        }
+        h3 "Visit us" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "1.5rem"
+                fontWeight "600"
+                margin "0 0 1rem"
+            }
+        }
+        p "${state.line1}" {
+            style margin="0 0 0.35rem" opacity="0.85" fontWeight="600"
+        }
+        p "${state.line2}" {
+            style margin="0 0 0.35rem" opacity="0.85" fontWeight="600"
+        }
+        p {
+            style margin="0.85rem 0 0.35rem"
+            a href="${state.phoneHref}" "${state.phone}" {
+                style color="var(--color-gold)" textDecoration=none fontWeight="800"
+            }
+        }
+        p {
+            style margin="0"
+            a href="${state.emailHref}" "${state.email}" {
+                style color="var(--color-gold)" textDecoration=none fontWeight="800"
+            }
+        }
+    }
+    div {
+        style {
+            marginTop "1.5rem"
+            padding "2rem"
+            backgroundColor "var(--color-bg-cream)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius-lg)"
+        }
+        h3 "Office hours" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "1.5rem"
+                fontWeight "600"
+                color "var(--color-primary-deep)"
+                margin "0 0 1.25rem"
+            }
+        }
+        div {
+            style {
+                display flex
+                justifyContent space-between
+                padding "0.6rem 0"
+                borderBottom "1px solid var(--color-border)"
+                fontWeight "600"
+            }
+            span "Monday – Friday" {
+                style fontWeight="700"
+            }
+            span "9:00am – 5:00pm" {
+                style color="var(--color-text-muted)"
+            }
+        }
+        div {
+            style {
+                display flex
+                justifyContent space-between
+                padding "0.6rem 0"
+                borderBottom "1px solid var(--color-border)"
+                fontWeight "600"
+            }
+            span Saturday {
+                style fontWeight="700"
+            }
+            span "9:00am – 1:00pm (Pantry)" {
+                style color="var(--color-text-muted)"
+            }
+        }
+        div {
+            style display=flex justifyContent=space-between padding="0.6rem 0" fontWeight="600"
+            span Sunday {
+                style fontWeight="700"
+            }
+            span Closed {
+                style color="var(--color-text-muted)"
+            }
+        }
+    }
+}

package/sites/nonprofit/components/np-cta.jxn

@@ -0,0 +1,163 @@
+/- kdl-version 2
+
+np-cta {
+    state {
+        eyebrow ""
+        heading ""
+        headingAccent ""
+        text ""
+        cta "Donate Now"
+        ctaHref "/get-involved/"
+        cta2 ""
+        cta2Href "/get-involved/"
+        reassurance "Secure & tax-deductible · 94¢ of every dollar goes straight to programs"
+        bg type=string format=image default=""
+    }
+    style {
+        display block
+        padding "clamp(3rem, 7vw, 5rem) 1.5rem"
+        backgroundColor "var(--color-bg-cream)"
+    }
+    div {
+        style {
+            position relative
+            overflow hidden
+            maxWidth "var(--max-width-wide)"
+            margin "0 auto"
+            borderRadius "var(--radius-lg)"
+            background "linear-gradient(135deg, #21563c 0%, var(--color-primary-deep) 55%, #12301f 100%)"
+            color "var(--color-text-white)"
+        }
+        div {
+            style {
+                position absolute
+                top "-8rem"
+                right "-6rem"
+                width "26rem"
+                height "26rem"
+                borderRadius "50%"
+                background "radial-gradient(circle at center, rgba(233,166,61,0.35) 0%, rgba(233,166,61,0) 70%)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                bottom "-10rem"
+                left "-7rem"
+                width "24rem"
+                height "24rem"
+                borderRadius "50%"
+                background "radial-gradient(circle at center, rgba(242,106,61,0.3) 0%, rgba(242,106,61,0) 70%)"
+            }
+        }
+        div {
+            style {
+                position relative
+                zIndex "2"
+                maxWidth "var(--max-width-narrow)"
+                margin "0 auto"
+                padding "clamp(3rem, 7vw, 4.75rem) 1.5rem"
+                textAlign center
+            }
+            p "${state.eyebrow}" {
+                style {
+                    display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.35rem 0.95rem"
+                    borderRadius "999px"
+                    backgroundColor "rgba(255,255,255,0.12)"
+                    textTransform uppercase
+                    letterSpacing "0.14em"
+                    fontSize "0.75rem"
+                    fontWeight "800"
+                    color "var(--color-gold)"
+                    margin "0 0 1.25rem"
+                }
+            }
+            h2 {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(2.1rem, 4.6vw, 3.2rem)"
+                    fontWeight "600"
+                    lineHeight "1.08"
+                    letterSpacing "-0.015em"
+                    margin "0 0 1.15rem"
+                }
+                span "${state.heading} "
+                span "${state.headingAccent}" {
+                    style fontStyle=italic fontWeight="500" color="var(--color-gold)"
+                }
+            }
+            p "${state.text}" {
+                style {
+                    fontSize "1.14rem"
+                    fontWeight "600"
+                    lineHeight "1.65"
+                    color "rgba(255,255,255,0.85)"
+                    margin "0 auto 2rem"
+                    maxWidth "52ch"
+                }
+            }
+            div {
+                style display=flex gap="0.85rem" flexWrap=wrap justifyContent=center
+                a href="${state.ctaHref}" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.5rem"
+                        backgroundColor "var(--color-accent)"
+                        color "var(--color-text-white)"
+                        padding "1rem 2.5rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "800"
+                        textDecoration none
+                        boxShadow "0 18px 36px -14px rgba(242,106,61,0.85)"
+                        transition "background-color 0.15s, transform 0.15s"
+                        :hover {
+                            backgroundColor "var(--color-accent-hover)"
+                            transform "translateY(-2px)"
+                        }
+                    }
+                    span ❤ {
+                        style fontSize="0.95rem"
+                    }
+                    span "${state.cta}"
+                }
+                a href="${state.cta2Href}" "${state.cta2}" {
+                    style {
+                        display "${state.cta2 ? 'inline-flex' : 'none'}"
+                        alignItems center
+                        gap "0.5rem"
+                        border "1px solid rgba(255,255,255,0.55)"
+                        color "var(--color-text-white)"
+                        padding "1rem 2rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "800"
+                        textDecoration none
+                        transition "background-color 0.15s"
+                        :hover backgroundColor="rgba(255,255,255,0.14)"
+                    }
+                }
+            }
+            p {
+                style {
+                    display "${state.reassurance ? 'flex' : 'none'}"
+                    alignItems center
+                    justifyContent center
+                    gap "0.5rem"
+                    margin "1.75rem 0 0"
+                    fontSize "0.88rem"
+                    fontWeight "700"
+                    color "rgba(255,255,255,0.72)"
+                }
+                span 🔒 {
+                    style color="var(--color-gold)"
+                }
+                span "${state.reassurance}"
+            }
+        }
+    }
+}