@jxsuite/starters 0.34.0 → 0.35.0

package/sites/course/components/co-instructor-card.json

@@ -9,7 +9,7 @@
   "style": {
     "display": "grid",
     "gridTemplateColumns": "auto 1fr",
-    "gap": "clamp(1.5rem, 4vw, 2.5rem)",
+    "gap": "clamp(1.75rem, 4vw, 2.75rem)",
     "alignItems": "center",
     "maxWidth": "var(--max-width-narrow)",
     "margin": "0 auto",
@@ -17,25 +17,54 @@
     "backgroundColor": "var(--color-bg-white)",
     "border": "1px solid var(--color-border)",
     "borderRadius": "var(--radius)",
-    "boxShadow": "0 12px 40px rgba(15,23,42,0.06)",
+    "boxShadow": "0 24px 60px -32px rgba(15,20,36,0.35)",
     "@--sm": { "gridTemplateColumns": "1fr", "textAlign": "center", "justifyItems": "center" }
   },
   "children": [
     {
-      "tagName": "img",
-      "attributes": {
-        "src": "${state.image}",
-        "alt": "${state.name}",
-        "loading": "lazy"
-      },
-      "style": {
-        "width": "140px",
-        "height": "140px",
-        "objectFit": "cover",
-        "borderRadius": "50%",
-        "border": "4px solid rgba(37,99,235,0.15)",
-        "display": "block"
-      }
+      "tagName": "div",
+      "style": { "position": "relative", "flex": "none" },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "inset": "-0.6rem -0.6rem 0.4rem 0.4rem",
+            "borderRadius": "0.9rem",
+            "backgroundColor": "var(--color-indigo-050)",
+            "border": "1px solid var(--color-indigo-line)"
+          }
+        },
+        {
+          "tagName": "img",
+          "attributes": {
+            "src": "${state.image}",
+            "alt": "${state.name}",
+            "loading": "lazy"
+          },
+          "style": {
+            "position": "relative",
+            "width": "155px",
+            "height": "185px",
+            "objectFit": "cover",
+            "borderRadius": "0.7rem",
+            "display": "block",
+            "border": "1px solid var(--color-border)"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "relative",
+            "marginTop": "0.65rem",
+            "textAlign": "center",
+            "fontFamily": "var(--font-mono)",
+            "fontSize": "0.72rem",
+            "color": "var(--color-text-faint)"
+          },
+          "textContent": "// lead instructor"
+        }
+      ]
     },
     {
       "tagName": "div",
@@ -44,31 +73,85 @@
           "tagName": "h3",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "1.5rem",
+            "fontSize": "1.55rem",
             "fontWeight": "800",
-            "margin": "0 0 0.25rem"
+            "letterSpacing": "-0.02em",
+            "margin": "0 0 0.3rem",
+            "color": "var(--color-text-primary)"
           },
           "textContent": "${state.name}"
         },
         {
           "tagName": "div",
           "style": {
+            "fontFamily": "var(--font-mono)",
             "color": "var(--color-primary)",
-            "fontWeight": "600",
-            "fontSize": "0.95rem",
-            "marginBottom": "0.85rem"
+            "fontWeight": "500",
+            "fontSize": "0.85rem",
+            "marginBottom": "0.95rem"
           },
           "textContent": "${state.role}"
         },
         {
           "tagName": "p",
           "style": {
-            "margin": "0",
+            "margin": "0 0 1.25rem",
             "color": "var(--color-text-muted)",
             "fontSize": "1rem",
             "lineHeight": "1.7"
           },
           "textContent": "${state.bio}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexWrap": "wrap",
+            "gap": "0.5rem",
+            "justifyContent": "${state.name ? 'flex-start' : 'flex-start'}",
+            "@--sm": { "justifyContent": "center" }
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.75rem",
+                "color": "var(--color-text-primary)",
+                "backgroundColor": "var(--color-bg-cream)",
+                "border": "1px solid var(--color-border)",
+                "padding": "0.3rem 0.7rem",
+                "borderRadius": "0.5rem"
+              },
+              "textContent": "10+ yrs shipping"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.75rem",
+                "color": "var(--color-text-primary)",
+                "backgroundColor": "var(--color-bg-cream)",
+                "border": "1px solid var(--color-border)",
+                "padding": "0.3rem 0.7rem",
+                "borderRadius": "0.5rem"
+              },
+              "textContent": "mentored 500+ devs"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.75rem",
+                "color": "var(--color-text-primary)",
+                "backgroundColor": "var(--color-bg-cream)",
+                "border": "1px solid var(--color-border)",
+                "padding": "0.3rem 0.7rem",
+                "borderRadius": "0.5rem"
+              },
+              "textContent": "ex-Staff Engineer"
+            }
+          ]
         }
       ]
     }

package/sites/course/components/co-mentor.json

@@ -0,0 +1,65 @@
+{
+  "tagName": "co-mentor",
+  "state": {
+    "name": "",
+    "role": "",
+    "initials": ""
+  },
+  "style": {
+    "display": "flex",
+    "alignItems": "center",
+    "gap": "0.95rem",
+    "padding": "1.1rem 1.25rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "transition": "border-color 0.15s",
+    ":hover": { "borderColor": "var(--color-primary-light)" }
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "flex": "none",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "3rem",
+        "height": "3rem",
+        "borderRadius": "0.7rem",
+        "backgroundColor": "var(--color-indigo-050)",
+        "border": "1px solid var(--color-indigo-line)",
+        "color": "var(--color-primary)",
+        "fontFamily": "var(--font-mono)",
+        "fontWeight": "700",
+        "fontSize": "1rem"
+      },
+      "textContent": "${state.initials}"
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.02rem",
+            "fontWeight": "700",
+            "color": "var(--color-text-primary)"
+          },
+          "textContent": "${state.name}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "fontFamily": "var(--font-mono)",
+            "fontSize": "0.78rem",
+            "color": "var(--color-text-muted)",
+            "marginTop": "0.15rem"
+          },
+          "textContent": "${state.role}"
+        }
+      ]
+    }
+  ]
+}

package/sites/course/components/co-module-card.json

@@ -7,85 +7,130 @@
     "duration": ""
   },
   "style": {
-    "display": "flex",
+    "display": "grid",
+    "gridTemplateColumns": "3rem 1fr",
     "gap": "1.25rem",
-    "alignItems": "flex-start",
-    "padding": "1.5rem",
-    "backgroundColor": "var(--color-bg-white)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)"
+    "@--sm": { "gridTemplateColumns": "2.5rem 1fr", "gap": "0.9rem" }
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "flex": "none",
         "display": "flex",
-        "alignItems": "center",
-        "justifyContent": "center",
-        "width": "2.75rem",
-        "height": "2.75rem",
-        "borderRadius": "0.6rem",
-        "backgroundColor": "var(--color-primary)",
-        "color": "var(--color-text-white)",
-        "fontFamily": "var(--font-heading)",
-        "fontWeight": "800",
-        "fontSize": "1.1rem"
+        "flexDirection": "column",
+        "alignItems": "center"
       },
-      "textContent": "${state.order}"
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "position": "relative",
+            "zIndex": "2",
+            "flex": "none",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "width": "3rem",
+            "height": "3rem",
+            "borderRadius": "0.7rem",
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "fontFamily": "var(--font-mono)",
+            "fontWeight": "700",
+            "fontSize": "1.05rem",
+            "boxShadow": "0 8px 18px -8px rgba(79,70,229,0.8)",
+            "@--sm": { "width": "2.5rem", "height": "2.5rem", "fontSize": "0.95rem" }
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "opacity": "0.55", "fontSize": "0.7em" },
+              "textContent": "0"
+            },
+            { "tagName": "span", "textContent": "${state.order}" }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "width": "2px",
+            "flex": "1",
+            "marginTop": "0.35rem",
+            "backgroundColor": "var(--color-indigo-line)"
+          }
+        }
+      ]
     },
     {
       "tagName": "div",
-      "style": { "flex": "1" },
+      "style": { "paddingBottom": "1.5rem" },
       "children": [
         {
           "tagName": "div",
           "style": {
-            "display": "flex",
-            "justifyContent": "space-between",
-            "alignItems": "baseline",
-            "gap": "1rem",
-            "flexWrap": "wrap"
+            "padding": "1.35rem 1.5rem",
+            "backgroundColor": "var(--color-bg-white)",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "transition": "border-color 0.15s, box-shadow 0.15s",
+            ":hover": {
+              "borderColor": "var(--color-primary-light)",
+              "boxShadow": "0 14px 34px -18px rgba(79,70,229,0.35)"
+            }
           },
           "children": [
             {
-              "tagName": "h3",
+              "tagName": "div",
               "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.2rem",
-                "fontWeight": "700",
-                "margin": "0"
+                "display": "flex",
+                "justifyContent": "space-between",
+                "alignItems": "baseline",
+                "gap": "1rem",
+                "flexWrap": "wrap"
               },
-              "textContent": "${state.title}"
+              "children": [
+                {
+                  "tagName": "h3",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.22rem",
+                    "fontWeight": "700",
+                    "letterSpacing": "-0.01em",
+                    "margin": "0",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.title}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "${state.duration ? 'inline-block' : 'none'}",
+                    "flex": "none",
+                    "fontFamily": "var(--font-mono)",
+                    "fontSize": "0.74rem",
+                    "fontWeight": "600",
+                    "color": "var(--color-primary)",
+                    "backgroundColor": "var(--color-indigo-050)",
+                    "border": "1px solid var(--color-indigo-line)",
+                    "padding": "0.25rem 0.65rem",
+                    "borderRadius": "999px"
+                  },
+                  "textContent": "${state.duration}"
+                }
+              ]
             },
             {
-              "tagName": "span",
+              "tagName": "p",
               "style": {
-                "display": "${state.duration ? 'inline-block' : 'none'}",
-                "flex": "none",
-                "fontSize": "0.75rem",
-                "fontWeight": "700",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.06em",
-                "color": "var(--color-primary)",
-                "backgroundColor": "rgba(37,99,235,0.1)",
-                "padding": "0.25rem 0.65rem",
-                "borderRadius": "999px"
+                "display": "${state.summary ? 'block' : 'none'}",
+                "margin": "0.55rem 0 0",
+                "color": "var(--color-text-muted)",
+                "fontSize": "0.98rem",
+                "lineHeight": "1.65"
               },
-              "textContent": "${state.duration}"
+              "textContent": "${state.summary}"
             }
           ]
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "display": "${state.summary ? 'block' : 'none'}",
-            "margin": "0.4rem 0 0",
-            "color": "var(--color-text-muted)",
-            "fontSize": "0.98rem",
-            "lineHeight": "1.65"
-          },
-          "textContent": "${state.summary}"
         }
       ]
     }