@jxsuite/starters 0.34.0

package/sites/fitness-studio/layouts/base.json

@@ -0,0 +1,22 @@
+{
+  "tagName": "div",
+  "$elements": [
+    { "$ref": "../components/fs-nav.json" },
+    { "$ref": "../components/fs-footer.json" }
+  ],
+  "style": {
+    "minHeight": "100vh",
+    "display": "flex",
+    "flexDirection": "column",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "children": [
+    { "tagName": "fs-nav" },
+    {
+      "tagName": "main",
+      "style": { "flex": "1" },
+      "children": [{ "tagName": "slot" }]
+    },
+    { "tagName": "fs-footer" }
+  ]
+}

package/sites/fitness-studio/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "fitness-studio",
+  "private": true,
+  "description": "A boutique yoga and fitness studio with a class schedule, membership pricing, and online booking.",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "jx build",
+    "dev": "jx dev"
+  },
+  "devDependencies": {
+    "@jxsuite/compiler": "^0.19.0",
+    "@jxsuite/runtime": "^0.19.0"
+  }
+}

package/sites/fitness-studio/pages/classes.md

@@ -0,0 +1,37 @@
+---
+title: "Classes & Schedule — Ember Yoga & Fitness"
+state:
+  schedule:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: classes
+    sort:
+      field: order
+      order: asc
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="Weekly schedule" props.heading="Find your class" props.subheading="From slow restorative flows to high-intensity circuits — here's everything on the mat this week."}
+:::::
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+::::fs-class-grid
+:::Array{items.ref="#/state/schedule"}
+::fs-class-card{props.name="${item.data.name}" props.level="${item.data.level}" props.time="${item.data.time}" props.instructor="${item.data.instructor}" props.focus="${item.data.focus}"}
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(1rem, 4vw, 3rem) 1.5rem clamp(3.5rem, 8vw, 6rem)" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="Good to know" props.heading="Before your first class"}
+
+::::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"}
+::fs-feature{props.icon="🕒" props.title="Arrive early" props.text="Doors open 15 minutes before class. Come a little early to sign in and settle onto your mat."}
+
+::fs-feature{props.icon="🧺" props.title="We've got the gear" props.text="Mats, blocks, straps, and weights are all provided. Just bring water and comfortable clothes."}
+
+::fs-feature{props.icon="🙂" props.title="No experience needed" props.text="Tell your instructor it's your first time — they'll offer options for every pose and movement."}
+::::
+:::::
+
+::fs-cta{props.heading="Ready to roll out your mat?" props.text="Book your spot online in under a minute. First-timers get a free intro session." props.cta="Book a Class" props.ctaHref="/contact/"}

package/sites/fitness-studio/pages/contact.md

@@ -0,0 +1,53 @@
+---
+title: "Book a Class & Visit — Ember Yoga & Fitness"
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="Get started" props.heading="Book a class & say hello" props.subheading="Reserve your spot below, or drop by the studio on Willow Avenue. First class is always free."}
+:::::
+
+::::::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="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.--md.gridTemplateColumns="1fr"}
+
+::::form{action="#" method="post" style.display="grid" style.gap="1rem" style.alignContent="start"}
+
+### Reserve your spot
+
+::input{type="text" name="name" placeholder="Your name" required="true" aria-label="Your name" style.width="100%" style.padding="0.75rem 0.9rem" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.fontSize="1rem" style.fontFamily="inherit"}
+
+::input{type="email" name="email" placeholder="Email address" required="true" aria-label="Email address" style.width="100%" style.padding="0.75rem 0.9rem" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.fontSize="1rem" style.fontFamily="inherit"}
+
+::input{type="text" name="class" placeholder="Which class? e.g. Vinyasa Flow" aria-label="Class you're interested in" style.width="100%" style.padding="0.75rem 0.9rem" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.fontSize="1rem" style.fontFamily="inherit"}
+
+::input{type="date" name="date" aria-label="Preferred date" style.width="100%" style.padding="0.75rem 0.9rem" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.fontSize="1rem" style.fontFamily="inherit"}
+
+::textarea{name="message" rows="4" placeholder="New to yoga? Any injuries or goals we should know about?" aria-label="Message" style.width="100%" style.padding="0.75rem 0.9rem" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.fontSize="1rem" style.fontFamily="inherit"}
+
+:::button{type="submit" style.backgroundColor="var(--color-primary)" style.color="var(--color-text-white)" style.padding="0.85rem 1.75rem" style.border="none" style.borderRadius="var(--radius)" style.fontSize="1rem" style.fontWeight="600" style.cursor="pointer" style.justifySelf="start"}
+Request a spot
+:::
+
+:::p{style.fontSize="0.85rem" style.color="var(--color-text-muted)" style.margin="0.25rem 0 0"}
+This is a demo form. Wire it to your booking provider or email in `pages/contact.md`.
+:::
+
+::::
+
+::::div{style.display="grid" style.gap="1.5rem" style.alignContent="start"}
+::fs-hours{props.heading="Studio Hours"}
+
+:::div{style.padding="2rem" style.backgroundColor="var(--color-bg-cream)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)"}
+
+#### Find the studio
+
+412 Willow Avenue
+
+Bridgewater, CA 90210
+
+Call or text us at [(555) 240-7788](tel:+15552407788)
+
+:::
+::::
+
+:::::
+::::::

package/sites/fitness-studio/pages/index.md

@@ -0,0 +1,112 @@
+---
+title: "Ember Yoga & Fitness — Boutique yoga, pilates & strength"
+state:
+  preview:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: classes
+    sort:
+      field: order
+      order: asc
+    limit: 3
+---
+
+::fs-hero{props.eyebrow="Bridgewater · Boutique Studio" props.heading="Move, breathe, belong." props.subheading="Yoga, pilates, HIIT, and strength — taught in small classes by coaches who learn your name. All levels, always welcome." props.cta="Book a Class" props.ctaHref="/contact/" props.cta2="View Classes" props.cta2Href="/classes/" props.bg="/images/hero.jpg"}
+
+:::fs-intro{props.image="/images/about.jpg" props.imageAlt="Instructor guiding a student through a stretch"}
+
+### A studio that meets you where you are
+
+Ember is a small, light-filled studio built around one idea: everyone deserves to feel strong and at ease in their own body. Our classes cap at sixteen, so you get real attention and real progress.
+
+Come for the yoga, stay for the community.
+:::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="Why Ember" props.heading="Practice that fits your life"}
+
+::::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"}
+::fs-feature{props.icon="🧘" props.title="Small classes" props.text="Capped at sixteen, so every session is hands-on and adjustments are personal."}
+
+::fs-feature{props.icon="🌱" props.title="All levels welcome" props.text="Never done yoga? Lifting for years? Every class offers a version that fits you."}
+
+::fs-feature{props.icon="💗" props.title="Coaches who care" props.text="Certified instructors who remember your name, your goals, and your last class."}
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::fs-section-header{props.eyebrow="Find your practice" props.heading="Three ways to move"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
+:::div
+::img{src="/images/class-1.jpg" alt="A flowing yoga pose" loading="lazy" style.width="100%" style.aspectRatio="1 / 1" style.objectFit="cover" style.borderRadius="var(--radius)" style.display="block" style.marginBottom="0.9rem"}
+**Yoga & Flow** — Vinyasa, power, and restorative practice to build heat and calm the mind.
+:::
+
+:::div
+::img{src="/images/class-2.jpg" alt="A pilates class in session" loading="lazy" style.width="100%" style.aspectRatio="1 / 1" style.objectFit="cover" style.borderRadius="var(--radius)" style.display="block" style.marginBottom="0.9rem"}
+**Pilates & Core** — Low-impact mat work that builds deep strength, posture, and control.
+:::
+
+:::div
+::img{src="/images/class-3.jpg" alt="Strength training with free weights" loading="lazy" style.width="100%" style.aspectRatio="1 / 1" style.objectFit="cover" style.borderRadius="var(--radius)" style.display="block" style.marginBottom="0.9rem"}
+**Strength & HIIT** — Coached lifting and interval training to build lean, functional power.
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="This week" props.heading="A few classes on the schedule"}
+
+::::fs-class-grid
+:::Array{items.ref="#/state/preview"}
+::fs-class-card{props.name="${item.data.name}" props.level="${item.data.level}" props.time="${item.data.time}" props.instructor="${item.data.instructor}" props.focus="${item.data.focus}"}
+:::
+::::
+
+::::div{style.textAlign="center" style.marginTop="2rem"}
+:::a{href="/classes/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+See the full schedule →
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::fs-section-header{props.eyebrow="Memberships" props.heading="Simple pricing, no lock-in"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--lg.gridTemplateColumns="1fr"}
+::fs-pricing-card{props.tier="Drop-in" props.price="$22" props.per="/ class" props.description="Perfect for trying us out or dropping by between trips." props.cta="Book a class" props.ctaHref="/contact/" props.perk1="Any single class" props.perk2="Mat & props included" props.perk3="No commitment"}
+
+::fs-pricing-card{props.tier="Monthly Unlimited" props.price="$129" props.per="/ month" props.badge="Most popular" props.featured="true" props.description="Unlimited classes for people who want a real routine." props.cta="Start membership" props.ctaHref="/contact/" props.perk1="Unlimited classes" props.perk2="All class types" props.perk3="Free mat storage" props.perk4="10% off workshops" props.perk5="Freeze anytime"}
+
+::fs-pricing-card{props.tier="Annual Unlimited" props.price="$1,290" props.per="/ year" props.description="Two months free plus perks for our most committed members." props.cta="Go annual" props.ctaHref="/contact/" props.perk1="Everything in Monthly" props.perk2="Two months free" props.perk3="4 guest passes a year" props.perk4="Priority booking" props.perk5="Free intro session"}
+::::
+
+::::div{style.textAlign="center" style.marginTop="2rem"}
+:::a{href="/pricing/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+Compare all plans →
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="Meet the team" props.heading="Instructors who show up for you"}
+
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1fr 1fr" style.gap="1.5rem" style.--sm.gridTemplateColumns="1fr"}
+::fs-instructor-card{props.name="Maya Chen" props.specialty="Vinyasa & Restorative Yoga" props.image="/images/instructor-1.jpg" props.bio="Founder of Ember and a 500-hour certified teacher. Maya's classes are equal parts challenge and calm."}
+
+::fs-instructor-card{props.name="Devon Hart" props.specialty="Power Yoga & Strength" props.image="/images/instructor-2.jpg" props.bio="A former collegiate athlete turned coach, Devon makes strength training approachable for absolutely everyone."}
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::fs-section-header{props.eyebrow="Loved by members" props.heading="What our community says"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1fr 1fr" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
+::fs-review{props.quote="I walked in having never done yoga and left already booking my next class. The instructors actually watch you and help." props.author="Jordan M." props.role="Member since 2022"}
+
+::fs-review{props.quote="The small classes make all the difference. It feels less like a gym and more like a group of friends who happen to work out." props.author="Aisha K." props.role="Unlimited member"}
+::::
+:::::
+
+::fs-cta{props.heading="Your first class is on us" props.text="New to Ember? Book a free intro session and find the practice that fits you." props.cta="Book a Class" props.ctaHref="/contact/"}

package/sites/fitness-studio/pages/pricing.md

@@ -0,0 +1,41 @@
+---
+title: "Membership & Pricing — Ember Yoga & Fitness"
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="Memberships" props.heading="Pricing that flexes with you" props.subheading="Drop in when it suits you, or go unlimited and make it a habit. No sign-up fees, ever."}
+:::::
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--lg.gridTemplateColumns="1fr"}
+::fs-pricing-card{props.tier="Drop-in" props.price="$22" props.per="/ class" props.description="Perfect for trying us out or dropping by between trips." props.cta="Book a class" props.ctaHref="/contact/" props.perk1="Any single class" props.perk2="Mat & props included" props.perk3="Book anytime" props.perk4="No commitment"}
+
+::fs-pricing-card{props.tier="Monthly Unlimited" props.price="$129" props.per="/ month" props.badge="Most popular" props.featured="true" props.description="Unlimited classes for people who want a real routine." props.cta="Start membership" props.ctaHref="/contact/" props.perk1="Unlimited classes" props.perk2="All class types" props.perk3="Free mat storage" props.perk4="10% off workshops" props.perk5="Freeze anytime"}
+
+::fs-pricing-card{props.tier="Annual Unlimited" props.price="$1,290" props.per="/ year" props.description="Two months free plus perks for our most committed members." props.cta="Go annual" props.ctaHref="/contact/" props.perk1="Everything in Monthly" props.perk2="Two months free" props.perk3="4 guest passes a year" props.perk4="Priority booking" props.perk5="Free intro session"}
+::::
+:::::
+
+:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 6rem)" style.backgroundColor="var(--color-bg-cream)"}
+::fs-section-header{props.eyebrow="Compare plans" props.heading="Every detail, side by side"}
+
+::fs-pricing-table
+
+:::div{style.maxWidth="var(--max-width)" style.margin="1.25rem auto 0" style.textAlign="center" style.color="var(--color-text-muted)" style.fontSize="0.9rem"}
+Students and seniors save 15% on any plan — just ask at the front desk.
+:::
+:::::
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+::fs-section-header{props.eyebrow="Questions" props.heading="Good to know"}
+
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.display="grid" style.gap="1.25rem"}
+::fs-feature{props.icon="❄️" props.title="Can I freeze my membership?" props.text="Yes — monthly and annual members can freeze for up to 8 weeks a year, no questions asked."}
+
+::fs-feature{props.icon="📅" props.title="How do I book a class?" props.text="Reserve any class from the contact page or our app. Spots open 7 days ahead and fill quickly."}
+
+::fs-feature{props.icon="↩️" props.title="What's your cancellation policy?" props.text="Cancel up to 4 hours before class for a full credit. Life happens — we keep it flexible."}
+::::
+:::::
+
+::fs-cta{props.heading="Start with a free intro" props.text="Not sure which plan fits? Come try a class on the house and we'll help you choose." props.cta="Book a Class" props.ctaHref="/contact/"}

package/sites/fitness-studio/project.json

@@ -0,0 +1,104 @@
+{
+  "name": "Ember Yoga & Fitness",
+  "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": "A boutique yoga and fitness studio offering vinyasa, pilates, strength, and HIIT — small classes, all levels welcome."
+      }
+    },
+    {
+      "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=Poppins:wght@500;600;700&display=swap"
+      }
+    }
+  ],
+  "$media": {
+    "--": "1200px",
+    "--lg": "(max-width: 1024px)",
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--color-primary": "#db2777",
+    "--color-primary-hover": "#be185d",
+    "--color-ink": "#1f1729",
+    "--color-bg-dark": "#241a2b",
+    "--color-bg-cream": "#fdf2f8",
+    "--color-bg-white": "#ffffff",
+    "--color-text-primary": "#1f1729",
+    "--color-text-white": "#ffffff",
+    "--color-text-muted": "#6b6472",
+    "--color-border": "#f0e4ec",
+    "--color-accent": "#0d9488",
+    "--font-heading": "'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 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": {
+    "classes": {
+      "source": "./content/classes/",
+      "format": "Markdown",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "name": { "type": "string" },
+          "level": { "type": "string" },
+          "time": { "type": "string" },
+          "instructor": { "type": "string" },
+          "focus": { "type": "string" },
+          "order": { "type": "number" }
+        },
+        "required": ["name", "level", "time", "instructor"]
+      }
+    }
+  },
+  "build": {
+    "outDir": "./dist",
+    "format": "directory",
+    "trailingSlash": "always"
+  }
+}

package/sites/fitness-studio/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="#db2777"/>
+  <path d="M16 7c2.4 2.1 3.6 4.4 3.6 6.8 0 1.5-.6 2.9-1.7 4 .1-1.7-.5-3.3-1.9-4.7-1.4 1.4-2 3-1.9 4.7-1.1-1.1-1.7-2.5-1.7-4C12.4 11.4 13.6 9.1 16 7z" fill="#fff"/>
+  <path d="M8 20c2.2 3.2 5 4.8 8 4.8s5.8-1.6 8-4.8c-2.6 1-5.3 1.5-8 1.5s-5.4-.5-8-1.5z" fill="#fff" opacity="0.9"/>
+</svg>

package/sites/home-services/components/hs-cta.json

@@ -0,0 +1,123 @@
+{
+  "tagName": "hs-cta",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "text": "",
+    "cta": "Get a Free Quote",
+    "ctaHref": "/contact/",
+    "phone": "",
+    "phoneHref": "tel:+19705550148",
+    "bg": { "type": "string", "format": "image", "default": "" }
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "backgroundColor": "var(--color-bg-dark)",
+    "backgroundImage": "url('${state.bg}')",
+    "backgroundSize": "cover",
+    "backgroundPosition": "center",
+    "color": "var(--color-text-white)",
+    "textAlign": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "inset": "0",
+        "background": "linear-gradient(180deg, rgba(28,25,23,0.82) 0%, rgba(28,25,23,0.9) 100%)"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "position": "relative",
+        "zIndex": "10",
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto",
+        "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.eyebrow ? 'block' : 'none'}",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "fontSize": "0.8rem",
+            "fontWeight": "700",
+            "color": "#fed7aa",
+            "margin": "0 0 1rem"
+          },
+          "textContent": "${state.eyebrow}"
+        },
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
+            "fontWeight": "800",
+            "lineHeight": "1.12",
+            "letterSpacing": "-0.03em",
+            "margin": "0 0 1rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.1rem",
+            "lineHeight": "1.7",
+            "opacity": "0.9",
+            "margin": "0 0 2rem"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "gap": "0.75rem",
+            "flexWrap": "wrap",
+            "alignItems": "center",
+            "justifyContent": "center"
+          },
+          "children": [
+            {
+              "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": "700",
+                "textDecoration": "none",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+              },
+              "textContent": "${state.cta}"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "${state.phoneHref}" },
+              "style": {
+                "display": "${state.phone ? 'inline-block' : 'none'}",
+                "color": "var(--color-text-white)",
+                "fontSize": "1.05rem",
+                "fontWeight": "700",
+                "textDecoration": "none",
+                "opacity": "0.95",
+                ":hover": { "color": "#fed7aa" }
+              },
+              "textContent": "or call ${state.phone}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/home-services/components/hs-feature.json

@@ -0,0 +1,43 @@
+{
+  "tagName": "hs-feature",
+  "state": {
+    "icon": "",
+    "title": "",
+    "text": ""
+  },
+  "style": {
+    "display": "block",
+    "padding": "1.75rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "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": "700",
+        "letterSpacing": "-0.01em",
+        "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}"
+    }
+  ]
+}