@jxsuite/starters 0.34.0

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

@@ -0,0 +1,128 @@
+{
+  "tagName": "fs-hero",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "cta": "Book a Class",
+    "ctaHref": "/contact/",
+    "cta2": "",
+    "cta2Href": "/classes/",
+    "bg": { "type": "string", "format": "image", "default": "" }
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "minHeight": "82vh",
+    "color": "var(--color-text-white)",
+    "backgroundImage": "url('${state.bg}')",
+    "backgroundSize": "cover",
+    "backgroundPosition": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "inset": "0",
+        "background": "linear-gradient(180deg, rgba(24,16,32,0.30) 0%, rgba(24,16,32,0.74) 100%)"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "10",
+        "display": "flex",
+        "alignItems": "center",
+        "minHeight": "82vh",
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "4rem 1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "maxWidth": "660px" },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.18em",
+                "fontSize": "0.8rem",
+                "fontWeight": "600",
+                "marginBottom": "1rem",
+                "color": "#fbcfe8"
+              },
+              "textContent": "${state.eyebrow}"
+            },
+            {
+              "tagName": "h1",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(2.5rem, 6vw, 4.25rem)",
+                "fontWeight": "700",
+                "lineHeight": "1.08",
+                "margin": "0 0 1.25rem",
+                "letterSpacing": "-0.02em"
+              },
+              "textContent": "${state.heading}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "clamp(1.1rem, 2vw, 1.35rem)",
+                "lineHeight": "1.6",
+                "margin": "0 0 2rem",
+                "opacity": "0.92",
+                "maxWidth": "48ch"
+              },
+              "textContent": "${state.subheading}"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "gap": "0.75rem", "flexWrap": "wrap" },
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.ctaHref}" },
+                  "style": {
+                    "display": "inline-block",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.85rem 2rem",
+                    "borderRadius": "var(--radius)",
+                    "fontSize": "1.05rem",
+                    "fontWeight": "600",
+                    "textDecoration": "none",
+                    "transition": "background-color 0.15s",
+                    ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                  },
+                  "textContent": "${state.cta}"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.cta2Href}" },
+                  "style": {
+                    "display": "${state.cta2 ? 'inline-block' : 'none'}",
+                    "border": "1px solid rgba(255,255,255,0.6)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.85rem 2rem",
+                    "borderRadius": "var(--radius)",
+                    "fontSize": "1.05rem",
+                    "fontWeight": "600",
+                    "textDecoration": "none",
+                    "transition": "background-color 0.15s",
+                    ":hover": { "backgroundColor": "rgba(255,255,255,0.12)" }
+                  },
+                  "textContent": "${state.cta2}"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,90 @@
+{
+  "tagName": "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-bg-cream)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "padding": "2rem"
+  },
+  "children": [
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.4rem",
+        "fontWeight": "700",
+        "margin": "0 0 1.25rem"
+      },
+      "textContent": "${state.heading}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "justifyContent": "space-between",
+        "padding": "0.6rem 0",
+        "borderBottom": "1px solid var(--color-border)"
+      },
+      "children": [
+        { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Monday – Friday" },
+        {
+          "tagName": "span",
+          "style": { "color": "var(--color-text-muted)" },
+          "textContent": "${state.weekdays}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "justifyContent": "space-between",
+        "padding": "0.6rem 0",
+        "borderBottom": "1px solid var(--color-border)"
+      },
+      "children": [
+        { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Saturday" },
+        {
+          "tagName": "span",
+          "style": { "color": "var(--color-text-muted)" },
+          "textContent": "${state.saturday}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "justifyContent": "space-between",
+        "padding": "0.6rem 0"
+      },
+      "children": [
+        { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Sunday" },
+        {
+          "tagName": "span",
+          "style": { "color": "var(--color-text-muted)" },
+          "textContent": "${state.sunday}"
+        }
+      ]
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.note ? 'block' : 'none'}",
+        "margin": "1.25rem 0 0",
+        "fontSize": "0.85rem",
+        "color": "var(--color-text-muted)",
+        "fontStyle": "italic"
+      },
+      "textContent": "${state.note}"
+    }
+  ]
+}

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

@@ -0,0 +1,73 @@
+{
+  "tagName": "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 4px 20px rgba(31,23,41,0.05)"
+  },
+  "children": [
+    {
+      "tagName": "img",
+      "attributes": {
+        "src": "${state.image}",
+        "alt": "Portrait of ${state.name}",
+        "loading": "lazy"
+      },
+      "style": {
+        "width": "100%",
+        "aspectRatio": "4 / 5",
+        "objectFit": "cover",
+        "display": "block"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": { "padding": "1.5rem" },
+      "children": [
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.3rem",
+            "fontWeight": "600",
+            "margin": "0 0 0.25rem"
+          },
+          "textContent": "${state.name}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.specialty ? 'block' : 'none'}",
+            "margin": "0 0 0.75rem",
+            "color": "var(--color-accent)",
+            "fontWeight": "600",
+            "fontSize": "0.9rem"
+          },
+          "textContent": "${state.specialty}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.bio ? 'block' : 'none'}",
+            "margin": "0",
+            "color": "var(--color-text-muted)",
+            "fontSize": "0.95rem",
+            "lineHeight": "1.65"
+          },
+          "textContent": "${state.bio}"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,59 @@
+{
+  "tagName": "fs-intro",
+  "state": {
+    "image": { "type": "string", "format": "image", "default": "" },
+    "imageAlt": "",
+    "reverse": false
+  },
+  "style": {
+    "display": "block",
+    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "1fr 1fr",
+        "gap": "clamp(2rem, 5vw, 4rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.image}",
+                "alt": "${state.imageAlt}",
+                "loading": "lazy"
+              },
+              "style": {
+                "width": "100%",
+                "height": "auto",
+                "borderRadius": "var(--radius)",
+                "display": "block",
+                "boxShadow": "0 12px 40px rgba(31,23,41,0.16)"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "order": "${state.reverse ? '1' : '2'}",
+            "fontSize": "1.08rem",
+            "lineHeight": "1.8",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [{ "tagName": "slot" }]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,97 @@
+{
+  "tagName": "fs-nav",
+  "state": {
+    "brand": "Ember Yoga & Fitness"
+  },
+  "style": {
+    "display": "block",
+    "position": "sticky",
+    "top": "0",
+    "zIndex": "50",
+    "backgroundColor": "rgba(255, 255, 255, 0.9)",
+    "backdropFilter": "blur(8px)",
+    "borderBottom": "1px solid var(--color-border)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "1rem 1.5rem",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "/" },
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.35rem",
+            "fontWeight": "700",
+            "color": "var(--color-text-primary)",
+            "textDecoration": "none",
+            "letterSpacing": "-0.01em"
+          },
+          "textContent": "${state.brand}"
+        },
+        {
+          "tagName": "nav",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "1.75rem",
+            "@--sm": { "gap": "1rem" }
+          },
+          "children": [
+            {
+              "tagName": "a",
+              "attributes": { "href": "/classes/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.95rem",
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Classes"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/pricing/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "500",
+                "fontSize": "0.95rem",
+                "@--sm": { "display": "none" },
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Pricing"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "inline-block",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "padding": "0.55rem 1.25rem",
+                "borderRadius": "var(--radius)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.95rem",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+              },
+              "textContent": "Book a Class"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,223 @@
+{
+  "tagName": "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": "2rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "${state.featured ? '2px solid var(--color-primary)' : '1px solid var(--color-border)'}",
+    "borderRadius": "var(--radius)",
+    "boxShadow": "${state.featured ? '0 16px 40px rgba(219,39,119,0.16)' : '0 4px 20px rgba(31,23,41,0.05)'}"
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "style": {
+        "display": "${state.badge ? 'inline-block' : 'none'}",
+        "position": "absolute",
+        "top": "-0.85rem",
+        "left": "2rem",
+        "backgroundColor": "var(--color-primary)",
+        "color": "var(--color-text-white)",
+        "fontSize": "0.72rem",
+        "fontWeight": "600",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.06em",
+        "padding": "0.35rem 0.85rem",
+        "borderRadius": "999px"
+      },
+      "textContent": "${state.badge}"
+    },
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.35rem",
+        "fontWeight": "600",
+        "margin": "0 0 0.5rem"
+      },
+      "textContent": "${state.tier}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "alignItems": "baseline",
+        "gap": "0.35rem",
+        "margin": "0 0 0.5rem"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "2.4rem",
+            "fontWeight": "700",
+            "lineHeight": "1",
+            "color": "var(--color-primary)"
+          },
+          "textContent": "${state.price}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.per ? 'inline' : 'none'}",
+            "color": "var(--color-text-muted)",
+            "fontSize": "0.95rem",
+            "fontWeight": "500"
+          },
+          "textContent": "${state.per}"
+        }
+      ]
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.description ? 'block' : 'none'}",
+        "margin": "0 0 1.5rem",
+        "color": "var(--color-text-muted)",
+        "fontSize": "0.95rem",
+        "lineHeight": "1.6"
+      },
+      "textContent": "${state.description}"
+    },
+    {
+      "tagName": "ul",
+      "style": {
+        "listStyle": "none",
+        "margin": "0 0 1.75rem",
+        "padding": "0",
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "0.65rem"
+      },
+      "children": [
+        {
+          "tagName": "li",
+          "style": {
+            "display": "${state.perk1 ? 'flex' : 'none'}",
+            "gap": "0.6rem",
+            "alignItems": "flex-start",
+            "fontSize": "0.95rem"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "textContent": "✓"
+            },
+            { "tagName": "span", "textContent": "${state.perk1}" }
+          ]
+        },
+        {
+          "tagName": "li",
+          "style": {
+            "display": "${state.perk2 ? 'flex' : 'none'}",
+            "gap": "0.6rem",
+            "alignItems": "flex-start",
+            "fontSize": "0.95rem"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "textContent": "✓"
+            },
+            { "tagName": "span", "textContent": "${state.perk2}" }
+          ]
+        },
+        {
+          "tagName": "li",
+          "style": {
+            "display": "${state.perk3 ? 'flex' : 'none'}",
+            "gap": "0.6rem",
+            "alignItems": "flex-start",
+            "fontSize": "0.95rem"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "textContent": "✓"
+            },
+            { "tagName": "span", "textContent": "${state.perk3}" }
+          ]
+        },
+        {
+          "tagName": "li",
+          "style": {
+            "display": "${state.perk4 ? 'flex' : 'none'}",
+            "gap": "0.6rem",
+            "alignItems": "flex-start",
+            "fontSize": "0.95rem"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "textContent": "✓"
+            },
+            { "tagName": "span", "textContent": "${state.perk4}" }
+          ]
+        },
+        {
+          "tagName": "li",
+          "style": {
+            "display": "${state.perk5 ? 'flex' : 'none'}",
+            "gap": "0.6rem",
+            "alignItems": "flex-start",
+            "fontSize": "0.95rem"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "textContent": "✓"
+            },
+            { "tagName": "span", "textContent": "${state.perk5}" }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "a",
+      "attributes": { "href": "${state.ctaHref}" },
+      "style": {
+        "marginTop": "auto",
+        "display": "block",
+        "textAlign": "center",
+        "backgroundColor": "${state.featured ? 'var(--color-primary)' : 'transparent'}",
+        "color": "${state.featured ? 'var(--color-text-white)' : 'var(--color-primary)'}",
+        "border": "${state.featured ? '1px solid var(--color-primary)' : '1px solid var(--color-primary)'}",
+        "padding": "0.8rem 1.5rem",
+        "borderRadius": "var(--radius)",
+        "fontSize": "1rem",
+        "fontWeight": "600",
+        "textDecoration": "none",
+        "transition": "background-color 0.15s, color 0.15s",
+        ":hover": {
+          "backgroundColor": "var(--color-primary)",
+          "color": "var(--color-text-white)"
+        }
+      },
+      "textContent": "${state.cta}"
+    }
+  ]
+}