@jxsuite/starters 0.34.0 → 0.35.0

package/sites/event/pages/index.md

@@ -2,10 +2,12 @@
 title: "Horizon Conf 2026 — One day for the people building what's next"
 ---
 
-::ev-hero{props.eyebrow="A one-day tech & design conference" props.date="June 12, 2026" props.location="The Foundry · Portland, OR" props.heading="The horizon, one day early." props.subheading="Two stages, hands-on workshops, and the designers and engineers shaping the next decade of the web — all in one room, for one day." props.cta="Get Tickets" props.ctaHref="/tickets/" props.cta2="View Schedule" props.cta2Href="/schedule/" props.bg="/images/hero.jpg"}
+::ev-hero{props.eyebrow="A one-day tech & design conference" props.date="June 12, 2026" props.location="The Foundry · Portland, OR" props.heading="The horizon, one day early." props.subheading="Two stages, hands-on workshops, and the designers and engineers shaping the next decade of the web — all in one room, for one day." props.cta="Get tickets" props.ctaHref="/tickets/" props.cta2="View schedule" props.cta2Href="/schedule/" props.bg="/images/hero.jpg"}
 
-:::::section{style.padding="clamp(2.5rem, 5vw, 3.5rem) 1.5rem" style.borderBottom="1px solid var(--color-border)"}
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="2rem" style.--sm.gridTemplateColumns="repeat(2, 1fr)"}
+::ev-savedate{props.eyebrow="Save the date" props.heading="June 12, 2026 — Portland" props.text="Early-bird tickets are live and going fast. Lock in your seat before prices step up." props.days="42" props.hours="18" props.minutes="05" props.seconds="30" props.cta="Get tickets" props.ctaHref="/tickets/"}
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.25rem) 1.5rem"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1rem" style.--sm.gridTemplateColumns="repeat(2, 1fr)"}
 ::ev-stat{props.value="500+" props.label="Attendees"}
 
 ::ev-stat{props.value="24" props.label="Speakers"}
@@ -17,14 +19,18 @@ title: "Horizon Conf 2026 — One day for the people building what's next"
 :::::
 
 :::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::ev-section-header{props.eyebrow="Why attend" props.heading="A day built to move you forward" props.subheading="No filler, no fluff — just talks, workshops, and people worth meeting."}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="0.85fr 1.15fr" style.gap="clamp(2rem, 5vw, 4rem)" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
+:::div{style.position="sticky" style.top="6rem" style.alignSelf="start"}
+::ev-section-header{props.eyebrow="Why attend" props.heading="A day built to move you forward" props.subheading="No filler, no fluff — just talks, workshops, and people worth meeting." props.align="left"}
+:::
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
-::ev-feature{props.icon="🎤" props.title="Talks that ship" props.text="Main-stage keynotes from people who build in the open — big ideas you can use on Monday."}
+:::div
+::ev-reason{props.num="01" props.title="Talks that ship" props.text="Main-stage keynotes from people who build in the open — big ideas you can put to work on Monday morning, not someday."}
 
-::ev-feature{props.icon="🛠️" props.title="Hands-on workshops" props.text="Small-group sessions where you leave with something you actually built, not just notes."}
+::ev-reason{props.num="02" props.title="Hands-on workshops" props.text="Small-group sessions where you leave with something you actually built — a working prototype, not a page of notes."}
 
-::ev-feature{props.icon="🤝" props.title="The hallway track" props.text="Curated meetups, lightning intros, and enough coffee to find your next collaborator."}
+::ev-reason{props.num="03" props.title="The hallway track" props.text="Curated meetups, lightning intros, and enough coffee to find your next collaborator, cofounder, or hire."}
+:::
 ::::
 :::::
 
@@ -41,8 +47,8 @@ title: "Horizon Conf 2026 — One day for the people building what's next"
 ::ev-speaker-card{props.name="Lena Cho" props.title="Motion Lead, Studio Bright" props.photo="/images/speaker-4.jpg"}
 ::::
 
-::::div{style.textAlign="center" style.marginTop="2rem"}
-:::a{href="/speakers/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+::::div{style.textAlign="center" style.marginTop="2.25rem"}
+:::a{href="/speakers/" style.display="inline-block" style.color="var(--color-accent)" style.fontWeight="700" style.textDecoration="none" style.fontSize="1.05rem"}
 Meet all 24 speakers →
 :::
 ::::
@@ -53,13 +59,31 @@ Meet all 24 speakers →
 
 ::ev-agenda-tabs
 
-::::div{style.textAlign="center" style.marginTop="2rem"}
-:::a{href="/schedule/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+::::div{style.textAlign="center" style.marginTop="2.25rem"}
+:::a{href="/schedule/" style.display="inline-block" style.color="var(--color-accent)" style.fontWeight="700" style.textDecoration="none" style.fontSize="1.05rem"}
 See the full schedule →
 :::
 ::::
 :::::
 
-::ev-savedate{props.eyebrow="Save the date" props.heading="June 12, 2026 — Portland" props.text="Early-bird tickets are live and going fast. Lock in your seat before prices step up." props.days="42" props.hours="18" props.minutes="05" props.seconds="30" props.cta="Get Tickets" props.ctaHref="/tickets/"}
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::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 — lock it in before prices step up."}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.alignItems="start" style.--md.gridTemplateColumns="1fr" style.--md.maxWidth="440px"}
+::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/"}
+::::
+
+::::div{style.textAlign="center" style.marginTop="2.25rem"}
+:::a{href="/tickets/" style.display="inline-block" style.color="var(--color-accent)" style.fontWeight="700" style.textDecoration="none" style.fontSize="1.05rem"}
+Compare passes & fine print →
+:::
+::::
+:::::
+
+::ev-sponsors{props.label="Backed by the teams building the modern web"}
 
-::ev-cta{props.eyebrow="One day only" props.heading="Be in the room on June 12" props.text="Horizon Conf sold out last year. Grab your ticket now and join 500 builders for a single, unforgettable day." props.cta="Get Tickets" props.ctaHref="/tickets/" props.note="Early-bird pricing ends April 30."}
+::ev-cta{props.eyebrow="One day only" props.heading="Be in the room on June 12" props.text="Horizon Conf sold out last year. Grab your ticket now and join 500 builders for a single, unforgettable day." props.cta="Get tickets" props.ctaHref="/tickets/" props.note="Early-bird pricing ends April 30."}

package/sites/event/pages/schedule.md

@@ -37,40 +37,43 @@ state:
 ---
 
 :::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::ev-section-header{props.eyebrow="June 12, 2026" props.heading="One day, three tracks" props.subheading="Everything runs across a single day at The Foundry. Use the planner below to filter by track, or scroll for the full lineup."}
+::ev-section-header{props.eyebrow="June 12, 2026 · The Foundry" props.heading="One day, three tracks" props.subheading="Everything runs across a single day in Portland. Filter the planner by track, or scroll for the full timeline."}
 :::::
 
-:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
-::ev-section-header{props.eyebrow="Plan your day" props.heading="Filter by track" props.subheading="Tap a track to focus the agenda. Everything updates instantly — no page reload."}
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::ev-section-header{props.eyebrow="Plan your day" props.heading="Filter by track" props.subheading="Tap a track to focus the agenda — everything updates instantly, no page reload."}
 
 ::ev-agenda-tabs
 :::::
 
-:::::section{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.padding="clamp(2rem, 5vw, 3.5rem) 1.5rem"}
-::ev-section-header{props.heading="The full lineup" props.subheading="Every session, grouped by track." props.align="left"}
+:::::section{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.padding="clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(3.5rem, 8vw, 6rem)"}
+::ev-section-header{props.heading="The full timeline" props.subheading="Every session on the day, grouped by track." props.align="left"}
 
-::::div{style.marginBottom="3rem"}
-:::h3{style.fontFamily="var(--font-heading)" style.fontSize="1.4rem" style.fontWeight="700" style.color="var(--color-primary)" style.margin="0 0 0.5rem" style.paddingBottom="0.5rem" style.borderBottom="2px solid var(--color-primary)"}
-Main Stage
+::::div{style.marginBottom="2.75rem"}
+:::h3{style.display="flex" style.alignItems="center" style.gap="0.7rem" style.fontFamily="var(--font-heading)" style.fontSize="1.35rem" style.fontWeight="700" style.margin="0 0 1.4rem" style.color="var(--color-text-primary)"}
+:span[]{style.width="0.7rem" style.height="0.7rem" style.borderRadius="50%" style.background="var(--color-accent)" style.boxShadow="0 0 12px rgba(34,224,255,0.7)"} Main Stage
 :::
+
 :::Array{items.ref="#/state/mainStage"}
 ::ev-session-row{props.time="${item.data.time}" props.title="${item.data.title}" props.track="${item.data.track}" props.speaker="${item.data.speaker}"}
 :::
 ::::
 
-::::div{style.marginBottom="3rem"}
-:::h3{style.fontFamily="var(--font-heading)" style.fontSize="1.4rem" style.fontWeight="700" style.color="var(--color-primary)" style.margin="0 0 0.5rem" style.paddingBottom="0.5rem" style.borderBottom="2px solid var(--color-primary)"}
-Workshops
+::::div{style.marginBottom="2.75rem"}
+:::h3{style.display="flex" style.alignItems="center" style.gap="0.7rem" style.fontFamily="var(--font-heading)" style.fontSize="1.35rem" style.fontWeight="700" style.margin="0 0 1.4rem" style.color="var(--color-text-primary)"}
+:span[]{style.width="0.7rem" style.height="0.7rem" style.borderRadius="50%" style.background="var(--color-lime)" style.boxShadow="0 0 12px rgba(198,255,77,0.7)"} Workshops
 :::
+
 :::Array{items.ref="#/state/workshops"}
 ::ev-session-row{props.time="${item.data.time}" props.title="${item.data.title}" props.track="${item.data.track}" props.speaker="${item.data.speaker}"}
 :::
 ::::
 
-::::div{style.marginBottom="1rem"}
-:::h3{style.fontFamily="var(--font-heading)" style.fontSize="1.4rem" style.fontWeight="700" style.color="var(--color-primary)" style.margin="0 0 0.5rem" style.paddingBottom="0.5rem" style.borderBottom="2px solid var(--color-primary)"}
-Design
+::::div
+:::h3{style.display="flex" style.alignItems="center" style.gap="0.7rem" style.fontFamily="var(--font-heading)" style.fontSize="1.35rem" style.fontWeight="700" style.margin="0 0 1.4rem" style.color="var(--color-text-primary)"}
+:span[]{style.width="0.7rem" style.height="0.7rem" style.borderRadius="50%" style.background="#ff6bb0" style.boxShadow="0 0 12px rgba(255,61,154,0.7)"} Design
 :::
+
 :::Array{items.ref="#/state/design"}
 ::ev-session-row{props.time="${item.data.time}" props.title="${item.data.title}" props.track="${item.data.track}" props.speaker="${item.data.speaker}"}
 :::
@@ -83,7 +86,7 @@ Design
 
 A restored ironworks turned event hall in Portland's Central Eastside — high ceilings, fast Wi-Fi, and coffee that never runs out. Both stages, all workshop rooms, and the hallway track are steps apart under one roof.
 
-Doors open at 8:00 AM. Bring a laptop for the workshop track.
+Doors open at 8 AM sharp. Bring a laptop for the workshop track.
 :::
 
-::ev-cta{props.eyebrow="Don't miss it" props.heading="Your seat is waiting" props.text="Sessions fill on a first-come basis on the day. A ticket guarantees your spot in every track." props.cta="Get Tickets" props.ctaHref="/tickets/"}
+::ev-cta{props.eyebrow="Don't miss it" props.heading="Your seat is waiting" props.text="Sessions fill on a first-come basis on the day. A ticket guarantees your spot in every track." props.cta="Get tickets" props.ctaHref="/tickets/"}

package/sites/event/project.json

@@ -8,7 +8,10 @@
   "$head": [
     {
       "tagName": "meta",
-      "attributes": { "name": "viewport", "content": "width=device-width, initial-scale=1" }
+      "attributes": {
+        "name": "viewport",
+        "content": "width=device-width, initial-scale=1"
+      }
     },
     {
       "tagName": "meta",
@@ -19,21 +22,31 @@
     },
     {
       "tagName": "link",
-      "attributes": { "rel": "icon", "href": "/favicon.svg" }
+      "attributes": {
+        "rel": "icon",
+        "href": "/favicon.svg"
+      }
     },
     {
       "tagName": "link",
-      "attributes": { "rel": "preconnect", "href": "https://fonts.googleapis.com" }
+      "attributes": {
+        "rel": "preconnect",
+        "href": "https://fonts.googleapis.com"
+      }
     },
     {
       "tagName": "link",
-      "attributes": { "rel": "preconnect", "href": "https://fonts.gstatic.com", "crossorigin": "" }
+      "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"
+        "href": "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap"
       }
     }
   ],
@@ -44,27 +57,61 @@
     "--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-primary": "#ff3d9a",
+    "--color-primary-hover": "#ff6bb4",
+    "--color-ink": "#050308",
+    "--color-bg": "#0a0711",
+    "--color-bg-dark": "#0a0711",
+    "--color-bg-cream": "#0f0b1c",
+    "--color-bg-white": "#150f28",
+    "--color-bg-elev": "#150f28",
+    "--color-bg-elev2": "#1e1638",
+    "--color-text-primary": "#f3eefe",
     "--color-text-white": "#ffffff",
-    "--color-text-muted": "#6b7280",
-    "--color-border": "#e5e0f5",
-    "--color-accent": "#ec4899",
-    "--font-heading": "'Space Grotesk', 'Segoe UI', system-ui, sans-serif",
+    "--color-text-muted": "#a99fc8",
+    "--color-border": "#2b2148",
+    "--color-accent": "#22e0ff",
+    "--color-cyan": "#22e0ff",
+    "--color-violet": "#a855f7",
+    "--color-lime": "#c6ff4d",
+    "--grad": "linear-gradient(115deg, #22e0ff 0%, #a855f7 50%, #ff3d9a 100%)",
+    "--grad-btn": "linear-gradient(120deg, #ff3d9a 0%, #a855f7 100%)",
+    "--grad-cyan": "linear-gradient(120deg, #22e0ff 0%, #7c74ff 100%)",
+    "--glow": "rgba(255, 61, 154, 0.5)",
+    "--glow-cyan": "rgba(34, 224, 255, 0.4)",
+    "--font-heading": "'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif",
+    "--font-body": "'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
     "--max-width": "1200px",
-    "--max-width-narrow": "820px",
-    "--radius": "0.75rem",
+    "--max-width-narrow": "860px",
+    "--radius": "1rem",
     "margin": "0",
     "padding": "0",
-    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontFamily": "var(--font-body)",
     "lineHeight": "1.6",
     "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-bg)",
+    "h1": {
+      "fontFamily": "var(--font-heading)",
+      "color": "var(--color-text-primary)"
+    },
+    "h2": {
+      "fontFamily": "var(--font-heading)",
+      "color": "var(--color-text-primary)"
+    },
+    "h3": {
+      "fontFamily": "var(--font-heading)",
+      "color": "var(--color-text-primary)"
+    },
+    "h4": {
+      "fontFamily": "var(--font-heading)",
+      "color": "var(--color-text-primary)"
+    },
+    "strong": {
+      "color": "var(--color-text-primary)"
+    },
+    "a": {
+      "color": "var(--color-primary)"
+    }
   },
   "imports": {
     "Markdown": "@jxsuite/parser/Markdown.class.json",
@@ -74,7 +121,12 @@
     "optimize": true,
     "widths": [320, 640, 960, 1280, 1920],
     "formats": ["webp", "avif"],
-    "quality": { "webp": 80, "avif": 65, "jpeg": 80, "png": 80 },
+    "quality": {
+      "webp": 80,
+      "avif": 65,
+      "jpeg": 80,
+      "png": 80
+    },
     "sizes": "(max-width: 768px) 100vw, 50vw",
     "lazyLoad": true
   },
@@ -85,11 +137,21 @@
       "schema": {
         "type": "object",
         "properties": {
-          "title": { "type": "string" },
-          "time": { "type": "string" },
-          "track": { "type": "string" },
-          "speaker": { "type": "string" },
-          "order": { "type": "number" }
+          "title": {
+            "type": "string"
+          },
+          "time": {
+            "type": "string"
+          },
+          "track": {
+            "type": "string"
+          },
+          "speaker": {
+            "type": "string"
+          },
+          "order": {
+            "type": "number"
+          }
         },
         "required": ["title", "track"]
       }

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

@@ -0,0 +1,149 @@
+{
+  "tagName": "fs-band",
+  "state": {
+    "kicker": "",
+    "heading": "",
+    "text": "",
+    "cta": "",
+    "ctaHref": "/contact/",
+    "image": { "type": "string", "format": "image", "default": "" }
+  },
+  "style": {
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "position": "relative",
+    "overflow": "hidden",
+    "minHeight": "clamp(360px, 58vh, 620px)",
+    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem",
+    "textAlign": "center",
+    "color": "#ffffff",
+    "backgroundColor": "var(--duo-shadow)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "position": "absolute", "inset": "0", "zIndex": "0" },
+      "children": [
+        {
+          "tagName": "img",
+          "attributes": {
+            "src": "${state.image}",
+            "alt": "",
+            "width": "1920",
+            "height": "1080",
+            "loading": "lazy"
+          },
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "width": "100%",
+            "height": "100%",
+            "objectFit": "cover",
+            "objectPosition": "center 35%",
+            "filter": "grayscale(100%) contrast(1.12)"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "backgroundColor": "var(--duo-shadow)",
+            "mixBlendMode": "lighten"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "background": "linear-gradient(120deg, #d6157a 0%, #ff2e63 52%, #ff8c42 100%)",
+            "mixBlendMode": "multiply",
+            "opacity": "0.9"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "background": "radial-gradient(ellipse 70% 70% at 50% 50%, rgba(20,6,16,0.15), rgba(20,6,16,0.55))"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "position": "relative", "zIndex": "5", "maxWidth": "var(--max-width-narrow)" },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.kicker ? 'block' : 'none'}",
+            "margin": "0 0 1.1rem",
+            "fontFamily": "var(--font-heading)",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.22em",
+            "fontSize": "0.8rem",
+            "fontWeight": "700",
+            "color": "rgba(255,255,255,0.85)"
+          },
+          "textContent": "${state.kicker}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0",
+            "fontFamily": "var(--font-display)",
+            "fontSize": "clamp(2.4rem, 7vw, 5rem)",
+            "fontWeight": "400",
+            "lineHeight": "0.95",
+            "letterSpacing": "0.01em",
+            "textTransform": "uppercase",
+            "textShadow": "0 14px 40px rgba(20,6,16,0.4)"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.text ? 'block' : 'none'}",
+            "margin": "1.4rem auto 0",
+            "maxWidth": "44ch",
+            "fontSize": "1.1rem",
+            "fontWeight": "500",
+            "lineHeight": "1.65",
+            "color": "rgba(255,255,255,0.92)"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.ctaHref}" },
+          "style": {
+            "display": "${state.cta ? 'inline-block' : 'none'}",
+            "marginTop": "2rem",
+            "backgroundColor": "#ffffff",
+            "color": "var(--color-ink)",
+            "padding": "1rem 2.3rem",
+            "borderRadius": "999px",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "0.9rem",
+            "fontWeight": "800",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.06em",
+            "textDecoration": "none",
+            "boxShadow": "0 16px 40px -14px rgba(0,0,0,0.5)",
+            "transition": "transform 0.15s, box-shadow 0.15s",
+            ":hover": {
+              "transform": "translateY(-3px)",
+              "boxShadow": "0 22px 48px -14px rgba(0,0,0,0.55)"
+            }
+          },
+          "textContent": "${state.cta}"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,147 @@
+{
+  "tagName": "fs-booking",
+  "state": {
+    "heading": "Reserve your spot"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "padding": "clamp(1.6rem, 4vw, 2.4rem)",
+    "boxShadow": "0 18px 44px -30px rgba(26,15,24,0.4)",
+    "& input": {
+      "width": "100%",
+      "padding": "0.85rem 1rem",
+      "border": "1px solid var(--color-border)",
+      "borderRadius": "var(--radius-sm)",
+      "fontSize": "1rem",
+      "fontFamily": "var(--font-body)",
+      "backgroundColor": "var(--color-bg-blush)",
+      "color": "var(--color-text-primary)",
+      "boxSizing": "border-box",
+      "transition": "border-color 0.15s, box-shadow 0.15s"
+    },
+    "& textarea": {
+      "width": "100%",
+      "padding": "0.85rem 1rem",
+      "border": "1px solid var(--color-border)",
+      "borderRadius": "var(--radius-sm)",
+      "fontSize": "1rem",
+      "fontFamily": "var(--font-body)",
+      "backgroundColor": "var(--color-bg-blush)",
+      "color": "var(--color-text-primary)",
+      "boxSizing": "border-box",
+      "resize": "vertical",
+      "transition": "border-color 0.15s, box-shadow 0.15s"
+    },
+    "& input:focus": {
+      "outline": "none",
+      "borderColor": "var(--color-primary)",
+      "boxShadow": "0 0 0 3px rgba(255,46,99,0.14)"
+    },
+    "& textarea:focus": {
+      "outline": "none",
+      "borderColor": "var(--color-primary)",
+      "boxShadow": "0 0 0 3px rgba(255,46,99,0.14)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "form",
+      "attributes": { "action": "#", "method": "post" },
+      "style": { "display": "grid", "gap": "0.9rem" },
+      "children": [
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-display)",
+            "fontSize": "clamp(1.7rem, 3.5vw, 2.2rem)",
+            "fontWeight": "400",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.01em",
+            "margin": "0 0 0.4rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "text",
+            "name": "name",
+            "placeholder": "Your name",
+            "required": "true",
+            "aria-label": "Your name"
+          }
+        },
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "email",
+            "name": "email",
+            "placeholder": "Email address",
+            "required": "true",
+            "aria-label": "Email address"
+          }
+        },
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "text",
+            "name": "class",
+            "placeholder": "Which class? e.g. Vinyasa Flow",
+            "aria-label": "Class you're interested in"
+          }
+        },
+        {
+          "tagName": "input",
+          "attributes": { "type": "date", "name": "date", "aria-label": "Preferred date" }
+        },
+        {
+          "tagName": "textarea",
+          "attributes": {
+            "name": "message",
+            "rows": "4",
+            "placeholder": "New to movement? Any injuries or goals we should know about?",
+            "aria-label": "Message"
+          }
+        },
+        {
+          "tagName": "button",
+          "attributes": { "type": "submit" },
+          "style": {
+            "justifySelf": "start",
+            "marginTop": "0.25rem",
+            "background": "var(--grad-hot)",
+            "color": "#ffffff",
+            "padding": "0.95rem 2.1rem",
+            "border": "none",
+            "borderRadius": "999px",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "0.88rem",
+            "fontWeight": "800",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.06em",
+            "cursor": "pointer",
+            "boxShadow": "0 14px 32px -14px rgba(255,46,99,0.6)",
+            "transition": "transform 0.15s, box-shadow 0.15s",
+            ":hover": {
+              "transform": "translateY(-2px)",
+              "boxShadow": "0 20px 40px -14px rgba(255,46,99,0.7)"
+            }
+          },
+          "textContent": "Request a spot →"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "0.82rem",
+            "color": "var(--color-text-muted)",
+            "margin": "0.25rem 0 0"
+          },
+          "textContent": "This is a demo form. Wire it to your booking provider or email in pages/contact.md."
+        }
+      ]
+    }
+  ]
+}