@jxsuite/starters 0.34.0 → 0.35.0

package/sites/restaurant/components/bit-feature.json

@@ -1,40 +1,59 @@
 {
   "tagName": "bit-feature",
   "state": {
-    "icon": "",
+    "number": "",
     "title": "",
     "text": ""
   },
   "style": {
     "display": "block",
-    "padding": "1.75rem",
-    "backgroundColor": "var(--color-bg-cream)",
-    "borderRadius": "var(--radius)",
-    "border": "1px solid var(--color-border)"
+    "paddingTop": "1.5rem",
+    "borderTop": "1px solid var(--color-border-strong)"
   },
   "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": "600",
-        "margin": "0 0 0.5rem"
+        "display": "flex",
+        "alignItems": "baseline",
+        "gap": "0.9rem",
+        "marginBottom": "1rem"
       },
-      "textContent": "${state.title}"
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.35rem",
+            "fontWeight": "600",
+            "fontStyle": "italic",
+            "color": "var(--color-primary)",
+            "fontVariantNumeric": "tabular-nums"
+          },
+          "textContent": "${state.number}"
+        },
+        {
+          "tagName": "h3",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.45rem",
+            "fontWeight": "700",
+            "letterSpacing": "-0.01em",
+            "margin": "0",
+            "color": "var(--color-text-primary)"
+          },
+          "textContent": "${state.title}"
+        }
+      ]
     },
     {
       "tagName": "p",
       "style": {
         "margin": "0",
+        "fontFamily": "var(--font-body)",
         "color": "var(--color-text-muted)",
-        "fontSize": "0.98rem",
-        "lineHeight": "1.65"
+        "fontSize": "1rem",
+        "lineHeight": "1.7"
       },
       "textContent": "${state.text}"
     }

package/sites/restaurant/components/bit-footer.json

@@ -2,15 +2,16 @@
   "tagName": "bit-footer",
   "state": {
     "brand": "Bistro & Café",
-    "tagline": "Seasonal plates, house pastries, and small-batch coffee.",
-    "address": "128 Market Street, Riverbend",
+    "tagline": "Seasonal plates, house pastries, and small-batch coffee — served in a warm room just off Market Street.",
+    "address1": "128 Market Street",
+    "address2": "Riverbend, CA 90210",
     "phone": "(555) 018-2340"
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
+    "backgroundColor": "var(--color-espresso)",
     "color": "var(--color-text-white)",
-    "padding": "3.5rem 1.5rem 2rem"
+    "padding": "clamp(3.5rem, 7vw, 5rem) 1.5rem 2.25rem"
   },
   "children": [
     {
@@ -19,9 +20,9 @@
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
         "display": "grid",
-        "gridTemplateColumns": "2fr 1fr 1fr",
-        "gap": "2.5rem",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "gridTemplateColumns": "1.6fr 1fr 1fr",
+        "gap": "clamp(2rem, 5vw, 3.5rem)",
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2.25rem" }
       },
       "children": [
         {
@@ -31,15 +32,22 @@
               "tagName": "div",
               "style": {
                 "fontFamily": "var(--font-heading)",
-                "fontSize": "1.4rem",
+                "fontSize": "2rem",
                 "fontWeight": "700",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "-0.01em",
+                "marginBottom": "1rem"
               },
               "textContent": "${state.brand}"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.75", "maxWidth": "32ch" },
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-body)",
+                "opacity": "0.68",
+                "maxWidth": "38ch",
+                "lineHeight": "1.7"
+              },
               "textContent": "${state.tagline}"
             }
           ]
@@ -50,22 +58,36 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-body)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.16em",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "color": "var(--color-amber)",
+                "marginBottom": "1rem"
               },
               "textContent": "Visit"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0 0 0.35rem", "opacity": "0.85" },
-              "textContent": "${state.address}"
+              "style": { "margin": "0 0 0.35rem", "opacity": "0.82" },
+              "textContent": "${state.address1}"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.85" },
+              "style": { "margin": "0 0 0.75rem", "opacity": "0.82" },
+              "textContent": "${state.address2}"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "tel:+15550182340" },
+              "style": {
+                "color": "var(--color-text-white)",
+                "opacity": "0.82",
+                "textDecoration": "none",
+                "borderBottom": "1px solid rgba(246,236,219,0.25)",
+                "paddingBottom": "0.1rem"
+              },
               "textContent": "${state.phone}"
             }
           ]
@@ -76,11 +98,13 @@
             {
               "tagName": "div",
               "style": {
+                "fontFamily": "var(--font-body)",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.08em",
-                "fontSize": "0.75rem",
-                "opacity": "0.6",
-                "marginBottom": "0.75rem"
+                "letterSpacing": "0.16em",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "color": "var(--color-amber)",
+                "marginBottom": "1rem"
               },
               "textContent": "Explore"
             },
@@ -90,11 +114,13 @@
               "style": {
                 "display": "block",
                 "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "opacity": "0.82",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.5rem",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "1" }
               },
-              "textContent": "Menu"
+              "textContent": "The Menu"
             },
             {
               "tagName": "a",
@@ -102,11 +128,13 @@
               "style": {
                 "display": "block",
                 "color": "var(--color-text-white)",
-                "opacity": "0.85",
+                "opacity": "0.82",
                 "textDecoration": "none",
-                "marginBottom": "0.35rem"
+                "marginBottom": "0.5rem",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "1" }
               },
-              "textContent": "About"
+              "textContent": "Our Story"
             },
             {
               "tagName": "a",
@@ -114,10 +142,12 @@
               "style": {
                 "display": "block",
                 "color": "var(--color-text-white)",
-                "opacity": "0.85",
-                "textDecoration": "none"
+                "opacity": "0.82",
+                "textDecoration": "none",
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "1" }
               },
-              "textContent": "Contact"
+              "textContent": "Reservations"
             }
           ]
         }
@@ -127,17 +157,33 @@
       "tagName": "div",
       "style": {
         "maxWidth": "var(--max-width)",
-        "margin": "2.5rem auto 0",
+        "margin": "clamp(2.5rem, 5vw, 3.5rem) auto 0",
         "paddingTop": "1.5rem",
-        "borderTop": "1px solid rgba(255, 255, 255, 0.15)",
-        "fontSize": "0.85rem",
-        "opacity": "0.6"
+        "borderTop": "1px solid rgba(246,236,219,0.15)",
+        "display": "flex",
+        "justifyContent": "space-between",
+        "alignItems": "center",
+        "gap": "1rem",
+        "flexWrap": "wrap",
+        "fontFamily": "var(--font-body)",
+        "fontSize": "0.8rem",
+        "opacity": "0.55"
       },
       "children": [
         {
           "tagName": "p",
           "style": { "margin": "0" },
           "textContent": "© Bistro & Café. Built with Jx."
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.14em",
+            "fontSize": "0.7rem"
+          },
+          "textContent": "Set in Playfair Display & Mulish"
         }
       ]
     }

package/sites/restaurant/components/bit-gallery.json

@@ -5,27 +5,34 @@
     "img2": { "type": "string", "format": "image", "default": "" },
     "img3": { "type": "string", "format": "image", "default": "" },
     "img4": { "type": "string", "format": "image", "default": "" },
-    "alt": "Gallery photo from the restaurant"
+    "alt": "Dishes and the dining room"
   },
   "style": {
     "display": "grid",
-    "gridTemplateColumns": "repeat(4, 1fr)",
-    "gap": "0.75rem",
-    "maxWidth": "var(--max-width)",
+    "gridTemplateColumns": "1.5fr 1fr 1fr",
+    "gridAutoRows": "clamp(150px, 19vw, 250px)",
+    "gap": "0.85rem",
+    "maxWidth": "var(--max-width-wide)",
     "margin": "0 auto",
     "padding": "0 1.5rem",
-    "@--md": { "gridTemplateColumns": "repeat(2, 1fr)" }
+    "@--md": {
+      "gridTemplateColumns": "1fr 1fr",
+      "gridAutoRows": "clamp(150px, 42vw, 230px)"
+    }
   },
   "children": [
     {
       "tagName": "img",
       "attributes": { "src": "${state.img1}", "alt": "${state.alt}", "loading": "lazy" },
       "style": {
+        "gridColumn": "1",
+        "gridRow": "span 2",
         "width": "100%",
-        "aspectRatio": "1 / 1",
+        "height": "100%",
         "objectFit": "cover",
         "borderRadius": "var(--radius)",
-        "display": "block"
+        "display": "block",
+        "@--md": { "gridColumn": "1 / 3", "gridRow": "auto" }
       }
     },
     {
@@ -33,7 +40,7 @@
       "attributes": { "src": "${state.img2}", "alt": "${state.alt}", "loading": "lazy" },
       "style": {
         "width": "100%",
-        "aspectRatio": "1 / 1",
+        "height": "100%",
         "objectFit": "cover",
         "borderRadius": "var(--radius)",
         "display": "block"
@@ -44,7 +51,7 @@
       "attributes": { "src": "${state.img3}", "alt": "${state.alt}", "loading": "lazy" },
       "style": {
         "width": "100%",
-        "aspectRatio": "1 / 1",
+        "height": "100%",
         "objectFit": "cover",
         "borderRadius": "var(--radius)",
         "display": "block"
@@ -54,11 +61,13 @@
       "tagName": "img",
       "attributes": { "src": "${state.img4}", "alt": "${state.alt}", "loading": "lazy" },
       "style": {
+        "gridColumn": "2 / 4",
         "width": "100%",
-        "aspectRatio": "1 / 1",
+        "height": "100%",
         "objectFit": "cover",
         "borderRadius": "var(--radius)",
-        "display": "block"
+        "display": "block",
+        "@--md": { "gridColumn": "auto" }
       }
     }
   ]

package/sites/restaurant/components/bit-hero.json

@@ -3,86 +3,123 @@
   "state": {
     "eyebrow": "",
     "heading": "",
+    "headingAccent": "",
+    "headingTail": "",
     "subheading": "",
+    "hours": "",
     "cta": "Reserve a Table",
     "ctaHref": "/contact/",
     "cta2": "",
     "cta2Href": "/menu/",
+    "caption": "",
     "bg": { "type": "string", "format": "image", "default": "" }
   },
   "style": {
     "display": "block",
-    "position": "relative",
-    "minHeight": "78vh",
-    "color": "var(--color-text-white)",
-    "backgroundImage": "url('${state.bg}')",
-    "backgroundSize": "cover",
-    "backgroundPosition": "center"
+    "backgroundColor": "var(--color-bg-paper)",
+    "borderBottom": "1px solid var(--color-border)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "position": "absolute",
-        "inset": "0",
-        "background": "linear-gradient(180deg, rgba(28,25,23,0.35) 0%, rgba(28,25,23,0.72) 100%)"
-      }
-    },
-    {
-      "tagName": "div",
-      "style": {
-        "position": "relative",
-        "zIndex": "10",
-        "display": "flex",
-        "alignItems": "center",
-        "minHeight": "78vh",
-        "maxWidth": "var(--max-width)",
+        "maxWidth": "var(--max-width-wide)",
         "margin": "0 auto",
-        "padding": "4rem 1.5rem"
+        "display": "grid",
+        "gridTemplateColumns": "1.05fr 1fr",
+        "alignItems": "stretch",
+        "minHeight": "min(84vh, 780px)",
+        "@--md": { "gridTemplateColumns": "1fr", "minHeight": "0" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "maxWidth": "640px" },
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "center",
+            "padding": "clamp(2.75rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem)",
+            "order": "1",
+            "@--md": { "order": "2", "padding": "clamp(2.5rem, 7vw, 3.5rem) 1.5rem" }
+          },
           "children": [
             {
-              "tagName": "p",
+              "tagName": "div",
               "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.18em",
-                "fontSize": "0.8rem",
-                "fontWeight": "600",
-                "marginBottom": "1rem",
-                "color": "#fcd9b6"
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.9rem",
+                "marginBottom": "1.75rem"
               },
-              "textContent": "${state.eyebrow}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "2.75rem",
+                    "height": "1px",
+                    "backgroundColor": "var(--color-primary)"
+                  }
+                },
+                {
+                  "tagName": "p",
+                  "style": {
+                    "margin": "0",
+                    "fontFamily": "var(--font-body)",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.24em",
+                    "fontSize": "0.74rem",
+                    "fontWeight": "700",
+                    "color": "var(--color-primary)"
+                  },
+                  "textContent": "${state.eyebrow}"
+                }
+              ]
             },
             {
               "tagName": "h1",
               "style": {
                 "fontFamily": "var(--font-heading)",
-                "fontSize": "clamp(2.5rem, 6vw, 4.25rem)",
+                "fontSize": "clamp(2.75rem, 6.4vw, 5.25rem)",
                 "fontWeight": "700",
-                "lineHeight": "1.08",
-                "margin": "0 0 1.25rem",
-                "letterSpacing": "-0.02em"
+                "lineHeight": "1.02",
+                "letterSpacing": "-0.02em",
+                "margin": "0 0 1.5rem",
+                "color": "var(--color-text-primary)"
               },
-              "textContent": "${state.heading}"
+              "children": [
+                { "tagName": "span", "textContent": "${state.heading} " },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontStyle": "italic",
+                    "fontWeight": "500",
+                    "color": "var(--color-primary)"
+                  },
+                  "textContent": "${state.headingAccent}"
+                },
+                { "tagName": "span", "textContent": "${state.headingTail}" }
+              ]
             },
             {
               "tagName": "p",
               "style": {
-                "fontSize": "clamp(1.1rem, 2vw, 1.35rem)",
-                "lineHeight": "1.6",
+                "fontFamily": "var(--font-body)",
+                "fontSize": "clamp(1.05rem, 1.5vw, 1.2rem)",
+                "lineHeight": "1.7",
                 "margin": "0 0 2rem",
-                "opacity": "0.92",
-                "maxWidth": "48ch"
+                "color": "var(--color-text-muted)",
+                "maxWidth": "44ch"
               },
               "textContent": "${state.subheading}"
             },
             {
               "tagName": "div",
-              "style": { "display": "flex", "gap": "0.75rem", "flexWrap": "wrap" },
+              "style": {
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "1rem",
+                "flexWrap": "wrap"
+              },
               "children": [
                 {
                   "tagName": "a",
@@ -91,10 +128,13 @@
                     "display": "inline-block",
                     "backgroundColor": "var(--color-primary)",
                     "color": "var(--color-text-white)",
-                    "padding": "0.85rem 2rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "1.05rem",
-                    "fontWeight": "600",
+                    "padding": "0.9rem 2rem",
+                    "borderRadius": "999px",
+                    "fontFamily": "var(--font-body)",
+                    "fontSize": "0.82rem",
+                    "fontWeight": "700",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.14em",
                     "textDecoration": "none",
                     "transition": "background-color 0.15s",
                     ":hover": { "backgroundColor": "var(--color-primary-hover)" }
@@ -105,20 +145,105 @@
                   "tagName": "a",
                   "attributes": { "href": "${state.cta2Href}" },
                   "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",
+                    "display": "${state.cta2 ? 'inline-flex' : 'none'}",
+                    "alignItems": "center",
+                    "gap": "0.5rem",
+                    "color": "var(--color-text-primary)",
+                    "fontFamily": "var(--font-body)",
+                    "fontSize": "0.82rem",
+                    "fontWeight": "700",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.14em",
                     "textDecoration": "none",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "rgba(255,255,255,0.12)" }
+                    "borderBottom": "1px solid var(--color-border-strong)",
+                    "paddingBottom": "0.4rem",
+                    "transition": "gap 0.2s, border-color 0.15s",
+                    ":hover": { "gap": "0.95rem", "borderColor": "var(--color-primary)" }
                   },
-                  "textContent": "${state.cta2}"
+                  "textContent": "${state.cta2} →"
                 }
               ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.hours ? 'flex' : 'none'}",
+                "alignItems": "center",
+                "gap": "0.6rem",
+                "marginTop": "2.25rem",
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.8rem",
+                "fontWeight": "600",
+                "color": "var(--color-text-muted)"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "0.5rem",
+                    "height": "0.5rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-amber)",
+                    "boxShadow": "0 0 0 3px rgba(201,138,60,0.22)"
+                  }
+                },
+                { "tagName": "span", "textContent": "${state.hours}" }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "position": "relative",
+            "order": "2",
+            "minHeight": "clamp(320px, 46vw, 780px)",
+            "backgroundImage": "url('${state.bg}')",
+            "backgroundSize": "cover",
+            "backgroundPosition": "center",
+            "@--md": { "order": "1", "minHeight": "clamp(300px, 62vw, 460px)" }
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "position": "absolute",
+                "inset": "0",
+                "background": "linear-gradient(210deg, rgba(30,21,15,0) 45%, rgba(30,21,15,0.55) 100%)"
+              }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.caption ? 'flex' : 'none'}",
+                "position": "absolute",
+                "left": "clamp(1rem, 2vw, 1.75rem)",
+                "bottom": "clamp(1rem, 2vw, 1.75rem)",
+                "alignItems": "center",
+                "gap": "0.7rem",
+                "padding": "0.55rem 1rem",
+                "backgroundColor": "rgba(30,21,15,0.62)",
+                "backdropFilter": "blur(4px)",
+                "borderRadius": "999px",
+                "color": "var(--color-text-white)",
+                "fontFamily": "var(--font-body)",
+                "fontSize": "0.72rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.14em"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "0.4rem",
+                    "height": "0.4rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-amber)"
+                  }
+                },
+                { "tagName": "span", "textContent": "${state.caption}" }
+              ]
             }
           ]
         }