@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -0,0 +1,172 @@
+{
+  "tagName": "co-cohort",
+  "state": {
+    "c1label": "",
+    "c1date": "",
+    "c1seats": "",
+    "c2label": "",
+    "c2date": "",
+    "c2seats": "",
+    "note": ""
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "overflow": "hidden",
+    "boxShadow": "0 12px 40px -24px rgba(15,20,36,0.4)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "alignItems": "center",
+        "gap": "0.5rem",
+        "padding": "0.85rem 1.35rem",
+        "backgroundColor": "var(--color-ink)",
+        "borderBottom": "1px solid var(--color-terminal-line)",
+        "fontFamily": "var(--font-mono)",
+        "fontSize": "0.8rem"
+      },
+      "children": [
+        { "tagName": "span", "style": { "color": "var(--color-accent)" }, "textContent": "$" },
+        {
+          "tagName": "span",
+          "style": { "color": "rgba(255,255,255,0.9)" },
+          "textContent": "cat cohorts.txt"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "padding": "0.5rem 1.35rem" },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "padding": "1rem 0",
+            "borderBottom": "1px solid var(--color-border)"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "700",
+                    "fontSize": "1.05rem",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.c1label}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-mono)",
+                    "fontSize": "0.8rem",
+                    "color": "var(--color-text-muted)",
+                    "marginTop": "0.15rem"
+                  },
+                  "textContent": "starts ${state.c1date}"
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "flex": "none",
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.75rem",
+                "fontWeight": "600",
+                "color": "#3f6212",
+                "backgroundColor": "rgba(163,230,53,0.18)",
+                "border": "1px solid rgba(163,230,53,0.45)",
+                "padding": "0.3rem 0.7rem",
+                "borderRadius": "999px"
+              },
+              "textContent": "${state.c1seats}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "padding": "1rem 0"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "700",
+                    "fontSize": "1.05rem",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.c2label}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-mono)",
+                    "fontSize": "0.8rem",
+                    "color": "var(--color-text-muted)",
+                    "marginTop": "0.15rem"
+                  },
+                  "textContent": "starts ${state.c2date}"
+                }
+              ]
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "flex": "none",
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.75rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-muted)",
+                "backgroundColor": "var(--color-bg-cream)",
+                "border": "1px solid var(--color-border)",
+                "padding": "0.3rem 0.7rem",
+                "borderRadius": "999px"
+              },
+              "textContent": "${state.c2seats}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "${state.note ? 'flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.5rem",
+        "padding": "0.95rem 1.35rem",
+        "borderTop": "1px solid var(--color-border)",
+        "backgroundColor": "var(--color-bg-cream)",
+        "fontFamily": "var(--font-mono)",
+        "fontSize": "0.78rem",
+        "color": "var(--color-text-muted)"
+      },
+      "children": [
+        { "tagName": "span", "style": { "color": "var(--color-primary)" }, "textContent": "▸" },
+        { "tagName": "span", "textContent": "${state.note}" }
+      ]
+    }
+  ]
+}

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

@@ -1,6 +1,7 @@
 {
   "tagName": "co-cta",
   "state": {
+    "kicker": "$ ./enroll --now",
     "heading": "",
     "text": "",
     "cta": "Enroll Now",
@@ -9,7 +10,9 @@
   },
   "style": {
     "display": "block",
-    "backgroundImage": "linear-gradient(120deg, var(--color-bg-dark) 0%, #1e293b 55%, var(--color-primary) 130%)",
+    "position": "relative",
+    "overflow": "hidden",
+    "backgroundColor": "var(--color-ink)",
     "color": "var(--color-text-white)",
     "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
     "textAlign": "center"
@@ -17,16 +20,51 @@
   "children": [
     {
       "tagName": "div",
-      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "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 60% 100% at 50% 120%, rgba(79,70,229,0.4), transparent 62%)",
+        "pointerEvents": "none"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "2",
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto"
+      },
       "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "fontFamily": "var(--font-mono)",
+            "fontSize": "0.85rem",
+            "color": "var(--color-accent)",
+            "margin": "0 0 1.1rem"
+          },
+          "textContent": "${state.kicker}"
+        },
         {
           "tagName": "h2",
           "style": {
             "fontFamily": "var(--font-heading)",
             "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
             "fontWeight": "800",
-            "lineHeight": "1.15",
-            "letterSpacing": "-0.02em",
+            "lineHeight": "1.12",
+            "letterSpacing": "-0.03em",
             "margin": "0 0 1rem"
           },
           "textContent": "${state.heading}"
@@ -35,9 +73,10 @@
           "tagName": "p",
           "style": {
             "fontSize": "1.1rem",
-            "lineHeight": "1.7",
-            "opacity": "0.85",
-            "margin": "0 0 2rem"
+            "lineHeight": "1.65",
+            "color": "rgba(255,255,255,0.72)",
+            "margin": "0 auto 2rem",
+            "maxWidth": "54ch"
           },
           "textContent": "${state.text}"
         },
@@ -45,28 +84,41 @@
           "tagName": "a",
           "attributes": { "href": "${state.ctaHref}" },
           "style": {
-            "display": "inline-block",
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.5rem",
             "backgroundColor": "var(--color-primary)",
             "color": "var(--color-text-white)",
-            "padding": "0.9rem 2.25rem",
-            "borderRadius": "var(--radius)",
+            "padding": "0.95rem 2.25rem",
+            "borderRadius": "999px",
             "fontSize": "1.05rem",
-            "fontWeight": "700",
+            "fontWeight": "600",
             "textDecoration": "none",
-            "transition": "background-color 0.15s",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+            "boxShadow": "0 16px 36px -12px rgba(79,70,229,1)",
+            "transition": "transform 0.15s, background-color 0.15s",
+            ":hover": {
+              "backgroundColor": "var(--color-primary-hover)",
+              "transform": "translateY(-2px)"
+            }
           },
           "textContent": "${state.cta}"
         },
         {
           "tagName": "p",
           "style": {
-            "display": "${state.note ? 'block' : 'none'}",
-            "margin": "1.25rem 0 0",
-            "fontSize": "0.9rem",
-            "opacity": "0.7"
+            "display": "${state.note ? 'flex' : 'none'}",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "gap": "0.5rem",
+            "margin": "1.35rem 0 0",
+            "fontFamily": "var(--font-mono)",
+            "fontSize": "0.8rem",
+            "color": "rgba(255,255,255,0.55)"
           },
-          "textContent": "${state.note}"
+          "children": [
+            { "tagName": "span", "style": { "color": "var(--color-accent)" }, "textContent": "▸" },
+            { "tagName": "span", "textContent": "${state.note}" }
+          ]
         }
       ]
     }

package/sites/course/components/co-curriculum-accordion.json

@@ -174,7 +174,7 @@
             "gap": "1rem",
             "padding": "1.1rem 1.35rem",
             "border": "none",
-            "background": "${state.open === 0 ? 'rgba(37,99,235,0.06)' : 'transparent'}",
+            "background": "${state.open === 0 ? 'rgba(79,70,229,0.06)' : 'transparent'}",
             "cursor": "pointer",
             "textAlign": "left",
             "font": "inherit",
@@ -191,7 +191,7 @@
                 "width": "2.25rem",
                 "height": "2.25rem",
                 "borderRadius": "0.5rem",
-                "backgroundColor": "${state.open === 0 ? 'var(--color-primary)' : 'rgba(37,99,235,0.1)'}",
+                "backgroundColor": "${state.open === 0 ? 'var(--color-primary)' : 'rgba(79,70,229,0.1)'}",
                 "color": "${state.open === 0 ? 'var(--color-text-white)' : 'var(--color-primary)'}",
                 "fontFamily": "var(--font-heading)",
                 "fontWeight": "800",
@@ -394,7 +394,7 @@
             "gap": "1rem",
             "padding": "1.1rem 1.35rem",
             "border": "none",
-            "background": "${state.open === 1 ? 'rgba(37,99,235,0.06)' : 'transparent'}",
+            "background": "${state.open === 1 ? 'rgba(79,70,229,0.06)' : 'transparent'}",
             "cursor": "pointer",
             "textAlign": "left",
             "font": "inherit",
@@ -411,7 +411,7 @@
                 "width": "2.25rem",
                 "height": "2.25rem",
                 "borderRadius": "0.5rem",
-                "backgroundColor": "${state.open === 1 ? 'var(--color-primary)' : 'rgba(37,99,235,0.1)'}",
+                "backgroundColor": "${state.open === 1 ? 'var(--color-primary)' : 'rgba(79,70,229,0.1)'}",
                 "color": "${state.open === 1 ? 'var(--color-text-white)' : 'var(--color-primary)'}",
                 "fontFamily": "var(--font-heading)",
                 "fontWeight": "800",
@@ -614,7 +614,7 @@
             "gap": "1rem",
             "padding": "1.1rem 1.35rem",
             "border": "none",
-            "background": "${state.open === 2 ? 'rgba(37,99,235,0.06)' : 'transparent'}",
+            "background": "${state.open === 2 ? 'rgba(79,70,229,0.06)' : 'transparent'}",
             "cursor": "pointer",
             "textAlign": "left",
             "font": "inherit",
@@ -631,7 +631,7 @@
                 "width": "2.25rem",
                 "height": "2.25rem",
                 "borderRadius": "0.5rem",
-                "backgroundColor": "${state.open === 2 ? 'var(--color-primary)' : 'rgba(37,99,235,0.1)'}",
+                "backgroundColor": "${state.open === 2 ? 'var(--color-primary)' : 'rgba(79,70,229,0.1)'}",
                 "color": "${state.open === 2 ? 'var(--color-text-white)' : 'var(--color-primary)'}",
                 "fontFamily": "var(--font-heading)",
                 "fontWeight": "800",
@@ -834,7 +834,7 @@
             "gap": "1rem",
             "padding": "1.1rem 1.35rem",
             "border": "none",
-            "background": "${state.open === 3 ? 'rgba(37,99,235,0.06)' : 'transparent'}",
+            "background": "${state.open === 3 ? 'rgba(79,70,229,0.06)' : 'transparent'}",
             "cursor": "pointer",
             "textAlign": "left",
             "font": "inherit",
@@ -851,7 +851,7 @@
                 "width": "2.25rem",
                 "height": "2.25rem",
                 "borderRadius": "0.5rem",
-                "backgroundColor": "${state.open === 3 ? 'var(--color-primary)' : 'rgba(37,99,235,0.1)'}",
+                "backgroundColor": "${state.open === 3 ? 'var(--color-primary)' : 'rgba(79,70,229,0.1)'}",
                 "color": "${state.open === 3 ? 'var(--color-text-white)' : 'var(--color-primary)'}",
                 "fontFamily": "var(--font-heading)",
                 "fontWeight": "800",
@@ -1054,7 +1054,7 @@
             "gap": "1rem",
             "padding": "1.1rem 1.35rem",
             "border": "none",
-            "background": "${state.open === 4 ? 'rgba(37,99,235,0.06)' : 'transparent'}",
+            "background": "${state.open === 4 ? 'rgba(79,70,229,0.06)' : 'transparent'}",
             "cursor": "pointer",
             "textAlign": "left",
             "font": "inherit",
@@ -1071,7 +1071,7 @@
                 "width": "2.25rem",
                 "height": "2.25rem",
                 "borderRadius": "0.5rem",
-                "backgroundColor": "${state.open === 4 ? 'var(--color-primary)' : 'rgba(37,99,235,0.1)'}",
+                "backgroundColor": "${state.open === 4 ? 'var(--color-primary)' : 'rgba(79,70,229,0.1)'}",
                 "color": "${state.open === 4 ? 'var(--color-text-white)' : 'var(--color-primary)'}",
                 "fontFamily": "var(--font-heading)",
                 "fontWeight": "800",
@@ -1274,7 +1274,7 @@
             "gap": "1rem",
             "padding": "1.1rem 1.35rem",
             "border": "none",
-            "background": "${state.open === 5 ? 'rgba(37,99,235,0.06)' : 'transparent'}",
+            "background": "${state.open === 5 ? 'rgba(79,70,229,0.06)' : 'transparent'}",
             "cursor": "pointer",
             "textAlign": "left",
             "font": "inherit",
@@ -1291,7 +1291,7 @@
                 "width": "2.25rem",
                 "height": "2.25rem",
                 "borderRadius": "0.5rem",
-                "backgroundColor": "${state.open === 5 ? 'var(--color-primary)' : 'rgba(37,99,235,0.1)'}",
+                "backgroundColor": "${state.open === 5 ? 'var(--color-primary)' : 'rgba(79,70,229,0.1)'}",
                 "color": "${state.open === 5 ? 'var(--color-text-white)' : 'var(--color-primary)'}",
                 "fontFamily": "var(--font-heading)",
                 "fontWeight": "800",

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

@@ -8,8 +8,9 @@
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
+    "backgroundColor": "var(--color-ink)",
     "color": "var(--color-text-white)",
+    "borderTop": "1px solid var(--color-terminal-line)",
     "padding": "3.5rem 1.5rem 2rem"
   },
   "children": [
@@ -30,16 +31,49 @@
             {
               "tagName": "div",
               "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.4rem",
-                "fontWeight": "800",
-                "marginBottom": "0.75rem"
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.6rem",
+                "marginBottom": "0.9rem"
               },
-              "textContent": "${state.brand}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "width": "1.9rem",
+                    "height": "1.9rem",
+                    "borderRadius": "0.5rem",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "fontFamily": "var(--font-mono)",
+                    "fontSize": "0.8rem",
+                    "fontWeight": "700"
+                  },
+                  "textContent": "</>"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.3rem",
+                    "fontWeight": "800",
+                    "letterSpacing": "-0.02em"
+                  },
+                  "textContent": "${state.brand}"
+                }
+              ]
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.75", "maxWidth": "38ch" },
+              "style": {
+                "margin": "0",
+                "color": "rgba(255,255,255,0.6)",
+                "maxWidth": "40ch",
+                "lineHeight": "1.65"
+              },
               "textContent": "${state.tagline}"
             }
           ]
@@ -50,22 +84,35 @@
             {
               "tagName": "div",
               "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
+                "fontFamily": "var(--font-mono)",
                 "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "color": "var(--color-accent)",
+                "marginBottom": "0.9rem"
               },
-              "textContent": "Admissions"
+              "textContent": "// admissions"
             },
             {
-              "tagName": "p",
-              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
+              "tagName": "a",
+              "attributes": { "href": "mailto:admissions@craftcode.academy" },
+              "style": {
+                "display": "block",
+                "color": "rgba(255,255,255,0.82)",
+                "textDecoration": "none",
+                "marginBottom": "0.4rem",
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.85rem",
+                ":hover": { "color": "var(--color-text-white)" }
+              },
               "textContent": "${state.email}"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.85" },
+              "style": {
+                "margin": "0",
+                "color": "rgba(255,255,255,0.82)",
+                "fontFamily": "var(--font-mono)",
+                "fontSize": "0.85rem"
+              },
               "textContent": "${state.phone}"
             }
           ]
@@ -76,23 +123,22 @@
             {
               "tagName": "div",
               "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
+                "fontFamily": "var(--font-mono)",
                 "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "color": "var(--color-accent)",
+                "marginBottom": "0.9rem"
               },
-              "textContent": "Explore"
+              "textContent": "// explore"
             },
             {
               "tagName": "a",
               "attributes": { "href": "/curriculum/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "color": "rgba(255,255,255,0.82)",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.4rem",
+                ":hover": { "color": "var(--color-text-white)" }
               },
               "textContent": "Curriculum"
             },
@@ -101,10 +147,10 @@
               "attributes": { "href": "/about/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "color": "rgba(255,255,255,0.82)",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.4rem",
+                ":hover": { "color": "var(--color-text-white)" }
               },
               "textContent": "About"
             },
@@ -113,9 +159,9 @@
               "attributes": { "href": "/enroll/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
-                "textDecoration": "none"
+                "color": "rgba(255,255,255,0.82)",
+                "textDecoration": "none",
+                ":hover": { "color": "var(--color-text-white)" }
               },
               "textContent": "Enroll"
             }
@@ -129,15 +175,19 @@
         "maxWidth": "var(--max-width)",
         "margin": "2.5rem auto 0",
         "paddingTop": "1.5rem",
-        "borderTop": "1px solid rgba(255, 255, 255, 0.15)",
-        "fontSize": "0.85rem",
-        "opacity": "0.6"
+        "borderTop": "1px solid var(--color-terminal-line)",
+        "fontFamily": "var(--font-mono)",
+        "fontSize": "0.8rem",
+        "color": "rgba(255,255,255,0.5)"
       },
       "children": [
         {
           "tagName": "p",
           "style": { "margin": "0" },
-          "textContent": "© Craft & Code Academy. Built with Jx."
+          "children": [
+            { "tagName": "span", "style": { "color": "var(--color-accent)" }, "textContent": "$ " },
+            { "tagName": "span", "textContent": "echo \"© Craft & Code Academy — built with Jx\"" }
+          ]
         }
       ]
     }