@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -0,0 +1,322 @@
+/- kdl-version 2
+
+fs-pricing-table {
+    state {
+        tier1 Drop-in
+        price1 "$22 / class"
+        tier2 "Monthly Unlimited"
+        price2 "$129 / month"
+        tier3 "Annual Unlimited"
+        price3 "$1,290 / year"
+    }
+    style {
+        display block
+        maxWidth "var(--max-width)"
+        margin "0 auto"
+        overflowX auto
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+    }
+    table {
+        style width="100%" minWidth="640px" borderCollapse=collapse fontSize="0.95rem"
+        thead {
+            tr {
+                th "What's included" {
+                    style {
+                        textAlign left
+                        padding "1.25rem 1.25rem 1rem"
+                        fontFamily "var(--font-heading)"
+                        fontSize "0.8rem"
+                        textTransform uppercase
+                        letterSpacing "0.08em"
+                        color "var(--color-text-muted)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                th "${state.tier1}" {
+                    style {
+                        textAlign center
+                        padding "1.25rem 1rem 1rem"
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.05rem"
+                        fontWeight "600"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                th "${state.tier2}" {
+                    style {
+                        textAlign center
+                        padding "1.25rem 1rem 1rem"
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.05rem"
+                        fontWeight "600"
+                        color "var(--color-primary)"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "2px solid var(--color-primary)"
+                    }
+                }
+                th "${state.tier3}" {
+                    style {
+                        textAlign center
+                        padding "1.25rem 1.25rem 1rem"
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.05rem"
+                        fontWeight "600"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+            tr {
+                td Price {
+                    style {
+                        padding "0.75rem 1.25rem"
+                        fontWeight "600"
+                        color "var(--color-text-muted)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td "${state.price1}" {
+                    style {
+                        textAlign center
+                        padding "0.75rem 1rem"
+                        fontWeight "600"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td "${state.price2}" {
+                    style {
+                        textAlign center
+                        padding "0.75rem 1rem"
+                        fontWeight "600"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td "${state.price3}" {
+                    style {
+                        textAlign center
+                        padding "0.75rem 1.25rem"
+                        fontWeight "600"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+        }
+        tbody {
+            tr {
+                td "Unlimited classes" {
+                    style padding="0.85rem 1.25rem" borderBottom="1px solid var(--color-border)"
+                }
+                td — {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-text-muted)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1.25rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+            tr {
+                td "All class types (yoga, pilates, HIIT, strength)" {
+                    style padding="0.85rem 1.25rem" borderBottom="1px solid var(--color-border)"
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1.25rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+            tr {
+                td "Mat & prop rental" {
+                    style padding="0.85rem 1.25rem" borderBottom="1px solid var(--color-border)"
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1.25rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+            tr {
+                td "Free mat storage" {
+                    style padding="0.85rem 1.25rem" borderBottom="1px solid var(--color-border)"
+                }
+                td — {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-text-muted)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1.25rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+            tr {
+                td "Workshop discount" {
+                    style padding="0.85rem 1.25rem" borderBottom="1px solid var(--color-border)"
+                }
+                td — {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-text-muted)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td "10%" {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        fontWeight "600"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td "20%" {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1.25rem"
+                        fontWeight "600"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+            tr {
+                td "Guest passes" {
+                    style padding="0.85rem 1.25rem" borderBottom="1px solid var(--color-border)"
+                }
+                td — {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-text-muted)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td — {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-text-muted)"
+                        backgroundColor "var(--color-bg-cream)"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+                td "4 / year" {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1.25rem"
+                        fontWeight "600"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                }
+            }
+            tr {
+                td "Priority booking" {
+                    style padding="0.85rem 1.25rem"
+                }
+                td — {
+                    style textAlign=center padding="0.85rem 1rem" color="var(--color-text-muted)"
+                }
+                td — {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1rem"
+                        color "var(--color-text-muted)"
+                        backgroundColor "var(--color-bg-cream)"
+                    }
+                }
+                td ✓ {
+                    style {
+                        textAlign center
+                        padding "0.85rem 1.25rem"
+                        color "var(--color-accent)"
+                        fontWeight "700"
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,59 @@
+/- kdl-version 2
+
+fs-review {
+    state quote="" author="" role=""
+    style {
+        display flex
+        flexDirection column
+        height "100%"
+        position relative
+        padding "2.2rem 2rem 1.8rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        boxShadow "0 12px 34px -24px rgba(26,15,24,0.3)"
+    }
+    div “ {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "3.2rem"
+            lineHeight "0.6"
+            height "1.3rem"
+            background "var(--grad-hot)"
+            backgroundClip text
+            webkitBackgroundClip text
+            webkitTextFillColor transparent
+            color "var(--color-primary)"
+        }
+    }
+    p "${state.quote}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.2rem"
+            fontWeight "600"
+            lineHeight "1.5"
+            margin "0 0 1.5rem"
+            color "var(--color-text-primary)"
+        }
+    }
+    div {
+        style marginTop=auto display=flex alignItems=center gap="0.75rem"
+        span {
+            style {
+                width "2.3rem"
+                height "2.3rem"
+                borderRadius "50%"
+                background "var(--grad)"
+                flexShrink "0"
+            }
+        }
+        div {
+            div "${state.author}" {
+                style fontWeight="700" fontSize="0.98rem" color="var(--color-text-primary)"
+            }
+            div "${state.role}" {
+                style fontSize="0.85rem" color="var(--color-text-muted)"
+            }
+        }
+    }
+}