@neowhale/storefront 0.2.20 → 0.2.21

package/dist/react/index.js

@@ -2594,35 +2594,56 @@ function GallerySection({ section, theme }) {
   ) }, i)) }) });
 }
 function CTASection({ section, theme, tracking }) {
-  const { buttons } = section.content;
+  const { title, subtitle, buttons } = section.content;
   if (!buttons || buttons.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: buttons.map((btn, i) => {
-    const isPrimary = btn.style !== "outline";
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: btn.url,
-        onClick: () => trackClick(tracking, btn.text, btn.url, i),
-        style: {
-          display: "block",
-          width: "100%",
-          padding: "0.875rem",
-          background: isPrimary ? theme.fg : "transparent",
-          color: isPrimary ? theme.bg : theme.fg,
-          border: isPrimary ? "none" : `1px solid ${theme.fg}20`,
-          fontSize: "0.85rem",
-          fontWeight: 500,
-          textAlign: "center",
-          textDecoration: "none",
-          boxSizing: "border-box",
-          letterSpacing: "0.08em",
-          textTransform: "uppercase"
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+    title && /* @__PURE__ */ 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: title }),
+    subtitle && /* @__PURE__ */ jsx("p", { style: {
+      fontSize: "0.8rem",
+      color: theme.accent,
+      margin: "0 0 0.75rem",
+      lineHeight: 1.6,
+      textTransform: "uppercase",
+      letterSpacing: "0.15em",
+      textAlign: "center"
+    }, children: subtitle }),
+    buttons.map((btn, i) => {
+      const isPrimary = btn.style !== "outline";
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: btn.url,
+          onClick: () => trackClick(tracking, btn.text, btn.url, i),
+          style: {
+            display: "block",
+            width: "100%",
+            padding: "0.875rem",
+            background: isPrimary ? theme.fg : "transparent",
+            color: isPrimary ? theme.bg : theme.fg,
+            border: isPrimary ? "none" : `1px solid ${theme.fg}20`,
+            fontSize: "0.85rem",
+            fontWeight: 500,
+            textAlign: "center",
+            textDecoration: "none",
+            boxSizing: "border-box",
+            letterSpacing: "0.08em",
+            textTransform: "uppercase"
+          },
+          children: btn.text
         },
-        children: btn.text
-      },
-      i
-    );
-  }) });
+        i
+      );
+    })
+  ] });
 }
 function StatsSection({ section, theme }) {
   const { stats } = section.content;