@jxsuite/starters 3.4.0 → 3.6.0

package/sites/real-estate/components/re-hero.jxn

@@ -0,0 +1,367 @@
+/- kdl-version 2
+
+re-hero {
+    state {
+        eyebrow ""
+        heading ""
+        subheading ""
+        cta "Search homes"
+        ctaHref "/listings/"
+        bg type=string format=image default=""
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        borderBottom "1px solid var(--color-border)"
+        backgroundColor "var(--color-bg-white)"
+        backgroundImage "linear-gradient(90deg, var(--color-bg-white) 0%, var(--color-bg-white) 38%, rgba(255,255,255,0.72) 52%, rgba(255,255,255,0.18) 72%, rgba(11,18,32,0.04) 100%), url('${state.bg}')"
+        backgroundSize "cover, cover"
+        backgroundPosition "center, right center"
+        backgroundRepeat no-repeat
+        @--md backgroundImage=none backgroundColor="var(--color-bg-cream)"
+    }
+    div {
+        style {
+            position relative
+            zIndex "2"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(3rem, 6vw, 5.5rem) 1.5rem clamp(3.5rem, 7vw, 6rem)"
+            display grid
+            gridTemplateColumns "1.02fr 0.98fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.25rem"
+        }
+        div {
+            p {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.55rem"
+                    padding "0.4rem 0.85rem"
+                    borderRadius "999px"
+                    border "1px solid var(--color-border)"
+                    backgroundColor "var(--color-bg-white)"
+                    boxShadow "0 1px 2px rgba(15,23,42,0.04)"
+                    fontSize "0.8rem"
+                    fontWeight "600"
+                    color "var(--color-text-secondary)"
+                    margin "0 0 1.5rem"
+                }
+                span {
+                    style {
+                        width "0.5rem"
+                        height "0.5rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-accent-bright)"
+                        boxShadow "0 0 0 3px var(--color-accent-soft)"
+                    }
+                }
+                span "${state.eyebrow}"
+            }
+            h1 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(2.6rem, 5.4vw, 4.3rem)"
+                    fontWeight "500"
+                    lineHeight "1.04"
+                    letterSpacing "-0.02em"
+                    margin "0 0 1.25rem"
+                    color "var(--color-text-primary)"
+                    maxWidth "14ch"
+                }
+            }
+            p "${state.subheading}" {
+                style {
+                    fontSize "clamp(1.05rem, 1.6vw, 1.22rem)"
+                    lineHeight "1.6"
+                    color "var(--color-text-secondary)"
+                    margin "0 0 2rem"
+                    maxWidth "46ch"
+                }
+            }
+            div {
+                style display=flex alignItems=stretch gap="0" flexWrap=wrap
+                div {
+                    style paddingRight="1.4rem"
+                    div "20 yrs" {
+                        style {
+                            fontSize "1.55rem"
+                            fontWeight "800"
+                            letterSpacing "-0.02em"
+                            color "var(--color-text-primary)"
+                            fontVariantNumeric tabular-nums
+                        }
+                    }
+                    div "on the north shore" {
+                        style fontSize="0.82rem" color="var(--color-text-muted)" fontWeight="600"
+                    }
+                }
+                div {
+                    style padding="0 1.4rem" borderLeft="1px solid var(--color-border)"
+                    div "1,400+" {
+                        style {
+                            fontSize "1.55rem"
+                            fontWeight "800"
+                            letterSpacing "-0.02em"
+                            color "var(--color-text-primary)"
+                            fontVariantNumeric tabular-nums
+                        }
+                    }
+                    div "homes closed" {
+                        style fontSize="0.82rem" color="var(--color-text-muted)" fontWeight="600"
+                    }
+                }
+                div {
+                    style padding="0 1.4rem" borderLeft="1px solid var(--color-border)"
+                    div "98%" {
+                        style {
+                            fontSize "1.55rem"
+                            fontWeight "800"
+                            letterSpacing "-0.02em"
+                            color "var(--color-primary)"
+                            fontVariantNumeric tabular-nums
+                        }
+                    }
+                    div "of asking price" {
+                        style fontSize="0.82rem" color="var(--color-text-muted)" fontWeight="600"
+                    }
+                }
+            }
+        }
+        form action="/listings/" method=get {
+            style {
+                backgroundColor "var(--color-bg-white)"
+                border "1px solid var(--color-border)"
+                borderRadius "var(--radius-lg)"
+                boxShadow "var(--shadow-float)"
+                padding "clamp(1.25rem, 2vw, 1.6rem)"
+            }
+            div {
+                style {
+                    display flex
+                    gap "0.35rem"
+                    padding "0.3rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-bg-tint)"
+                    marginBottom "1.25rem"
+                }
+                span "For Sale" {
+                    style {
+                        flex "1"
+                        textAlign center
+                        padding "0.5rem 0.5rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-bg-white)"
+                        color "var(--color-text-primary)"
+                        fontWeight "700"
+                        fontSize "0.88rem"
+                        boxShadow "0 1px 3px rgba(15,23,42,0.12)"
+                    }
+                }
+                span "For Rent" {
+                    style {
+                        flex "1"
+                        textAlign center
+                        padding "0.5rem 0.5rem"
+                        borderRadius "999px"
+                        color "var(--color-text-muted)"
+                        fontWeight "600"
+                        fontSize "0.88rem"
+                    }
+                }
+                span Sold {
+                    style {
+                        flex "1"
+                        textAlign center
+                        padding "0.5rem 0.5rem"
+                        borderRadius "999px"
+                        color "var(--color-text-muted)"
+                        fontWeight "600"
+                        fontSize "0.88rem"
+                    }
+                }
+            }
+            label Location {
+                style {
+                    display block
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    color "var(--color-text-muted)"
+                    marginBottom "0.5rem"
+                }
+            }
+            div {
+                style {
+                    display flex
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0 0.85rem"
+                    border "1px solid var(--color-border-strong)"
+                    borderRadius "var(--radius-sm)"
+                    backgroundColor "var(--color-bg-white)"
+                    marginBottom "1rem"
+                }
+                span 📍 {
+                    style color="var(--color-primary)" fontSize="1rem"
+                }
+                input type=text name=location placeholder="City, neighborhood, or ZIP" aria-label="Search by city, neighborhood, or ZIP" {
+                    style {
+                        flex "1"
+                        border none
+                        outline none
+                        padding "0.8rem 0"
+                        fontSize "0.98rem"
+                        fontFamily inherit
+                        color "var(--color-text-primary)"
+                        backgroundColor transparent
+                        minWidth "0"
+                    }
+                }
+            }
+            div {
+                style {
+                    display grid
+                    gridTemplateColumns "repeat(3, 1fr)"
+                    gap "0.6rem"
+                    marginBottom "1.25rem"
+                    @--sm gridTemplateColumns="1fr"
+                }
+                div {
+                    label "Max price" {
+                        style {
+                            display block
+                            fontSize "0.72rem"
+                            fontWeight "700"
+                            textTransform uppercase
+                            letterSpacing "0.1em"
+                            color "var(--color-text-muted)"
+                            marginBottom "0.5rem"
+                        }
+                    }
+                    select name=price aria-label="Maximum price" {
+                        style {
+                            width "100%"
+                            border "1px solid var(--color-border-strong)"
+                            borderRadius "var(--radius-sm)"
+                            padding "0.72rem 0.7rem"
+                            fontSize "0.92rem"
+                            fontFamily inherit
+                            fontWeight "600"
+                            color "var(--color-text-primary)"
+                            backgroundColor "var(--color-bg-white)"
+                            cursor pointer
+                        }
+                        option value="" "Any price"
+                        option value="400000" $400k
+                        option value="700000" $700k
+                        option value="1200000" $1.2M
+                    }
+                }
+                div {
+                    label Beds {
+                        style {
+                            display block
+                            fontSize "0.72rem"
+                            fontWeight "700"
+                            textTransform uppercase
+                            letterSpacing "0.1em"
+                            color "var(--color-text-muted)"
+                            marginBottom "0.5rem"
+                        }
+                    }
+                    select name=beds aria-label="Minimum bedrooms" {
+                        style {
+                            width "100%"
+                            border "1px solid var(--color-border-strong)"
+                            borderRadius "var(--radius-sm)"
+                            padding "0.72rem 0.7rem"
+                            fontSize "0.92rem"
+                            fontFamily inherit
+                            fontWeight "600"
+                            color "var(--color-text-primary)"
+                            backgroundColor "var(--color-bg-white)"
+                            cursor pointer
+                        }
+                        option value="" Any
+                        option value="2" "2+"
+                        option value="3" "3+"
+                        option value="4" "4+"
+                    }
+                }
+                div {
+                    label Baths {
+                        style {
+                            display block
+                            fontSize "0.72rem"
+                            fontWeight "700"
+                            textTransform uppercase
+                            letterSpacing "0.1em"
+                            color "var(--color-text-muted)"
+                            marginBottom "0.5rem"
+                        }
+                    }
+                    select name=baths aria-label="Minimum bathrooms" {
+                        style {
+                            width "100%"
+                            border "1px solid var(--color-border-strong)"
+                            borderRadius "var(--radius-sm)"
+                            padding "0.72rem 0.7rem"
+                            fontSize "0.92rem"
+                            fontFamily inherit
+                            fontWeight "600"
+                            color "var(--color-text-primary)"
+                            backgroundColor "var(--color-bg-white)"
+                            cursor pointer
+                        }
+                        option value="" Any
+                        option value="1" "1+"
+                        option value="2" "2+"
+                        option value="3" "3+"
+                    }
+                }
+            }
+            button type=submit {
+                style {
+                    display flex
+                    alignItems center
+                    justifyContent center
+                    gap "0.55rem"
+                    width "100%"
+                    backgroundColor "var(--color-primary)"
+                    color "var(--color-text-white)"
+                    border none
+                    padding "0.95rem 1.5rem"
+                    borderRadius "var(--radius-sm)"
+                    fontSize "1rem"
+                    fontFamily inherit
+                    fontWeight "700"
+                    cursor pointer
+                    boxShadow "0 12px 28px -12px rgba(15,118,110,0.7)"
+                    transition "background-color 0.15s, transform 0.15s"
+                    :hover backgroundColor="var(--color-primary-hover)" transform="translateY(-1px)"
+                }
+                span ⌕ {
+                    style fontSize="1.05rem"
+                }
+                span "${state.cta}"
+            }
+            p {
+                style {
+                    margin "1.05rem 0 0"
+                    fontSize "0.82rem"
+                    color "var(--color-text-muted)"
+                    textAlign center
+                }
+                span "Popular: " {
+                    style fontWeight="700" color="var(--color-text-secondary)"
+                }
+                span "Bayport · Maplewood · Lakeview · Harbor Hills"
+            }
+        }
+    }
+}

package/sites/real-estate/components/re-intro.jxn

@@ -0,0 +1,43 @@
+/- kdl-version 2
+
+re-intro {
+    state {
+        image type=string format=image default=""
+        imageAlt ""
+        reverse #false
+    }
+    style display=block padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1fr 1fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            style order="${state.reverse ? '2' : '1'}" position=relative
+            img src="${state.image}" alt="${state.imageAlt}" loading=lazy {
+                style {
+                    width "100%"
+                    height auto
+                    borderRadius "var(--radius-lg)"
+                    display block
+                    border "1px solid var(--color-border)"
+                    boxShadow "var(--shadow-card)"
+                }
+            }
+        }
+        div {
+            style {
+                order "${state.reverse ? '1' : '2'}"
+                fontSize "1.08rem"
+                lineHeight "1.75"
+                color "var(--color-text-secondary)"
+            }
+            slot
+        }
+    }
+}

package/sites/real-estate/components/re-listing-card.jxn

@@ -0,0 +1,210 @@
+/- kdl-version 2
+
+re-listing-card {
+    state {
+        heading ""
+        price 0
+        beds 0
+        baths 0
+        sqft 0
+        city ""
+        status "For Sale"
+        image type=string format=image default=""
+        href "#"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        overflow hidden
+        boxShadow "var(--shadow-card)"
+        transition "transform 0.2s, box-shadow 0.2s, border-color 0.2s"
+        :hover {
+            transform "translateY(-4px)"
+            boxShadow "0 18px 40px -18px rgba(15,23,42,0.28)"
+            borderColor "var(--color-border-strong)"
+        }
+        ":hover img" transform="scale(1.05)"
+    }
+    a href="${state.href}" {
+        style {
+            display block
+            position relative
+            overflow hidden
+            textDecoration none
+            aspectRatio "3 / 2"
+            backgroundColor "var(--color-bg-tint)"
+        }
+        img src="${state.image}" alt="${state.heading}" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+                transition "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
+            }
+        }
+        span {
+            style {
+                position absolute
+                top "0.85rem"
+                left "0.85rem"
+                display inline-flex
+                alignItems center
+                gap "0.35rem"
+                backgroundColor "${state.status === 'New' ? 'var(--color-status-new)' : 'rgba(11,18,32,0.82)'}"
+                color "var(--color-text-white)"
+                fontWeight "700"
+                fontSize "0.72rem"
+                letterSpacing "0.04em"
+                textTransform uppercase
+                padding "0.3rem 0.65rem"
+                borderRadius "999px"
+                backdropFilter "blur(4px)"
+            }
+            span {
+                style {
+                    width "0.4rem"
+                    height "0.4rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-accent-bright)"
+                }
+            }
+            span "${state.status}"
+        }
+        span ♡ {
+            style {
+                position absolute
+                top "0.85rem"
+                right "0.85rem"
+                display inline-flex
+                alignItems center
+                justifyContent center
+                width "2rem"
+                height "2rem"
+                borderRadius "999px"
+                backgroundColor "rgba(255,255,255,0.92)"
+                color "var(--color-text-secondary)"
+                fontSize "0.95rem"
+                boxShadow "0 2px 8px rgba(15,23,42,0.18)"
+            }
+        }
+    }
+    div {
+        style padding="1.1rem 1.25rem 1.3rem"
+        div {
+            style {
+                display flex
+                alignItems baseline
+                justifyContent space-between
+                gap "0.75rem"
+                marginBottom "0.35rem"
+            }
+            div "$${Number(state.price).toLocaleString('en-US')}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.5rem"
+                    fontWeight "800"
+                    letterSpacing "-0.02em"
+                    color "var(--color-text-primary)"
+                    fontVariantNumeric tabular-nums
+                }
+            }
+            div "${state.sqft && Number(state.sqft) > 0 ? '$' + Math.round(Number(state.price)/Number(state.sqft)).toLocaleString('en-US') + '/sqft' : ''}" {
+                style {
+                    fontSize "0.78rem"
+                    fontWeight "600"
+                    color "var(--color-text-muted)"
+                    whiteSpace nowrap
+                    fontVariantNumeric tabular-nums
+                }
+            }
+        }
+        a href="${state.href}" {
+            style textDecoration=none color="var(--color-text-primary)"
+            h3 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.05rem"
+                    fontWeight "700"
+                    margin "0 0 0.25rem"
+                    letterSpacing "-0.01em"
+                }
+            }
+        }
+        p {
+            style {
+                display flex
+                alignItems center
+                gap "0.3rem"
+                margin "0 0 0.9rem"
+                color "var(--color-text-muted)"
+                fontSize "0.88rem"
+                fontWeight "500"
+            }
+            span 📍 {
+                style fontSize="0.8rem"
+            }
+            span "${state.city}"
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                paddingTop "0.85rem"
+                borderTop "1px solid var(--color-border)"
+            }
+            div {
+                style flex="1" textAlign=center
+                div "${state.beds}" {
+                    style {
+                        fontWeight "800"
+                        fontSize "0.98rem"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div beds {
+                    style fontSize="0.72rem" color="var(--color-text-muted)" fontWeight="600"
+                }
+            }
+            div {
+                style width="1px" alignSelf=stretch backgroundColor="var(--color-border)"
+            }
+            div {
+                style flex="1" textAlign=center
+                div "${state.baths}" {
+                    style {
+                        fontWeight "800"
+                        fontSize "0.98rem"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div baths {
+                    style fontSize="0.72rem" color="var(--color-text-muted)" fontWeight="600"
+                }
+            }
+            div {
+                style width="1px" alignSelf=stretch backgroundColor="var(--color-border)"
+            }
+            div {
+                style flex="1" textAlign=center
+                div "${Number(state.sqft).toLocaleString('en-US')}" {
+                    style {
+                        fontWeight "800"
+                        fontSize "0.98rem"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div sqft {
+                    style fontSize="0.72rem" color="var(--color-text-muted)" fontWeight="600"
+                }
+            }
+        }
+    }
+}