@jxsuite/starters 3.3.2 → 3.5.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

@@ -0,0 +1,103 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Northshore Realty"
+
+url "https://example.com"
+
+defaults layout="./layouts/base.jxn" lang=en
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="Northshore Realty is the north shore's property index — search live listings by neighborhood, price, and bedrooms, then work with agents who actually live here."
+    link rel=icon href="/favicon.svg"
+    link rel=preconnect href="https://fonts.googleapis.com"
+    link rel=preconnect href="https://fonts.gstatic.com" crossorigin=""
+    link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#0f766e"
+    --color-primary-hover "#115e59"
+    --color-accent "#0d9488"
+    --color-accent-bright "#14b8a6"
+    --color-accent-soft "#ccfbf1"
+    --color-teal-tint "#f0fdfa"
+    --color-ink "#0b1220"
+    --color-navy "#0f172a"
+    --color-bg-dark "#0b1220"
+    --color-bg-ink-soft "#152238"
+    --color-bg-cream "#f6f8fb"
+    --color-bg-tint "#eef2f7"
+    --color-bg-white "#ffffff"
+    --color-text-primary "#0f172a"
+    --color-text-secondary "#334155"
+    --color-text-muted "#64748b"
+    --color-text-white "#ffffff"
+    --color-border "#e4e9f0"
+    --color-border-strong "#cbd5e1"
+    --color-status-new "#0d9488"
+    --font-display "'Spectral', Georgia, 'Times New Roman', serif"
+    --font-heading "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --font-ui "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --font-body "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1240px"
+    --max-width-narrow "760px"
+    --radius "0.75rem"
+    --radius-sm "0.5rem"
+    --radius-lg "1.25rem"
+    --shadow-card "0 1px 2px rgba(15,23,42,0.04), 0 10px 26px -14px rgba(15,23,42,0.18)"
+    --shadow-float "0 30px 70px -28px rgba(11,18,32,0.42)"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "17px"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg-white)"
+    WebkitFontSmoothing antialiased
+}
+
+images {
+    optimize #true
+    widths 320 640 960 1280 1920
+    formats webp avif
+    quality webp=80 avif=65 jpeg=80 png=80
+    sizes "(max-width: 768px) 100vw, 50vw"
+    lazyLoad #true
+}
+
+content {
+    listings {
+        source "./content/listings.csv"
+        format Csv
+        schema {
+            type object
+            properties {
+                Title type=string
+                slug type=string
+                price type=number
+                beds type=number
+                baths type=number
+                sqft type=number
+                city type=string
+                image type=string format=image
+                status type=string
+                order type=number
+            }
+            required Title slug
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

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)"
+            }
+        }
+    }
+}