@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -1,109 +1,274 @@
 {
   "tagName": "hs-nav",
   "state": {
-    "brand": "Summit Heating & Cooling",
+    "brand": "SUMMIT",
+    "brandSub": "HEATING & COOLING",
     "phone": "(970) 555-0148",
-    "phoneHref": "tel:+19705550148"
+    "phoneHref": "tel:+19705550148",
+    "hours": "Mon–Fri 7a–6p · Sat 8a–2p",
+    "region": "Licensed & Insured · Serving Northern Colorado"
   },
   "style": {
     "display": "block",
     "position": "sticky",
     "top": "0",
-    "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.9)",
-    "backdropFilter": "blur(8px)",
-    "borderBottom": "1px solid var(--color-border)"
+    "zIndex": "60"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "padding": "0.9rem 1.5rem",
-        "display": "flex",
-        "alignItems": "center",
-        "justifyContent": "space-between",
-        "gap": "1.5rem"
+        "backgroundColor": "var(--color-steel)",
+        "color": "var(--color-text-steel-muted)",
+        "borderBottom": "1px solid var(--color-steel-line)",
+        "fontFamily": "var(--font-body)"
       },
       "children": [
         {
-          "tagName": "a",
-          "attributes": { "href": "/" },
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.25rem",
-            "fontWeight": "800",
-            "color": "var(--color-text-primary)",
-            "textDecoration": "none",
-            "letterSpacing": "-0.02em"
-          },
-          "textContent": "${state.brand}"
-        },
-        {
-          "tagName": "nav",
+          "tagName": "div",
           "style": {
+            "maxWidth": "var(--max-width)",
+            "margin": "0 auto",
+            "padding": "0.4rem 1.5rem",
             "display": "flex",
             "alignItems": "center",
-            "gap": "1.75rem",
-            "@--sm": { "gap": "0.9rem" }
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "fontSize": "0.82rem",
+            "fontWeight": "500"
           },
           "children": [
             {
-              "tagName": "a",
-              "attributes": { "href": "/services/" },
+              "tagName": "span",
               "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "letterSpacing": "0.02em",
+                "@--md": { "display": "none" }
               },
-              "textContent": "Services"
+              "textContent": "${state.region}"
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "/about/" },
+              "tagName": "div",
               "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1.1rem",
+                "marginLeft": "auto"
               },
-              "textContent": "About"
-            },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "letterSpacing": "0.02em",
+                    "@--lg": { "display": "none" }
+                  },
+                  "textContent": "${state.hours}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "gap": "0.4rem",
+                    "padding": "0.15rem 0.6rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "600",
+                    "fontSize": "0.72rem",
+                    "letterSpacing": "0.08em",
+                    "textTransform": "uppercase"
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "width": "0.45rem",
+                        "height": "0.45rem",
+                        "borderRadius": "999px",
+                        "backgroundColor": "#ffffff",
+                        "boxShadow": "0 0 0 3px rgba(255,255,255,0.35)"
+                      }
+                    },
+                    { "tagName": "span", "textContent": "24/7 Emergency" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "backgroundColor": "var(--color-bg-white)",
+        "borderBottom": "2px solid var(--color-steel)",
+        "boxShadow": "0 6px 24px -18px rgba(14,26,35,0.6)"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "maxWidth": "var(--max-width)",
+            "margin": "0 auto",
+            "padding": "0.7rem 1.5rem",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "gap": "1.5rem"
+          },
+          "children": [
             {
               "tagName": "a",
-              "attributes": { "href": "${state.phoneHref}" },
+              "attributes": { "href": "/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.7rem",
                 "textDecoration": "none",
-                "fontWeight": "700",
-                "fontSize": "0.95rem",
-                "@--md": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                "color": "var(--color-text-primary)"
               },
-              "textContent": "${state.phone}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "width": "2.6rem",
+                    "height": "2.6rem",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "borderRadius": "0.35rem",
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "700",
+                    "fontSize": "1.5rem",
+                    "lineHeight": "1",
+                    "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.35rem",
+                        "letterSpacing": "0.06em"
+                      },
+                      "textContent": "${state.brand}"
+                    },
+                    {
+                      "tagName": "span",
+                      "style": {
+                        "fontFamily": "var(--font-heading)",
+                        "fontWeight": "500",
+                        "fontSize": "0.6rem",
+                        "letterSpacing": "0.24em",
+                        "color": "var(--color-primary)",
+                        "marginTop": "0.15rem"
+                      },
+                      "textContent": "${state.brandSub}"
+                    }
+                  ]
+                }
+              ]
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "/contact/" },
+              "tagName": "nav",
               "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.25rem",
-                "borderRadius": "var(--radius)",
-                "textDecoration": "none",
-                "fontWeight": "700",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1.75rem"
               },
-              "textContent": "Free Quote"
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/services/" },
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.06em",
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "fontWeight": "600",
+                    "fontSize": "0.95rem",
+                    "@--md": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Services"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/about/" },
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.06em",
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "fontWeight": "600",
+                    "fontSize": "0.95rem",
+                    "@--md": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "About"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "${state.phoneHref}" },
+                  "style": {
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "gap": "0.5rem",
+                    "fontFamily": "var(--font-heading)",
+                    "color": "var(--color-text-primary)",
+                    "textDecoration": "none",
+                    "fontWeight": "700",
+                    "fontSize": "1.05rem",
+                    "letterSpacing": "0.01em",
+                    "@--sm": { "display": "none" },
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "style": { "color": "var(--color-primary)", "fontSize": "1.1rem" },
+                      "textContent": "☏"
+                    },
+                    { "tagName": "span", "textContent": "${state.phone}" }
+                  ]
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/contact/" },
+                  "style": {
+                    "display": "inline-block",
+                    "backgroundColor": "var(--color-primary)",
+                    "color": "var(--color-text-white)",
+                    "padding": "0.6rem 1.35rem",
+                    "borderRadius": "var(--radius-sm)",
+                    "textDecoration": "none",
+                    "fontFamily": "var(--font-heading)",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.05em",
+                    "fontWeight": "600",
+                    "fontSize": "0.95rem",
+                    "boxShadow": "0 10px 22px -12px rgba(244,81,30,0.9)",
+                    "transition": "background-color 0.15s, transform 0.15s",
+                    ":hover": {
+                      "backgroundColor": "var(--color-primary-hover)",
+                      "transform": "translateY(-1px)"
+                    }
+                  },
+                  "textContent": "Free Quote"
+                }
+              ]
             }
           ]
         }

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

@@ -4,24 +4,47 @@
     "heading": "Request a free quote"
   },
   "style": {
-    "display": "block"
+    "display": "block",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderTop": "4px solid var(--color-primary)",
+    "borderRadius": "var(--radius)",
+    "boxShadow": "var(--shadow-card)",
+    "overflow": "hidden"
   },
   "children": [
     {
-      "tagName": "h3",
-      "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.6rem",
-        "fontWeight": "700",
-        "letterSpacing": "-0.02em",
-        "margin": "0 0 1.25rem"
-      },
-      "textContent": "${state.heading}"
+      "tagName": "div",
+      "style": { "padding": "1.75rem 1.75rem 0" },
+      "children": [
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.7rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.02em",
+            "margin": "0 0 0.35rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": { "margin": "0", "color": "var(--color-text-muted)", "fontSize": "0.95rem" },
+          "textContent": "Flat-rate pricing · No obligation · Same-day slots available."
+        }
+      ]
     },
     {
       "tagName": "form",
       "attributes": { "action": "#", "method": "post" },
-      "style": { "display": "grid", "gap": "1rem", "alignContent": "start" },
+      "style": {
+        "display": "grid",
+        "gap": "0.9rem",
+        "alignContent": "start",
+        "padding": "1.4rem 1.75rem 1.75rem"
+      },
       "children": [
         {
           "tagName": "input",
@@ -34,10 +57,12 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
+            "padding": "0.8rem 0.9rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-cream)"
           }
         },
         {
@@ -45,7 +70,7 @@
           "style": {
             "display": "grid",
             "gridTemplateColumns": "1fr 1fr",
-            "gap": "1rem",
+            "gap": "0.9rem",
             "@--sm": { "gridTemplateColumns": "1fr" }
           },
           "children": [
@@ -60,10 +85,12 @@
               },
               "style": {
                 "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
+                "padding": "0.8rem 0.9rem",
+                "border": "1px solid var(--color-border-strong)",
+                "borderRadius": "var(--radius-sm)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit",
+                "backgroundColor": "var(--color-bg-cream)"
               }
             },
             {
@@ -76,29 +103,78 @@
               },
               "style": {
                 "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
+                "padding": "0.8rem 0.9rem",
+                "border": "1px solid var(--color-border-strong)",
+                "borderRadius": "var(--radius-sm)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit",
+                "backgroundColor": "var(--color-bg-cream)"
               }
             }
           ]
         },
         {
-          "tagName": "input",
-          "attributes": {
-            "type": "text",
-            "name": "service",
-            "placeholder": "What do you need? (e.g. AC repair)",
-            "aria-label": "Service needed"
-          },
+          "tagName": "select",
+          "attributes": { "name": "service", "aria-label": "Service needed" },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
-          }
+            "padding": "0.8rem 0.9rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit",
+            "fontWeight": "500",
+            "color": "var(--color-text-primary)",
+            "backgroundColor": "var(--color-bg-cream)",
+            "cursor": "pointer"
+          },
+          "children": [
+            {
+              "tagName": "option",
+              "attributes": { "value": "" },
+              "textContent": "What do you need? (e.g. AC repair)"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "ac-repair" },
+              "textContent": "AC Repair"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "ac-install" },
+              "textContent": "AC Installation"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "furnace-repair" },
+              "textContent": "Furnace Repair"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "furnace-install" },
+              "textContent": "Furnace Installation"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "heat-pump" },
+              "textContent": "Heat Pumps"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "maintenance" },
+              "textContent": "Maintenance Plan"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "emergency" },
+              "textContent": "Emergency — no heat/AC"
+            },
+            {
+              "tagName": "option",
+              "attributes": { "value": "other" },
+              "textContent": "Something else"
+            }
+          ]
         },
         {
           "tagName": "textarea",
@@ -110,27 +186,30 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
+            "padding": "0.8rem 0.9rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
             "fontSize": "1rem",
-            "fontFamily": "inherit"
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-cream)"
           }
         },
         {
           "tagName": "button",
           "attributes": { "type": "submit" },
-          "textContent": "Request My Free Quote",
+          "textContent": "Request My Free Quote →",
           "style": {
             "backgroundColor": "var(--color-primary)",
             "color": "var(--color-text-white)",
-            "padding": "0.85rem 1.5rem",
+            "padding": "0.95rem 1.5rem",
             "border": "none",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontWeight": "700",
+            "borderRadius": "var(--radius-sm)",
+            "fontFamily": "var(--font-heading)",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.05em",
+            "fontSize": "1.05rem",
+            "fontWeight": "600",
             "cursor": "pointer",
-            "justifySelf": "start",
             "transition": "background-color 0.15s",
             ":hover": { "backgroundColor": "var(--color-primary-hover)" }
           }