@jxsuite/starters 3.4.0 → 3.6.0

package/sites/home-services/components/hs-reservation.jxn

@@ -0,0 +1,125 @@
+/- kdl-version 2
+
+hs-reservation {
+    state heading="Request a free quote"
+    style {
+        display block
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderTop "4px solid var(--color-primary)"
+        borderRadius "var(--radius)"
+        boxShadow "var(--shadow-card)"
+        overflow hidden
+    }
+    div {
+        style padding="1.75rem 1.75rem 0"
+        h3 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.7rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.02em"
+                margin "0 0 0.35rem"
+            }
+        }
+        p "Flat-rate pricing · No obligation · Same-day slots available." {
+            style margin="0" color="var(--color-text-muted)" fontSize="0.95rem"
+        }
+    }
+    form action="#" method=post {
+        style display=grid gap="0.9rem" alignContent=start padding="1.4rem 1.75rem 1.75rem"
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name" {
+            style {
+                width "100%"
+                padding "0.8rem 0.9rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="0.9rem" {
+                @--sm gridTemplateColumns="1fr"
+            }
+            input type=email name=email placeholder="Email address" required="true" aria-label="Email address" {
+                style {
+                    width "100%"
+                    padding "0.8rem 0.9rem"
+                    border "1px solid var(--color-border-strong)"
+                    borderRadius "var(--radius-sm)"
+                    fontSize "1rem"
+                    fontFamily inherit
+                    backgroundColor "var(--color-bg-cream)"
+                }
+            }
+            input type=tel name=phone placeholder="Phone number" aria-label="Phone number" {
+                style {
+                    width "100%"
+                    padding "0.8rem 0.9rem"
+                    border "1px solid var(--color-border-strong)"
+                    borderRadius "var(--radius-sm)"
+                    fontSize "1rem"
+                    fontFamily inherit
+                    backgroundColor "var(--color-bg-cream)"
+                }
+            }
+        }
+        select name=service aria-label="Service needed" {
+            style {
+                width "100%"
+                padding "0.8rem 0.9rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                fontWeight "500"
+                color "var(--color-text-primary)"
+                backgroundColor "var(--color-bg-cream)"
+                cursor pointer
+            }
+            option value="" "What do you need? (e.g. AC repair)"
+            option value=ac-repair "AC Repair"
+            option value=ac-install "AC Installation"
+            option value=furnace-repair "Furnace Repair"
+            option value=furnace-install "Furnace Installation"
+            option value=heat-pump "Heat Pumps"
+            option value=maintenance "Maintenance Plan"
+            option value=emergency "Emergency — no heat/AC"
+            option value=other "Something else"
+        }
+        textarea name=notes rows="4" placeholder="Describe the problem or project…" aria-label=Notes {
+            style {
+                width "100%"
+                padding "0.8rem 0.9rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        button type=submit "Request My Free Quote →" {
+            style {
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.95rem 1.5rem"
+                border none
+                borderRadius "var(--radius-sm)"
+                fontFamily "var(--font-heading)"
+                textTransform uppercase
+                letterSpacing "0.05em"
+                fontSize "1.05rem"
+                fontWeight "600"
+                cursor pointer
+                transition "background-color 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)"
+            }
+        }
+        p "This is a demo form. Wire it to your CRM, scheduler, or email in pages/contact.md." {
+            style fontSize="0.85rem" color="var(--color-text-muted)" margin="0"
+        }
+    }
+}

package/sites/home-services/components/hs-review.jxn

@@ -0,0 +1,84 @@
+/- kdl-version 2
+
+hs-review {
+    state quote="" author="" role=""
+    style {
+        position relative
+        display flex
+        flexDirection column
+        height "100%"
+        padding "1.9rem 1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        boxShadow "var(--shadow-card)"
+    }
+    div {
+        style {
+            display flex
+            alignItems center
+            justifyContent space-between
+            gap "1rem"
+            marginBottom "0.9rem"
+        }
+        div ★★★★★ {
+            style color="var(--color-primary)" fontSize="1.05rem" letterSpacing="0.14em"
+        }
+        span ” {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "2.4rem"
+                lineHeight "0.6"
+                color "var(--color-bg-concrete)"
+                fontWeight "700"
+            }
+        }
+    }
+    p "“${state.quote}”" {
+        style {
+            flex "1"
+            fontSize "1.05rem"
+            lineHeight "1.6"
+            color "var(--color-text-primary)"
+            margin "0 0 1.35rem"
+        }
+    }
+    div {
+        style {
+            display flex
+            alignItems center
+            gap "0.75rem"
+            paddingTop "1.1rem"
+            borderTop "1px solid var(--color-border)"
+        }
+        div ★ {
+            style {
+                display flex
+                alignItems center
+                justifyContent center
+                width "2.4rem"
+                height "2.4rem"
+                borderRadius "var(--radius-sm)"
+                backgroundColor "var(--color-primary-soft)"
+                color "var(--color-primary)"
+                fontFamily "var(--font-heading)"
+                fontWeight "700"
+                fontSize "1.05rem"
+            }
+        }
+        div {
+            div "${state.author}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.02em"
+                    fontSize "1rem"
+                }
+            }
+            div "${state.role}" {
+                style fontSize="0.85rem" color="var(--color-text-muted)"
+            }
+        }
+    }
+}

package/sites/home-services/components/hs-section-header.jxn

@@ -0,0 +1,56 @@
+/- kdl-version 2
+
+hs-section-header {
+    state eyebrow="" heading="" subheading="" align=center
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        margin "0 auto 2.75rem"
+        textAlign "${state.align}"
+    }
+    p {
+        style {
+            display "${state.eyebrow ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.5rem"
+            textTransform uppercase
+            fontFamily "var(--font-heading)"
+            letterSpacing "0.14em"
+            fontSize "0.82rem"
+            fontWeight "600"
+            color "var(--color-primary)"
+            margin "0 0 0.9rem"
+        }
+        span {
+            style {
+                width "1.6rem"
+                height "0.2rem"
+                backgroundColor "var(--color-primary)"
+                display inline-block
+            }
+        }
+        span "${state.eyebrow}"
+    }
+    h2 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(2rem, 4.4vw, 3rem)"
+            fontWeight "700"
+            textTransform uppercase
+            lineHeight "1.05"
+            letterSpacing "0.01em"
+            margin "0"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.12rem"
+            lineHeight "1.7"
+            color "var(--color-text-muted)"
+            margin "1rem auto 0"
+            maxWidth "58ch"
+        }
+    }
+}

package/sites/home-services/components/hs-service-card.jxn

@@ -0,0 +1,68 @@
+/- kdl-version 2
+
+hs-service-card {
+    state icon="" name="" summary="" cta="" href="/services/"
+    style {
+        position relative
+        display flex
+        flexDirection column
+        padding "1.9rem 1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderTop "4px solid var(--color-steel)"
+        borderRadius "var(--radius)"
+        boxShadow "var(--shadow-card)"
+        transition "transform 0.16s, box-shadow 0.16s, border-top-color 0.16s"
+        :hover {
+            transform "translateY(-4px)"
+            boxShadow "0 22px 46px -22px rgba(14,26,35,0.4)"
+            borderTopColor "var(--color-primary)"
+        }
+    }
+    div "${state.icon}" {
+        style {
+            display flex
+            alignItems center
+            justifyContent center
+            width "3.6rem"
+            height "3.6rem"
+            borderRadius "var(--radius-sm)"
+            backgroundColor "var(--color-steel)"
+            color "var(--color-text-white)"
+            fontSize "1.85rem"
+            lineHeight "1"
+            marginBottom "1.2rem"
+            clipPath "polygon(0 0, 100% 0, 100% 82%, 84% 100%, 0 100%)"
+        }
+    }
+    h3 "${state.name}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.4rem"
+            fontWeight "600"
+            textTransform uppercase
+            letterSpacing "0.02em"
+            margin "0 0 0.55rem"
+        }
+    }
+    p "${state.summary}" {
+        style margin="0" color="var(--color-text-muted)" fontSize="1rem" lineHeight="1.6"
+    }
+    a href="${state.href}" "${state.cta} →" {
+        style {
+            display "${state.cta ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.4rem"
+            marginTop auto
+            paddingTop "1.25rem"
+            color "var(--color-primary)"
+            fontFamily "var(--font-heading)"
+            textTransform uppercase
+            letterSpacing "0.05em"
+            fontWeight "600"
+            fontSize "0.9rem"
+            textDecoration none
+            :hover color="var(--color-primary-hover)"
+        }
+    }
+}

package/sites/home-services/components/hs-stat.jxn

@@ -0,0 +1,40 @@
+/- kdl-version 2
+
+hs-stat {
+    state value="" label="" icon=""
+    style display=block position=relative padding="0.5rem 1.5rem 0.5rem 0" {
+        @--sm padding="0.5rem 0"
+    }
+    div "${state.icon}" {
+        style {
+            display "${state.icon ? 'block' : 'none'}"
+            fontSize "1.4rem"
+            lineHeight "1"
+            marginBottom "0.6rem"
+            opacity "0.85"
+        }
+    }
+    div "${state.value}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(2.6rem, 5.2vw, 3.7rem)"
+            fontWeight "700"
+            lineHeight "0.95"
+            letterSpacing "0.01em"
+            color "var(--color-primary)"
+            fontVariantNumeric tabular-nums
+        }
+    }
+    div "${state.label}" {
+        style {
+            marginTop "0.6rem"
+            fontFamily "var(--font-heading)"
+            fontSize "0.86rem"
+            fontWeight "500"
+            textTransform uppercase
+            letterSpacing "0.08em"
+            color "var(--color-text-steel-muted)"
+            lineHeight "1.35"
+        }
+    }
+}

package/sites/home-services/components/hs-step.jxn

@@ -0,0 +1,67 @@
+/- kdl-version 2
+
+hs-step {
+    state number="" title="" text=""
+    style {
+        position relative
+        display block
+        padding "1.75rem 1.5rem 1.6rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        overflow hidden
+    }
+    span "${state.number}" {
+        style {
+            position absolute
+            top "-0.75rem"
+            right "0.5rem"
+            fontFamily "var(--font-heading)"
+            fontWeight "700"
+            fontSize "5.5rem"
+            lineHeight "1"
+            color "var(--color-bg-concrete)"
+            pointerEvents none
+            userSelect none
+        }
+    }
+    div "${state.number}" {
+        style {
+            position relative
+            display inline-flex
+            alignItems center
+            justifyContent center
+            minWidth "2.4rem"
+            height "2.4rem"
+            padding "0 0.6rem"
+            backgroundColor "var(--color-primary)"
+            color "var(--color-text-white)"
+            fontFamily "var(--font-heading)"
+            fontWeight "700"
+            fontSize "1.15rem"
+            borderRadius "var(--radius-sm)"
+            marginBottom "1rem"
+            clipPath "polygon(0 0, 100% 0, 100% 74%, 82% 100%, 0 100%)"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            position relative
+            fontFamily "var(--font-heading)"
+            fontSize "1.28rem"
+            fontWeight "600"
+            textTransform uppercase
+            letterSpacing "0.02em"
+            margin "0 0 0.45rem"
+        }
+    }
+    p "${state.text}" {
+        style {
+            position relative
+            margin "0"
+            color "var(--color-text-muted)"
+            fontSize "0.98rem"
+            lineHeight "1.6"
+        }
+    }
+}

package/sites/home-services/components/hs-trust-bar.jxn

@@ -0,0 +1,183 @@
+/- kdl-version 2
+
+hs-trust-bar {
+    state {
+        icon1 🎖️
+        item1 NATE-Certified
+        sub1 "Factory-trained techs"
+        icon2 🛡️
+        item2 "Licensed & Insured"
+        sub2 "Bonded · CO Lic. #C-48219"
+        icon3 🏅
+        item3 "BBB A+ Rated"
+        sub3 "600+ 5-star reviews"
+        icon4 💳
+        item4 "Financing Available"
+        sub4 "0% APR options"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-white)"
+        borderBottom "1px solid var(--color-border)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "repeat(4, 1fr)"
+            @--md gridTemplateColumns="repeat(2, 1fr)"
+            @--sm gridTemplateColumns="1fr"
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                gap "0.85rem"
+                padding "1.15rem 1.5rem"
+                borderRight "1px solid var(--color-border)"
+                @--sm borderRight=none borderBottom="1px solid var(--color-border)"
+            }
+            div "${state.icon1}" {
+                style {
+                    flexShrink "0"
+                    display flex
+                    alignItems center
+                    justifyContent center
+                    width "2.6rem"
+                    height "2.6rem"
+                    borderRadius "var(--radius-sm)"
+                    backgroundColor "var(--color-primary-soft)"
+                    fontSize "1.35rem"
+                    lineHeight "1"
+                }
+            }
+            div {
+                div "${state.item1}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        fontWeight "600"
+                        fontSize "0.98rem"
+                        lineHeight "1.1"
+                    }
+                }
+                div "${state.sub1}" {
+                    style fontSize="0.82rem" color="var(--color-text-muted)" marginTop="0.15rem"
+                }
+            }
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                gap "0.85rem"
+                padding "1.15rem 1.5rem"
+                borderRight "1px solid var(--color-border)"
+                @--md borderRight=none
+                @--sm borderBottom="1px solid var(--color-border)"
+            }
+            div "${state.icon2}" {
+                style {
+                    flexShrink "0"
+                    display flex
+                    alignItems center
+                    justifyContent center
+                    width "2.6rem"
+                    height "2.6rem"
+                    borderRadius "var(--radius-sm)"
+                    backgroundColor "var(--color-primary-soft)"
+                    fontSize "1.35rem"
+                    lineHeight "1"
+                }
+            }
+            div {
+                div "${state.item2}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        fontWeight "600"
+                        fontSize "0.98rem"
+                        lineHeight "1.1"
+                    }
+                }
+                div "${state.sub2}" {
+                    style fontSize="0.82rem" color="var(--color-text-muted)" marginTop="0.15rem"
+                }
+            }
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                gap "0.85rem"
+                padding "1.15rem 1.5rem"
+                borderRight "1px solid var(--color-border)"
+                @--sm borderRight=none borderBottom="1px solid var(--color-border)"
+            }
+            div "${state.icon3}" {
+                style {
+                    flexShrink "0"
+                    display flex
+                    alignItems center
+                    justifyContent center
+                    width "2.6rem"
+                    height "2.6rem"
+                    borderRadius "var(--radius-sm)"
+                    backgroundColor "var(--color-primary-soft)"
+                    fontSize "1.35rem"
+                    lineHeight "1"
+                }
+            }
+            div {
+                div "${state.item3}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        fontWeight "600"
+                        fontSize "0.98rem"
+                        lineHeight "1.1"
+                    }
+                }
+                div "${state.sub3}" {
+                    style fontSize="0.82rem" color="var(--color-text-muted)" marginTop="0.15rem"
+                }
+            }
+        }
+        div {
+            style display=flex alignItems=center gap="0.85rem" padding="1.15rem 1.5rem"
+            div "${state.icon4}" {
+                style {
+                    flexShrink "0"
+                    display flex
+                    alignItems center
+                    justifyContent center
+                    width "2.6rem"
+                    height "2.6rem"
+                    borderRadius "var(--radius-sm)"
+                    backgroundColor "var(--color-primary-soft)"
+                    fontSize "1.35rem"
+                    lineHeight "1"
+                }
+            }
+            div {
+                div "${state.item4}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        fontWeight "600"
+                        fontSize "0.98rem"
+                        lineHeight "1.1"
+                    }
+                }
+                div "${state.sub4}" {
+                    style fontSize="0.82rem" color="var(--color-text-muted)" marginTop="0.15rem"
+                }
+            }
+        }
+    }
+}