@neowhale/storefront 0.2.40 → 0.2.42

package/dist/react/index.js

@@ -2295,6 +2295,66 @@ function VideoSection({ section, theme }) {
   const isEmbed = url.includes("youtube") || url.includes("youtu.be") || url.includes("vimeo");
   return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: isEmbed ? /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ jsx("iframe", { src: toEmbedUrl(url), style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" }, allow: "autoplay; fullscreen", title: "Video" }) }) : /* @__PURE__ */ jsx("video", { src: url, poster, controls: true, style: { width: "100%", display: "block", background: theme.surface } }) });
 }
+function CollageHeroSection({ section, theme, tracking, onEvent }) {
+  const c = section.content;
+  const images = c.images || [];
+  if (images.length === 0) return null;
+  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,
+        alt: img.alt || "",
+        loading: i < 3 ? "eager" : "lazy",
+        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+      }
+    ) }, 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 })
+    ] })
+  ] });
+}
 function GallerySection({ section, theme }) {
   const { images } = section.content;
   const columns = section.config?.columns || 3;
@@ -2730,6 +2790,8 @@ function SectionRenderer({
     switch (section.type) {
       case "hero":
         return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking, onEvent });
+      case "collage_hero":
+        return /* @__PURE__ */ jsx(CollageHeroSection, { section, theme, tracking, onEvent });
       case "text":
         return /* @__PURE__ */ jsx(TextSection, { section, theme });
       case "image":