@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -0,0 +1,290 @@
+/- kdl-version 2
+
+fs-hero {
+    state {
+        eyebrow ""
+        heading ""
+        headingAccent ""
+        subheading ""
+        cta "Book a Class"
+        ctaHref "/contact/"
+        cta2 ""
+        cta2Href "/classes/"
+        chip1 ""
+        chip2 ""
+        bg type=string format=image default=""
+    }
+    style {
+        display flex
+        flexDirection column
+        position relative
+        overflow hidden
+        minHeight "clamp(560px, 92vh, 940px)"
+        color "var(--color-text-white)"
+        backgroundColor "var(--duo-shadow)"
+    }
+    div {
+        style position=absolute inset="0" zIndex="0"
+        img src="${state.bg}" alt="A movement class in session at Ember studio" width="1920" height="1280" loading=eager {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                objectPosition "center 30%"
+                filter "grayscale(100%) contrast(1.12) brightness(0.96)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                backgroundColor "var(--duo-shadow)"
+                mixBlendMode lighten
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(115deg, #ff2e63 0%, #ff6a3d 55%, #ffb03a 100%)"
+                mixBlendMode multiply
+                opacity "0.92"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(96deg, rgba(20,6,16,0.9) 0%, rgba(20,6,16,0.5) 46%, rgba(20,6,16,0.12) 78%, transparent 100%)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(180deg, rgba(20,6,16,0.35) 0%, transparent 30%, rgba(20,6,16,0.55) 100%)"
+            }
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "5"
+            flex "1"
+            display flex
+            alignItems center
+            width "100%"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(2rem, 5vw, 3rem)"
+        }
+        div {
+            style maxWidth="760px" width="100%"
+            div {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.6rem"
+                    marginBottom "1.6rem"
+                    fontSize "0.78rem"
+                    fontWeight "700"
+                    letterSpacing "0.16em"
+                    textTransform uppercase
+                    color "#ffe0d3"
+                }
+                span {
+                    style {
+                        width "0.55rem"
+                        height "0.55rem"
+                        borderRadius "50%"
+                        backgroundColor "#ffb03a"
+                        boxShadow "0 0 0 5px rgba(255,176,58,0.28)"
+                    }
+                }
+                span "${state.eyebrow}"
+            }
+            h1 {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(3.4rem, 11vw, 8rem)"
+                    fontWeight "400"
+                    lineHeight "0.9"
+                    letterSpacing "0.005em"
+                    textTransform uppercase
+                    margin "0 0 1.4rem"
+                    textShadow "0 18px 50px rgba(20,6,16,0.45)"
+                }
+                span "${state.heading}" {
+                    style display=block color="#ffffff"
+                }
+                span "${state.headingAccent}" {
+                    style {
+                        display block
+                        background "linear-gradient(100deg, #ffe7dc 0%, #ffb03a 60%, #ff8c42 100%)"
+                        backgroundClip text
+                        webkitBackgroundClip text
+                        webkitTextFillColor transparent
+                        color "#ffb03a"
+                    }
+                }
+            }
+            p "${state.subheading}" {
+                style {
+                    fontSize "clamp(1.05rem, 1.9vw, 1.3rem)"
+                    lineHeight "1.6"
+                    fontWeight "500"
+                    margin "0 0 2rem"
+                    maxWidth "46ch"
+                    color "rgba(255,255,255,0.92)"
+                }
+            }
+            div {
+                style display=flex gap="0.8rem" flexWrap=wrap alignItems=center
+                a href="${state.ctaHref}" "${state.cta}" {
+                    style {
+                        display inline-block
+                        backgroundColor "#ffffff"
+                        color "var(--color-ink)"
+                        padding "1rem 2.3rem"
+                        borderRadius "999px"
+                        fontFamily "var(--font-heading)"
+                        fontSize "0.92rem"
+                        fontWeight "800"
+                        textTransform uppercase
+                        letterSpacing "0.06em"
+                        textDecoration none
+                        boxShadow "0 16px 40px -12px rgba(0,0,0,0.5)"
+                        transition "transform 0.15s, box-shadow 0.15s"
+                        :hover {
+                            transform "translateY(-3px)"
+                            boxShadow "0 22px 48px -12px rgba(0,0,0,0.55)"
+                        }
+                    }
+                }
+                a href="${state.cta2Href}" "${state.cta2}" {
+                    style {
+                        display "${state.cta2 ? 'inline-flex' : 'none'}"
+                        alignItems center
+                        gap "0.5rem"
+                        border "2px solid rgba(255,255,255,0.55)"
+                        color "#ffffff"
+                        padding "0.9rem 1.9rem"
+                        borderRadius "999px"
+                        fontFamily "var(--font-heading)"
+                        fontSize "0.92rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.06em"
+                        textDecoration none
+                        transition "background-color 0.15s, border-color 0.15s"
+                        :hover backgroundColor="rgba(255,255,255,0.14)" borderColor="#ffffff"
+                    }
+                }
+            }
+            div {
+                style {
+                    display "${state.chip1 ? 'flex' : 'none'}"
+                    gap "1.4rem"
+                    flexWrap wrap
+                    marginTop "2.4rem"
+                }
+                div {
+                    style display=flex alignItems=center gap="0.55rem"
+                    span {
+                        style {
+                            width "0.4rem"
+                            height "0.4rem"
+                            borderRadius "50%"
+                            backgroundColor "#ffb03a"
+                        }
+                    }
+                    span "${state.chip1}" {
+                        style {
+                            fontSize "0.86rem"
+                            fontWeight "600"
+                            color "rgba(255,255,255,0.9)"
+                            letterSpacing "0.02em"
+                        }
+                    }
+                }
+                div {
+                    style display="${state.chip2 ? 'flex' : 'none'}" alignItems=center gap="0.55rem"
+                    span {
+                        style {
+                            width "0.4rem"
+                            height "0.4rem"
+                            borderRadius "50%"
+                            backgroundColor "#ffb03a"
+                        }
+                    }
+                    span "${state.chip2}" {
+                        style {
+                            fontSize "0.86rem"
+                            fontWeight "600"
+                            color "rgba(255,255,255,0.9)"
+                            letterSpacing "0.02em"
+                        }
+                    }
+                }
+            }
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "6"
+            width "116%"
+            marginLeft "-8%"
+            transform "rotate(-1.6deg)"
+            background "var(--grad-hot)"
+            padding "0.95rem 0"
+            marginTop "1.5rem"
+            marginBottom "0"
+            overflow hidden
+            boxShadow "0 16px 44px -18px rgba(255,46,99,0.7)"
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                justifyContent center
+                gap "1.5rem"
+                whiteSpace nowrap
+                fontFamily "var(--font-display)"
+                fontSize "clamp(0.95rem, 1.9vw, 1.25rem)"
+                letterSpacing "0.12em"
+                textTransform uppercase
+                color "#ffffff"
+            }
+            span Vinyasa
+            span ✦ {
+                style color="rgba(255,255,255,0.65)"
+            }
+            span "Power Yoga"
+            span ✦ {
+                style color="rgba(255,255,255,0.65)"
+            }
+            span Pilates
+            span ✦ {
+                style color="rgba(255,255,255,0.65)"
+            }
+            span HIIT
+            span ✦ {
+                style color="rgba(255,255,255,0.65)"
+            }
+            span Strength
+            span ✦ {
+                style color="rgba(255,255,255,0.65)" {
+                    @--sm display=none
+                }
+            }
+            span Restorative {
+                style {
+                    @--sm display=none
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,78 @@
+/- kdl-version 2
+
+fs-hours {
+    state {
+        heading "Studio Hours"
+        weekdays "6:00am – 9:00pm"
+        saturday "7:00am – 2:00pm"
+        sunday "8:00am – 12:00pm"
+        note "Doors open 15 minutes before each class. Please arrive early to settle in."
+    }
+    style {
+        display block
+        backgroundColor "var(--color-ink)"
+        color "#ffffff"
+        borderRadius "var(--radius)"
+        padding "2.2rem"
+        overflow hidden
+    }
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.7rem"
+            fontWeight "400"
+            letterSpacing "0.01em"
+            textTransform uppercase
+            margin "0 0 1.35rem"
+            color "#ffffff"
+        }
+    }
+    div {
+        style {
+            display flex
+            justifyContent space-between
+            alignItems center
+            padding "0.7rem 0"
+            borderBottom "1px solid rgba(255,255,255,0.12)"
+        }
+        span "Mon – Fri" {
+            style fontWeight="600"
+        }
+        span "${state.weekdays}" {
+            style color="var(--color-ember)" fontWeight="700" fontFamily="var(--font-heading)"
+        }
+    }
+    div {
+        style {
+            display flex
+            justifyContent space-between
+            alignItems center
+            padding "0.7rem 0"
+            borderBottom "1px solid rgba(255,255,255,0.12)"
+        }
+        span Saturday {
+            style fontWeight="600"
+        }
+        span "${state.saturday}" {
+            style color="var(--color-ember)" fontWeight="700" fontFamily="var(--font-heading)"
+        }
+    }
+    div {
+        style display=flex justifyContent=space-between alignItems=center padding="0.7rem 0"
+        span Sunday {
+            style fontWeight="600"
+        }
+        span "${state.sunday}" {
+            style color="var(--color-ember)" fontWeight="700" fontFamily="var(--font-heading)"
+        }
+    }
+    p "${state.note}" {
+        style {
+            display "${state.note ? 'block' : 'none'}"
+            margin "1.35rem 0 0"
+            fontSize "0.85rem"
+            color "rgba(255,255,255,0.62)"
+            lineHeight "1.6"
+        }
+    }
+}

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

@@ -0,0 +1,104 @@
+/- kdl-version 2
+
+fs-instructor-card {
+    state {
+        name ""
+        specialty ""
+        bio ""
+        image type=string format=image default=""
+    }
+    style {
+        display flex
+        flexDirection column
+        height "100%"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        overflow hidden
+        boxShadow "0 12px 34px -22px rgba(26,15,24,0.35)"
+    }
+    div {
+        style {
+            position relative
+            aspectRatio "4 / 5"
+            overflow hidden
+            backgroundColor "var(--duo-shadow)"
+        }
+        img src="${state.image}" alt="Portrait of ${state.name}" width="800" height="1000" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                filter "grayscale(100%) contrast(1.02) brightness(1.2)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                backgroundColor "var(--duo-shadow)"
+                mixBlendMode lighten
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(150deg, #ff2e63 0%, #ff8c42 100%)"
+                mixBlendMode multiply
+                opacity "0.72"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(180deg, transparent 45%, rgba(20,6,16,0.72) 100%)"
+            }
+        }
+        div {
+            style position=absolute left="1.35rem" right="1.35rem" bottom="1.1rem"
+            div "${state.specialty}" {
+                style {
+                    display "${state.specialty ? 'inline-block' : 'none'}"
+                    marginBottom "0.5rem"
+                    padding "0.28rem 0.7rem"
+                    borderRadius "999px"
+                    backgroundColor "rgba(255,255,255,0.92)"
+                    color "var(--color-ink)"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.66rem"
+                    fontWeight "800"
+                    textTransform uppercase
+                    letterSpacing "0.06em"
+                }
+            }
+            h3 "${state.name}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-display)"
+                    fontSize "1.9rem"
+                    fontWeight "400"
+                    lineHeight "0.95"
+                    textTransform uppercase
+                    color "#ffffff"
+                    textShadow "0 4px 16px rgba(20,6,16,0.5)"
+                }
+            }
+        }
+    }
+    div {
+        style padding="1.4rem 1.5rem 1.6rem"
+        p "${state.bio}" {
+            style {
+                display "${state.bio ? 'block' : 'none'}"
+                margin "0"
+                color "var(--color-text-muted)"
+                fontSize "0.96rem"
+                lineHeight "1.65"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,231 @@
+/- kdl-version 2
+
+fs-intro {
+    state {
+        kicker ""
+        image type=string format=image default=""
+        imageAlt ""
+        badge ""
+        stat1 ""
+        stat1label ""
+        stat2 ""
+        stat2label ""
+        stat3 ""
+        stat3label ""
+    }
+    style {
+        display block
+        padding "clamp(3.5rem, 8vw, 6.5rem) 1.5rem"
+        backgroundColor "var(--color-bg-white)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "0.95fr 1.05fr"
+            gap "clamp(2rem, 5vw, 4.5rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.5rem"
+        }
+        div {
+            style position=relative
+            div {
+                style {
+                    position absolute
+                    top "-1.1rem"
+                    left "-1.1rem"
+                    right "1.6rem"
+                    bottom "1.6rem"
+                    borderRadius "var(--radius)"
+                    background "var(--grad)"
+                    transform "rotate(-2.5deg)"
+                    opacity "0.9"
+                    @--sm display=none
+                }
+            }
+            div {
+                style {
+                    position relative
+                    borderRadius "var(--radius)"
+                    overflow hidden
+                    aspectRatio "4 / 5"
+                    backgroundColor "var(--duo-shadow)"
+                    boxShadow "0 30px 60px -28px rgba(26,15,24,0.5)"
+                }
+                img src="${state.image}" alt="${state.imageAlt}" width="1200" height="1500" loading=lazy {
+                    style {
+                        position absolute
+                        inset "0"
+                        width "100%"
+                        height "100%"
+                        objectFit cover
+                        filter "grayscale(100%) contrast(1.08)"
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        inset "0"
+                        backgroundColor "var(--duo-shadow)"
+                        mixBlendMode lighten
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        inset "0"
+                        background "linear-gradient(150deg, #ff2e63 0%, #ff8c42 100%)"
+                        mixBlendMode multiply
+                        opacity "0.85"
+                    }
+                }
+            }
+            div {
+                style {
+                    display "${state.badge ? 'flex' : 'none'}"
+                    position absolute
+                    bottom "-1.1rem"
+                    right "-0.6rem"
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.7rem 1.15rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-ink)"
+                    color "#ffffff"
+                    fontFamily "var(--font-heading)"
+                    fontWeight "700"
+                    fontSize "0.82rem"
+                    boxShadow "0 16px 34px -12px rgba(0,0,0,0.5)"
+                }
+                span {
+                    style {
+                        width "0.5rem"
+                        height "0.5rem"
+                        borderRadius "50%"
+                        backgroundColor "#ffb03a"
+                    }
+                }
+                span "${state.badge}"
+            }
+        }
+        div {
+            div {
+                style {
+                    display "${state.kicker ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    gap "0.55rem"
+                    marginBottom "1.1rem"
+                }
+                span {
+                    style {
+                        width "1.6rem"
+                        height "3px"
+                        borderRadius "2px"
+                        background "var(--grad-hot)"
+                    }
+                }
+                span "${state.kicker}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        textTransform uppercase
+                        letterSpacing "0.16em"
+                        fontSize "0.78rem"
+                        fontWeight "700"
+                        color "var(--color-primary)"
+                    }
+                }
+            }
+            div {
+                style fontSize="1.12rem" lineHeight="1.8" color="var(--color-text-primary)"
+                slot
+            }
+            div {
+                style {
+                    display "${state.stat1 ? 'grid' : 'none'}"
+                    gridTemplateColumns "repeat(3, auto)"
+                    gap "clamp(1.25rem, 4vw, 2.5rem)"
+                    marginTop "2.25rem"
+                    paddingTop "1.75rem"
+                    borderTop "1px solid var(--color-border)"
+                    justifyContent start
+                    @--sm gridTemplateColumns="repeat(3, 1fr)" gap="1rem"
+                }
+                div {
+                    div "${state.stat1}" {
+                        style {
+                            fontFamily "var(--font-display)"
+                            fontSize "clamp(1.9rem, 4vw, 2.6rem)"
+                            lineHeight "1"
+                            background "var(--grad-hot)"
+                            backgroundClip text
+                            webkitBackgroundClip text
+                            webkitTextFillColor transparent
+                            color "var(--color-primary)"
+                        }
+                    }
+                    div "${state.stat1label}" {
+                        style {
+                            fontSize "0.8rem"
+                            fontWeight "600"
+                            color "var(--color-text-muted)"
+                            marginTop "0.35rem"
+                            textTransform uppercase
+                            letterSpacing "0.04em"
+                        }
+                    }
+                }
+                div {
+                    style display="${state.stat2 ? 'block' : 'none'}"
+                    div "${state.stat2}" {
+                        style {
+                            fontFamily "var(--font-display)"
+                            fontSize "clamp(1.9rem, 4vw, 2.6rem)"
+                            lineHeight "1"
+                            background "var(--grad-hot)"
+                            backgroundClip text
+                            webkitBackgroundClip text
+                            webkitTextFillColor transparent
+                            color "var(--color-primary)"
+                        }
+                    }
+                    div "${state.stat2label}" {
+                        style {
+                            fontSize "0.8rem"
+                            fontWeight "600"
+                            color "var(--color-text-muted)"
+                            marginTop "0.35rem"
+                            textTransform uppercase
+                            letterSpacing "0.04em"
+                        }
+                    }
+                }
+                div {
+                    style display="${state.stat3 ? 'block' : 'none'}"
+                    div "${state.stat3}" {
+                        style {
+                            fontFamily "var(--font-display)"
+                            fontSize "clamp(1.9rem, 4vw, 2.6rem)"
+                            lineHeight "1"
+                            background "var(--grad-hot)"
+                            backgroundClip text
+                            webkitBackgroundClip text
+                            webkitTextFillColor transparent
+                            color "var(--color-primary)"
+                        }
+                    }
+                    div "${state.stat3label}" {
+                        style {
+                            fontSize "0.8rem"
+                            fontWeight "600"
+                            color "var(--color-text-muted)"
+                            marginTop "0.35rem"
+                            textTransform uppercase
+                            letterSpacing "0.04em"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}