@jxsuite/starters 0.34.0 → 0.35.1

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

@@ -11,50 +11,71 @@
     "display": "flex",
     "flexDirection": "column",
     "height": "100%",
-    "padding": "1.6rem",
+    "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 4px 20px rgba(31,23,41,0.05)",
+    "boxShadow": "0 10px 30px -20px rgba(26,15,24,0.28)",
     "transition": "transform 0.15s, box-shadow 0.15s",
     ":hover": {
-      "transform": "translateY(-3px)",
-      "boxShadow": "0 12px 32px rgba(31,23,41,0.10)"
+      "transform": "translateY(-4px)",
+      "boxShadow": "0 22px 44px -22px rgba(26,15,24,0.4)"
     }
   },
   "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "top": "0",
+        "left": "0",
+        "bottom": "0",
+        "width": "5px",
+        "background": "var(--grad-hot)"
+      }
+    },
     {
       "tagName": "div",
       "style": {
         "display": "flex",
         "justifyContent": "space-between",
-        "alignItems": "flex-start",
+        "alignItems": "center",
         "gap": "0.75rem",
-        "marginBottom": "0.75rem"
+        "marginBottom": "0.6rem"
       },
       "children": [
         {
-          "tagName": "h3",
+          "tagName": "div",
           "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.45rem",
             "fontFamily": "var(--font-heading)",
-            "fontSize": "1.3rem",
-            "fontWeight": "600",
-            "margin": "0"
+            "fontWeight": "800",
+            "fontSize": "0.86rem",
+            "color": "var(--color-primary)",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.03em"
           },
-          "textContent": "${state.name}"
+          "children": [
+            { "tagName": "span", "textContent": "🕑" },
+            { "tagName": "span", "textContent": "${state.time}" }
+          ]
         },
         {
           "tagName": "span",
           "style": {
             "display": "${state.level ? 'inline-block' : 'none'}",
             "flexShrink": "0",
-            "backgroundColor": "rgba(13,148,136,0.12)",
-            "color": "var(--color-accent)",
-            "fontSize": "0.72rem",
-            "fontWeight": "600",
+            "backgroundColor": "var(--color-bg-peach)",
+            "color": "var(--color-ember)",
+            "fontSize": "0.68rem",
+            "fontWeight": "800",
             "textTransform": "uppercase",
             "letterSpacing": "0.06em",
-            "padding": "0.3rem 0.65rem",
+            "padding": "0.3rem 0.7rem",
             "borderRadius": "999px",
             "whiteSpace": "nowrap"
           },
@@ -62,6 +83,19 @@
         }
       ]
     },
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-display)",
+        "fontSize": "1.7rem",
+        "fontWeight": "400",
+        "lineHeight": "1",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.01em",
+        "margin": "0 0 0.75rem"
+      },
+      "textContent": "${state.name}"
+    },
     {
       "tagName": "p",
       "style": {
@@ -80,29 +114,26 @@
         "paddingTop": "1rem",
         "borderTop": "1px solid var(--color-border)",
         "display": "flex",
-        "flexDirection": "column",
-        "gap": "0.4rem"
+        "alignItems": "center",
+        "gap": "0.6rem"
       },
       "children": [
         {
-          "tagName": "div",
+          "tagName": "span",
           "style": {
-            "display": "flex",
-            "alignItems": "center",
-            "gap": "0.5rem",
-            "fontWeight": "600",
-            "color": "var(--color-primary)"
-          },
-          "children": [
-            { "tagName": "span", "style": { "fontSize": "1rem" }, "textContent": "🕑" },
-            { "tagName": "span", "textContent": "${state.time}" }
-          ]
+            "width": "1.7rem",
+            "height": "1.7rem",
+            "borderRadius": "50%",
+            "background": "var(--grad)",
+            "flexShrink": "0"
+          }
         },
         {
-          "tagName": "div",
+          "tagName": "span",
           "style": {
             "fontSize": "0.9rem",
-            "color": "var(--color-text-muted)"
+            "fontWeight": "600",
+            "color": "var(--color-text-primary)"
           },
           "textContent": "with ${state.instructor}"
         }

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

@@ -1,6 +1,7 @@
 {
   "tagName": "fs-cta",
   "state": {
+    "eyebrow": "",
     "heading": "",
     "text": "",
     "cta": "Book a Class",
@@ -8,34 +9,70 @@
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
+    "position": "relative",
+    "overflow": "hidden",
+    "backgroundColor": "var(--color-ink)",
     "color": "var(--color-text-white)",
-    "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
+    "padding": "clamp(3.5rem, 9vw, 6rem) 1.5rem",
     "textAlign": "center"
   },
   "children": [
     {
       "tagName": "div",
-      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "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"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "2",
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto"
+      },
       "children": [
         {
-          "tagName": "h2",
+          "tagName": "p",
           "style": {
+            "display": "${state.eyebrow ? 'block' : 'none'}",
+            "margin": "0 0 1rem",
             "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.22em",
+            "fontSize": "0.8rem",
             "fontWeight": "700",
-            "lineHeight": "1.15",
-            "margin": "0 0 1rem"
+            "color": "var(--color-ember)"
+          },
+          "textContent": "${state.eyebrow}"
+        },
+        {
+          "tagName": "h2",
+          "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"
           },
           "textContent": "${state.heading}"
         },
         {
           "tagName": "p",
           "style": {
-            "fontSize": "1.1rem",
-            "lineHeight": "1.7",
-            "opacity": "0.85",
-            "margin": "0 0 2rem"
+            "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"
           },
           "textContent": "${state.text}"
         },
@@ -44,15 +81,22 @@
           "attributes": { "href": "${state.ctaHref}" },
           "style": {
             "display": "inline-block",
-            "backgroundColor": "var(--color-primary)",
-            "color": "var(--color-text-white)",
-            "padding": "0.9rem 2.25rem",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1.05rem",
-            "fontWeight": "600",
+            "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",
-            "transition": "background-color 0.15s",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+            "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)"
+            }
           },
           "textContent": "${state.cta}"
         }

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

@@ -7,23 +7,37 @@
   },
   "style": {
     "display": "block",
-    "padding": "1.75rem",
-    "backgroundColor": "var(--color-bg-cream)",
+    "height": "100%",
+    "padding": "1.9rem",
+    "backgroundColor": "var(--color-bg-white)",
     "borderRadius": "var(--radius)",
-    "border": "1px solid var(--color-border)"
+    "border": "1px solid var(--color-border)",
+    "boxShadow": "0 10px 30px -22px rgba(26,15,24,0.25)"
   },
   "children": [
     {
       "tagName": "div",
-      "style": { "fontSize": "1.75rem", "marginBottom": "0.75rem", "lineHeight": "1" },
+      "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)"
+      },
       "textContent": "${state.icon}"
     },
     {
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.25rem",
-        "fontWeight": "600",
+        "fontSize": "1.2rem",
+        "fontWeight": "800",
+        "letterSpacing": "-0.01em",
         "margin": "0 0 0.5rem"
       },
       "textContent": "${state.title}"

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

@@ -1,16 +1,16 @@
 {
   "tagName": "fs-footer",
   "state": {
-    "brand": "Ember Yoga & Fitness",
-    "tagline": "Yoga, pilates, and strength for every body — in a studio that feels like home.",
+    "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-bg-dark)",
+    "backgroundColor": "var(--color-ink)",
     "color": "var(--color-text-white)",
-    "padding": "3.5rem 1.5rem 2rem"
+    "padding": "clamp(3rem, 6vw, 4.5rem) 1.5rem 2rem"
   },
   "children": [
     {
@@ -30,16 +30,42 @@
             {
               "tagName": "div",
               "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.35rem",
-                "fontWeight": "700",
-                "marginBottom": "0.75rem"
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.6rem",
+                "marginBottom": "1rem"
               },
-              "textContent": "${state.brand}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "1.5rem",
+                    "height": "1.5rem",
+                    "borderRadius": "50%",
+                    "background": "var(--grad)"
+                  }
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-display)",
+                    "fontSize": "1.7rem",
+                    "letterSpacing": "0.02em",
+                    "color": "#ffffff",
+                    "lineHeight": "1"
+                  },
+                  "textContent": "${state.brand}"
+                }
+              ]
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.75", "maxWidth": "36ch" },
+              "style": {
+                "margin": "0",
+                "opacity": "0.72",
+                "maxWidth": "34ch",
+                "lineHeight": "1.7"
+              },
               "textContent": "${state.tagline}"
             }
           ]
@@ -50,11 +76,13 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-heading)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.12em",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "color": "var(--color-ember)",
+                "marginBottom": "0.9rem"
               },
               "textContent": "Visit"
             },
@@ -76,11 +104,13 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-heading)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.12em",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "color": "var(--color-ember)",
+                "marginBottom": "0.9rem"
               },
               "textContent": "Explore"
             },
@@ -89,22 +119,24 @@
               "attributes": { "href": "/classes/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
+                "color": "#ffffff",
                 "opacity": "0.85",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.4rem",
+                ":hover": { "opacity": "1", "color": "var(--color-ember)" }
               },
-              "textContent": "Classes"
+              "textContent": "Schedule"
             },
             {
               "tagName": "a",
               "attributes": { "href": "/pricing/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
+                "color": "#ffffff",
                 "opacity": "0.85",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.4rem",
+                ":hover": { "opacity": "1", "color": "var(--color-ember)" }
               },
               "textContent": "Pricing"
             },
@@ -113,11 +145,12 @@
               "attributes": { "href": "/contact/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
+                "color": "#ffffff",
                 "opacity": "0.85",
-                "textDecoration": "none"
+                "textDecoration": "none",
+                ":hover": { "opacity": "1", "color": "var(--color-ember)" }
               },
-              "textContent": "Contact"
+              "textContent": "Book a Class"
             }
           ]
         }
@@ -127,11 +160,11 @@
       "tagName": "div",
       "style": {
         "maxWidth": "var(--max-width)",
-        "margin": "2.5rem auto 0",
+        "margin": "2.75rem auto 0",
         "paddingTop": "1.5rem",
-        "borderTop": "1px solid rgba(255, 255, 255, 0.15)",
+        "borderTop": "1px solid rgba(255,255,255,0.14)",
         "fontSize": "0.85rem",
-        "opacity": "0.6"
+        "opacity": "0.55"
       },
       "children": [
         {