@jxsuite/starters 0.34.0

package/sites/event/pages/tickets.md

@@ -0,0 +1,33 @@
+---
+title: "Tickets — Horizon Conf 2026"
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::ev-section-header{props.eyebrow="Tickets" props.heading="Pick your pass" props.subheading="One day, one venue, every track. Early-bird pricing ends April 30 — prices step up after that."}
+:::::
+
+:::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+::::div{style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.alignItems="start" style.--md.gridTemplateColumns="1fr" style.--md.maxWidth="440px" style.--md.margin="0 auto"}
+::ev-ticket-card{props.tier="General" props.price="$149" props.period="/ early bird" props.description="Full access to both stages for the day." props.perk1="Access to all main-stage talks" props.perk2="Hallway track & meetups" props.perk3="Lunch and all-day coffee" props.perk4="Talk recordings after the event" props.cta="Get General" props.ctaHref="/tickets/"}
+
+::ev-ticket-card{props.tier="Pro" props.price="$299" props.period="/ early bird" props.description="Everything in General, plus the hands-on workshop track." props.featured="true" props.badge="Most popular" props.perk1="Everything in General" props.perk2="Reserved seat in every workshop" props.perk3="Speaker Q&A lounge access" props.perk4="Horizon swag kit" props.cta="Get Pro" props.ctaHref="/tickets/"}
+
+::ev-ticket-card{props.tier="Team" props.price="$1,200" props.period="/ 5 seats" props.description="Bring the whole crew — five Pro passes at a group rate." props.perk1="5 × Pro passes" props.perk2="Reserved team table at lunch" props.perk3="Invite to the sponsor mixer" props.perk4="One extra pass for a guest" props.cta="Get Team" props.ctaHref="/tickets/"}
+::::
+:::::
+
+:::::section{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.padding="clamp(2rem, 5vw, 3rem) 1.5rem"}
+::ev-section-header{props.heading="Good to know" props.align="left"}
+
+::::div{style.display="grid" style.gridTemplateColumns="1fr 1fr" style.gap="1.25rem" style.--sm.gridTemplateColumns="1fr"}
+::ev-feature{props.icon="↩️" props.title="Refunds & transfers" props.text="Full refund up to 14 days before the event. Passes are transferable any time — just email us the name."}
+
+::ev-feature{props.icon="🎓" props.title="Student & community" props.text="Students, non-profits, and community organizers get 50% off. Apply with a quick form after checkout."}
+
+::ev-feature{props.icon="🧾" props.title="Invoices welcome" props.text="Need to expense it? We provide company invoices and accept POs for Team passes."}
+
+::ev-feature{props.icon="♿" props.title="Accessible by design" props.text="Step-free venue, captioned talks, and a quiet room. Tell us what you need and we'll sort it."}
+::::
+:::::
+
+::ev-cta{props.eyebrow="See you June 12" props.heading="Grab your pass before prices rise" props.text="Early-bird seats are limited and last year sold out. Lock in your ticket today." props.cta="Get Tickets" props.ctaHref="/tickets/" props.note="Questions? hello@horizonconf.example"}

package/sites/event/project.json

@@ -0,0 +1,103 @@
+{
+  "name": "Horizon Conf 2026",
+  "url": "https://example.com",
+  "defaults": {
+    "layout": "./layouts/base.json",
+    "lang": "en"
+  },
+  "$head": [
+    {
+      "tagName": "meta",
+      "attributes": { "name": "viewport", "content": "width=device-width, initial-scale=1" }
+    },
+    {
+      "tagName": "meta",
+      "attributes": {
+        "name": "description",
+        "content": "Horizon Conf 2026 — a one-day tech and design conference. Two stages, hands-on workshops, and the people building what's next. Save the date: June 12, 2026."
+      }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "icon", "href": "/favicon.svg" }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "preconnect", "href": "https://fonts.googleapis.com" }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "preconnect", "href": "https://fonts.gstatic.com", "crossorigin": "" }
+    },
+    {
+      "tagName": "link",
+      "attributes": {
+        "rel": "stylesheet",
+        "href": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
+      }
+    }
+  ],
+  "$media": {
+    "--": "1200px",
+    "--lg": "(max-width: 1024px)",
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--color-primary": "#7c3aed",
+    "--color-primary-hover": "#6d28d9",
+    "--color-ink": "#17122b",
+    "--color-bg-dark": "#140b2e",
+    "--color-bg-cream": "#f5f3ff",
+    "--color-bg-white": "#ffffff",
+    "--color-text-primary": "#17122b",
+    "--color-text-white": "#ffffff",
+    "--color-text-muted": "#6b7280",
+    "--color-border": "#e5e0f5",
+    "--color-accent": "#ec4899",
+    "--font-heading": "'Space Grotesk', 'Segoe UI', system-ui, sans-serif",
+    "--max-width": "1200px",
+    "--max-width-narrow": "820px",
+    "--radius": "0.75rem",
+    "margin": "0",
+    "padding": "0",
+    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "lineHeight": "1.6",
+    "color": "var(--color-text-primary)",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "imports": {
+    "Markdown": "@jxsuite/parser/Markdown.class.json",
+    "ContentCollection": "@jxsuite/parser/ContentCollection.class.json"
+  },
+  "images": {
+    "optimize": true,
+    "widths": [320, 640, 960, 1280, 1920],
+    "formats": ["webp", "avif"],
+    "quality": { "webp": 80, "avif": 65, "jpeg": 80, "png": 80 },
+    "sizes": "(max-width: 768px) 100vw, 50vw",
+    "lazyLoad": true
+  },
+  "contentTypes": {
+    "sessions": {
+      "source": "./content/sessions/",
+      "format": "Markdown",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": { "type": "string" },
+          "time": { "type": "string" },
+          "track": { "type": "string" },
+          "speaker": { "type": "string" },
+          "order": { "type": "number" }
+        },
+        "required": ["title", "track"]
+      }
+    }
+  },
+  "build": {
+    "outDir": "./dist",
+    "format": "directory",
+    "trailingSlash": "always"
+  }
+}

package/sites/event/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#7c3aed"/>
+  <path d="M6 22L14 6l3 9 3-5 6 12z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
+  <circle cx="23" cy="9" r="2.2" fill="#ec4899"/>
+</svg>

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

@@ -0,0 +1,112 @@
+{
+  "tagName": "fs-class-card",
+  "state": {
+    "name": "",
+    "level": "",
+    "time": "",
+    "instructor": "",
+    "focus": ""
+  },
+  "style": {
+    "display": "flex",
+    "flexDirection": "column",
+    "height": "100%",
+    "padding": "1.6rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "boxShadow": "0 4px 20px rgba(31,23,41,0.05)",
+    "transition": "transform 0.15s, box-shadow 0.15s",
+    ":hover": {
+      "transform": "translateY(-3px)",
+      "boxShadow": "0 12px 32px rgba(31,23,41,0.10)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "justifyContent": "space-between",
+        "alignItems": "flex-start",
+        "gap": "0.75rem",
+        "marginBottom": "0.75rem"
+      },
+      "children": [
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.3rem",
+            "fontWeight": "600",
+            "margin": "0"
+          },
+          "textContent": "${state.name}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.level ? 'inline-block' : 'none'}",
+            "flexShrink": "0",
+            "backgroundColor": "rgba(13,148,136,0.12)",
+            "color": "var(--color-accent)",
+            "fontSize": "0.72rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.06em",
+            "padding": "0.3rem 0.65rem",
+            "borderRadius": "999px",
+            "whiteSpace": "nowrap"
+          },
+          "textContent": "${state.level}"
+        }
+      ]
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.focus ? 'block' : 'none'}",
+        "margin": "0 0 1.1rem",
+        "color": "var(--color-text-muted)",
+        "fontSize": "0.95rem",
+        "lineHeight": "1.6"
+      },
+      "textContent": "${state.focus}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "marginTop": "auto",
+        "paddingTop": "1rem",
+        "borderTop": "1px solid var(--color-border)",
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "0.4rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "0.5rem",
+            "fontWeight": "600",
+            "color": "var(--color-primary)"
+          },
+          "children": [
+            { "tagName": "span", "style": { "fontSize": "1rem" }, "textContent": "🕑" },
+            { "tagName": "span", "textContent": "${state.time}" }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "fontSize": "0.9rem",
+            "color": "var(--color-text-muted)"
+          },
+          "textContent": "with ${state.instructor}"
+        }
+      ]
+    }
+  ]
+}

package/sites/fitness-studio/components/fs-class-grid.json

@@ -0,0 +1,36 @@
+{
+  "tagName": "fs-class-grid",
+  "state": {
+    "heading": ""
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto"
+  },
+  "children": [
+    {
+      "tagName": "h3",
+      "style": {
+        "display": "${state.heading ? 'block' : 'none'}",
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.4rem",
+        "fontWeight": "700",
+        "color": "var(--color-primary)",
+        "margin": "0 0 1.25rem"
+      },
+      "textContent": "${state.heading}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "grid",
+        "gridTemplateColumns": "repeat(3, 1fr)",
+        "gap": "1.25rem",
+        "@--lg": { "gridTemplateColumns": "repeat(2, 1fr)" },
+        "@--sm": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [{ "tagName": "slot" }]
+    }
+  ]
+}

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

@@ -0,0 +1,62 @@
+{
+  "tagName": "fs-cta",
+  "state": {
+    "heading": "",
+    "text": "",
+    "cta": "Book a Class",
+    "ctaHref": "/contact/"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
+    "textAlign": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "children": [
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
+            "fontWeight": "700",
+            "lineHeight": "1.15",
+            "margin": "0 0 1rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.1rem",
+            "lineHeight": "1.7",
+            "opacity": "0.85",
+            "margin": "0 0 2rem"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.ctaHref}" },
+          "style": {
+            "display": "inline-block",
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.9rem 2.25rem",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1.05rem",
+            "fontWeight": "600",
+            "textDecoration": "none",
+            "transition": "background-color 0.15s",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+          },
+          "textContent": "${state.cta}"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,42 @@
+{
+  "tagName": "fs-feature",
+  "state": {
+    "icon": "",
+    "title": "",
+    "text": ""
+  },
+  "style": {
+    "display": "block",
+    "padding": "1.75rem",
+    "backgroundColor": "var(--color-bg-cream)",
+    "borderRadius": "var(--radius)",
+    "border": "1px solid var(--color-border)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "fontSize": "1.75rem", "marginBottom": "0.75rem", "lineHeight": "1" },
+      "textContent": "${state.icon}"
+    },
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.25rem",
+        "fontWeight": "600",
+        "margin": "0 0 0.5rem"
+      },
+      "textContent": "${state.title}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "margin": "0",
+        "color": "var(--color-text-muted)",
+        "fontSize": "0.98rem",
+        "lineHeight": "1.65"
+      },
+      "textContent": "${state.text}"
+    }
+  ]
+}

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

@@ -0,0 +1,145 @@
+{
+  "tagName": "fs-footer",
+  "state": {
+    "brand": "Ember Yoga & Fitness",
+    "tagline": "Yoga, pilates, and strength for every body — in a studio that feels like home.",
+    "address": "412 Willow Avenue, Bridgewater",
+    "phone": "(555) 240-7788"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "padding": "3.5rem 1.5rem 2rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "2fr 1fr 1fr",
+        "gap": "2.5rem",
+        "@--md": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.35rem",
+                "fontWeight": "700",
+                "marginBottom": "0.75rem"
+              },
+              "textContent": "${state.brand}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.75", "maxWidth": "36ch" },
+              "textContent": "${state.tagline}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.08em",
+                "fontSize": "0.75rem",
+                "opacity": "0.6",
+                "marginBottom": "0.75rem"
+              },
+              "textContent": "Visit"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
+              "textContent": "${state.address}"
+            },
+            {
+              "tagName": "p",
+              "style": { "margin": "0", "opacity": "0.85" },
+              "textContent": "${state.phone}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.08em",
+                "fontSize": "0.75rem",
+                "opacity": "0.6",
+                "marginBottom": "0.75rem"
+              },
+              "textContent": "Explore"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/classes/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.85",
+                "textDecoration": "none",
+                "marginBottom": "0.35rem"
+              },
+              "textContent": "Classes"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/pricing/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.85",
+                "textDecoration": "none",
+                "marginBottom": "0.35rem"
+              },
+              "textContent": "Pricing"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "block",
+                "color": "var(--color-text-white)",
+                "opacity": "0.85",
+                "textDecoration": "none"
+              },
+              "textContent": "Contact"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "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"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": { "margin": "0" },
+          "textContent": "© Ember Yoga & Fitness. Built with Jx."
+        }
+      ]
+    }
+  ]
+}