@neowhale/storefront 0.2.41 → 0.2.42

package/dist/react/index.js

@@ -2299,21 +2299,20 @@ function CollageHeroSection({ section, theme, tracking, onEvent }) {
   const c = section.content;
   const images = c.images || [];
   if (images.length === 0) return null;
-  const opacity = c.overlay_opacity ?? 0.45;
-  return /* @__PURE__ */ jsx("div", { style: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: {
-    display: "grid",
-    gridTemplateColumns: images.length >= 4 ? "1fr 1fr 1fr" : "1fr 1fr",
-    gridTemplateRows: images.length >= 4 ? "auto auto" : "auto",
-    gap: "3px"
-  }, children: images.slice(0, 6).map((img, i) => /* @__PURE__ */ jsxs("div", { style: {
-    position: "relative",
-    gridColumn: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
-    gridRow: i === 0 && images.length >= 4 ? "1 / 3" : void 0,
-    aspectRatio: i === 0 ? "3/4" : images.length >= 4 && i <= 2 ? "1" : "3/4",
-    overflow: "hidden",
-    background: theme.surface
-  }, children: [
-    /* @__PURE__ */ jsx(
+  c.overlay_opacity ?? 0.45;
+  const count = Math.min(images.length, 5);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: count >= 4 ? "repeat(4, 1fr)" : "repeat(2, 1fr)",
+      gridTemplateRows: count >= 4 ? "minmax(0, 28vh) minmax(0, 28vh)" : "minmax(0, 50vh)",
+      gap: "2px"
+    }, children: images.slice(0, count).map((img, i) => /* @__PURE__ */ jsx("div", { style: {
+      gridColumn: i === 0 && count >= 4 ? "span 2" : void 0,
+      gridRow: i === 0 && count >= 4 ? "span 2" : void 0,
+      overflow: "hidden",
+      background: theme.surface
+    }, children: /* @__PURE__ */ jsx(
       "img",
       {
         src: img.url,
@@ -2321,41 +2320,40 @@ function CollageHeroSection({ section, theme, tracking, onEvent }) {
         loading: i < 3 ? "eager" : "lazy",
         style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
       }
-    ),
-    i === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { style: {
-        position: "absolute",
-        inset: 0,
-        background: `linear-gradient(to top, rgba(0,0,0,${opacity + 0.3}), rgba(0,0,0,${opacity * 0.3}))`
-      } }),
-      /* @__PURE__ */ jsxs("div", { style: {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        padding: "clamp(1.5rem, 5vw, 3rem)",
-        zIndex: 1
-      }, children: [
-        c.title && /* @__PURE__ */ jsx("h1", { style: {
-          fontSize: "clamp(2rem, 8vw, 3.5rem)",
-          fontWeight: 300,
-          fontFamily: theme.fontDisplay || "inherit",
-          margin: 0,
-          lineHeight: 1.1,
-          letterSpacing: "-0.03em",
-          color: theme.fg
-        }, children: /* @__PURE__ */ jsx(AnimatedText, { text: c.title }) }),
-        c.subtitle && /* @__PURE__ */ jsx("p", { style: {
-          fontSize: "clamp(0.7rem, 2vw, 0.95rem)",
-          color: `${theme.fg}CC`,
-          margin: "0.75rem 0 0",
-          letterSpacing: "0.1em",
-          textTransform: "uppercase",
-          fontWeight: 400
-        }, children: c.subtitle })
-      ] })
+    ) }, i)) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 60%)",
+      pointerEvents: "none"
+    } }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      padding: "clamp(1.25rem, 4vw, 2.5rem)",
+      zIndex: 1
+    }, children: [
+      c.title && /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "clamp(1.75rem, 7vw, 3rem)",
+        fontWeight: 300,
+        fontFamily: theme.fontDisplay || "inherit",
+        margin: 0,
+        lineHeight: 1.1,
+        letterSpacing: "-0.03em",
+        color: theme.fg
+      }, children: /* @__PURE__ */ jsx(AnimatedText, { text: c.title }) }),
+      c.subtitle && /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "clamp(0.65rem, 1.8vw, 0.85rem)",
+        color: `${theme.fg}BB`,
+        margin: "0.5rem 0 0",
+        letterSpacing: "0.12em",
+        textTransform: "uppercase",
+        fontWeight: 400
+      }, children: c.subtitle })
     ] })
-  ] }, i)) }) });
+  ] });
 }
 function GallerySection({ section, theme }) {
   const { images } = section.content;