@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -1,43 +1,37 @@
 {
   "tagName": "co-nav",
   "state": {
-    "brand": "Craft & Code Academy"
+    "brand": "Craft & Code"
   },
   "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)"
+    "zIndex": "50"
   },
   "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"
+        "backgroundColor": "var(--color-ink)",
+        "color": "var(--color-text-white)",
+        "borderBottom": "1px solid var(--color-terminal-line)"
       },
       "children": [
         {
-          "tagName": "a",
-          "attributes": { "href": "/" },
+          "tagName": "div",
           "style": {
+            "maxWidth": "var(--max-width)",
+            "margin": "0 auto",
+            "padding": "0.5rem 1.5rem",
             "display": "flex",
             "alignItems": "center",
-            "gap": "0.6rem",
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.3rem",
-            "fontWeight": "800",
-            "color": "var(--color-text-primary)",
-            "textDecoration": "none",
-            "letterSpacing": "-0.02em"
+            "justifyContent": "center",
+            "gap": "1rem",
+            "flexWrap": "wrap",
+            "fontFamily": "var(--font-mono)",
+            "fontSize": "0.78rem",
+            "letterSpacing": "0.01em"
           },
           "children": [
             {
@@ -45,71 +39,202 @@
               "style": {
                 "display": "inline-flex",
                 "alignItems": "center",
-                "justifyContent": "center",
-                "width": "1.9rem",
-                "height": "1.9rem",
-                "borderRadius": "0.55rem",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "fontSize": "0.95rem",
-                "fontWeight": "800"
+                "gap": "0.5rem"
               },
-              "textContent": "</>"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "0.5rem",
+                    "height": "0.5rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-accent)",
+                    "boxShadow": "0 0 0 3px rgba(163,230,53,0.2)",
+                    "flex": "none"
+                  }
+                },
+                {
+                  "tagName": "span",
+                  "style": { "color": "rgba(255,255,255,0.92)" },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": { "color": "var(--color-accent)" },
+                      "textContent": "next_cohort"
+                    },
+                    {
+                      "tagName": "span",
+                      "style": { "color": "rgba(255,255,255,0.5)" },
+                      "textContent": " = "
+                    },
+                    { "tagName": "span", "textContent": "Sept 8, 2026" }
+                  ]
+                }
+              ]
             },
-            { "tagName": "span", "textContent": "${state.brand}" }
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-terminal-line)", "@--sm": { "display": "none" } },
+              "textContent": "·"
+            },
+            {
+              "tagName": "span",
+              "style": { "color": "rgba(255,255,255,0.7)", "@--sm": { "display": "none" } },
+              "textContent": "6 of 24 seats left"
+            },
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-terminal-line)", "@--sm": { "display": "none" } },
+              "textContent": "·"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/enroll/" },
+              "style": {
+                "color": "var(--color-accent-cyan)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                ":hover": { "textDecoration": "underline" }
+              },
+              "textContent": "apply →"
+            }
           ]
-        },
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "backgroundColor": "rgba(255, 255, 255, 0.85)",
+        "backdropFilter": "blur(10px)",
+        "borderBottom": "1px solid var(--color-border)"
+      },
+      "children": [
         {
-          "tagName": "nav",
+          "tagName": "div",
           "style": {
+            "maxWidth": "var(--max-width)",
+            "margin": "0 auto",
+            "padding": "0.85rem 1.5rem",
             "display": "flex",
             "alignItems": "center",
-            "gap": "1.75rem",
-            "@--sm": { "gap": "1rem" }
+            "justifyContent": "space-between",
+            "gap": "1.5rem"
           },
           "children": [
             {
               "tagName": "a",
-              "attributes": { "href": "/curriculum/" },
+              "attributes": { "href": "/" },
               "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Curriculum"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/about/" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.65rem",
+                "textDecoration": "none"
               },
-              "textContent": "About"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "width": "2rem",
+                    "height": "2rem",
+                    "borderRadius": "0.5rem",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "fontFamily": "var(--font-mono)",
+                    "fontSize": "0.85rem",
+                    "fontWeight": "700",
+                    "boxShadow": "0 6px 16px -6px rgba(79,70,229,0.7)"
+                  },
+                  "textContent": "</>"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.2rem",
+                    "fontWeight": "800",
+                    "color": "var(--color-text-primary)",
+                    "letterSpacing": "-0.02em"
+                  },
+                  "children": [
+                    { "tagName": "span", "textContent": "${state.brand}" },
+                    {
+                      "tagName": "span",
+                      "style": { "color": "var(--color-primary)" },
+                      "textContent": " Academy"
+                    }
+                  ]
+                }
+              ]
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "/enroll/" },
+              "tagName": "nav",
               "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.4rem",
-                "borderRadius": "var(--radius)",
-                "textDecoration": "none",
-                "fontWeight": "700",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1.9rem",
+                "@--sm": { "gap": "1rem" }
               },
-              "textContent": "Enroll"
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/curriculum/" },
+                  "style": {
+                    "fontFamily": "var(--font-mono)",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.08em",
+                    "color": "var(--color-text-muted)",
+                    "textDecoration": "none",
+                    "fontWeight": "500",
+                    "fontSize": "0.78rem",
+                    "@--sm": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Curriculum"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/about/" },
+                  "style": {
+                    "fontFamily": "var(--font-mono)",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.08em",
+                    "color": "var(--color-text-muted)",
+                    "textDecoration": "none",
+                    "fontWeight": "500",
+                    "fontSize": "0.78rem",
+                    "@--sm": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "About"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/enroll/" },
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "gap": "0.4rem",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.55rem 1.3rem",
+                    "borderRadius": "999px",
+                    "textDecoration": "none",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "boxShadow": "0 8px 20px -8px rgba(79,70,229,0.8)",
+                    "transition": "transform 0.15s, background-color 0.15s",
+                    ":hover": {
+                      "backgroundColor": "var(--color-primary-hover)",
+                      "transform": "translateY(-1px)"
+                    }
+                  },
+                  "textContent": "Enroll"
+                }
+              ]
             }
           ]
         }

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

@@ -1,46 +1,72 @@
 {
   "tagName": "co-outcome-card",
   "state": {
+    "number": "",
     "icon": "",
     "title": "",
     "text": ""
   },
   "style": {
     "display": "block",
+    "position": "relative",
     "padding": "1.75rem",
     "backgroundColor": "var(--color-bg-white)",
     "borderRadius": "var(--radius)",
     "border": "1px solid var(--color-border)",
-    "transition": "transform 0.15s, box-shadow 0.15s",
+    "transition": "transform 0.15s, box-shadow 0.15s, border-color 0.15s",
     ":hover": {
-      "transform": "translateY(-3px)",
-      "boxShadow": "0 12px 32px rgba(37,99,235,0.12)"
+      "transform": "translateY(-4px)",
+      "boxShadow": "0 18px 40px -18px rgba(79,70,229,0.4)",
+      "borderColor": "var(--color-primary-light)"
     }
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "display": "inline-flex",
+        "display": "flex",
         "alignItems": "center",
-        "justifyContent": "center",
-        "width": "2.75rem",
-        "height": "2.75rem",
-        "borderRadius": "0.6rem",
-        "backgroundColor": "rgba(37,99,235,0.1)",
-        "fontSize": "1.4rem",
-        "marginBottom": "1rem",
-        "lineHeight": "1"
+        "justifyContent": "space-between",
+        "marginBottom": "1.1rem"
       },
-      "textContent": "${state.icon}"
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "width": "2.9rem",
+            "height": "2.9rem",
+            "borderRadius": "0.65rem",
+            "backgroundColor": "var(--color-indigo-050)",
+            "border": "1px solid var(--color-indigo-line)",
+            "fontSize": "1.45rem",
+            "lineHeight": "1"
+          },
+          "textContent": "${state.icon}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-mono)",
+            "fontSize": "0.85rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-faint)"
+          },
+          "textContent": "${state.number}"
+        }
+      ]
     },
     {
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
+        "fontSize": "1.18rem",
         "fontWeight": "700",
-        "margin": "0 0 0.5rem"
+        "letterSpacing": "-0.01em",
+        "margin": "0 0 0.5rem",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.title}"
     },

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

@@ -0,0 +1,248 @@
+{
+  "tagName": "co-outcomes",
+  "state": {
+    "kicker": "outcomes",
+    "heading": "",
+    "n1": "",
+    "l1": "",
+    "n2": "",
+    "l2": "",
+    "n3": "",
+    "l3": "",
+    "n4": "",
+    "l4": ""
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "overflow": "hidden",
+    "backgroundColor": "var(--color-ink)",
+    "color": "var(--color-text-white)",
+    "padding": "clamp(3rem, 6vw, 4.5rem) 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "inset": "0",
+        "backgroundImage": "radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)",
+        "backgroundSize": "28px 28px",
+        "opacity": "0.5",
+        "pointerEvents": "none"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "inset": "0",
+        "background": "radial-gradient(ellipse 55% 90% at 50% -10%, rgba(79,70,229,0.35), transparent 60%)",
+        "pointerEvents": "none"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "2",
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "textAlign": "center", "marginBottom": "2.75rem" },
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.8rem",
+                "fontWeight": "600",
+                "color": "var(--color-accent)",
+                "margin": "0 0 0.85rem",
+                "letterSpacing": "0.02em"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": { "color": "rgba(255,255,255,0.4)" },
+                  "textContent": "$ "
+                },
+                { "tagName": "span", "textContent": "${state.kicker}" }
+              ]
+            },
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(1.7rem, 3.4vw, 2.4rem)",
+                "fontWeight": "800",
+                "letterSpacing": "-0.03em",
+                "lineHeight": "1.15",
+                "margin": "0 auto",
+                "maxWidth": "22ch"
+              },
+              "textContent": "${state.heading}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(4, 1fr)",
+            "border": "1px solid var(--color-terminal-line)",
+            "borderRadius": "0.9rem",
+            "backgroundColor": "rgba(20,28,57,0.5)",
+            "overflow": "hidden",
+            "@--sm": { "gridTemplateColumns": "repeat(2, 1fr)" }
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "padding": "clamp(1.5rem, 3vw, 2.25rem) 1.25rem",
+                "textAlign": "center",
+                "borderRight": "1px solid var(--color-terminal-line)",
+                "@--sm": { "borderBottom": "1px solid var(--color-terminal-line)" }
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "clamp(2.1rem, 4.5vw, 3rem)",
+                    "fontWeight": "800",
+                    "lineHeight": "1",
+                    "letterSpacing": "-0.03em",
+                    "color": "var(--color-text-white)",
+                    "fontVariantNumeric": "tabular-nums"
+                  },
+                  "textContent": "${state.n1}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "marginTop": "0.65rem",
+                    "fontSize": "0.85rem",
+                    "fontWeight": "500",
+                    "color": "rgba(255,255,255,0.6)",
+                    "lineHeight": "1.4"
+                  },
+                  "textContent": "${state.l1}"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "padding": "clamp(1.5rem, 3vw, 2.25rem) 1.25rem",
+                "textAlign": "center",
+                "borderRight": "1px solid var(--color-terminal-line)",
+                "@--sm": {
+                  "borderRight": "none",
+                  "borderBottom": "1px solid var(--color-terminal-line)"
+                }
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "clamp(2.1rem, 4.5vw, 3rem)",
+                    "fontWeight": "800",
+                    "lineHeight": "1",
+                    "letterSpacing": "-0.03em",
+                    "color": "var(--color-accent)",
+                    "fontVariantNumeric": "tabular-nums"
+                  },
+                  "textContent": "${state.n2}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "marginTop": "0.65rem",
+                    "fontSize": "0.85rem",
+                    "fontWeight": "500",
+                    "color": "rgba(255,255,255,0.6)",
+                    "lineHeight": "1.4"
+                  },
+                  "textContent": "${state.l2}"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "padding": "clamp(1.5rem, 3vw, 2.25rem) 1.25rem",
+                "textAlign": "center",
+                "borderRight": "1px solid var(--color-terminal-line)"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "clamp(2.1rem, 4.5vw, 3rem)",
+                    "fontWeight": "800",
+                    "lineHeight": "1",
+                    "letterSpacing": "-0.03em",
+                    "color": "var(--color-text-white)",
+                    "fontVariantNumeric": "tabular-nums"
+                  },
+                  "textContent": "${state.n3}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "marginTop": "0.65rem",
+                    "fontSize": "0.85rem",
+                    "fontWeight": "500",
+                    "color": "rgba(255,255,255,0.6)",
+                    "lineHeight": "1.4"
+                  },
+                  "textContent": "${state.l3}"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "padding": "clamp(1.5rem, 3vw, 2.25rem) 1.25rem",
+                "textAlign": "center"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "clamp(2.1rem, 4.5vw, 3rem)",
+                    "fontWeight": "800",
+                    "lineHeight": "1",
+                    "letterSpacing": "-0.03em",
+                    "color": "var(--color-accent-cyan)",
+                    "fontVariantNumeric": "tabular-nums"
+                  },
+                  "textContent": "${state.n4}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "marginTop": "0.65rem",
+                    "fontSize": "0.85rem",
+                    "fontWeight": "500",
+                    "color": "rgba(255,255,255,0.6)",
+                    "lineHeight": "1.4"
+                  },
+                  "textContent": "${state.l4}"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}