@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -0,0 +1,133 @@
+/- kdl-version 2
+
+fs-modality {
+    state {
+        title ""
+        text ""
+        tag ""
+        color "#ff2e63"
+        href "/classes/"
+        image type=string format=image default=""
+        imageAlt ""
+    }
+    style {
+        display flex
+        flexDirection column
+        height "100%"
+        borderRadius "var(--radius)"
+        overflow hidden
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        boxShadow "0 10px 30px -18px rgba(26,15,24,0.3)"
+        transition "transform 0.18s, box-shadow 0.18s"
+        :hover transform="translateY(-4px)" boxShadow="0 24px 48px -22px rgba(26,15,24,0.42)"
+    }
+    a href="${state.href}" {
+        style {
+            display flex
+            flexDirection column
+            height "100%"
+            textDecoration none
+            color "var(--color-text-primary)"
+        }
+        div {
+            style {
+                position relative
+                aspectRatio "5 / 4"
+                overflow hidden
+                backgroundColor "var(--duo-shadow)"
+            }
+            img src="${state.image}" alt="${state.imageAlt}" width="800" height="640" loading=lazy {
+                style {
+                    position absolute
+                    inset "0"
+                    width "100%"
+                    height "100%"
+                    objectFit cover
+                    filter "grayscale(100%) contrast(1.05) brightness(1.14)"
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    inset "0"
+                    backgroundColor "var(--duo-shadow)"
+                    mixBlendMode lighten
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    inset "0"
+                    backgroundColor "${state.color}"
+                    mixBlendMode multiply
+                    opacity "0.82"
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    inset "0"
+                    background "linear-gradient(180deg, rgba(20,6,16,0.05) 40%, rgba(20,6,16,0.6) 100%)"
+                }
+            }
+            span "${state.tag}" {
+                style {
+                    position absolute
+                    top "1rem"
+                    left "1rem"
+                    padding "0.35rem 0.85rem"
+                    borderRadius "999px"
+                    backgroundColor "rgba(255,255,255,0.92)"
+                    color "var(--color-ink)"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.7rem"
+                    fontWeight "800"
+                    textTransform uppercase
+                    letterSpacing "0.08em"
+                }
+            }
+            h3 "${state.title}" {
+                style {
+                    position absolute
+                    bottom "0.9rem"
+                    left "1.15rem"
+                    right "1.15rem"
+                    margin "0"
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(1.7rem, 3vw, 2.2rem)"
+                    fontWeight "400"
+                    lineHeight "0.95"
+                    textTransform uppercase
+                    color "#ffffff"
+                    textShadow "0 4px 18px rgba(20,6,16,0.5)"
+                }
+            }
+        }
+        div {
+            style flex="1" display=flex flexDirection=column padding="1.4rem 1.5rem 1.6rem"
+            p "${state.text}" {
+                style {
+                    margin "0 0 1.1rem"
+                    color "var(--color-text-muted)"
+                    fontSize "0.98rem"
+                    lineHeight "1.6"
+                }
+            }
+            span "Explore classes →" {
+                style {
+                    marginTop auto
+                    display inline-flex
+                    alignItems center
+                    gap "0.4rem"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.8rem"
+                    fontWeight "800"
+                    textTransform uppercase
+                    letterSpacing "0.06em"
+                    color "${state.color}"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,95 @@
+/- kdl-version 2
+
+fs-nav {
+    state brand=EMBER
+    style {
+        display block
+        position sticky
+        top "0"
+        zIndex "50"
+        backgroundColor "rgba(255,255,255,0.82)"
+        backdropFilter "blur(12px)"
+        borderBottom "1px solid var(--color-border)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "0.85rem 1.5rem"
+            display flex
+            alignItems center
+            justifyContent space-between
+            gap "1.5rem"
+        }
+        a href="/" {
+            style display=inline-flex alignItems=center gap="0.6rem" textDecoration=none
+            span {
+                style {
+                    width "1.6rem"
+                    height "1.6rem"
+                    borderRadius "50%"
+                    background "var(--grad)"
+                    boxShadow "0 0 0 4px rgba(255,46,99,0.14)"
+                    flexShrink "0"
+                }
+            }
+            span "${state.brand}" {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "1.5rem"
+                    letterSpacing "0.02em"
+                    color "var(--color-text-primary)"
+                    lineHeight "1"
+                }
+            }
+        }
+        nav {
+            style display=flex alignItems=center gap="1.9rem" {
+                @--sm gap="1rem"
+            }
+            a href="/classes/" Schedule {
+                style {
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.82rem"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/pricing/" Pricing {
+                style {
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.82rem"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    @--sm display=none
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/contact/" "Book a Class" {
+                style {
+                    display inline-block
+                    background "var(--grad-hot)"
+                    color "var(--color-text-white)"
+                    padding "0.6rem 1.4rem"
+                    borderRadius "999px"
+                    textDecoration none
+                    fontWeight "700"
+                    fontSize "0.82rem"
+                    textTransform uppercase
+                    letterSpacing "0.08em"
+                    boxShadow "0 8px 22px -8px rgba(255,46,99,0.6)"
+                    transition "transform 0.15s, box-shadow 0.15s"
+                    :hover {
+                        transform "translateY(-2px)"
+                        boxShadow "0 14px 30px -8px rgba(255,46,99,0.7)"
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,190 @@
+/- kdl-version 2
+
+fs-pricing-card {
+    state {
+        tier ""
+        price ""
+        per ""
+        description ""
+        badge ""
+        featured #false
+        cta "Get started"
+        ctaHref "/contact/"
+        perk1 ""
+        perk2 ""
+        perk3 ""
+        perk4 ""
+        perk5 ""
+    }
+    style {
+        display flex
+        flexDirection column
+        height "100%"
+        position relative
+        padding "2.2rem"
+        borderRadius "var(--radius)"
+        backgroundColor "${state.featured ? 'var(--color-ink)' : 'var(--color-bg-white)'}"
+        border "${state.featured ? '1px solid transparent' : '1px solid var(--color-border)'}"
+        color "${state.featured ? '#ffffff' : 'var(--color-text-primary)'}"
+        boxShadow "${state.featured ? '0 30px 60px -24px rgba(255,46,99,0.5)' : '0 10px 30px -20px rgba(26,15,24,0.25)'}"
+        transform "${state.featured ? 'translateY(-0.5rem)' : 'none'}"
+        @--lg transform=none
+    }
+    span "${state.badge}" {
+        style {
+            display "${state.badge ? 'inline-block' : 'none'}"
+            position absolute
+            top "-0.85rem"
+            left "2.2rem"
+            background "var(--grad-hot)"
+            color "#ffffff"
+            fontFamily "var(--font-heading)"
+            fontSize "0.7rem"
+            fontWeight "800"
+            textTransform uppercase
+            letterSpacing "0.08em"
+            padding "0.4rem 0.95rem"
+            borderRadius "999px"
+            boxShadow "0 10px 24px -10px rgba(255,46,99,0.7)"
+        }
+    }
+    h3 "${state.tier}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "0.9rem"
+            fontWeight "800"
+            textTransform uppercase
+            letterSpacing "0.1em"
+            margin "0 0 1rem"
+            color "${state.featured ? 'rgba(255,255,255,0.7)' : 'var(--color-text-muted)'}"
+        }
+    }
+    div {
+        style display=flex alignItems=baseline gap="0.4rem" margin="0 0 0.5rem"
+        span "${state.price}" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "3.4rem"
+                fontWeight "400"
+                lineHeight "0.9"
+                background "var(--grad-hot)"
+                backgroundClip text
+                webkitBackgroundClip text
+                webkitTextFillColor transparent
+                color "var(--color-primary)"
+            }
+        }
+        span "${state.per}" {
+            style {
+                display "${state.per ? 'inline' : 'none'}"
+                color "${state.featured ? 'rgba(255,255,255,0.6)' : 'var(--color-text-muted)'}"
+                fontSize "0.95rem"
+                fontWeight "600"
+            }
+        }
+    }
+    p "${state.description}" {
+        style {
+            display "${state.description ? 'block' : 'none'}"
+            margin "0 0 1.6rem"
+            color "${state.featured ? 'rgba(255,255,255,0.72)' : 'var(--color-text-muted)'}"
+            fontSize "0.95rem"
+            lineHeight "1.6"
+        }
+    }
+    ul {
+        style {
+            listStyle none
+            margin "0 0 1.9rem"
+            padding "0"
+            display flex
+            flexDirection column
+            gap "0.7rem"
+        }
+        li {
+            style {
+                display "${state.perk1 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                fontWeight "500"
+            }
+            span ✓ {
+                style color="var(--color-ember)" fontWeight="800" flexShrink="0"
+            }
+            span "${state.perk1}"
+        }
+        li {
+            style {
+                display "${state.perk2 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                fontWeight "500"
+            }
+            span ✓ {
+                style color="var(--color-ember)" fontWeight="800" flexShrink="0"
+            }
+            span "${state.perk2}"
+        }
+        li {
+            style {
+                display "${state.perk3 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                fontWeight "500"
+            }
+            span ✓ {
+                style color="var(--color-ember)" fontWeight="800" flexShrink="0"
+            }
+            span "${state.perk3}"
+        }
+        li {
+            style {
+                display "${state.perk4 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                fontWeight "500"
+            }
+            span ✓ {
+                style color="var(--color-ember)" fontWeight="800" flexShrink="0"
+            }
+            span "${state.perk4}"
+        }
+        li {
+            style {
+                display "${state.perk5 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                fontWeight "500"
+            }
+            span ✓ {
+                style color="var(--color-ember)" fontWeight="800" flexShrink="0"
+            }
+            span "${state.perk5}"
+        }
+    }
+    a href="${state.ctaHref}" "${state.cta}" {
+        style {
+            marginTop auto
+            display block
+            textAlign center
+            background "${state.featured ? '#ffffff' : 'var(--grad-hot)'}"
+            color "${state.featured ? 'var(--color-ink)' : '#ffffff'}"
+            padding "0.9rem 1.5rem"
+            borderRadius "999px"
+            fontFamily "var(--font-heading)"
+            fontSize "0.86rem"
+            fontWeight "800"
+            textTransform uppercase
+            letterSpacing "0.06em"
+            textDecoration none
+            boxShadow "${state.featured ? 'none' : '0 12px 28px -12px rgba(255,46,99,0.55)'}"
+            transition "transform 0.15s, box-shadow 0.15s"
+            :hover transform="translateY(-2px)" boxShadow="0 16px 34px -12px rgba(255,46,99,0.6)"
+        }
+    }
+}