@jxsuite/starters 3.4.0 → 3.6.0

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

@@ -0,0 +1,142 @@
+/- kdl-version 2
+
+bit-footer {
+    state {
+        brand "Bistro & Café"
+        tagline "Seasonal plates, house pastries, and small-batch coffee — served in a warm room just off Market Street."
+        address1 "128 Market Street"
+        address2 "Riverbend, CA 90210"
+        phone "(555) 018-2340"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-espresso)"
+        color "var(--color-text-white)"
+        padding "clamp(3.5rem, 7vw, 5rem) 1.5rem 2.25rem"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1.6fr 1fr 1fr"
+            gap "clamp(2rem, 5vw, 3.5rem)"
+            @--md gridTemplateColumns="1fr" gap="2.25rem"
+        }
+        div {
+            div "${state.brand}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "2rem"
+                    fontWeight "700"
+                    letterSpacing "-0.01em"
+                    marginBottom "1rem"
+                }
+            }
+            p "${state.tagline}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-body)"
+                    opacity "0.68"
+                    maxWidth "38ch"
+                    lineHeight "1.7"
+                }
+            }
+        }
+        div {
+            div Visit {
+                style {
+                    fontFamily "var(--font-body)"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "var(--color-amber)"
+                    marginBottom "1rem"
+                }
+            }
+            p "${state.address1}" {
+                style margin="0 0 0.35rem" opacity="0.82"
+            }
+            p "${state.address2}" {
+                style margin="0 0 0.75rem" opacity="0.82"
+            }
+            a href=tel:+15550182340 "${state.phone}" {
+                style {
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    textDecoration none
+                    borderBottom "1px solid rgba(246,236,219,0.25)"
+                    paddingBottom "0.1rem"
+                }
+            }
+        }
+        div {
+            div Explore {
+                style {
+                    fontFamily "var(--font-body)"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "var(--color-amber)"
+                    marginBottom "1rem"
+                }
+            }
+            a href="/menu/" "The Menu" {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    textDecoration none
+                    marginBottom "0.5rem"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            a href="/about/" "Our Story" {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    textDecoration none
+                    marginBottom "0.5rem"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            a href="/contact/" Reservations {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    textDecoration none
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "clamp(2.5rem, 5vw, 3.5rem) auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid rgba(246,236,219,0.15)"
+            display flex
+            justifyContent space-between
+            alignItems center
+            gap "1rem"
+            flexWrap wrap
+            fontFamily "var(--font-body)"
+            fontSize "0.8rem"
+            opacity "0.55"
+        }
+        p "© Bistro & Café. Built with Jx." {
+            style margin="0"
+        }
+        p "Set in Playfair Display & Mulish" {
+            style margin="0" textTransform=uppercase letterSpacing="0.14em" fontSize="0.7rem"
+        }
+    }
+}

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

@@ -0,0 +1,50 @@
+/- kdl-version 2
+
+bit-gallery {
+    state {
+        img1 type=string format=image default=""
+        img2 type=string format=image default=""
+        img3 type=string format=image default=""
+        img4 type=string format=image default=""
+        alt "Dishes and the dining room"
+    }
+    style {
+        display grid
+        gridTemplateColumns "1.5fr 1fr 1fr"
+        gridAutoRows "clamp(150px, 19vw, 250px)"
+        gap "0.85rem"
+        maxWidth "var(--max-width-wide)"
+        margin "0 auto"
+        padding "0 1.5rem"
+        @--md gridTemplateColumns="1fr 1fr" gridAutoRows="clamp(150px, 42vw, 230px)"
+    }
+    img src="${state.img1}" alt="${state.alt}" loading=lazy {
+        style {
+            gridColumn "1"
+            gridRow "span 2"
+            width "100%"
+            height "100%"
+            objectFit cover
+            borderRadius "var(--radius)"
+            display block
+            @--md gridColumn="1 / 3" gridRow=auto
+        }
+    }
+    img src="${state.img2}" alt="${state.alt}" loading=lazy {
+        style width="100%" height="100%" objectFit=cover borderRadius="var(--radius)" display=block
+    }
+    img src="${state.img3}" alt="${state.alt}" loading=lazy {
+        style width="100%" height="100%" objectFit=cover borderRadius="var(--radius)" display=block
+    }
+    img src="${state.img4}" alt="${state.alt}" loading=lazy {
+        style {
+            gridColumn "2 / 4"
+            width "100%"
+            height "100%"
+            objectFit cover
+            borderRadius "var(--radius)"
+            display block
+            @--md gridColumn=auto
+        }
+    }
+}

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

@@ -0,0 +1,194 @@
+/- kdl-version 2
+
+bit-hero {
+    state {
+        eyebrow ""
+        heading ""
+        headingAccent ""
+        headingTail ""
+        subheading ""
+        hours ""
+        cta "Reserve a Table"
+        ctaHref "/contact/"
+        cta2 ""
+        cta2Href "/menu/"
+        caption ""
+        bg type=string format=image default=""
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-paper)"
+        borderBottom "1px solid var(--color-border)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width-wide)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1.05fr 1fr"
+            alignItems stretch
+            minHeight "min(84vh, 780px)"
+            @--md gridTemplateColumns="1fr" minHeight="0"
+        }
+        div {
+            style {
+                display flex
+                flexDirection column
+                justifyContent center
+                padding "clamp(2.75rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem)"
+                order "1"
+                @--md order="2" padding="clamp(2.5rem, 7vw, 3.5rem) 1.5rem"
+            }
+            div {
+                style display=flex alignItems=center gap="0.9rem" marginBottom="1.75rem"
+                span {
+                    style width="2.75rem" height="1px" backgroundColor="var(--color-primary)"
+                }
+                p "${state.eyebrow}" {
+                    style {
+                        margin "0"
+                        fontFamily "var(--font-body)"
+                        textTransform uppercase
+                        letterSpacing "0.24em"
+                        fontSize "0.74rem"
+                        fontWeight "700"
+                        color "var(--color-primary)"
+                    }
+                }
+            }
+            h1 {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.75rem, 6.4vw, 5.25rem)"
+                    fontWeight "700"
+                    lineHeight "1.02"
+                    letterSpacing "-0.02em"
+                    margin "0 0 1.5rem"
+                    color "var(--color-text-primary)"
+                }
+                span "${state.heading} "
+                span "${state.headingAccent}" {
+                    style fontStyle=italic fontWeight="500" color="var(--color-primary)"
+                }
+                span "${state.headingTail}"
+            }
+            p "${state.subheading}" {
+                style {
+                    fontFamily "var(--font-body)"
+                    fontSize "clamp(1.05rem, 1.5vw, 1.2rem)"
+                    lineHeight "1.7"
+                    margin "0 0 2rem"
+                    color "var(--color-text-muted)"
+                    maxWidth "44ch"
+                }
+            }
+            div {
+                style display=flex alignItems=center gap="1rem" flexWrap=wrap
+                a href="${state.ctaHref}" "${state.cta}" {
+                    style {
+                        display inline-block
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        padding "0.9rem 2rem"
+                        borderRadius "999px"
+                        fontFamily "var(--font-body)"
+                        fontSize "0.82rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.14em"
+                        textDecoration none
+                        transition "background-color 0.15s"
+                        :hover backgroundColor="var(--color-primary-hover)"
+                    }
+                }
+                a href="${state.cta2Href}" "${state.cta2} →" {
+                    style {
+                        display "${state.cta2 ? 'inline-flex' : 'none'}"
+                        alignItems center
+                        gap "0.5rem"
+                        color "var(--color-text-primary)"
+                        fontFamily "var(--font-body)"
+                        fontSize "0.82rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.14em"
+                        textDecoration none
+                        borderBottom "1px solid var(--color-border-strong)"
+                        paddingBottom "0.4rem"
+                        transition "gap 0.2s, border-color 0.15s"
+                        :hover gap="0.95rem" borderColor="var(--color-primary)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display "${state.hours ? 'flex' : 'none'}"
+                    alignItems center
+                    gap "0.6rem"
+                    marginTop "2.25rem"
+                    fontFamily "var(--font-body)"
+                    fontSize "0.8rem"
+                    fontWeight "600"
+                    color "var(--color-text-muted)"
+                }
+                span {
+                    style {
+                        width "0.5rem"
+                        height "0.5rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-amber)"
+                        boxShadow "0 0 0 3px rgba(201,138,60,0.22)"
+                    }
+                }
+                span "${state.hours}"
+            }
+        }
+        div {
+            style {
+                position relative
+                order "2"
+                minHeight "clamp(320px, 46vw, 780px)"
+                backgroundImage "url('${state.bg}')"
+                backgroundSize cover
+                backgroundPosition center
+                @--md order="1" minHeight="clamp(300px, 62vw, 460px)"
+            }
+            div {
+                style {
+                    position absolute
+                    inset "0"
+                    background "linear-gradient(210deg, rgba(30,21,15,0) 45%, rgba(30,21,15,0.55) 100%)"
+                }
+            }
+            div {
+                style {
+                    display "${state.caption ? 'flex' : 'none'}"
+                    position absolute
+                    left "clamp(1rem, 2vw, 1.75rem)"
+                    bottom "clamp(1rem, 2vw, 1.75rem)"
+                    alignItems center
+                    gap "0.7rem"
+                    padding "0.55rem 1rem"
+                    backgroundColor "rgba(30,21,15,0.62)"
+                    backdropFilter "blur(4px)"
+                    borderRadius "999px"
+                    color "var(--color-text-white)"
+                    fontFamily "var(--font-body)"
+                    fontSize "0.72rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.14em"
+                }
+                span {
+                    style {
+                        width "0.4rem"
+                        height "0.4rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-amber)"
+                    }
+                }
+                span "${state.caption}"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,145 @@
+/- kdl-version 2
+
+bit-hours {
+    state {
+        heading Hours
+        status "Open today"
+        weekdays "7:00am – 3:00pm"
+        saturday "8:00am – 4:00pm"
+        sunday "8:00am – 2:00pm"
+        note "Kitchen closes 30 minutes before close."
+    }
+    style {
+        display block
+        backgroundColor "var(--color-espresso)"
+        color "var(--color-text-white)"
+        borderRadius "var(--radius)"
+        padding "clamp(1.75rem, 3vw, 2.5rem)"
+    }
+    div {
+        style {
+            display flex
+            alignItems center
+            justifyContent space-between
+            gap "1rem"
+            marginBottom "1.5rem"
+        }
+        h3 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.65rem"
+                fontWeight "700"
+                margin "0"
+                color "var(--color-text-white)"
+            }
+        }
+        span {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.5rem"
+                padding "0.35rem 0.85rem"
+                borderRadius "999px"
+                border "1px solid rgba(201,138,60,0.5)"
+                fontFamily "var(--font-body)"
+                fontSize "0.68rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                color "var(--color-amber)"
+            }
+            span {
+                style {
+                    width "0.45rem"
+                    height "0.45rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-amber)"
+                    boxShadow "0 0 0 3px rgba(201,138,60,0.22)"
+                }
+            }
+            span "${state.status}"
+        }
+    }
+    div {
+        style {
+            display flex
+            justifyContent space-between
+            alignItems baseline
+            padding "0.7rem 0"
+            borderBottom "1px solid rgba(246,236,219,0.14)"
+        }
+        span "Mon – Fri" {
+            style {
+                fontFamily "var(--font-body)"
+                fontSize "0.78rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.12em"
+                opacity "0.75"
+            }
+        }
+        span "${state.weekdays}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.15rem"
+                color "var(--color-text-white)"
+            }
+        }
+    }
+    div {
+        style {
+            display flex
+            justifyContent space-between
+            alignItems baseline
+            padding "0.7rem 0"
+            borderBottom "1px solid rgba(246,236,219,0.14)"
+        }
+        span Saturday {
+            style {
+                fontFamily "var(--font-body)"
+                fontSize "0.78rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.12em"
+                opacity "0.75"
+            }
+        }
+        span "${state.saturday}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.15rem"
+                color "var(--color-text-white)"
+            }
+        }
+    }
+    div {
+        style display=flex justifyContent=space-between alignItems=baseline padding="0.7rem 0"
+        span Sunday {
+            style {
+                fontFamily "var(--font-body)"
+                fontSize "0.78rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.12em"
+                opacity "0.75"
+            }
+        }
+        span "${state.sunday}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.15rem"
+                color "var(--color-text-white)"
+            }
+        }
+    }
+    p "${state.note}" {
+        style {
+            display "${state.note ? 'block' : 'none'}"
+            margin "1.5rem 0 0"
+            fontFamily "var(--font-heading)"
+            fontStyle italic
+            fontSize "0.95rem"
+            opacity "0.6"
+        }
+    }
+}

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

@@ -0,0 +1,75 @@
+/- kdl-version 2
+
+bit-intro {
+    state {
+        image type=string format=image default=""
+        imageAlt ""
+        kicker ""
+        reverse #false
+    }
+    style display=block padding="clamp(3.5rem, 8vw, 6.5rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "5fr 6fr"
+            gap "clamp(2rem, 5vw, 4.5rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.25rem"
+        }
+        div {
+            style order="${state.reverse ? '2' : '1'}" position=relative
+            img src="${state.image}" alt="${state.imageAlt}" loading=lazy {
+                style {
+                    width "100%"
+                    height auto
+                    display block
+                    borderRadius "var(--radius)"
+                    boxShadow "0 24px 60px -30px rgba(30,21,15,0.55)"
+                }
+            }
+            span {
+                style {
+                    position absolute
+                    top "0.85rem"
+                    left "0.85rem"
+                    right "0.85rem"
+                    bottom "0.85rem"
+                    border "1px solid rgba(246,236,219,0.45)"
+                    borderRadius "var(--radius)"
+                    pointerEvents none
+                }
+            }
+        }
+        div {
+            style {
+                order "${state.reverse ? '1' : '2'}"
+                fontFamily "var(--font-body)"
+                fontSize "1.1rem"
+                lineHeight "1.85"
+                color "var(--color-text-muted)"
+                "& p" margin="0 0 1.15rem"
+                "& p:first-of-type::first-letter" {
+                    float left
+                    fontFamily "var(--font-heading)"
+                    fontSize "3.6rem"
+                    lineHeight "0.8"
+                    fontWeight "700"
+                    color "var(--color-primary)"
+                    margin "0.35rem 0.6rem 0 0"
+                }
+                "& h3" {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(1.6rem, 3vw, 2.25rem)"
+                    fontWeight "700"
+                    lineHeight "1.15"
+                    letterSpacing "-0.01em"
+                    color "var(--color-text-primary)"
+                    margin "0 0 1.25rem"
+                }
+            }
+            slot
+        }
+    }
+}

package/sites/restaurant/components/bit-menu-group.jxn

@@ -0,0 +1,51 @@
+/- kdl-version 2
+
+bit-menu-group {
+    state heading="" note=""
+    style display=block marginBottom="2.75rem" breakInside=avoid
+    div {
+        style display=flex alignItems=baseline gap="1rem" marginBottom="0.4rem"
+        span {
+            style {
+                width "0.5rem"
+                height "0.5rem"
+                flex "0 0 auto"
+                transform "rotate(45deg) translateY(-0.15rem)"
+                backgroundColor "var(--color-primary)"
+            }
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(1.5rem, 2.6vw, 1.9rem)"
+                fontWeight "700"
+                letterSpacing "-0.01em"
+                margin "0"
+                color "var(--color-text-primary)"
+                whiteSpace nowrap
+            }
+        }
+        span {
+            style {
+                flex "1 1 auto"
+                borderBottom "1px solid var(--color-border-strong)"
+                transform "translateY(-0.4em)"
+            }
+        }
+    }
+    p "${state.note}" {
+        style {
+            display "${state.note ? 'block' : 'none'}"
+            margin "0 0 1rem"
+            paddingLeft "1.5rem"
+            fontFamily "var(--font-heading)"
+            fontStyle italic
+            fontSize "1rem"
+            color "var(--color-text-muted)"
+        }
+    }
+    div {
+        style marginTop="0.5rem"
+        slot
+    }
+}