@jxsuite/starters 0.34.0 → 0.35.0

package/sites/professional-firm/components/pf-footer.json

@@ -1,17 +1,18 @@
 {
   "tagName": "pf-footer",
   "state": {
-    "brand": "Meridian Advisory",
-    "tagline": "Accounting, tax, and advisory for founders and growing companies.",
-    "address": "410 Corniche Plaza, Suite 900, Harborview",
+    "brand": "Meridian",
+    "sub": "Advisory",
+    "tagline": "Tax, assurance, and CFO counsel for founders and growing companies — since 2007.",
+    "address": "410 Corniche Plaza, Suite 900 · Harborview, NY 10014",
     "phone": "(555) 204-8830",
     "email": "hello@meridianadvisory.com"
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
+    "backgroundColor": "var(--color-ink-deep)",
     "color": "var(--color-text-white)",
-    "padding": "3.5rem 1.5rem 2rem"
+    "borderTop": "3px solid var(--color-accent)"
   },
   "children": [
     {
@@ -19,10 +20,11 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
+        "padding": "clamp(3rem, 6vw, 4.5rem) 1.5rem 2rem",
         "display": "grid",
-        "gridTemplateColumns": "2fr 1fr 1fr",
+        "gridTemplateColumns": "1.6fr 1fr 1fr",
         "gap": "2.5rem",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2rem" }
       },
       "children": [
         {
@@ -31,16 +33,45 @@
             {
               "tagName": "div",
               "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.4rem",
-                "fontWeight": "700",
-                "marginBottom": "0.75rem"
+                "display": "flex",
+                "alignItems": "baseline",
+                "gap": "0.55rem",
+                "marginBottom": "1rem"
               },
-              "textContent": "${state.brand}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-serif)",
+                    "fontSize": "1.7rem",
+                    "fontWeight": "600",
+                    "letterSpacing": "-0.01em"
+                  },
+                  "textContent": "${state.brand}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontSize": "0.68rem",
+                    "fontWeight": "600",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.28em",
+                    "color": "var(--color-accent)"
+                  },
+                  "textContent": "${state.sub}"
+                }
+              ]
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.75", "maxWidth": "36ch" },
+              "style": {
+                "margin": "0",
+                "maxWidth": "34ch",
+                "color": "rgba(244,241,233,0.7)",
+                "fontSize": "0.95rem",
+                "lineHeight": "1.65"
+              },
               "textContent": "${state.tagline}"
             }
           ]
@@ -51,27 +82,40 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-sans)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.18em",
+                "fontSize": "0.68rem",
+                "fontWeight": "600",
+                "color": "var(--color-accent)",
+                "paddingBottom": "0.75rem",
+                "marginBottom": "0.9rem",
+                "borderBottom": "1px solid rgba(244,241,233,0.16)"
               },
               "textContent": "Office"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
+              "style": {
+                "margin": "0 0 0.4rem",
+                "color": "rgba(244,241,233,0.82)",
+                "fontSize": "0.9rem",
+                "lineHeight": "1.6"
+              },
               "textContent": "${state.address}"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
+              "style": {
+                "margin": "0 0 0.25rem",
+                "color": "rgba(244,241,233,0.82)",
+                "fontSize": "0.9rem"
+              },
               "textContent": "${state.phone}"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.85" },
+              "style": { "margin": "0", "color": "rgba(244,241,233,0.82)", "fontSize": "0.9rem" },
               "textContent": "${state.email}"
             }
           ]
@@ -82,11 +126,15 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-sans)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.18em",
+                "fontSize": "0.68rem",
+                "fontWeight": "600",
+                "color": "var(--color-accent)",
+                "paddingBottom": "0.75rem",
+                "marginBottom": "0.9rem",
+                "borderBottom": "1px solid rgba(244,241,233,0.16)"
               },
               "textContent": "Firm"
             },
@@ -95,45 +143,53 @@
               "attributes": { "href": "/services/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "color": "rgba(244,241,233,0.82)",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "fontSize": "0.9rem",
+                "marginBottom": "0.5rem",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-accent)" }
               },
-              "textContent": "Services"
+              "textContent": "Practice areas"
             },
             {
               "tagName": "a",
-              "attributes": { "href": "/team/" },
+              "attributes": { "href": "/insights/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "color": "rgba(244,241,233,0.82)",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "fontSize": "0.9rem",
+                "marginBottom": "0.5rem",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-accent)" }
               },
-              "textContent": "Team"
+              "textContent": "The Quarterly"
             },
             {
               "tagName": "a",
-              "attributes": { "href": "/insights/" },
+              "attributes": { "href": "/team/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "color": "rgba(244,241,233,0.82)",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "fontSize": "0.9rem",
+                "marginBottom": "0.5rem",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-accent)" }
               },
-              "textContent": "Insights"
+              "textContent": "People"
             },
             {
               "tagName": "a",
               "attributes": { "href": "/contact/" },
               "style": {
                 "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.85",
-                "textDecoration": "none"
+                "color": "rgba(244,241,233,0.82)",
+                "textDecoration": "none",
+                "fontSize": "0.9rem",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-accent)" }
               },
               "textContent": "Contact"
             }
@@ -145,11 +201,14 @@
       "tagName": "div",
       "style": {
         "maxWidth": "var(--max-width)",
-        "margin": "2.5rem auto 0",
-        "paddingTop": "1.5rem",
-        "borderTop": "1px solid rgba(255, 255, 255, 0.15)",
-        "fontSize": "0.85rem",
-        "opacity": "0.6",
+        "margin": "0 auto",
+        "padding": "1.5rem",
+        "borderTop": "1px solid rgba(244,241,233,0.16)",
+        "fontFamily": "var(--font-sans)",
+        "fontSize": "0.72rem",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.12em",
+        "color": "rgba(244,241,233,0.5)",
         "display": "flex",
         "justifyContent": "space-between",
         "gap": "1rem",
@@ -159,12 +218,12 @@
         {
           "tagName": "p",
           "style": { "margin": "0" },
-          "textContent": "© Meridian Advisory. Built with Jx."
+          "textContent": "© Meridian Advisory · Registered CPAs"
         },
         {
           "tagName": "p",
           "style": { "margin": "0" },
-          "textContent": "Registered CPAs · Member, State Society of Accountants"
+          "textContent": "Member, State Society of Accountants"
         }
       ]
     }

package/sites/professional-firm/components/pf-hero.json

@@ -1,122 +1,168 @@
 {
   "tagName": "pf-hero",
   "state": {
-    "eyebrow": "",
+    "eyebrow": "Tax · Assurance · Advisory",
+    "marker": "Est. 2007",
     "heading": "",
-    "subheading": "",
-    "cta": "Book a Consultation",
+    "lede": "",
+    "aside": "",
+    "cta": "Book a consultation",
     "ctaHref": "/contact/",
-    "cta2": "",
-    "cta2Href": "/services/",
-    "bg": { "type": "string", "format": "image", "default": "" }
+    "cta2": "Read the Quarterly",
+    "cta2Href": "/insights/"
   },
   "style": {
     "display": "block",
-    "position": "relative",
-    "minHeight": "74vh",
-    "color": "var(--color-text-white)",
-    "backgroundImage": "url('${state.bg}')",
-    "backgroundSize": "cover",
-    "backgroundPosition": "center"
+    "backgroundColor": "var(--color-paper)",
+    "padding": "clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(2.5rem, 6vw, 4rem)"
   },
   "children": [
     {
       "tagName": "div",
-      "style": {
-        "position": "absolute",
-        "inset": "0",
-        "background": "linear-gradient(120deg, rgba(15,23,42,0.86) 0%, rgba(30,58,138,0.68) 100%)"
-      }
-    },
-    {
-      "tagName": "div",
-      "style": {
-        "position": "relative",
-        "zIndex": "10",
-        "display": "flex",
-        "alignItems": "center",
-        "minHeight": "74vh",
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "padding": "4rem 1.5rem"
-      },
+      "style": { "maxWidth": "var(--max-width)", "margin": "0 auto" },
       "children": [
         {
           "tagName": "div",
-          "style": { "maxWidth": "680px" },
+          "style": {
+            "display": "flex",
+            "alignItems": "baseline",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "paddingBottom": "0.9rem",
+            "borderBottom": "1px solid var(--color-rule)",
+            "fontFamily": "var(--font-sans)",
+            "fontSize": "0.72rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.18em"
+          },
           "children": [
             {
-              "tagName": "p",
-              "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.18em",
-                "fontSize": "0.8rem",
-                "fontWeight": "600",
-                "marginBottom": "1rem",
-                "color": "#bfdbfe"
-              },
+              "tagName": "span",
+              "style": { "color": "var(--color-accent)" },
               "textContent": "${state.eyebrow}"
             },
             {
-              "tagName": "h1",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "clamp(2.5rem, 6vw, 4.25rem)",
-                "fontWeight": "700",
-                "lineHeight": "1.08",
-                "margin": "0 0 1.25rem",
-                "letterSpacing": "-0.02em"
-              },
-              "textContent": "${state.heading}"
-            },
-            {
-              "tagName": "p",
-              "style": {
-                "fontSize": "clamp(1.1rem, 2vw, 1.35rem)",
-                "lineHeight": "1.6",
-                "margin": "0 0 2rem",
-                "opacity": "0.92",
-                "maxWidth": "52ch"
-              },
-              "textContent": "${state.subheading}"
-            },
+              "tagName": "span",
+              "style": { "color": "var(--color-muted)" },
+              "textContent": "${state.marker}"
+            }
+          ]
+        },
+        {
+          "tagName": "h1",
+          "style": {
+            "fontFamily": "var(--font-serif)",
+            "fontWeight": "500",
+            "fontSize": "clamp(2.6rem, 6.4vw, 5.2rem)",
+            "lineHeight": "1.04",
+            "letterSpacing": "-0.02em",
+            "margin": "clamp(1.75rem, 4vw, 3rem) 0 0",
+            "maxWidth": "18ch",
+            "color": "var(--color-ink)"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "marginTop": "clamp(1.75rem, 4vw, 2.75rem)",
+            "paddingTop": "clamp(1.5rem, 3vw, 2.25rem)",
+            "borderTop": "1px solid var(--color-hairline)",
+            "display": "grid",
+            "gridTemplateColumns": "1.35fr 1fr",
+            "gap": "clamp(1.5rem, 5vw, 4rem)",
+            "alignItems": "start",
+            "@--md": { "gridTemplateColumns": "1fr", "gap": "1.75rem" }
+          },
+          "children": [
             {
               "tagName": "div",
-              "style": { "display": "flex", "gap": "0.75rem", "flexWrap": "wrap" },
               "children": [
                 {
-                  "tagName": "a",
-                  "attributes": { "href": "${state.ctaHref}" },
+                  "tagName": "p",
                   "style": {
-                    "display": "inline-block",
-                    "backgroundColor": "var(--color-primary)",
-                    "color": "var(--color-text-white)",
-                    "padding": "0.85rem 2rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "1.05rem",
-                    "fontWeight": "600",
-                    "textDecoration": "none",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                    "margin": "0 0 1.75rem",
+                    "fontSize": "clamp(1.05rem, 1.6vw, 1.22rem)",
+                    "lineHeight": "1.65",
+                    "color": "var(--color-ink)",
+                    "maxWidth": "48ch"
                   },
-                  "textContent": "${state.cta}"
+                  "textContent": "${state.lede}"
                 },
                 {
-                  "tagName": "a",
-                  "attributes": { "href": "${state.cta2Href}" },
+                  "tagName": "div",
+                  "style": { "display": "flex", "gap": "0.75rem", "flexWrap": "wrap" },
+                  "children": [
+                    {
+                      "tagName": "a",
+                      "attributes": { "href": "${state.ctaHref}" },
+                      "style": {
+                        "display": "inline-block",
+                        "backgroundColor": "var(--color-ink)",
+                        "color": "var(--color-paper)",
+                        "padding": "0.8rem 1.6rem",
+                        "fontFamily": "var(--font-sans)",
+                        "fontSize": "0.78rem",
+                        "fontWeight": "600",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.14em",
+                        "textDecoration": "none",
+                        "transition": "background-color 0.15s",
+                        ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                      },
+                      "textContent": "${state.cta}"
+                    },
+                    {
+                      "tagName": "a",
+                      "attributes": { "href": "${state.cta2Href}" },
+                      "style": {
+                        "display": "${state.cta2 ? 'inline-flex' : 'none'}",
+                        "alignItems": "center",
+                        "color": "var(--color-ink)",
+                        "padding": "0.8rem 0.4rem",
+                        "fontFamily": "var(--font-sans)",
+                        "fontSize": "0.78rem",
+                        "fontWeight": "600",
+                        "textTransform": "uppercase",
+                        "letterSpacing": "0.14em",
+                        "textDecoration": "none",
+                        "borderBottom": "1px solid var(--color-accent)",
+                        "transition": "color 0.15s",
+                        ":hover": { "color": "var(--color-accent)" }
+                      },
+                      "textContent": "${state.cta2} →"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.aside ? 'block' : 'none'}",
+                "borderLeft": "1px solid var(--color-hairline)",
+                "paddingLeft": "clamp(1.25rem, 3vw, 2rem)",
+                "@--md": {
+                  "borderLeft": "none",
+                  "paddingLeft": "0",
+                  "borderTop": "1px solid var(--color-hairline)",
+                  "paddingTop": "1.5rem"
+                }
+              },
+              "children": [
+                {
+                  "tagName": "p",
                   "style": {
-                    "display": "${state.cta2 ? 'inline-block' : 'none'}",
-                    "border": "1px solid rgba(255,255,255,0.6)",
-                    "color": "var(--color-text-white)",
-                    "padding": "0.85rem 2rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "1.05rem",
-                    "fontWeight": "600",
-                    "textDecoration": "none",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "rgba(255,255,255,0.12)" }
+                    "margin": "0",
+                    "fontFamily": "var(--font-serif)",
+                    "fontStyle": "italic",
+                    "fontWeight": "400",
+                    "fontSize": "clamp(1.15rem, 2vw, 1.5rem)",
+                    "lineHeight": "1.5",
+                    "color": "var(--color-ink)"
                   },
-                  "textContent": "${state.cta2}"
+                  "textContent": "${state.aside}"
                 }
               ]
             }