@neowhale/storefront 0.2.42 → 0.2.44

package/dist/react/index.cjs

@@ -2304,29 +2304,64 @@ function CollageHeroSection({ section, theme, tracking, onEvent }) {
   c.overlay_opacity ?? 0.45;
   const count = Math.min(images.length, 5);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    /* @__PURE__ */ jsxRuntime.jsxs("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)",
+      gridTemplateColumns: "3fr 2fr",
+      gridTemplateRows: "auto",
       gap: "2px"
-    }, children: images.slice(0, count).map((img, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: img.url,
-        alt: img.alt || "",
-        loading: i < 3 ? "eager" : "lazy",
-        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-      }
-    ) }, i)) }),
+    }, children: [
+      count > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { gridRow: count >= 3 ? "span 2" : void 0, overflow: "hidden", background: theme.surface, maxHeight: "70vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: images[0].url,
+          alt: images[0].alt || "",
+          loading: "eager",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "40vh" }
+        }
+      ) }),
+      count >= 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: images[1].url,
+          alt: images[1].alt || "",
+          loading: "eager",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "20vh", maxHeight: "35vh" }
+        }
+      ) }),
+      count >= 3 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: images[2].url,
+          alt: images[2].alt || "",
+          loading: "lazy",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "20vh", maxHeight: "35vh" }
+        }
+      ) }),
+      count >= 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { gridColumn: "1 / -1", display: "grid", gridTemplateColumns: count >= 5 ? "1fr 1fr" : "1fr", gap: "2px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface, maxHeight: "25vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: images[3].url,
+            alt: images[3].alt || "",
+            loading: "lazy",
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }
+        ) }),
+        count >= 5 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface, maxHeight: "25vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: images[4].url,
+            alt: images[4].alt || "",
+            loading: "lazy",
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }
+        ) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.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%)",
+      background: "linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 35%, transparent 55%)",
       pointerEvents: "none"
     } }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
@@ -2780,6 +2815,300 @@ function SuccessState({ theme, heading, message, couponCode }) {
     }, children: couponCode })
   ] }) });
 }
+function TestimonialsSection({ section, theme }) {
+  const c = section.content;
+  const layout = section.config?.layout || "grid";
+  const reviews = c.reviews || [];
+  if (reviews.length === 0) return null;
+  const overallRating = c.rating ?? 5;
+  const reviewCount = c.review_count ?? reviews.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3rem 1.5rem", maxWidth: 640, margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "2rem" }, children: [
+      c.heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+        fontSize: "clamp(1.25rem, 4vw, 1.75rem)",
+        fontWeight: 300,
+        fontFamily: theme.fontDisplay || "inherit",
+        margin: "0 0 0.75rem",
+        lineHeight: 1.2,
+        letterSpacing: "-0.02em",
+        color: theme.fg
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: c.heading }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", marginBottom: "0.25rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Stars, { rating: overallRating, color: theme.accent, size: 18 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.1rem", fontWeight: 500, color: theme.fg }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: overallRating.toFixed(1) }) })
+      ] }),
+      c.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, margin: 0, letterSpacing: "0.1em", textTransform: "uppercase" }, children: c.subtitle }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.8rem", color: theme.muted, margin: 0, letterSpacing: "0.1em", textTransform: "uppercase" }, children: [
+        "from ",
+        /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: String(reviewCount) }),
+        " reviews"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: layout === "list" ? "1fr" : `repeat(${Math.min(reviews.length, 2)}, 1fr)`,
+      gap: "0.75rem"
+    }, children: reviews.map((review, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      background: theme.surface,
+      border: `1px solid ${theme.fg}08`,
+      padding: "1.25rem"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Stars, { rating: review.rating ?? 5, color: theme.accent, size: 14 }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+        fontSize: "0.88rem",
+        color: `${theme.fg}CC`,
+        margin: "0.75rem 0",
+        lineHeight: 1.6,
+        fontWeight: 300,
+        fontStyle: "italic"
+      }, children: [
+        '"',
+        review.text,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", fontWeight: 500, color: theme.fg }, children: review.name }),
+        review.location && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7rem", color: theme.muted }, children: review.location })
+      ] })
+    ] }, i)) })
+  ] });
+}
+function Stars({ rating, color, size }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", gap: "1px" }, children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: n <= Math.round(rating) ? color : "none",
+      stroke: color,
+      strokeWidth: 1.5,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.5L10 14.26 5.06 16.7l.94-5.5-4-3.9 5.53-.8z" })
+    },
+    n
+  )) });
+}
+function ValueStackSection({ section, theme }) {
+  const c = section.content;
+  const items = c.items || [];
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "3rem 1.5rem", maxWidth: 520, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}08`, padding: "clamp(1.5rem, 5vw, 2.5rem)" }, children: [
+    c.heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      fontSize: "clamp(1.25rem, 4vw, 1.5rem)",
+      fontWeight: 300,
+      fontFamily: theme.fontDisplay || "inherit",
+      margin: "0 0 0.25rem",
+      lineHeight: 1.2,
+      letterSpacing: "-0.02em",
+      color: theme.fg,
+      textAlign: "center"
+    }, children: c.heading }),
+    c.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+      fontSize: "0.8rem",
+      color: theme.accent,
+      margin: "0 0 1.5rem",
+      letterSpacing: "0.15em",
+      textTransform: "uppercase",
+      textAlign: "center"
+    }, children: c.subtitle }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.625rem" }, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "0.75rem",
+      padding: "0.5rem 0",
+      borderBottom: i < items.length - 1 ? `1px solid ${theme.fg}08` : void 0
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: theme.accent, fontSize: "1rem", lineHeight: 1, flexShrink: 0, marginTop: "0.1rem" }, children: "\u2713" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, fontSize: "0.9rem", color: `${theme.fg}CC`, fontWeight: 300, lineHeight: 1.5 }, children: item.text }),
+      item.value && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+        fontSize: "0.8rem",
+        color: theme.muted,
+        fontWeight: 400,
+        textDecoration: "line-through",
+        flexShrink: 0
+      }, children: item.value })
+    ] }, i)) }),
+    (c.total_value || c.offer_label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      marginTop: "1.5rem",
+      padding: "1rem",
+      background: `${theme.accent}0A`,
+      border: `1px dashed ${theme.accent}30`,
+      textAlign: "center"
+    }, children: [
+      c.total_value && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.75rem", color: theme.muted, marginBottom: "0.25rem", letterSpacing: "0.1em", textTransform: "uppercase" }, children: [
+        "Total value: ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textDecoration: "line-through" }, children: c.total_value })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        fontSize: "clamp(1.25rem, 4vw, 1.5rem)",
+        fontWeight: 500,
+        fontFamily: theme.fontDisplay || "inherit",
+        color: theme.accent
+      }, children: c.offer_label || "Free" })
+    ] })
+  ] }) });
+}
+function FAQSection({ section, theme }) {
+  const c = section.content;
+  const items = c.items || [];
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "2.5rem 1.5rem", maxWidth: 580, margin: "0 auto" }, children: [
+    c.heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+      fontSize: 11,
+      fontWeight: 500,
+      textTransform: "uppercase",
+      letterSpacing: "0.25em",
+      color: `${theme.fg}40`,
+      margin: "0 0 1.25rem",
+      textAlign: "center"
+    }, children: c.heading }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 0 }, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(FAQItem, { question: item.question, answer: item.answer, theme }, i)) })
+  ] });
+}
+function FAQItem({ question, answer, theme }) {
+  const [open, setOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderBottom: `1px solid ${theme.fg}0A` }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        style: {
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "1rem 0",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: theme.fg,
+          fontFamily: "inherit",
+          textAlign: "left"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9rem", fontWeight: 400, lineHeight: 1.4 }, children: question }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+            fontSize: "1.25rem",
+            fontWeight: 200,
+            color: theme.muted,
+            transition: "transform 0.2s",
+            transform: open ? "rotate(45deg)" : "none",
+            flexShrink: 0,
+            marginLeft: "1rem"
+          }, children: "+" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      maxHeight: open ? "20rem" : 0,
+      overflow: "hidden",
+      transition: "max-height 0.3s ease"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+      fontSize: "0.85rem",
+      color: `${theme.fg}88`,
+      lineHeight: 1.7,
+      fontWeight: 300,
+      margin: 0,
+      padding: "0 0 1rem"
+    }, children: answer }) })
+  ] });
+}
+function TrustBadgesSection({ section, theme }) {
+  const c = section.content;
+  const badges = c.badges || [];
+  if (badges.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    padding: "1.25rem 1.5rem",
+    borderTop: `1px solid ${theme.fg}08`,
+    borderBottom: `1px solid ${theme.fg}08`
+  }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "clamp(1rem, 4vw, 2.5rem)",
+    flexWrap: "wrap"
+  }, children: badges.map((badge, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.375rem"
+  }, children: [
+    badge.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9rem" }, children: badge.icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+      fontSize: "0.7rem",
+      fontWeight: 500,
+      textTransform: "uppercase",
+      letterSpacing: "0.15em",
+      color: theme.muted
+    }, children: badge.label })
+  ] }, i)) }) });
+}
+function CountdownSection({ section, theme }) {
+  const c = section.content;
+  const endDate = c.end_date ? new Date(c.end_date) : null;
+  const [remaining, setRemaining] = react.useState(null);
+  const [expired, setExpired] = react.useState(false);
+  react.useEffect(() => {
+    if (!endDate) return;
+    function tick() {
+      const diff = endDate.getTime() - Date.now();
+      if (diff <= 0) {
+        setExpired(true);
+        return;
+      }
+      setRemaining({
+        d: Math.floor(diff / 864e5),
+        h: Math.floor(diff % 864e5 / 36e5),
+        m: Math.floor(diff % 36e5 / 6e4),
+        s: Math.floor(diff % 6e4 / 1e3)
+      });
+    }
+    tick();
+    const id = setInterval(tick, 1e3);
+    return () => clearInterval(id);
+  }, [endDate?.getTime()]);
+  if (!endDate) return null;
+  if (expired) {
+    return c.expired_text ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.85rem", color: theme.muted, margin: 0 }, children: c.expired_text }) }) : null;
+  }
+  if (!remaining) return null;
+  const units = [
+    { label: "Days", value: remaining.d },
+    { label: "Hours", value: remaining.h },
+    { label: "Min", value: remaining.m },
+    { label: "Sec", value: remaining.s }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", textAlign: "center" }, children: [
+    c.heading && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+      fontSize: "0.8rem",
+      color: theme.accent,
+      margin: "0 0 1rem",
+      letterSpacing: "0.15em",
+      textTransform: "uppercase"
+    }, children: c.heading }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", gap: "0.5rem" }, children: units.map((u) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      minWidth: "clamp(3.5rem, 12vw, 4.5rem)",
+      padding: "0.75rem 0.25rem",
+      background: theme.surface,
+      border: `1px solid ${theme.fg}08`
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        fontFamily: theme.fontDisplay || "inherit",
+        fontSize: "clamp(1.5rem, 5vw, 2rem)",
+        fontWeight: 300,
+        lineHeight: 1,
+        color: theme.fg,
+        fontVariantNumeric: "tabular-nums"
+      }, children: String(u.value).padStart(2, "0") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        fontSize: "0.6rem",
+        fontWeight: 500,
+        textTransform: "uppercase",
+        letterSpacing: "0.2em",
+        color: theme.muted,
+        marginTop: "0.375rem"
+      }, children: u.label })
+    ] }, u.label)) })
+  ] });
+}
 function SectionRenderer({
   section,
   data,
@@ -2814,6 +3143,16 @@ function SectionRenderer({
         return /* @__PURE__ */ jsxRuntime.jsx(SocialLinksSection, { section, theme });
       case "lead_capture":
         return /* @__PURE__ */ jsxRuntime.jsx(LeadCaptureSection, { section, data, theme, onEvent });
+      case "testimonials":
+        return /* @__PURE__ */ jsxRuntime.jsx(TestimonialsSection, { section, theme });
+      case "value_stack":
+        return /* @__PURE__ */ jsxRuntime.jsx(ValueStackSection, { section, theme });
+      case "faq":
+        return /* @__PURE__ */ jsxRuntime.jsx(FAQSection, { section, theme });
+      case "trust_badges":
+        return /* @__PURE__ */ jsxRuntime.jsx(TrustBadgesSection, { section, theme });
+      case "countdown":
+        return /* @__PURE__ */ jsxRuntime.jsx(CountdownSection, { section, theme });
       case "divider":
         return /* @__PURE__ */ jsxRuntime.jsx(DividerSection, { theme });
       default: