@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -1,15 +1,15 @@
 {
   "tagName": "fs-nav",
   "state": {
-    "brand": "Ember Yoga & Fitness"
+    "brand": "EMBER"
   },
   "style": {
     "display": "block",
     "position": "sticky",
     "top": "0",
     "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.9)",
-    "backdropFilter": "blur(8px)",
+    "backgroundColor": "rgba(255,255,255,0.82)",
+    "backdropFilter": "blur(12px)",
     "borderBottom": "1px solid var(--color-border)"
   },
   "children": [
@@ -18,7 +18,7 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "1rem 1.5rem",
+        "padding": "0.85rem 1.5rem",
         "display": "flex",
         "alignItems": "center",
         "justifyContent": "space-between",
@@ -29,21 +29,42 @@
           "tagName": "a",
           "attributes": { "href": "/" },
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.35rem",
-            "fontWeight": "700",
-            "color": "var(--color-text-primary)",
-            "textDecoration": "none",
-            "letterSpacing": "-0.01em"
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.6rem",
+            "textDecoration": "none"
           },
-          "textContent": "${state.brand}"
+          "children": [
+            {
+              "tagName": "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"
+              }
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-display)",
+                "fontSize": "1.5rem",
+                "letterSpacing": "0.02em",
+                "color": "var(--color-text-primary)",
+                "lineHeight": "1"
+              },
+              "textContent": "${state.brand}"
+            }
+          ]
         },
         {
           "tagName": "nav",
           "style": {
             "display": "flex",
             "alignItems": "center",
-            "gap": "1.75rem",
+            "gap": "1.9rem",
             "@--sm": { "gap": "1rem" }
           },
           "children": [
@@ -53,11 +74,13 @@
               "style": {
                 "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
+                "fontWeight": "600",
+                "fontSize": "0.82rem",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.1em",
                 ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "Classes"
+              "textContent": "Schedule"
             },
             {
               "tagName": "a",
@@ -65,8 +88,10 @@
               "style": {
                 "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
+                "fontWeight": "600",
+                "fontSize": "0.82rem",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.1em",
                 "@--sm": { "display": "none" },
                 ":hover": { "color": "var(--color-primary)" }
               },
@@ -77,15 +102,21 @@
               "attributes": { "href": "/contact/" },
               "style": {
                 "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
+                "background": "var(--grad-hot)",
                 "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.25rem",
-                "borderRadius": "var(--radius)",
+                "padding": "0.6rem 1.4rem",
+                "borderRadius": "999px",
                 "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "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)"
+                }
               },
               "textContent": "Book a Class"
             }

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

@@ -20,11 +20,14 @@
     "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)'}",
+    "padding": "2.2rem",
     "borderRadius": "var(--radius)",
-    "boxShadow": "${state.featured ? '0 16px 40px rgba(219,39,119,0.16)' : '0 4px 20px rgba(31,23,41,0.05)'}"
+    "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" }
   },
   "children": [
     {
@@ -33,15 +36,17 @@
         "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",
+        "left": "2.2rem",
+        "background": "var(--grad-hot)",
+        "color": "#ffffff",
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "0.7rem",
+        "fontWeight": "800",
         "textTransform": "uppercase",
-        "letterSpacing": "0.06em",
-        "padding": "0.35rem 0.85rem",
-        "borderRadius": "999px"
+        "letterSpacing": "0.08em",
+        "padding": "0.4rem 0.95rem",
+        "borderRadius": "999px",
+        "boxShadow": "0 10px 24px -10px rgba(255,46,99,0.7)"
       },
       "textContent": "${state.badge}"
     },
@@ -49,9 +54,12 @@
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.35rem",
-        "fontWeight": "600",
-        "margin": "0 0 0.5rem"
+        "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)'}"
       },
       "textContent": "${state.tier}"
     },
@@ -60,17 +68,21 @@
       "style": {
         "display": "flex",
         "alignItems": "baseline",
-        "gap": "0.35rem",
+        "gap": "0.4rem",
         "margin": "0 0 0.5rem"
       },
       "children": [
         {
           "tagName": "span",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "2.4rem",
-            "fontWeight": "700",
-            "lineHeight": "1",
+            "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)"
           },
           "textContent": "${state.price}"
@@ -79,9 +91,9 @@
           "tagName": "span",
           "style": {
             "display": "${state.per ? 'inline' : 'none'}",
-            "color": "var(--color-text-muted)",
+            "color": "${state.featured ? 'rgba(255,255,255,0.6)' : 'var(--color-text-muted)'}",
             "fontSize": "0.95rem",
-            "fontWeight": "500"
+            "fontWeight": "600"
           },
           "textContent": "${state.per}"
         }
@@ -91,8 +103,8 @@
       "tagName": "p",
       "style": {
         "display": "${state.description ? 'block' : 'none'}",
-        "margin": "0 0 1.5rem",
-        "color": "var(--color-text-muted)",
+        "margin": "0 0 1.6rem",
+        "color": "${state.featured ? 'rgba(255,255,255,0.72)' : 'var(--color-text-muted)'}",
         "fontSize": "0.95rem",
         "lineHeight": "1.6"
       },
@@ -102,25 +114,26 @@
       "tagName": "ul",
       "style": {
         "listStyle": "none",
-        "margin": "0 0 1.75rem",
+        "margin": "0 0 1.9rem",
         "padding": "0",
         "display": "flex",
         "flexDirection": "column",
-        "gap": "0.65rem"
+        "gap": "0.7rem"
       },
       "children": [
         {
           "tagName": "li",
           "style": {
             "display": "${state.perk1 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "fontWeight": "500"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "style": { "color": "var(--color-ember)", "fontWeight": "800", "flexShrink": "0" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk1}" }
@@ -130,14 +143,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk2 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "fontWeight": "500"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "style": { "color": "var(--color-ember)", "fontWeight": "800", "flexShrink": "0" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk2}" }
@@ -147,14 +161,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk3 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "fontWeight": "500"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "style": { "color": "var(--color-ember)", "fontWeight": "800", "flexShrink": "0" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk3}" }
@@ -164,14 +179,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk4 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "fontWeight": "500"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "style": { "color": "var(--color-ember)", "fontWeight": "800", "flexShrink": "0" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk4}" }
@@ -181,14 +197,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk5 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "fontWeight": "500"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-accent)", "fontWeight": "700", "flexShrink": "0" },
+              "style": { "color": "var(--color-ember)", "fontWeight": "800", "flexShrink": "0" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk5}" }
@@ -203,18 +220,21 @@
         "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",
+        "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",
-        "transition": "background-color 0.15s, color 0.15s",
+        "boxShadow": "${state.featured ? 'none' : '0 12px 28px -12px rgba(255,46,99,0.55)'}",
+        "transition": "transform 0.15s, box-shadow 0.15s",
         ":hover": {
-          "backgroundColor": "var(--color-primary)",
-          "color": "var(--color-text-white)"
+          "transform": "translateY(-2px)",
+          "boxShadow": "0 16px 34px -12px rgba(255,46,99,0.6)"
         }
       },
       "textContent": "${state.cta}"

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

@@ -6,47 +6,81 @@
     "role": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
+    "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 4px 20px rgba(31,23,41,0.06)"
+    "boxShadow": "0 12px 34px -24px rgba(26,15,24,0.3)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "color": "var(--color-primary)",
-        "fontSize": "1.1rem",
-        "marginBottom": "0.75rem",
-        "letterSpacing": "0.1em"
+        "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)"
       },
-      "textContent": "★★★★★"
+      "textContent": "“"
     },
     {
       "tagName": "p",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.15rem",
-        "lineHeight": "1.6",
-        "fontStyle": "italic",
-        "margin": "0 0 1.25rem"
+        "fontSize": "1.2rem",
+        "fontWeight": "600",
+        "lineHeight": "1.5",
+        "margin": "0 0 1.5rem",
+        "color": "var(--color-text-primary)"
       },
-      "textContent": "“${state.quote}”"
+      "textContent": "${state.quote}"
     },
     {
       "tagName": "div",
+      "style": {
+        "marginTop": "auto",
+        "display": "flex",
+        "alignItems": "center",
+        "gap": "0.75rem"
+      },
       "children": [
         {
-          "tagName": "div",
-          "style": { "fontWeight": "600" },
-          "textContent": "${state.author}"
+          "tagName": "span",
+          "style": {
+            "width": "2.3rem",
+            "height": "2.3rem",
+            "borderRadius": "50%",
+            "background": "var(--grad)",
+            "flexShrink": "0"
+          }
         },
         {
           "tagName": "div",
-          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
-          "textContent": "${state.role}"
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontWeight": "700",
+                "fontSize": "0.98rem",
+                "color": "var(--color-text-primary)"
+              },
+              "textContent": "${state.author}"
+            },
+            {
+              "tagName": "div",
+              "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)" },
+              "textContent": "${state.role}"
+            }
+          ]
         }
       ]
     }