@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -14,55 +14,118 @@
     "border": "1px solid var(--color-border)",
     "borderRadius": "var(--radius)",
     "overflow": "hidden",
-    "boxShadow": "0 4px 20px rgba(31,23,41,0.05)"
+    "boxShadow": "0 12px 34px -22px rgba(26,15,24,0.35)"
   },
   "children": [
     {
-      "tagName": "img",
-      "attributes": {
-        "src": "${state.image}",
-        "alt": "Portrait of ${state.name}",
-        "loading": "lazy"
-      },
+      "tagName": "div",
       "style": {
-        "width": "100%",
+        "position": "relative",
         "aspectRatio": "4 / 5",
-        "objectFit": "cover",
-        "display": "block"
-      }
-    },
-    {
-      "tagName": "div",
-      "style": { "padding": "1.5rem" },
+        "overflow": "hidden",
+        "backgroundColor": "var(--duo-shadow)"
+      },
       "children": [
         {
-          "tagName": "h3",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.3rem",
-            "fontWeight": "600",
-            "margin": "0 0 0.25rem"
+          "tagName": "img",
+          "attributes": {
+            "src": "${state.image}",
+            "alt": "Portrait of ${state.name}",
+            "width": "800",
+            "height": "1000",
+            "loading": "lazy"
           },
-          "textContent": "${state.name}"
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "width": "100%",
+            "height": "100%",
+            "objectFit": "cover",
+            "filter": "grayscale(100%) contrast(1.02) brightness(1.2)"
+          }
         },
         {
-          "tagName": "p",
+          "tagName": "div",
           "style": {
-            "display": "${state.specialty ? 'block' : 'none'}",
-            "margin": "0 0 0.75rem",
-            "color": "var(--color-accent)",
-            "fontWeight": "600",
-            "fontSize": "0.9rem"
-          },
-          "textContent": "${state.specialty}"
+            "position": "absolute",
+            "inset": "0",
+            "backgroundColor": "var(--duo-shadow)",
+            "mixBlendMode": "lighten"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "background": "linear-gradient(150deg, #ff2e63 0%, #ff8c42 100%)",
+            "mixBlendMode": "multiply",
+            "opacity": "0.72"
+          }
         },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "background": "linear-gradient(180deg, transparent 45%, rgba(20,6,16,0.72) 100%)"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "left": "1.35rem",
+            "right": "1.35rem",
+            "bottom": "1.1rem"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.specialty ? 'inline-block' : 'none'}",
+                "marginBottom": "0.5rem",
+                "padding": "0.28rem 0.7rem",
+                "borderRadius": "999px",
+                "backgroundColor": "rgba(255,255,255,0.92)",
+                "color": "var(--color-ink)",
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "0.66rem",
+                "fontWeight": "800",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.06em"
+              },
+              "textContent": "${state.specialty}"
+            },
+            {
+              "tagName": "h3",
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-display)",
+                "fontSize": "1.9rem",
+                "fontWeight": "400",
+                "lineHeight": "0.95",
+                "textTransform": "uppercase",
+                "color": "#ffffff",
+                "textShadow": "0 4px 16px rgba(20,6,16,0.5)"
+              },
+              "textContent": "${state.name}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "padding": "1.4rem 1.5rem 1.6rem" },
+      "children": [
         {
           "tagName": "p",
           "style": {
             "display": "${state.bio ? 'block' : 'none'}",
             "margin": "0",
             "color": "var(--color-text-muted)",
-            "fontSize": "0.95rem",
+            "fontSize": "0.96rem",
             "lineHeight": "1.65"
           },
           "textContent": "${state.bio}"

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

@@ -1,13 +1,21 @@
 {
   "tagName": "fs-intro",
   "state": {
+    "kicker": "",
     "image": { "type": "string", "format": "image", "default": "" },
     "imageAlt": "",
-    "reverse": false
+    "badge": "",
+    "stat1": "",
+    "stat1label": "",
+    "stat2": "",
+    "stat2label": "",
+    "stat3": "",
+    "stat3label": ""
   },
   "style": {
     "display": "block",
-    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    "padding": "clamp(3.5rem, 8vw, 6.5rem) 1.5rem",
+    "backgroundColor": "var(--color-bg-white)"
   },
   "children": [
     {
@@ -16,42 +24,269 @@
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
         "display": "grid",
-        "gridTemplateColumns": "1fr 1fr",
-        "gap": "clamp(2rem, 5vw, 4rem)",
+        "gridTemplateColumns": "0.95fr 1.05fr",
+        "gap": "clamp(2rem, 5vw, 4.5rem)",
         "alignItems": "center",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2.5rem" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "style": { "position": "relative" },
           "children": [
             {
-              "tagName": "img",
-              "attributes": {
-                "src": "${state.image}",
-                "alt": "${state.imageAlt}",
-                "loading": "lazy"
-              },
+              "tagName": "div",
               "style": {
-                "width": "100%",
-                "height": "auto",
+                "position": "absolute",
+                "top": "-1.1rem",
+                "left": "-1.1rem",
+                "right": "1.6rem",
+                "bottom": "1.6rem",
                 "borderRadius": "var(--radius)",
-                "display": "block",
-                "boxShadow": "0 12px 40px rgba(31,23,41,0.16)"
+                "background": "var(--grad)",
+                "transform": "rotate(-2.5deg)",
+                "opacity": "0.9",
+                "@--sm": { "display": "none" }
               }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "relative",
+                "borderRadius": "var(--radius)",
+                "overflow": "hidden",
+                "aspectRatio": "4 / 5",
+                "backgroundColor": "var(--duo-shadow)",
+                "boxShadow": "0 30px 60px -28px rgba(26,15,24,0.5)"
+              },
+              "children": [
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "${state.image}",
+                    "alt": "${state.imageAlt}",
+                    "width": "1200",
+                    "height": "1500",
+                    "loading": "lazy"
+                  },
+                  "style": {
+                    "position": "absolute",
+                    "inset": "0",
+                    "width": "100%",
+                    "height": "100%",
+                    "objectFit": "cover",
+                    "filter": "grayscale(100%) contrast(1.08)"
+                  }
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "position": "absolute",
+                    "inset": "0",
+                    "backgroundColor": "var(--duo-shadow)",
+                    "mixBlendMode": "lighten"
+                  }
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "position": "absolute",
+                    "inset": "0",
+                    "background": "linear-gradient(150deg, #ff2e63 0%, #ff8c42 100%)",
+                    "mixBlendMode": "multiply",
+                    "opacity": "0.85"
+                  }
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.badge ? 'flex' : 'none'}",
+                "position": "absolute",
+                "bottom": "-1.1rem",
+                "right": "-0.6rem",
+                "alignItems": "center",
+                "gap": "0.5rem",
+                "padding": "0.7rem 1.15rem",
+                "borderRadius": "999px",
+                "backgroundColor": "var(--color-ink)",
+                "color": "#ffffff",
+                "fontFamily": "var(--font-heading)",
+                "fontWeight": "700",
+                "fontSize": "0.82rem",
+                "boxShadow": "0 16px 34px -12px rgba(0,0,0,0.5)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "0.5rem",
+                    "height": "0.5rem",
+                    "borderRadius": "50%",
+                    "backgroundColor": "#ffb03a"
+                  }
+                },
+                { "tagName": "span", "textContent": "${state.badge}" }
+              ]
             }
           ]
         },
         {
           "tagName": "div",
-          "style": {
-            "order": "${state.reverse ? '1' : '2'}",
-            "fontSize": "1.08rem",
-            "lineHeight": "1.8",
-            "color": "var(--color-text-primary)"
-          },
-          "children": [{ "tagName": "slot" }]
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.kicker ? 'inline-flex' : 'none'}",
+                "alignItems": "center",
+                "gap": "0.55rem",
+                "marginBottom": "1.1rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "1.6rem",
+                    "height": "3px",
+                    "borderRadius": "2px",
+                    "background": "var(--grad-hot)"
+                  }
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.16em",
+                    "fontSize": "0.78rem",
+                    "fontWeight": "700",
+                    "color": "var(--color-primary)"
+                  },
+                  "textContent": "${state.kicker}"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "fontSize": "1.12rem",
+                "lineHeight": "1.8",
+                "color": "var(--color-text-primary)"
+              },
+              "children": [{ "tagName": "slot" }]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.stat1 ? 'grid' : 'none'}",
+                "gridTemplateColumns": "repeat(3, auto)",
+                "gap": "clamp(1.25rem, 4vw, 2.5rem)",
+                "marginTop": "2.25rem",
+                "paddingTop": "1.75rem",
+                "borderTop": "1px solid var(--color-border)",
+                "justifyContent": "start",
+                "@--sm": { "gridTemplateColumns": "repeat(3, 1fr)", "gap": "1rem" }
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-display)",
+                        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
+                        "lineHeight": "1",
+                        "background": "var(--grad-hot)",
+                        "backgroundClip": "text",
+                        "webkitBackgroundClip": "text",
+                        "webkitTextFillColor": "transparent",
+                        "color": "var(--color-primary)"
+                      },
+                      "textContent": "${state.stat1}"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "0.8rem",
+                        "fontWeight": "600",
+                        "color": "var(--color-text-muted)",
+                        "marginTop": "0.35rem",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.04em"
+                      },
+                      "textContent": "${state.stat1label}"
+                    }
+                  ]
+                },
+                {
+                  "tagName": "div",
+                  "style": { "display": "${state.stat2 ? 'block' : 'none'}" },
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-display)",
+                        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
+                        "lineHeight": "1",
+                        "background": "var(--grad-hot)",
+                        "backgroundClip": "text",
+                        "webkitBackgroundClip": "text",
+                        "webkitTextFillColor": "transparent",
+                        "color": "var(--color-primary)"
+                      },
+                      "textContent": "${state.stat2}"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "0.8rem",
+                        "fontWeight": "600",
+                        "color": "var(--color-text-muted)",
+                        "marginTop": "0.35rem",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.04em"
+                      },
+                      "textContent": "${state.stat2label}"
+                    }
+                  ]
+                },
+                {
+                  "tagName": "div",
+                  "style": { "display": "${state.stat3 ? 'block' : 'none'}" },
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontFamily": "var(--font-display)",
+                        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
+                        "lineHeight": "1",
+                        "background": "var(--grad-hot)",
+                        "backgroundClip": "text",
+                        "webkitBackgroundClip": "text",
+                        "webkitTextFillColor": "transparent",
+                        "color": "var(--color-primary)"
+                      },
+                      "textContent": "${state.stat3}"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "0.8rem",
+                        "fontWeight": "600",
+                        "color": "var(--color-text-muted)",
+                        "marginTop": "0.35rem",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.04em"
+                      },
+                      "textContent": "${state.stat3label}"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     }

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

@@ -0,0 +1,171 @@
+{
+  "tagName": "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)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": { "href": "${state.href}" },
+      "style": {
+        "display": "flex",
+        "flexDirection": "column",
+        "height": "100%",
+        "textDecoration": "none",
+        "color": "var(--color-text-primary)"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "position": "relative",
+            "aspectRatio": "5 / 4",
+            "overflow": "hidden",
+            "backgroundColor": "var(--duo-shadow)"
+          },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "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)"
+              }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "absolute",
+                "inset": "0",
+                "backgroundColor": "var(--duo-shadow)",
+                "mixBlendMode": "lighten"
+              }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "absolute",
+                "inset": "0",
+                "backgroundColor": "${state.color}",
+                "mixBlendMode": "multiply",
+                "opacity": "0.82"
+              }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "absolute",
+                "inset": "0",
+                "background": "linear-gradient(180deg, rgba(20,6,16,0.05) 40%, rgba(20,6,16,0.6) 100%)"
+              }
+            },
+            {
+              "tagName": "span",
+              "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"
+              },
+              "textContent": "${state.tag}"
+            },
+            {
+              "tagName": "h3",
+              "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)"
+              },
+              "textContent": "${state.title}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "flex": "1",
+            "display": "flex",
+            "flexDirection": "column",
+            "padding": "1.4rem 1.5rem 1.6rem"
+          },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.1rem",
+                "color": "var(--color-text-muted)",
+                "fontSize": "0.98rem",
+                "lineHeight": "1.6"
+              },
+              "textContent": "${state.text}"
+            },
+            {
+              "tagName": "span",
+              "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}"
+              },
+              "textContent": "Explore classes →"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}