@jxsuite/starters 3.4.0 → 3.6.0

package/sites/fitness-studio/components/fs-band.jxn

@@ -0,0 +1,119 @@
+/- kdl-version 2
+
+fs-band {
+    state {
+        kicker ""
+        heading ""
+        text ""
+        cta ""
+        ctaHref "/contact/"
+        image type=string format=image default=""
+    }
+    style {
+        display flex
+        alignItems center
+        justifyContent center
+        position relative
+        overflow hidden
+        minHeight "clamp(360px, 58vh, 620px)"
+        padding "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+        textAlign center
+        color "#ffffff"
+        backgroundColor "var(--duo-shadow)"
+    }
+    div {
+        style position=absolute inset="0" zIndex="0"
+        img src="${state.image}" alt="" width="1920" height="1080" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                objectPosition "center 35%"
+                filter "grayscale(100%) contrast(1.12)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                backgroundColor "var(--duo-shadow)"
+                mixBlendMode lighten
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(120deg, #d6157a 0%, #ff2e63 52%, #ff8c42 100%)"
+                mixBlendMode multiply
+                opacity "0.9"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "radial-gradient(ellipse 70% 70% at 50% 50%, rgba(20,6,16,0.15), rgba(20,6,16,0.55))"
+            }
+        }
+    }
+    div {
+        style position=relative zIndex="5" maxWidth="var(--max-width-narrow)"
+        p "${state.kicker}" {
+            style {
+                display "${state.kicker ? 'block' : 'none'}"
+                margin "0 0 1.1rem"
+                fontFamily "var(--font-heading)"
+                textTransform uppercase
+                letterSpacing "0.22em"
+                fontSize "0.8rem"
+                fontWeight "700"
+                color "rgba(255,255,255,0.85)"
+            }
+        }
+        p "${state.heading}" {
+            style {
+                margin "0"
+                fontFamily "var(--font-display)"
+                fontSize "clamp(2.4rem, 7vw, 5rem)"
+                fontWeight "400"
+                lineHeight "0.95"
+                letterSpacing "0.01em"
+                textTransform uppercase
+                textShadow "0 14px 40px rgba(20,6,16,0.4)"
+            }
+        }
+        p "${state.text}" {
+            style {
+                display "${state.text ? 'block' : 'none'}"
+                margin "1.4rem auto 0"
+                maxWidth "44ch"
+                fontSize "1.1rem"
+                fontWeight "500"
+                lineHeight "1.65"
+                color "rgba(255,255,255,0.92)"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta}" {
+            style {
+                display "${state.cta ? 'inline-block' : 'none'}"
+                marginTop "2rem"
+                backgroundColor "#ffffff"
+                color "var(--color-ink)"
+                padding "1rem 2.3rem"
+                borderRadius "999px"
+                fontFamily "var(--font-heading)"
+                fontSize "0.9rem"
+                fontWeight "800"
+                textTransform uppercase
+                letterSpacing "0.06em"
+                textDecoration none
+                boxShadow "0 16px 40px -14px rgba(0,0,0,0.5)"
+                transition "transform 0.15s, box-shadow 0.15s"
+                :hover transform="translateY(-3px)" boxShadow="0 22px 48px -14px rgba(0,0,0,0.55)"
+            }
+        }
+    }
+}

package/sites/fitness-studio/components/fs-booking.jxn

@@ -0,0 +1,92 @@
+/- kdl-version 2
+
+fs-booking {
+    state heading="Reserve your spot"
+    style {
+        display block
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        padding "clamp(1.6rem, 4vw, 2.4rem)"
+        boxShadow "0 18px 44px -30px rgba(26,15,24,0.4)"
+        "& input" {
+            width "100%"
+            padding "0.85rem 1rem"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius-sm)"
+            fontSize "1rem"
+            fontFamily "var(--font-body)"
+            backgroundColor "var(--color-bg-blush)"
+            color "var(--color-text-primary)"
+            boxSizing border-box
+            transition "border-color 0.15s, box-shadow 0.15s"
+        }
+        "& textarea" {
+            width "100%"
+            padding "0.85rem 1rem"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius-sm)"
+            fontSize "1rem"
+            fontFamily "var(--font-body)"
+            backgroundColor "var(--color-bg-blush)"
+            color "var(--color-text-primary)"
+            boxSizing border-box
+            resize vertical
+            transition "border-color 0.15s, box-shadow 0.15s"
+        }
+        "& input:focus" {
+            outline none
+            borderColor "var(--color-primary)"
+            boxShadow "0 0 0 3px rgba(255,46,99,0.14)"
+        }
+        "& textarea:focus" {
+            outline none
+            borderColor "var(--color-primary)"
+            boxShadow "0 0 0 3px rgba(255,46,99,0.14)"
+        }
+    }
+    form action="#" method=post {
+        style display=grid gap="0.9rem"
+        h3 "${state.heading}" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "clamp(1.7rem, 3.5vw, 2.2rem)"
+                fontWeight "400"
+                textTransform uppercase
+                letterSpacing "0.01em"
+                margin "0 0 0.4rem"
+            }
+        }
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name"
+        input type=email name=email placeholder="Email address" required="true" aria-label="Email address"
+        input type=text name=class placeholder="Which class? e.g. Vinyasa Flow" aria-label="Class you're interested in"
+        input type=date name=date aria-label="Preferred date"
+        textarea name=message rows="4" placeholder="New to movement? Any injuries or goals we should know about?" aria-label=Message
+        button type=submit "Request a spot →" {
+            style {
+                justifySelf start
+                marginTop "0.25rem"
+                background "var(--grad-hot)"
+                color "#ffffff"
+                padding "0.95rem 2.1rem"
+                border none
+                borderRadius "999px"
+                fontFamily "var(--font-heading)"
+                fontSize "0.88rem"
+                fontWeight "800"
+                textTransform uppercase
+                letterSpacing "0.06em"
+                cursor pointer
+                boxShadow "0 14px 32px -14px rgba(255,46,99,0.6)"
+                transition "transform 0.15s, box-shadow 0.15s"
+                :hover {
+                    transform "translateY(-2px)"
+                    boxShadow "0 20px 40px -14px rgba(255,46,99,0.7)"
+                }
+            }
+        }
+        p "This is a demo form. Wire it to your booking provider or email in pages/contact.md." {
+            style fontSize="0.82rem" color="var(--color-text-muted)" margin="0.25rem 0 0"
+        }
+    }
+}

package/sites/fitness-studio/components/fs-class-card.jxn

@@ -0,0 +1,103 @@
+/- kdl-version 2
+
+fs-class-card {
+    state name="" level="" time="" instructor="" focus=""
+    style {
+        display flex
+        flexDirection column
+        height "100%"
+        position relative
+        overflow hidden
+        padding "1.7rem 1.7rem 1.5rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        boxShadow "0 10px 30px -20px rgba(26,15,24,0.28)"
+        transition "transform 0.15s, box-shadow 0.15s"
+        :hover transform="translateY(-4px)" boxShadow="0 22px 44px -22px rgba(26,15,24,0.4)"
+    }
+    div {
+        style position=absolute top="0" left="0" bottom="0" width="5px" background="var(--grad-hot)"
+    }
+    div {
+        style {
+            display flex
+            justifyContent space-between
+            alignItems center
+            gap "0.75rem"
+            marginBottom "0.6rem"
+        }
+        div {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.45rem"
+                fontFamily "var(--font-heading)"
+                fontWeight "800"
+                fontSize "0.86rem"
+                color "var(--color-primary)"
+                textTransform uppercase
+                letterSpacing "0.03em"
+            }
+            span 🕑
+            span "${state.time}"
+        }
+        span "${state.level}" {
+            style {
+                display "${state.level ? 'inline-block' : 'none'}"
+                flexShrink "0"
+                backgroundColor "var(--color-bg-peach)"
+                color "var(--color-ember)"
+                fontSize "0.68rem"
+                fontWeight "800"
+                textTransform uppercase
+                letterSpacing "0.06em"
+                padding "0.3rem 0.7rem"
+                borderRadius "999px"
+                whiteSpace nowrap
+            }
+        }
+    }
+    h3 "${state.name}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.7rem"
+            fontWeight "400"
+            lineHeight "1"
+            textTransform uppercase
+            letterSpacing "0.01em"
+            margin "0 0 0.75rem"
+        }
+    }
+    p "${state.focus}" {
+        style {
+            display "${state.focus ? 'block' : 'none'}"
+            margin "0 0 1.1rem"
+            color "var(--color-text-muted)"
+            fontSize "0.95rem"
+            lineHeight "1.6"
+        }
+    }
+    div {
+        style {
+            marginTop auto
+            paddingTop "1rem"
+            borderTop "1px solid var(--color-border)"
+            display flex
+            alignItems center
+            gap "0.6rem"
+        }
+        span {
+            style {
+                width "1.7rem"
+                height "1.7rem"
+                borderRadius "50%"
+                background "var(--grad)"
+                flexShrink "0"
+            }
+        }
+        span "with ${state.instructor}" {
+            style fontSize="0.9rem" fontWeight="600" color="var(--color-text-primary)"
+        }
+    }
+}

package/sites/fitness-studio/components/fs-class-grid.jxn

@@ -0,0 +1,23 @@
+/- kdl-version 2
+
+fs-class-grid {
+    state heading=""
+    style display=block maxWidth="var(--max-width)" margin="0 auto"
+    h3 "${state.heading}" {
+        style {
+            display "${state.heading ? 'block' : 'none'}"
+            fontFamily "var(--font-heading)"
+            fontSize "1.4rem"
+            fontWeight "700"
+            color "var(--color-primary)"
+            margin "0 0 1.25rem"
+        }
+    }
+    div {
+        style display=grid gridTemplateColumns="repeat(3, 1fr)" gap="1.25rem" {
+            @--lg gridTemplateColumns="repeat(2, 1fr)"
+            @--sm gridTemplateColumns="1fr"
+        }
+        slot
+    }
+}

package/sites/fitness-studio/components/fs-cta.jxn

@@ -0,0 +1,81 @@
+/- kdl-version 2
+
+fs-cta {
+    state eyebrow="" heading="" text="" cta="Book a Class" ctaHref="/contact/"
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-ink)"
+        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 50% 60% at 12% 8%, rgba(255,46,99,0.4), transparent 60%), radial-gradient(ellipse 50% 60% at 90% 100%, rgba(255,140,66,0.32), transparent 60%)"
+            pointerEvents none
+        }
+    }
+    div {
+        style position=relative zIndex="2" maxWidth="var(--max-width-narrow)" margin="0 auto"
+        p "${state.eyebrow}" {
+            style {
+                display "${state.eyebrow ? 'block' : 'none'}"
+                margin "0 0 1rem"
+                fontFamily "var(--font-heading)"
+                textTransform uppercase
+                letterSpacing "0.22em"
+                fontSize "0.8rem"
+                fontWeight "700"
+                color "var(--color-ember)"
+            }
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "clamp(2.4rem, 6.5vw, 4.6rem)"
+                fontWeight "400"
+                lineHeight "0.95"
+                letterSpacing "0.01em"
+                textTransform uppercase
+                margin "0 0 1.1rem"
+                color "#ffffff"
+            }
+        }
+        p "${state.text}" {
+            style {
+                display "${state.text ? 'block' : 'none'}"
+                fontSize "1.12rem"
+                fontWeight "500"
+                lineHeight "1.65"
+                color "rgba(255,255,255,0.8)"
+                margin "0 auto 2rem"
+                maxWidth "48ch"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta}" {
+            style {
+                display inline-block
+                background "var(--grad-hot)"
+                color "#ffffff"
+                padding "1.05rem 2.6rem"
+                borderRadius "999px"
+                fontFamily "var(--font-heading)"
+                fontSize "0.92rem"
+                fontWeight "800"
+                textTransform uppercase
+                letterSpacing "0.06em"
+                textDecoration none
+                boxShadow "0 18px 44px -14px rgba(255,46,99,0.65)"
+                transition "transform 0.15s, box-shadow 0.15s"
+                :hover {
+                    transform "translateY(-3px)"
+                    boxShadow "0 24px 52px -14px rgba(255,46,99,0.75)"
+                }
+            }
+        }
+    }
+}

package/sites/fitness-studio/components/fs-feature.jxn

@@ -0,0 +1,40 @@
+/- kdl-version 2
+
+fs-feature {
+    state icon="" title="" text=""
+    style {
+        display block
+        height "100%"
+        padding "1.9rem"
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        boxShadow "0 10px 30px -22px rgba(26,15,24,0.25)"
+    }
+    div "${state.icon}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "3rem"
+            height "3rem"
+            borderRadius "0.85rem"
+            fontSize "1.5rem"
+            lineHeight "1"
+            marginBottom "1.1rem"
+            background "var(--color-bg-peach)"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.2rem"
+            fontWeight "800"
+            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/fitness-studio/components/fs-footer.jxn

@@ -0,0 +1,116 @@
+/- kdl-version 2
+
+fs-footer {
+    state {
+        brand EMBER
+        tagline "Yoga, pilates, HIIT and strength for every body — small classes, big momentum."
+        address "412 Willow Avenue, Bridgewater"
+        phone "(555) 240-7788"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-ink)"
+        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"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            div {
+                style display=flex alignItems=center gap="0.6rem" marginBottom="1rem"
+                span {
+                    style width="1.5rem" height="1.5rem" borderRadius="50%" background="var(--grad)"
+                }
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "1.7rem"
+                        letterSpacing "0.02em"
+                        color "#ffffff"
+                        lineHeight "1"
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style margin="0" opacity="0.72" maxWidth="34ch" lineHeight="1.7"
+            }
+        }
+        div {
+            div Visit {
+                style {
+                    fontFamily "var(--font-heading)"
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "var(--color-ember)"
+                    marginBottom "0.9rem"
+                }
+            }
+            p "${state.address}" {
+                style margin="0 0 0.35rem" opacity="0.85"
+            }
+            p "${state.phone}" {
+                style margin="0" opacity="0.85"
+            }
+        }
+        div {
+            div Explore {
+                style {
+                    fontFamily "var(--font-heading)"
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "var(--color-ember)"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href="/classes/" Schedule {
+                style {
+                    display block
+                    color "#ffffff"
+                    opacity "0.85"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                    :hover opacity="1" color="var(--color-ember)"
+                }
+            }
+            a href="/pricing/" Pricing {
+                style {
+                    display block
+                    color "#ffffff"
+                    opacity "0.85"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                    :hover opacity="1" color="var(--color-ember)"
+                }
+            }
+            a href="/contact/" "Book a Class" {
+                style display=block color="#ffffff" opacity="0.85" textDecoration=none {
+                    :hover opacity="1" color="var(--color-ember)"
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "2.75rem auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid rgba(255,255,255,0.14)"
+            fontSize "0.85rem"
+            opacity "0.55"
+        }
+        p "© Ember Yoga & Fitness. Built with Jx." {
+            style margin="0"
+        }
+    }
+}