@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -13,91 +13,128 @@
   "style": {
     "display": "block",
     "position": "relative",
+    "overflow": "hidden",
     "backgroundColor": "var(--color-bg-dark)",
-    "backgroundImage": "url('${state.bg}')",
-    "backgroundSize": "cover",
-    "backgroundPosition": "center",
-    "color": "var(--color-text-white)",
-    "textAlign": "center"
+    "backgroundImage": "linear-gradient(105deg, rgba(14,26,35,0.97) 0%, rgba(14,26,35,0.9) 48%, rgba(14,26,35,0.62) 100%), url('${state.bg}')",
+    "backgroundSize": "cover, cover",
+    "backgroundPosition": "center, center",
+    "color": "var(--color-text-white)"
   },
   "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%)"
+        "top": "0",
+        "left": "0",
+        "right": "0",
+        "height": "6px",
+        "background": "var(--hazard)"
       }
     },
     {
       "tagName": "div",
       "style": {
         "position": "relative",
-        "zIndex": "10",
-        "maxWidth": "var(--max-width-narrow)",
+        "zIndex": "5",
+        "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem"
+        "padding": "clamp(3.25rem, 7vw, 5rem) 1.5rem",
+        "display": "grid",
+        "gridTemplateColumns": "1.35fr 1fr",
+        "gap": "clamp(2rem, 5vw, 4rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2rem" }
       },
       "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",
+          "children": [
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+                "alignItems": "center",
+                "gap": "0.5rem",
+                "textTransform": "uppercase",
+                "fontFamily": "var(--font-heading)",
+                "letterSpacing": "0.14em",
+                "fontSize": "0.82rem",
+                "fontWeight": "600",
+                "color": "var(--color-primary)",
+                "margin": "0 0 1rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "1.6rem",
+                    "height": "0.2rem",
+                    "backgroundColor": "var(--color-primary)",
+                    "display": "inline-block"
+                  }
+                },
+                { "tagName": "span", "textContent": "${state.eyebrow}" }
+              ]
+            },
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(2.1rem, 4.6vw, 3.2rem)",
+                "fontWeight": "700",
+                "textTransform": "uppercase",
+                "lineHeight": "1.02",
+                "letterSpacing": "0.01em",
+                "margin": "0 0 1rem",
+                "color": "var(--color-text-white)"
+              },
+              "textContent": "${state.heading}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "1.12rem",
+                "lineHeight": "1.65",
+                "color": "#cdd8e0",
+                "margin": "0",
+                "maxWidth": "52ch"
+              },
+              "textContent": "${state.text}"
+            }
+          ]
         },
         {
           "tagName": "div",
           "style": {
             "display": "flex",
-            "gap": "0.75rem",
-            "flexWrap": "wrap",
-            "alignItems": "center",
-            "justifyContent": "center"
+            "flexDirection": "column",
+            "gap": "1rem",
+            "alignItems": "stretch"
           },
           "children": [
             {
               "tagName": "a",
               "attributes": { "href": "${state.ctaHref}" },
               "style": {
-                "display": "inline-block",
+                "display": "block",
+                "textAlign": "center",
                 "backgroundColor": "var(--color-primary)",
                 "color": "var(--color-text-white)",
-                "padding": "0.9rem 2.25rem",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1.05rem",
-                "fontWeight": "700",
+                "padding": "1.05rem 2rem",
+                "borderRadius": "var(--radius-sm)",
+                "fontFamily": "var(--font-heading)",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.05em",
+                "fontSize": "1.1rem",
+                "fontWeight": "600",
                 "textDecoration": "none",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "boxShadow": "0 16px 34px -14px rgba(244,81,30,0.9)",
+                "transition": "background-color 0.15s, transform 0.15s",
+                ":hover": {
+                  "backgroundColor": "var(--color-primary-hover)",
+                  "transform": "translateY(-2px)"
+                }
               },
               "textContent": "${state.cta}"
             },
@@ -105,15 +142,39 @@
               "tagName": "a",
               "attributes": { "href": "${state.phoneHref}" },
               "style": {
-                "display": "${state.phone ? 'inline-block' : 'none'}",
+                "display": "${state.phone ? 'flex' : 'none'}",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "gap": "0.6rem",
+                "padding": "1rem 2rem",
+                "border": "1px solid rgba(255,255,255,0.28)",
+                "borderRadius": "var(--radius-sm)",
+                "backgroundColor": "rgba(255,255,255,0.04)",
                 "color": "var(--color-text-white)",
-                "fontSize": "1.05rem",
-                "fontWeight": "700",
                 "textDecoration": "none",
-                "opacity": "0.95",
-                ":hover": { "color": "#fed7aa" }
+                "transition": "background-color 0.15s, border-color 0.15s",
+                ":hover": {
+                  "backgroundColor": "rgba(255,255,255,0.09)",
+                  "borderColor": "rgba(255,255,255,0.5)"
+                }
               },
-              "textContent": "or call ${state.phone}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": { "color": "var(--color-primary)", "fontSize": "1.2rem" },
+                  "textContent": "☏"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "700",
+                    "fontSize": "1.3rem",
+                    "letterSpacing": "0.01em"
+                  },
+                  "textContent": "${state.phone}"
+                }
+              ]
             }
           ]
         }

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

@@ -6,38 +6,57 @@
     "text": ""
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
+    "display": "flex",
+    "gap": "1.1rem",
+    "padding": "1.6rem 1.5rem",
     "backgroundColor": "var(--color-bg-white)",
-    "borderRadius": "var(--radius)",
-    "border": "1px solid var(--color-border)"
+    "border": "1px solid var(--color-border)",
+    "borderLeft": "4px solid var(--color-primary)",
+    "borderRadius": "var(--radius)"
   },
   "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"
+        "flexShrink": "0",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "3rem",
+        "height": "3rem",
+        "borderRadius": "var(--radius-sm)",
+        "backgroundColor": "var(--color-primary-soft)",
+        "fontSize": "1.55rem",
+        "lineHeight": "1"
       },
-      "textContent": "${state.title}"
+      "textContent": "${state.icon}"
     },
     {
-      "tagName": "p",
-      "style": {
-        "margin": "0",
-        "color": "var(--color-text-muted)",
-        "fontSize": "0.98rem",
-        "lineHeight": "1.65"
-      },
-      "textContent": "${state.text}"
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.22rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.02em",
+            "margin": "0 0 0.4rem"
+          },
+          "textContent": "${state.title}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0",
+            "color": "var(--color-text-muted)",
+            "fontSize": "0.98rem",
+            "lineHeight": "1.6"
+          },
+          "textContent": "${state.text}"
+        }
+      ]
     }
   ]
 }

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

@@ -1,24 +1,32 @@
 {
   "tagName": "hs-footer",
   "state": {
-    "brand": "Summit Heating & Cooling",
+    "brand": "SUMMIT",
+    "brandSub": "HEATING & COOLING",
     "tagline": "Reliable heating and cooling for Northern Colorado homes — repairs, installs, and 24/7 emergency service.",
     "address": "1420 Prospect Road, Fort Collins, CO 80525",
     "phone": "(970) 555-0148",
-    "license": "CO HVAC Lic. #C-48219"
+    "phoneHref": "tel:+19705550148",
+    "license": "CO HVAC Lic. #C-48219 · Bonded & Insured"
   },
   "style": {
     "display": "block",
+    "position": "relative",
     "backgroundColor": "var(--color-bg-dark)",
     "color": "var(--color-text-white)",
-    "padding": "3.5rem 1.5rem 2rem"
+    "paddingBottom": "2rem"
   },
   "children": [
+    {
+      "tagName": "div",
+      "style": { "height": "6px", "background": "var(--hazard)" }
+    },
     {
       "tagName": "div",
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
+        "padding": "3.25rem 1.5rem 0",
         "display": "grid",
         "gridTemplateColumns": "2fr 1fr 1fr",
         "gap": "2.5rem",
@@ -31,25 +39,78 @@
             {
               "tagName": "div",
               "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.35rem",
-                "fontWeight": "800",
-                "letterSpacing": "-0.02em",
-                "marginBottom": "0.75rem"
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.6rem",
+                "marginBottom": "0.9rem"
               },
-              "textContent": "${state.brand}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "width": "2.3rem",
+                    "height": "2.3rem",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "borderRadius": "0.3rem",
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "700",
+                    "fontSize": "1.25rem",
+                    "clipPath": "polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%)"
+                  },
+                  "textContent": "▲"
+                },
+                {
+                  "tagName": "span",
+                  "style": { "display": "flex", "flexDirection": "column", "lineHeight": "1" },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "700",
+                        "fontSize": "1.25rem",
+                        "letterSpacing": "0.06em"
+                      },
+                      "textContent": "${state.brand}"
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "500",
+                        "fontSize": "0.58rem",
+                        "letterSpacing": "0.24em",
+                        "color": "var(--color-primary)",
+                        "marginTop": "0.15rem"
+                      },
+                      "textContent": "${state.brandSub}"
+                    }
+                  ]
+                }
+              ]
             },
             {
               "tagName": "p",
-              "style": { "margin": "0 0 0.9rem", "opacity": "0.75", "maxWidth": "40ch" },
+              "style": {
+                "margin": "0 0 1rem",
+                "opacity": "0.72",
+                "maxWidth": "42ch",
+                "lineHeight": "1.6"
+              },
               "textContent": "${state.tagline}"
             },
             {
               "tagName": "p",
               "style": {
                 "margin": "0",
-                "fontSize": "0.8rem",
-                "letterSpacing": "0.04em",
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "0.78rem",
+                "letterSpacing": "0.05em",
+                "textTransform": "uppercase",
                 "opacity": "0.55"
               },
               "textContent": "${state.license}"
@@ -62,23 +123,35 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-heading)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.1em",
+                "fontSize": "0.78rem",
+                "color": "var(--color-primary)",
+                "marginBottom": "0.9rem",
+                "fontWeight": "600"
               },
               "textContent": "Contact"
             },
             {
-              "tagName": "p",
-              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
-              "textContent": "${state.address}"
+              "tagName": "a",
+              "attributes": { "href": "${state.phoneHref}" },
+              "style": {
+                "display": "block",
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.35rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-white)",
+                "textDecoration": "none",
+                "marginBottom": "0.55rem",
+                "letterSpacing": "0.01em"
+              },
+              "textContent": "${state.phone}"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.85" },
-              "textContent": "${state.phone}"
+              "style": { "margin": "0", "opacity": "0.78", "lineHeight": "1.55" },
+              "textContent": "${state.address}"
             }
           ]
         },
@@ -88,11 +161,13 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-heading)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.1em",
+                "fontSize": "0.78rem",
+                "color": "var(--color-primary)",
+                "marginBottom": "0.9rem",
+                "fontWeight": "600"
               },
               "textContent": "Explore"
             },
@@ -102,9 +177,9 @@
               "style": {
                 "display": "block",
                 "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "opacity": "0.82",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.45rem"
               },
               "textContent": "Services"
             },
@@ -114,9 +189,9 @@
               "style": {
                 "display": "block",
                 "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "opacity": "0.82",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.45rem"
               },
               "textContent": "About"
             },
@@ -126,7 +201,7 @@
               "style": {
                 "display": "block",
                 "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "opacity": "0.82",
                 "textDecoration": "none"
               },
               "textContent": "Contact"
@@ -140,10 +215,10 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "2.5rem auto 0",
-        "paddingTop": "1.5rem",
-        "borderTop": "1px solid rgba(255, 255, 255, 0.15)",
+        "padding": "1.5rem 1.5rem 0",
+        "borderTop": "1px solid var(--color-steel-line)",
         "fontSize": "0.85rem",
-        "opacity": "0.6"
+        "opacity": "0.55"
       },
       "children": [
         {

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

@@ -1,52 +1,103 @@
 {
   "tagName": "hs-gallery",
   "state": {
-    "img1": { "type": "string", "format": "image", "default": "" },
-    "img2": { "type": "string", "format": "image", "default": "" },
-    "img3": { "type": "string", "format": "image", "default": "" },
+    "img1": {
+      "type": "string",
+      "format": "image",
+      "default": ""
+    },
+    "img2": {
+      "type": "string",
+      "format": "image",
+      "default": ""
+    },
+    "img3": {
+      "type": "string",
+      "format": "image",
+      "default": ""
+    },
     "alt": "Recent HVAC project by Summit Heating & Cooling"
   },
   "style": {
+    "boxSizing": "border-box",
     "display": "grid",
-    "gridTemplateColumns": "repeat(3, 1fr)",
-    "gap": "0.75rem",
+    "gridTemplateColumns": "minmax(0, 1.62fr) minmax(0, 1fr)",
+    "gridTemplateRows": "minmax(0, 1fr) minmax(0, 1fr)",
+    "gap": "0.9rem",
+    "height": "clamp(360px, 44vw, 540px)",
     "maxWidth": "var(--max-width)",
     "margin": "0 auto",
     "padding": "0 1.5rem",
-    "@--sm": { "gridTemplateColumns": "1fr" }
+    "@--sm": {
+      "gridTemplateColumns": "1fr",
+      "gridTemplateRows": "auto",
+      "height": "auto"
+    }
   },
   "children": [
     {
       "tagName": "img",
-      "attributes": { "src": "${state.img1}", "alt": "${state.alt}", "loading": "lazy" },
+      "attributes": {
+        "src": "${state.img1}",
+        "alt": "${state.alt}",
+        "loading": "lazy"
+      },
       "style": {
+        "gridColumn": "1",
+        "gridRow": "1 / span 2",
         "width": "100%",
-        "aspectRatio": "1 / 1",
+        "height": "100%",
         "objectFit": "cover",
         "borderRadius": "var(--radius)",
-        "display": "block"
+        "display": "block",
+        "borderBottom": "4px solid var(--color-primary)",
+        "@--sm": {
+          "gridColumn": "auto",
+          "gridRow": "auto",
+          "height": "240px"
+        },
+        "minHeight": "0",
+        "minWidth": "0"
       }
     },
     {
       "tagName": "img",
-      "attributes": { "src": "${state.img2}", "alt": "${state.alt}", "loading": "lazy" },
+      "attributes": {
+        "src": "${state.img2}",
+        "alt": "${state.alt}",
+        "loading": "lazy"
+      },
       "style": {
         "width": "100%",
-        "aspectRatio": "1 / 1",
+        "height": "100%",
         "objectFit": "cover",
         "borderRadius": "var(--radius)",
-        "display": "block"
+        "display": "block",
+        "@--sm": {
+          "height": "200px"
+        },
+        "minHeight": "0",
+        "minWidth": "0"
       }
     },
     {
       "tagName": "img",
-      "attributes": { "src": "${state.img3}", "alt": "${state.alt}", "loading": "lazy" },
+      "attributes": {
+        "src": "${state.img3}",
+        "alt": "${state.alt}",
+        "loading": "lazy"
+      },
       "style": {
         "width": "100%",
-        "aspectRatio": "1 / 1",
+        "height": "100%",
         "objectFit": "cover",
         "borderRadius": "var(--radius)",
-        "display": "block"
+        "display": "block",
+        "@--sm": {
+          "height": "200px"
+        },
+        "minHeight": "0",
+        "minWidth": "0"
       }
     }
   ]