@sprintup-cms/sdk 1.8.66 → 1.8.71

package/dist/react/index.js

@@ -54,11 +54,15 @@ function ImageBlock({ block }) {
 }
 function HeroBlock({ block }) {
   const d = getData(block);
-  return /* @__PURE__ */ jsx("section", { className: "py-12 md:py-20", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
-    d.badge && /* @__PURE__ */ jsx("span", { className: "inline-block px-3 py-1 text-xs font-semibold rounded-full bg-secondary text-secondary-foreground mb-4", children: d.badge }),
-    /* @__PURE__ */ jsx("h1", { className: "text-4xl md:text-5xl font-bold tracking-tight mb-4 text-balance", children: d.title }),
-    d.subtitle && /* @__PURE__ */ jsx("p", { className: "text-xl text-muted-foreground mb-8", children: d.subtitle }),
-    (d.primaryButton || d.cta) && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 flex-wrap", children: [
+  const align = d.alignment || "left";
+  const textAlign = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+  const itemsAlign = align === "right" ? "items-end" : align === "center" ? "items-center" : "items-start";
+  const mx = align === "center" ? "mx-auto" : align === "right" ? "ml-auto" : "";
+  return /* @__PURE__ */ jsx("section", { className: "py-12 md:py-20", children: /* @__PURE__ */ jsxs("div", { className: `max-w-3xl ${mx}`, children: [
+    d.badge && /* @__PURE__ */ jsx("span", { className: `inline-block px-3 py-1 text-xs font-semibold rounded-full bg-secondary text-secondary-foreground mb-4`, children: d.badge }),
+    /* @__PURE__ */ jsx("h1", { className: `text-4xl md:text-5xl font-bold tracking-tight mb-4 text-balance ${textAlign}`, children: d.title }),
+    d.subtitle && /* @__PURE__ */ jsx("p", { className: `text-xl text-muted-foreground mb-8 ${textAlign}`, children: d.subtitle }),
+    (d.primaryButton || d.cta) && /* @__PURE__ */ jsxs("div", { className: `flex gap-4 flex-wrap ${itemsAlign}`, children: [
       (d.primaryButton || d.cta) && /* @__PURE__ */ jsx(
         "a",
         {
@@ -442,19 +446,200 @@ function PricingTableBlock({ block }) {
     }) })
   ] });
 }
+function CenteredHeroBlock({ block }) {
+  const d = getData(block);
+  const hasBg = d.backgroundImage;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "relative flex flex-col items-center justify-center text-center py-24 px-6 overflow-hidden rounded-2xl",
+      style: hasBg ? { backgroundImage: `url(${d.backgroundImage})`, backgroundSize: "cover", backgroundPosition: "center" } : { background: d.backgroundColor || "var(--muted)" },
+      children: [
+        hasBg && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl", style: { background: `rgba(0,0,0,${d.overlayOpacity ?? 0.45})` } }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 max-w-3xl mx-auto", children: [
+          d.badge && /* @__PURE__ */ jsx("span", { className: "inline-block px-3 py-1 text-xs font-semibold rounded-full bg-background/20 backdrop-blur-sm border border-white/20 mb-5 text-white", children: d.badge }),
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: "text-4xl md:text-6xl font-extrabold tracking-tight mb-5 text-balance leading-tight",
+              style: { color: hasBg ? "#fff" : "var(--foreground)" },
+              children: d.title
+            }
+          ),
+          d.subtitle && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg md:text-xl mb-8 max-w-2xl mx-auto text-pretty leading-relaxed",
+              style: { color: hasBg ? "rgba(255,255,255,0.8)" : "var(--muted-foreground)" },
+              children: d.subtitle
+            }
+          ),
+          (d.primaryButton || d.secondaryButton) && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 justify-center flex-wrap", children: [
+            d.primaryButton && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: d.primaryUrl || "#",
+                className: "inline-flex items-center px-8 py-3.5 rounded-xl font-semibold text-sm transition-opacity hover:opacity-90",
+                style: { background: d.buttonColor || "var(--primary)", color: d.buttonTextColor || "var(--primary-foreground)" },
+                children: d.primaryButton
+              }
+            ),
+            d.secondaryButton && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: d.secondaryUrl || "#",
+                className: "inline-flex items-center px-8 py-3.5 rounded-xl font-semibold text-sm border transition-colors hover:bg-white/10",
+                style: { borderColor: hasBg ? "rgba(255,255,255,0.4)" : "var(--border)", color: hasBg ? "#fff" : "var(--foreground)" },
+                children: d.secondaryButton
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ProductHeroBlock({ block }) {
+  const d = getData(block);
+  const align = d.alignment || "left";
+  const textAlign = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+  const itemsAlign = align === "right" ? "justify-end" : align === "center" ? "justify-center" : "justify-start";
+  const mx = align === "center" ? "mx-auto" : align === "right" ? "ml-auto" : "";
+  return /* @__PURE__ */ jsx("section", { className: "py-16 md:py-24", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: `max-w-3xl ${mx} mb-12`, children: [
+      d.badge && /* @__PURE__ */ jsx("span", { className: `inline-flex items-center gap-1.5 px-3 py-1 text-xs font-semibold rounded-full bg-primary/10 text-primary mb-5`, children: d.badge }),
+      /* @__PURE__ */ jsx("h1", { className: `text-4xl md:text-5xl font-extrabold tracking-tight mb-5 text-balance leading-tight ${textAlign}`, children: d.title }),
+      d.subtitle && /* @__PURE__ */ jsx("p", { className: `text-lg text-muted-foreground leading-relaxed text-pretty mb-8 ${textAlign}`, children: d.subtitle }),
+      (d.primaryButton || d.secondaryButton) && /* @__PURE__ */ jsxs("div", { className: `flex gap-3 flex-wrap ${itemsAlign}`, children: [
+        d.primaryButton && /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: d.primaryUrl || "#",
+            className: "inline-flex items-center px-7 py-3 rounded-xl bg-primary text-primary-foreground font-semibold text-sm hover:opacity-90 transition-opacity",
+            children: d.primaryButton
+          }
+        ),
+        d.secondaryButton && /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: d.secondaryUrl || "#",
+            className: "inline-flex items-center px-7 py-3 rounded-xl border border-border text-foreground font-semibold text-sm hover:bg-muted transition-colors",
+            children: d.secondaryButton
+          }
+        )
+      ] })
+    ] }),
+    d.image ? /* @__PURE__ */ jsxs("div", { className: "relative rounded-2xl overflow-hidden border border-border shadow-2xl", children: [
+      d.browserChrome && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-4 py-2.5 bg-muted border-b border-border", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-red-400" }),
+        /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-amber-400" }),
+        /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-emerald-400" }),
+        d.urlBar && /* @__PURE__ */ jsx("span", { className: "ml-3 flex-1 text-xs text-muted-foreground bg-background border border-border rounded px-3 py-0.5 truncate", children: d.urlBar })
+      ] }),
+      /* @__PURE__ */ jsx("img", { src: d.image, alt: d.title || "Product preview", className: "w-full object-cover" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "rounded-2xl border border-dashed border-border bg-muted aspect-video flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Add a product screenshot" }) }),
+    Array.isArray(d.trustedBy) && d.trustedBy.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-10 text-center", children: [
+      d.trustedByLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground uppercase tracking-widest mb-4 font-medium", children: d.trustedByLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-6", children: d.trustedBy.map((item, i) => item.logo ? /* @__PURE__ */ jsx("img", { src: item.logo, alt: item.name || "", className: "h-6 object-contain opacity-60 grayscale" }, i) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground", children: item.name }, i)) })
+    ] })
+  ] }) });
+}
+function BentoHeroBlock({ block }) {
+  const d = getData(block);
+  const cards = Array.isArray(d.cards) ? d.cards : [];
+  const align = d.alignment || "center";
+  const textAlign = align === "right" ? "text-right" : align === "left" ? "text-left" : "text-center";
+  const itemsAlign = align === "right" ? "justify-end" : align === "left" ? "justify-start" : "justify-center";
+  const mx = align === "left" ? "" : align === "right" ? "ml-auto" : "mx-auto";
+  return /* @__PURE__ */ jsx("section", { className: "py-16 md:py-24", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: `max-w-3xl ${mx} mb-12`, children: [
+      d.badge && /* @__PURE__ */ jsx("span", { className: "inline-block px-3 py-1 text-xs font-semibold rounded-full bg-secondary text-secondary-foreground mb-5", children: d.badge }),
+      /* @__PURE__ */ jsx("h1", { className: `text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-balance ${textAlign}`, children: d.title }),
+      d.subtitle && /* @__PURE__ */ jsx("p", { className: `text-lg text-muted-foreground leading-relaxed text-pretty ${textAlign}`, children: d.subtitle }),
+      (d.primaryButton || d.secondaryButton) && /* @__PURE__ */ jsxs("div", { className: `flex gap-3 flex-wrap mt-7 ${itemsAlign}`, children: [
+        d.primaryButton && /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: d.primaryUrl || "#",
+            className: "inline-flex items-center px-7 py-3 rounded-xl bg-primary text-primary-foreground font-semibold text-sm hover:opacity-90 transition-opacity",
+            children: d.primaryButton
+          }
+        ),
+        d.secondaryButton && /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: d.secondaryUrl || "#",
+            className: "inline-flex items-center px-7 py-3 rounded-xl border border-border text-foreground font-semibold text-sm hover:bg-muted transition-colors",
+            children: d.secondaryButton
+          }
+        )
+      ] })
+    ] }),
+    cards.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr", children: cards.map((card, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `rounded-2xl border border-border p-6 flex flex-col gap-3 transition-shadow hover:shadow-md ${card.featured ? "lg:col-span-2 row-span-1" : ""}`,
+        style: { background: card.background || "var(--muted)" },
+        children: [
+          card.icon && /* @__PURE__ */ jsx("span", { className: "text-2xl", role: "img", "aria-label": card.title, children: card.icon }),
+          card.image && /* @__PURE__ */ jsx("img", { src: card.image, alt: card.imageAlt || card.title || "Feature illustration", className: "w-full rounded-lg object-cover mb-1", style: { maxHeight: card.featured ? "180px" : "120px" } }),
+          card.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: card.title }),
+          card.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: card.description })
+        ]
+      },
+      i
+    )) })
+  ] }) });
+}
+function MinimalHeroBlock({ block }) {
+  const d = getData(block);
+  const align = d.alignment || "left";
+  const textAlign = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+  const itemsAlign = align === "right" ? "justify-end" : align === "center" ? "justify-center" : "justify-start";
+  const mx = align === "center" ? "mx-auto" : align === "right" ? "ml-auto" : "";
+  return /* @__PURE__ */ jsx("section", { className: "py-20 md:py-28 px-4 border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: `max-w-4xl ${mx}`, children: [
+    d.eyebrow && /* @__PURE__ */ jsx("p", { className: `text-xs uppercase tracking-[0.2em] font-semibold text-muted-foreground mb-5 ${textAlign}`, children: d.eyebrow }),
+    /* @__PURE__ */ jsx("h1", { className: `text-5xl md:text-7xl font-black tracking-tight mb-6 text-balance leading-none whitespace-pre-line ${textAlign}`, children: d.title }),
+    d.subtitle && /* @__PURE__ */ jsx("p", { className: `text-lg md:text-xl text-muted-foreground leading-relaxed text-pretty max-w-2xl mb-9 ${textAlign} ${mx}`, children: d.subtitle }),
+    (d.primaryButton || d.secondaryButton) && /* @__PURE__ */ jsxs("div", { className: `flex gap-4 flex-wrap items-center ${itemsAlign}`, children: [
+      d.primaryButton && /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: d.primaryUrl || "#",
+          className: "inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4 hover:text-primary transition-colors",
+          children: [
+            d.primaryButton,
+            /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) })
+          ]
+        }
+      ),
+      d.secondaryButton && /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: d.secondaryUrl || "#",
+          className: "inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: d.secondaryButton
+        }
+      )
+    ] })
+  ] }) });
+}
 function SplitHeroBlock({ block }) {
   const d = getData(block);
   const imgLeft = d.imagePosition === "left";
+  const align = d.alignment || "left";
+  const textAlign = align === "center" ? "text-center" : "text-left";
+  const itemsAlign = align === "center" ? "items-center" : "items-start";
   return /* @__PURE__ */ jsx("section", { className: "py-16", children: /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${imgLeft ? "md:flex-row-reverse" : "md:flex-row"} items-center gap-10 md:gap-16 max-w-6xl mx-auto px-4`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-5", children: [
-      d.title && /* @__PURE__ */ jsx("h1", { className: "text-3xl md:text-5xl font-extrabold tracking-tight text-balance leading-tight", children: d.title }),
-      d.subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground leading-relaxed text-pretty", children: d.subtitle }),
-      (d.button || d.secondaryButton) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 pt-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex-1 space-y-5 ${itemsAlign} flex flex-col`, children: [
+      d.title && /* @__PURE__ */ jsx("h1", { className: `text-3xl md:text-5xl font-extrabold tracking-tight text-balance leading-tight ${textAlign}`, children: d.title }),
+      d.subtitle && /* @__PURE__ */ jsx("p", { className: `text-lg text-muted-foreground leading-relaxed text-pretty ${textAlign}`, children: d.subtitle }),
+      (d.button || d.secondaryButton) && /* @__PURE__ */ jsxs("div", { className: `flex flex-wrap gap-3 pt-2 ${align === "center" ? "justify-center" : "justify-start"}`, children: [
         d.button && /* @__PURE__ */ jsx("a", { href: d.buttonUrl || "#", className: "inline-flex items-center px-6 py-3 rounded-lg bg-primary text-primary-foreground font-semibold text-sm hover:opacity-90 transition-opacity", children: d.button }),
         d.secondaryButton && /* @__PURE__ */ jsx("a", { href: d.secondaryUrl || "#", className: "inline-flex items-center px-6 py-3 rounded-lg border border-border text-foreground font-semibold text-sm hover:bg-muted transition-colors", children: d.secondaryButton })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", children: d.image ? /* @__PURE__ */ jsx("img", { src: d.image, alt: d.title || "", className: "w-full rounded-2xl object-cover shadow-lg border border-border" }) : /* @__PURE__ */ jsx("div", { className: "w-full rounded-2xl bg-muted border border-border aspect-video flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "No image set" }) }) })
+    /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", children: d.image ? /* @__PURE__ */ jsx("img", { src: d.image, alt: d.imageAlt || d.title || "Hero image", className: "w-full rounded-2xl object-cover shadow-lg border border-border" }) : /* @__PURE__ */ jsx("div", { className: "w-full rounded-2xl bg-muted border border-border aspect-video flex items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "No image set" }) }) })
   ] }) });
 }
 function AccordionBlock({ block }) {
@@ -702,6 +887,10 @@ var BUILT_IN = {
   "pricing-table": (b) => /* @__PURE__ */ jsx(PricingTableBlock, { block: b }),
   hero: (b) => /* @__PURE__ */ jsx(HeroBlock, { block: b }),
   "hero-section": (b) => /* @__PURE__ */ jsx(HeroBlock, { block: b }),
+  "centered-hero": (b) => /* @__PURE__ */ jsx(CenteredHeroBlock, { block: b }),
+  "product-hero": (b) => /* @__PURE__ */ jsx(ProductHeroBlock, { block: b }),
+  "bento-hero": (b) => /* @__PURE__ */ jsx(BentoHeroBlock, { block: b }),
+  "minimal-hero": (b) => /* @__PURE__ */ jsx(MinimalHeroBlock, { block: b }),
   cta: (b) => /* @__PURE__ */ jsx(CTABlock, { block: b }),
   faq: (b) => /* @__PURE__ */ jsx(FAQBlock, { block: b }),
   "team-member": (b) => /* @__PURE__ */ jsx(TeamMemberBlock, { block: b }),