@jxsuite/starters 3.4.0 → 3.6.0

package/sites/real-estate/pages/[slug].jxn

@@ -0,0 +1,452 @@
+/- kdl-version 2
+$paths contentType=listings param=slug field=slug
+$head {
+    meta name=description content="${state.listing.data.Title} in ${state.listing.data.city} — ${state.listing.data.beds} bed, ${state.listing.data.baths} bath, ${state.listing.data.sqft} sqft. Listed by Northshore Realty."
+}
+
+$element .title="${state.listing.data.Title} — Northshore Realty" {
+    state {
+        listing {
+            $prototype ContentEntry
+            contentType listings
+            field slug
+            id (ref)"#/$params/slug"
+            $src "@jxsuite/parser/ContentEntry.class.json"
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "1.75rem 1.5rem clamp(3rem, 6vw, 4.5rem)"
+        }
+        a href="/listings/" "← All listings" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.5rem"
+                color "var(--color-text-muted)"
+                textDecoration none
+                fontWeight "600"
+                fontSize "0.9rem"
+                marginBottom "1.5rem"
+                :hover color="var(--color-primary)"
+            }
+        }
+        header {
+            style {
+                display flex
+                flexWrap wrap
+                alignItems flex-end
+                justifyContent space-between
+                gap "1rem"
+                marginBottom "1.75rem"
+            }
+            div {
+                div {
+                    style display=flex alignItems=center gap="0.75rem" marginBottom="0.75rem"
+                    span {
+                        style {
+                            display inline-flex
+                            alignItems center
+                            gap "0.4rem"
+                            backgroundColor "var(--color-teal-tint)"
+                            color "var(--color-primary)"
+                            fontWeight "700"
+                            fontSize "0.74rem"
+                            letterSpacing "0.04em"
+                            textTransform uppercase
+                            padding "0.3rem 0.7rem"
+                            borderRadius "999px"
+                            border "1px solid var(--color-accent-soft)"
+                        }
+                        span {
+                            style {
+                                width "0.4rem"
+                                height "0.4rem"
+                                borderRadius "999px"
+                                backgroundColor "var(--color-accent-bright)"
+                            }
+                        }
+                        span "${state.listing.data.status}"
+                    }
+                    span {
+                        style {
+                            display inline-flex
+                            alignItems center
+                            gap "0.35rem"
+                            color "var(--color-text-muted)"
+                            fontWeight "600"
+                            fontSize "0.92rem"
+                        }
+                        span 📍
+                        span "${state.listing.data.city}"
+                    }
+                }
+                h1 "${state.listing.data.Title}" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "clamp(2rem, 4vw, 3rem)"
+                        fontWeight "500"
+                        letterSpacing "-0.02em"
+                        lineHeight "1.05"
+                        margin "0"
+                        color "var(--color-text-primary)"
+                    }
+                }
+            }
+            div {
+                style textAlign=right
+                div "$${Number(state.listing.data.price).toLocaleString('en-US')}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(1.75rem, 3.5vw, 2.5rem)"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                        color "var(--color-text-primary)"
+                        whiteSpace nowrap
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div "$${Math.round(Number(state.listing.data.price)/Number(state.listing.data.sqft)).toLocaleString('en-US')} / sqft" {
+                    style {
+                        fontSize "0.85rem"
+                        color "var(--color-text-muted)"
+                        fontWeight "600"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "2fr 1fr"
+                gridTemplateRows "repeat(2, 1fr)"
+                gap "0.75rem"
+                marginBottom "2.5rem"
+                @--sm gridTemplateColumns="1fr" gridTemplateRows=auto
+            }
+            img src="${state.listing.data.image}" alt="${state.listing.data.Title}" loading=eager {
+                style {
+                    width "100%"
+                    height "100%"
+                    gridRow "span 2"
+                    objectFit cover
+                    borderRadius "var(--radius)"
+                    minHeight "300px"
+                    @--sm gridRow=auto minHeight="230px"
+                }
+            }
+            img src="/images/interior-1.jpg" alt="Living space at ${state.listing.data.Title}" loading=lazy {
+                style {
+                    width "100%"
+                    height "100%"
+                    objectFit cover
+                    borderRadius "var(--radius)"
+                    minHeight "145px"
+                }
+            }
+            img src="/images/interior-2.jpg" alt="Kitchen at ${state.listing.data.Title}" loading=lazy {
+                style {
+                    width "100%"
+                    height "100%"
+                    objectFit cover
+                    borderRadius "var(--radius)"
+                    minHeight "145px"
+                }
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "1.6fr 1fr"
+                gap "clamp(2rem, 4vw, 3rem)"
+                alignItems start
+                @--md gridTemplateColumns="1fr"
+            }
+            div {
+                div {
+                    style {
+                        display grid
+                        gridTemplateColumns "repeat(3, 1fr)"
+                        gap "0"
+                        border "1px solid var(--color-border)"
+                        borderRadius "var(--radius)"
+                        overflow hidden
+                        marginBottom "2.5rem"
+                        @--sm gridTemplateColumns="repeat(2, 1fr)"
+                    }
+                    div {
+                        style {
+                            padding "1.25rem"
+                            borderRight "1px solid var(--color-border)"
+                            borderBottom "1px solid var(--color-border)"
+                        }
+                        div "${state.listing.data.beds}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div Bedrooms {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style {
+                            padding "1.25rem"
+                            borderRight "1px solid var(--color-border)"
+                            borderBottom "1px solid var(--color-border)"
+                        }
+                        div "${state.listing.data.baths}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div Bathrooms {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem" borderBottom="1px solid var(--color-border)"
+                        div "${Number(state.listing.data.sqft).toLocaleString('en-US')}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div "Sq ft" {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem" borderRight="1px solid var(--color-border)"
+                        div "$${Math.round(Number(state.listing.data.price)/Number(state.listing.data.sqft)).toLocaleString('en-US')}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div "Per sq ft" {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem" borderRight="1px solid var(--color-border)"
+                        div Single-family {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                            }
+                        }
+                        div "Property type" {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem"
+                        div "${state.listing.data.city}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                            }
+                        }
+                        div Location {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                }
+                h2 "About this home" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "1.6rem"
+                        fontWeight "500"
+                        letterSpacing "-0.01em"
+                        margin "0 0 1rem"
+                    }
+                }
+                p "Set in the heart of ${state.listing.data.city}, ${state.listing.data.Title} offers ${state.listing.data.beds} bedrooms and ${state.listing.data.baths} bathrooms across ${Number(state.listing.data.sqft).toLocaleString('en-US')} thoughtfully finished square feet. Sunlit living spaces, an updated kitchen, and easy access to schools, parks, and the waterfront make this a home you can move right into." {
+                    style {
+                        fontSize "1.08rem"
+                        lineHeight "1.8"
+                        color "var(--color-text-secondary)"
+                        margin "0 0 1rem"
+                    }
+                }
+                p "Want to see it in person? Our team can arrange a private showing this week." {
+                    style {
+                        fontSize "1.08rem"
+                        lineHeight "1.8"
+                        color "var(--color-text-muted)"
+                        margin "0"
+                    }
+                }
+            }
+            aside {
+                style {
+                    position sticky
+                    top "5rem"
+                    backgroundColor "var(--color-bg-white)"
+                    border "1px solid var(--color-border)"
+                    borderRadius "var(--radius-lg)"
+                    boxShadow "var(--shadow-card)"
+                    padding "1.5rem"
+                    @--md position=static
+                }
+                div "$${Number(state.listing.data.price).toLocaleString('en-US')}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.75rem"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div {
+                    style {
+                        display flex
+                        gap "0.75rem"
+                        margin "0.75rem 0 1.25rem"
+                        fontSize "0.9rem"
+                        fontWeight "600"
+                        color "var(--color-text-secondary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                    span "${state.listing.data.beds} bd"
+                    span · {
+                        style color="var(--color-border-strong)"
+                    }
+                    span "${state.listing.data.baths} ba"
+                    span · {
+                        style color="var(--color-border-strong)"
+                    }
+                    span "${Number(state.listing.data.sqft).toLocaleString('en-US')} sqft"
+                }
+                a href="/contact/" "Book a private showing" {
+                    style {
+                        display block
+                        textAlign center
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        padding "0.85rem 1.25rem"
+                        borderRadius "999px"
+                        fontWeight "700"
+                        fontSize "0.98rem"
+                        textDecoration none
+                        transition "background-color 0.15s"
+                        :hover backgroundColor="var(--color-primary-hover)"
+                    }
+                }
+                div {
+                    style {
+                        display flex
+                        alignItems center
+                        gap "0.85rem"
+                        marginTop "1.5rem"
+                        paddingTop "1.5rem"
+                        borderTop "1px solid var(--color-border)"
+                    }
+                    img src="/images/agent-1.jpg" alt="Priya Anand" loading=lazy width="56" height="56" {
+                        style width="3.25rem" height="3.25rem" borderRadius="999px" objectFit=cover
+                    }
+                    div {
+                        div "Priya Anand" {
+                            style fontWeight="700" fontSize="0.95rem"
+                        }
+                        div "Principal Broker" {
+                            style fontSize="0.82rem" color="var(--color-text-muted)"
+                        }
+                        a href=tel:+15552047781 "(555) 204-7781" {
+                            style {
+                                fontSize "0.85rem"
+                                color "var(--color-primary)"
+                                fontWeight "600"
+                                textDecoration none
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                    }
+                }
+                div "Listed by Northshore Realty · Equal Housing Opportunity" {
+                    style {
+                        marginTop "1.25rem"
+                        fontSize "0.78rem"
+                        color "var(--color-text-muted)"
+                        lineHeight "1.5"
+                    }
+                }
+            }
+        }
+    }
+    re-cta {
+        $props {
+            heading "Book a private showing"
+            text "Reach out and we'll set up a walkthrough of this home at a time that works for you."
+            cta "Contact an agent"
+            ctaHref "/contact/"
+            cta2 "Back to listings"
+            cta2Href "/listings/"
+        }
+    }
+}

package/sites/real-estate/project.jxn

@@ -4,7 +4,7 @@ project "Northshore Realty"
 
 url "https://example.com"
 
-defaults layout="./layouts/base.json" lang=en
+defaults layout="./layouts/base.jxn" lang=en
 
 $head {
     meta name=viewport content="width=device-width, initial-scale=1"

package/sites/restaurant/components/bit-cta.jxn

@@ -0,0 +1,105 @@
+/- kdl-version 2
+
+bit-cta {
+    state {
+        eyebrow Reservations
+        heading ""
+        headingAccent ""
+        text ""
+        cta "Reserve a Table"
+        ctaHref "/contact/"
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-espresso)"
+        color "var(--color-text-white)"
+        padding "clamp(3.5rem, 9vw, 6rem) 1.5rem"
+        textAlign center
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            background "radial-gradient(ellipse 55% 70% at 50% 120%, rgba(189,90,52,0.34), transparent 65%)"
+            pointerEvents none
+        }
+    }
+    div {
+        style position=relative zIndex="10" maxWidth="var(--max-width-narrow)" margin="0 auto"
+        div {
+            style {
+                display "${state.eyebrow ? 'flex' : 'none'}"
+                alignItems center
+                justifyContent center
+                gap "0.85rem"
+                marginBottom "1.25rem"
+            }
+            span {
+                style width="2.25rem" height="1px" backgroundColor="var(--color-amber)"
+            }
+            p "${state.eyebrow}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-body)"
+                    textTransform uppercase
+                    letterSpacing "0.24em"
+                    fontSize "0.74rem"
+                    fontWeight "700"
+                    color "var(--color-amber)"
+                }
+            }
+            span {
+                style width="2.25rem" height="1px" backgroundColor="var(--color-amber)"
+            }
+        }
+        h2 {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(2.1rem, 5vw, 3.25rem)"
+                fontWeight "700"
+                lineHeight "1.1"
+                letterSpacing "-0.02em"
+                margin "0 0 1.1rem"
+                color "var(--color-text-white)"
+            }
+            span "${state.heading}"
+            span " ${state.headingAccent}" {
+                style {
+                    display "${state.headingAccent ? 'inline' : 'none'}"
+                    fontStyle italic
+                    fontWeight "500"
+                    color "var(--color-amber)"
+                }
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontFamily "var(--font-body)"
+                fontSize "1.12rem"
+                lineHeight "1.7"
+                opacity "0.82"
+                margin "0 auto 2rem"
+                maxWidth "50ch"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta}" {
+            style {
+                display inline-block
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.95rem 2.4rem"
+                borderRadius "999px"
+                fontFamily "var(--font-body)"
+                fontSize "0.85rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                textDecoration none
+                transition "background-color 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)"
+            }
+        }
+    }
+}

package/sites/restaurant/components/bit-feature.jxn

@@ -0,0 +1,38 @@
+/- kdl-version 2
+
+bit-feature {
+    state number="" title="" text=""
+    style display=block paddingTop="1.5rem" borderTop="1px solid var(--color-border-strong)"
+    div {
+        style display=flex alignItems=baseline gap="0.9rem" marginBottom="1rem"
+        span "${state.number}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.35rem"
+                fontWeight "600"
+                fontStyle italic
+                color "var(--color-primary)"
+                fontVariantNumeric tabular-nums
+            }
+        }
+        h3 "${state.title}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.45rem"
+                fontWeight "700"
+                letterSpacing "-0.01em"
+                margin "0"
+                color "var(--color-text-primary)"
+            }
+        }
+    }
+    p "${state.text}" {
+        style {
+            margin "0"
+            fontFamily "var(--font-body)"
+            color "var(--color-text-muted)"
+            fontSize "1rem"
+            lineHeight "1.7"
+        }
+    }
+}