@neowhale/storefront 0.2.40 → 0.2.41

package/dist/react/index.js

@@ -2295,6 +2295,68 @@ 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;
+  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(
+      "img",
+      {
+        src: img.url,
+        alt: img.alt || "",
+        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)) }) });
+}
 function GallerySection({ section, theme }) {
   const { images } = section.content;
   const columns = section.config?.columns || 3;
@@ -2730,6 +2792,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":