@jxsuite/starters 3.4.0 → 3.6.0

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

@@ -0,0 +1,98 @@
+/- kdl-version 2
+
+re-cta {
+    state {
+        heading ""
+        text ""
+        cta "Contact an Agent"
+        ctaHref "/contact/"
+        cta2 ""
+        cta2Href "/listings/"
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        background "radial-gradient(ellipse 55% 80% at 50% 120%, rgba(20,184,166,0.22), transparent 65%), var(--color-bg-dark)"
+        color "var(--color-text-white)"
+        padding "clamp(3.5rem, 8vw, 5.5rem) 1.5rem"
+        textAlign center
+    }
+    div {
+        style maxWidth="var(--max-width-narrow)" margin="0 auto" position=relative zIndex="2"
+        p "Northshore Realty" {
+            style {
+                textTransform uppercase
+                letterSpacing "0.18em"
+                fontSize "0.74rem"
+                fontWeight "700"
+                color "var(--color-accent-bright)"
+                margin "0 0 1rem"
+            }
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "clamp(2rem, 4.4vw, 3rem)"
+                fontWeight "500"
+                lineHeight "1.1"
+                letterSpacing "-0.015em"
+                margin "0 0 1rem"
+                color "var(--color-text-white)"
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontSize "1.12rem"
+                lineHeight "1.65"
+                color "rgba(255,255,255,0.74)"
+                margin "0 auto 2.25rem"
+                maxWidth "50ch"
+            }
+        }
+        div {
+            style display=flex gap="0.75rem" justifyContent=center flexWrap=wrap
+            a href="${state.ctaHref}" {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.5rem"
+                    backgroundColor "var(--color-accent-bright)"
+                    color "var(--color-ink)"
+                    padding "0.9rem 2rem"
+                    borderRadius "999px"
+                    fontSize "1.02rem"
+                    fontWeight "700"
+                    textDecoration none
+                    transition "transform 0.15s, box-shadow 0.15s"
+                    boxShadow "0 14px 34px -14px rgba(20,184,166,0.8)"
+                    :hover {
+                        transform "translateY(-2px)"
+                        boxShadow "0 20px 44px -14px rgba(20,184,166,0.9)"
+                    }
+                }
+                span "${state.cta}"
+                span →
+            }
+            a href="${state.cta2Href}" "${state.cta2}" {
+                style {
+                    display "${state.cta2 ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    border "1px solid rgba(255,255,255,0.22)"
+                    backgroundColor "rgba(255,255,255,0.04)"
+                    color "var(--color-text-white)"
+                    padding "0.9rem 2rem"
+                    borderRadius "999px"
+                    fontSize "1.02rem"
+                    fontWeight "600"
+                    textDecoration none
+                    transition "background-color 0.15s, border-color 0.15s"
+                    :hover {
+                        backgroundColor "rgba(255,255,255,0.09)"
+                        borderColor "rgba(255,255,255,0.4)"
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/real-estate/components/re-detail-row.jxn

@@ -0,0 +1,18 @@
+/- kdl-version 2
+
+re-detail-row {
+    state label="" value=""
+    style {
+        display flex
+        justifyContent space-between
+        gap "1rem"
+        padding "0.55rem 0"
+        borderTop "1px solid rgba(255, 255, 255, 0.15)"
+    }
+    span "${state.label}" {
+        style fontWeight="600"
+    }
+    span "${state.value}" {
+        style opacity="0.8"
+    }
+}

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

@@ -0,0 +1,41 @@
+/- kdl-version 2
+
+re-feature {
+    state icon="" title="" text=""
+    style {
+        display block
+        padding "1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        transition "transform 0.2s, box-shadow 0.2s"
+        :hover transform="translateY(-3px)" boxShadow="var(--shadow-card)"
+    }
+    div "${state.icon}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "3rem"
+            height "3rem"
+            borderRadius "0.7rem"
+            backgroundColor "var(--color-teal-tint)"
+            border "1px solid var(--color-accent-soft)"
+            fontSize "1.4rem"
+            marginBottom "1.1rem"
+            lineHeight "1"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.15rem"
+            fontWeight "700"
+            letterSpacing "-0.01em"
+            margin "0 0 0.5rem"
+        }
+    }
+    p "${state.text}" {
+        style margin="0" color="var(--color-text-muted)" fontSize="0.98rem" lineHeight="1.65"
+    }
+}

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

@@ -0,0 +1,219 @@
+/- kdl-version 2
+
+re-footer {
+    state {
+        brand "Northshore Realty"
+        tagline "The north shore's property index — helping neighbors buy and sell since 2004."
+        address "45 Lakeshore Drive, Bayport"
+        phone "(555) 204-7788"
+        license "License #RE-0294187 · Equal Housing Opportunity"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-dark)"
+        color "var(--color-text-white)"
+        padding "clamp(3rem, 6vw, 4.5rem) 1.5rem 2rem"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "2fr 1fr 1fr 1fr"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr 1fr"
+            @--sm gridTemplateColumns="1fr"
+        }
+        div {
+            div {
+                style display=inline-flex alignItems=center gap="0.55rem" marginBottom="0.9rem"
+                span ⌂ {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "1.9rem"
+                        height "1.9rem"
+                        borderRadius "0.5rem"
+                        background "linear-gradient(150deg, var(--color-accent-bright), var(--color-primary))"
+                        color "var(--color-ink)"
+                        fontSize "1rem"
+                    }
+                }
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.25rem"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style {
+                    margin "0 0 1.25rem"
+                    color "rgba(255,255,255,0.6)"
+                    maxWidth "36ch"
+                    fontSize "0.95rem"
+                    lineHeight "1.6"
+                }
+            }
+            a href="/listings/" {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.6rem 1.1rem"
+                    borderRadius "999px"
+                    border "1px solid rgba(255,255,255,0.2)"
+                    color "var(--color-text-white)"
+                    textDecoration none
+                    fontWeight "700"
+                    fontSize "0.9rem"
+                    transition "border-color 0.15s, background-color 0.15s"
+                    :hover {
+                        borderColor "var(--color-accent-bright)"
+                        backgroundColor "rgba(255,255,255,0.05)"
+                    }
+                }
+                span ⌕ {
+                    style color="var(--color-accent-bright)"
+                }
+                span "Search homes"
+            }
+        }
+        div {
+            div Explore {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.72rem"
+                    color "rgba(255,255,255,0.45)"
+                    fontWeight "700"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href="/listings/" "All listings" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.5rem"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent-bright)"
+                }
+            }
+            a href="/#neighborhoods" Neighborhoods {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.5rem"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent-bright)"
+                }
+            }
+            a href="/about/" "About us" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent-bright)"
+                }
+            }
+        }
+        div {
+            div Office {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.72rem"
+                    color "rgba(255,255,255,0.45)"
+                    fontWeight "700"
+                    marginBottom "0.9rem"
+                }
+            }
+            p "${state.address}" {
+                style margin="0 0 0.4rem" color="rgba(255,255,255,0.82)" fontSize="0.92rem"
+            }
+            a href=tel:+15552047788 "${state.phone}" {
+                style {
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    fontSize "0.92rem"
+                    fontVariantNumeric tabular-nums
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent-bright)"
+                }
+            }
+        }
+        div {
+            div "Get started" {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.72rem"
+                    color "rgba(255,255,255,0.45)"
+                    fontWeight "700"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href="/contact/" "Book a call" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.5rem"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent-bright)"
+                }
+            }
+            a href="/contact/" "Sell your home" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.5rem"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent-bright)"
+                }
+            }
+            a href="/contact/" "Set up alerts" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent-bright)"
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "2.75rem auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid rgba(255,255,255,0.12)"
+            display flex
+            justifyContent space-between
+            flexWrap wrap
+            gap "0.75rem"
+            fontSize "0.82rem"
+            color "rgba(255,255,255,0.5)"
+        }
+        p "© Northshore Realty. Built with Jx." {
+            style margin="0"
+        }
+        p "${state.license}" {
+            style margin="0"
+        }
+    }
+}