@jxsuite/starters 0.34.0 → 0.35.0

package/sites/event/components/ev-speaker-card.json

@@ -8,29 +8,47 @@
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-white)",
+    "position": "relative",
+    "backgroundColor": "var(--color-bg-elev)",
     "border": "1px solid var(--color-border)",
     "borderRadius": "var(--radius)",
     "overflow": "hidden",
-    "transition": "transform 0.15s, box-shadow 0.15s",
+    "transition": "transform 0.2s, box-shadow 0.2s, border-color 0.2s",
     ":hover": {
-      "transform": "translateY(-4px)",
-      "boxShadow": "0 20px 45px rgba(124, 58, 237, 0.16)"
+      "transform": "translateY(-5px)",
+      "borderColor": "rgba(255,61,154,0.55)",
+      "boxShadow": "0 26px 60px -22px var(--glow)"
     }
   },
   "children": [
     {
       "tagName": "div",
-      "style": { "position": "relative", "aspectRatio": "1 / 1", "overflow": "hidden" },
+      "style": {
+        "position": "relative",
+        "aspectRatio": "4 / 5",
+        "overflow": "hidden",
+        "backgroundColor": "var(--color-bg-elev2)"
+      },
       "children": [
         {
           "tagName": "img",
-          "attributes": { "src": "${state.photo}", "alt": "${state.name}", "loading": "lazy" },
+          "attributes": {
+            "src": "${state.photo}",
+            "alt": "${state.name}",
+            "width": "1000",
+            "height": "1400",
+            "loading": "lazy"
+          },
           "style": {
+            "position": "absolute",
+            "inset": "0",
             "width": "100%",
             "height": "100%",
             "objectFit": "cover",
-            "display": "block"
+            "display": "block",
+            "filter": "saturate(1.05) contrast(1.02)",
+            "transition": "transform 0.35s ease",
+            ":hover": { "transform": "scale(1.06)" }
           }
         },
         {
@@ -38,22 +56,37 @@
           "style": {
             "position": "absolute",
             "inset": "0",
-            "background": "linear-gradient(180deg, transparent 55%, rgba(20, 11, 46, 0.55) 100%)"
+            "background": "linear-gradient(180deg, rgba(34,224,255,0.18) 0%, transparent 30%, rgba(10,7,17,0.15) 55%, rgba(10,7,17,0.9) 100%)",
+            "pointerEvents": "none"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "left": "0",
+            "right": "0",
+            "bottom": "0",
+            "height": "3px",
+            "background": "var(--grad)",
+            "pointerEvents": "none"
           }
         }
       ]
     },
     {
       "tagName": "div",
-      "style": { "padding": "1.25rem 1.4rem 1.6rem" },
+      "style": { "padding": "1.3rem 1.4rem 1.6rem" },
       "children": [
         {
           "tagName": "h3",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "1.25rem",
+            "fontSize": "1.3rem",
             "fontWeight": "700",
-            "margin": "0 0 0.25rem"
+            "letterSpacing": "-0.01em",
+            "margin": "0 0 0.3rem",
+            "color": "var(--color-text-primary)"
           },
           "textContent": "${state.name}"
         },
@@ -62,21 +95,34 @@
           "style": {
             "margin": "0 0 0.75rem",
             "fontSize": "0.9rem",
-            "fontWeight": "500",
-            "color": "var(--color-primary)"
+            "fontWeight": "600",
+            "background": "var(--grad)",
+            "backgroundClip": "text",
+            "webkitBackgroundClip": "text",
+            "webkitTextFillColor": "transparent",
+            "color": "var(--color-accent)"
           },
           "textContent": "${state.title}"
         },
         {
           "tagName": "p",
           "style": {
-            "display": "${state.topic ? 'block' : 'none'}",
+            "display": "${state.topic ? 'flex' : 'none'}",
+            "gap": "0.5rem",
+            "alignItems": "baseline",
             "margin": "0",
-            "fontSize": "0.95rem",
-            "lineHeight": "1.6",
+            "fontSize": "0.94rem",
+            "lineHeight": "1.55",
             "color": "var(--color-text-muted)"
           },
-          "textContent": "${state.topic}"
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "color": "var(--color-lime)", "fontWeight": "700" },
+              "textContent": "▸"
+            },
+            { "tagName": "span", "textContent": "${state.topic}" }
+          ]
         }
       ]
     }

package/sites/event/components/ev-sponsors.json

@@ -0,0 +1,131 @@
+{
+  "tagName": "ev-sponsors",
+  "state": {
+    "label": "Backed by the teams building the modern web",
+    "logo1": "◈ Northwind",
+    "logo2": "✦ Lumen",
+    "logo3": "▲ Apex",
+    "logo4": "❖ Corva",
+    "logo5": "⬡ Hivebase",
+    "logo6": "◐ Kestrel"
+  },
+  "style": {
+    "display": "block",
+    "padding": "clamp(2.5rem, 5vw, 3.5rem) 1.5rem",
+    "borderTop": "1px solid var(--color-border)",
+    "borderBottom": "1px solid var(--color-border)",
+    "backgroundColor": "var(--color-bg-cream)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "maxWidth": "var(--max-width)", "margin": "0 auto", "textAlign": "center" },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "0.78rem",
+            "fontWeight": "700",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.14em",
+            "color": "var(--color-text-muted)",
+            "margin": "0 0 1.85rem"
+          },
+          "textContent": "${state.label}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexWrap": "wrap",
+            "justifyContent": "center",
+            "alignItems": "center",
+            "gap": "clamp(1.5rem, 5vw, 3.5rem)"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.7",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "1" }
+              },
+              "textContent": "${state.logo1}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.7",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "1" }
+              },
+              "textContent": "${state.logo2}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.7",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "1" }
+              },
+              "textContent": "${state.logo3}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.7",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "1" }
+              },
+              "textContent": "${state.logo4}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.7",
+                "transition": "opacity 0.15s",
+                "@--sm": { "display": "none" },
+                ":hover": { "opacity": "1" }
+              },
+              "textContent": "${state.logo5}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.25rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-primary)",
+                "opacity": "0.7",
+                "transition": "opacity 0.15s",
+                "@--sm": { "display": "none" },
+                ":hover": { "opacity": "1" }
+              },
+              "textContent": "${state.logo6}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/event/components/ev-stat.json

@@ -7,33 +7,38 @@
   "style": {
     "display": "block",
     "textAlign": "center",
-    "padding": "0.5rem"
+    "padding": "1.4rem 0.75rem",
+    "borderRadius": "var(--radius)",
+    "border": "1px solid var(--color-border)",
+    "background": "linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
+    "transition": "border-color 0.18s, transform 0.18s",
+    ":hover": { "borderColor": "rgba(255,61,154,0.45)", "transform": "translateY(-2px)" }
   },
   "children": [
     {
       "tagName": "div",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(2.25rem, 5vw, 3.25rem)",
-        "fontWeight": "700",
+        "fontSize": "clamp(2.4rem, 5vw, 3.4rem)",
+        "fontWeight": "800",
         "lineHeight": "1",
-        "letterSpacing": "-0.02em",
-        "background": "linear-gradient(135deg, var(--color-primary), var(--color-accent))",
-        "WebkitBackgroundClip": "text",
+        "letterSpacing": "-0.03em",
+        "background": "var(--grad)",
         "backgroundClip": "text",
-        "WebkitTextFillColor": "transparent",
-        "color": "var(--color-primary)"
+        "webkitBackgroundClip": "text",
+        "webkitTextFillColor": "transparent",
+        "color": "var(--color-accent)"
       },
       "textContent": "${state.value}"
     },
     {
       "tagName": "div",
       "style": {
-        "marginTop": "0.5rem",
-        "fontSize": "0.9rem",
-        "fontWeight": "500",
+        "marginTop": "0.55rem",
+        "fontSize": "0.82rem",
+        "fontWeight": "600",
         "textTransform": "uppercase",
-        "letterSpacing": "0.08em",
+        "letterSpacing": "0.1em",
         "color": "var(--color-text-muted)"
       },
       "textContent": "${state.label}"

package/sites/event/components/ev-ticket-card.json

@@ -9,7 +9,7 @@
     "perk2": "",
     "perk3": "",
     "perk4": "",
-    "cta": "Get Tickets",
+    "cta": "Get tickets",
     "ctaHref": "/tickets/",
     "featured": false,
     "badge": "Most popular"
@@ -18,11 +18,15 @@
     "display": "flex",
     "flexDirection": "column",
     "position": "relative",
-    "padding": "2rem",
+    "padding": "2.1rem",
     "borderRadius": "var(--radius)",
-    "border": "${state.featured ? '2px solid var(--color-primary)' : '1px solid var(--color-border)'}",
-    "backgroundColor": "${state.featured ? 'var(--color-bg-white)' : 'var(--color-bg-white)'}",
-    "boxShadow": "${state.featured ? '0 24px 60px rgba(124, 58, 237, 0.18)' : '0 4px 20px rgba(23, 18, 43, 0.05)'}"
+    "border": "${state.featured ? '2px solid transparent' : '1px solid var(--color-border)'}",
+    "backgroundColor": "${state.featured ? 'var(--color-bg-elev)' : 'var(--color-bg-elev)'}",
+    "backgroundImage": "${state.featured ? 'linear-gradient(var(--color-bg-elev), var(--color-bg-elev)), var(--grad)' : 'none'}",
+    "backgroundOrigin": "border-box",
+    "backgroundClip": "${state.featured ? 'padding-box, border-box' : 'border-box'}",
+    "boxShadow": "${state.featured ? '0 30px 70px -22px var(--glow)' : 'none'}",
+    "transform": "${state.featured ? 'translateY(-6px)' : 'none'}"
   },
   "children": [
     {
@@ -33,15 +37,16 @@
         "top": "-0.85rem",
         "left": "50%",
         "transform": "translateX(-50%)",
-        "background": "linear-gradient(135deg, var(--color-primary), var(--color-accent))",
-        "color": "var(--color-text-white)",
-        "fontSize": "0.72rem",
-        "fontWeight": "700",
-        "letterSpacing": "0.08em",
+        "background": "var(--grad-btn)",
+        "color": "#ffffff",
+        "fontSize": "0.7rem",
+        "fontWeight": "800",
+        "letterSpacing": "0.1em",
         "textTransform": "uppercase",
-        "padding": "0.35rem 0.9rem",
+        "padding": "0.35rem 0.95rem",
         "borderRadius": "999px",
-        "whiteSpace": "nowrap"
+        "whiteSpace": "nowrap",
+        "boxShadow": "0 10px 26px -8px var(--glow)"
       },
       "textContent": "${state.badge}"
     },
@@ -49,16 +54,18 @@
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.35rem",
+        "fontSize": "1.4rem",
         "fontWeight": "700",
-        "margin": "0 0 0.4rem"
+        "letterSpacing": "-0.01em",
+        "margin": "0 0 0.4rem",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.tier}"
     },
     {
       "tagName": "p",
       "style": {
-        "margin": "0 0 1.25rem",
+        "margin": "0 0 1.35rem",
         "fontSize": "0.95rem",
         "lineHeight": "1.55",
         "color": "var(--color-text-muted)"
@@ -70,17 +77,23 @@
       "style": {
         "display": "flex",
         "alignItems": "baseline",
-        "gap": "0.35rem",
-        "marginBottom": "1.5rem"
+        "gap": "0.4rem",
+        "marginBottom": "1.6rem"
       },
       "children": [
         {
           "tagName": "span",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "2.5rem",
-            "fontWeight": "700",
-            "letterSpacing": "-0.02em"
+            "fontSize": "2.7rem",
+            "fontWeight": "800",
+            "letterSpacing": "-0.03em",
+            "lineHeight": "1",
+            "color": "${state.featured ? 'transparent' : 'var(--color-text-primary)'}",
+            "background": "${state.featured ? 'var(--grad)' : 'none'}",
+            "backgroundClip": "${state.featured ? 'text' : 'border-box'}",
+            "webkitBackgroundClip": "${state.featured ? 'text' : 'border-box'}",
+            "webkitTextFillColor": "${state.featured ? 'transparent' : 'var(--color-text-primary)'}"
           },
           "textContent": "${state.price}"
         },
@@ -95,11 +108,11 @@
       "tagName": "ul",
       "style": {
         "listStyle": "none",
-        "margin": "0 0 1.75rem",
+        "margin": "0 0 1.85rem",
         "padding": "0",
         "display": "flex",
         "flexDirection": "column",
-        "gap": "0.65rem",
+        "gap": "0.7rem",
         "flex": "1"
       },
       "children": [
@@ -107,14 +120,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk1 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "color": "var(--color-text-primary)"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-primary)", "fontWeight": "700" },
+              "style": { "color": "var(--color-lime)", "fontWeight": "800" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk1}" }
@@ -124,14 +138,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk2 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "color": "var(--color-text-primary)"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-primary)", "fontWeight": "700" },
+              "style": { "color": "var(--color-lime)", "fontWeight": "800" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk2}" }
@@ -141,14 +156,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk3 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "color": "var(--color-text-primary)"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-primary)", "fontWeight": "700" },
+              "style": { "color": "var(--color-lime)", "fontWeight": "800" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk3}" }
@@ -158,14 +174,15 @@
           "tagName": "li",
           "style": {
             "display": "${state.perk4 ? 'flex' : 'none'}",
-            "gap": "0.6rem",
+            "gap": "0.65rem",
             "alignItems": "flex-start",
-            "fontSize": "0.95rem"
+            "fontSize": "0.95rem",
+            "color": "var(--color-text-primary)"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "color": "var(--color-primary)", "fontWeight": "700" },
+              "style": { "color": "var(--color-lime)", "fontWeight": "800" },
               "textContent": "✓"
             },
             { "tagName": "span", "textContent": "${state.perk4}" }
@@ -179,15 +196,16 @@
       "style": {
         "display": "block",
         "textAlign": "center",
-        "padding": "0.85rem 1.5rem",
+        "padding": "0.9rem 1.5rem",
         "borderRadius": "999px",
         "fontSize": "1rem",
-        "fontWeight": "600",
+        "fontWeight": "700",
         "textDecoration": "none",
-        "transition": "transform 0.15s, box-shadow 0.15s",
-        "color": "${state.featured ? 'var(--color-text-white)' : 'var(--color-primary)'}",
-        "background": "${state.featured ? 'linear-gradient(135deg, var(--color-primary), var(--color-accent))' : 'transparent'}",
-        "border": "${state.featured ? 'none' : '1px solid var(--color-primary)'}",
+        "transition": "transform 0.15s, box-shadow 0.15s, background-color 0.15s",
+        "color": "${state.featured ? '#ffffff' : 'var(--color-text-primary)'}",
+        "background": "${state.featured ? 'var(--grad-btn)' : 'rgba(255,255,255,0.04)'}",
+        "border": "${state.featured ? 'none' : '1px solid var(--color-border)'}",
+        "boxShadow": "${state.featured ? '0 12px 30px -8px var(--glow)' : 'none'}",
         ":hover": { "transform": "translateY(-2px)" }
       },
       "textContent": "${state.cta}"

package/sites/event/components/ev-venue.json

@@ -27,19 +27,46 @@
           "style": { "order": "${state.reverse ? '2' : '1'}" },
           "children": [
             {
-              "tagName": "img",
-              "attributes": {
-                "src": "${state.image}",
-                "alt": "${state.imageAlt}",
-                "loading": "lazy"
-              },
+              "tagName": "div",
               "style": {
-                "width": "100%",
-                "height": "auto",
-                "borderRadius": "var(--radius)",
-                "display": "block",
-                "boxShadow": "0 20px 55px rgba(23, 18, 43, 0.18)"
-              }
+                "position": "relative",
+                "borderRadius": "1.15rem",
+                "padding": "0.4rem",
+                "background": "linear-gradient(150deg, rgba(34,224,255,0.55), rgba(168,85,247,0.35) 45%, rgba(255,61,154,0.5))",
+                "boxShadow": "0 30px 70px -30px rgba(0,0,0,0.8), 0 0 80px -30px var(--glow-cyan)"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "position": "relative",
+                    "borderRadius": "0.85rem",
+                    "overflow": "hidden",
+                    "aspectRatio": "3 / 2",
+                    "backgroundColor": "var(--color-bg-elev)"
+                  },
+                  "children": [
+                    {
+                      "tagName": "img",
+                      "attributes": {
+                        "src": "${state.image}",
+                        "alt": "${state.imageAlt}",
+                        "width": "1600",
+                        "height": "1067",
+                        "loading": "lazy"
+                      },
+                      "style": {
+                        "position": "absolute",
+                        "inset": "0",
+                        "width": "100%",
+                        "height": "100%",
+                        "objectFit": "cover",
+                        "display": "block"
+                      }
+                    }
+                  ]
+                }
+              ]
             }
           ]
         },

package/sites/event/layouts/base.json

@@ -8,7 +8,7 @@
     "minHeight": "100vh",
     "display": "flex",
     "flexDirection": "column",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-bg)"
   },
   "children": [
     { "tagName": "ev-nav" },