@neowhale/storefront 0.2.55 → 0.2.57

package/dist/landing.global.js

@@ -1207,7 +1207,7 @@ var WhaleStorefront = (function (exports) {
       fontFamily: "inherit",
       transition: "border-color 0.2s"
     };
-    if (status === "success") return /* @__PURE__ */ jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code });
+    if (status === "success") return /* @__PURE__ */ jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code, ctaText: c.success_cta_text, ctaUrl: c.success_cta_url });
     return /* @__PURE__ */ jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
       /* @__PURE__ */ jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
       /* @__PURE__ */ jsx("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)" }, children: [
@@ -1291,7 +1291,7 @@ var WhaleStorefront = (function (exports) {
       ] })
     ] });
   }
-  function SuccessState({ theme, heading, message, couponCode }) {
+  function SuccessState({ theme, heading, message, couponCode, ctaText, ctaUrl }) {
     return /* @__PURE__ */ jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)", textAlign: "center" }, children: [
       /* @__PURE__ */ jsx("h2", { style: {
         fontSize: "clamp(1.5rem, 5vw, 2rem)",
@@ -1313,7 +1313,30 @@ var WhaleStorefront = (function (exports) {
         fontFamily: "monospace",
         letterSpacing: "0.12em",
         color: theme.accent
-      }, children: couponCode })
+      }, children: couponCode }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            window.location.href = ctaUrl || "/shop";
+          },
+          style: {
+            marginTop: "1.5rem",
+            width: "100%",
+            padding: "0.875rem",
+            background: theme.accent,
+            color: "#fff",
+            border: "none",
+            fontSize: "0.85rem",
+            fontWeight: 500,
+            cursor: "pointer",
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            fontFamily: "inherit"
+          },
+          children: ctaText || "shop now"
+        }
+      )
     ] }) });
   }
 
@@ -1930,6 +1953,7 @@ var WhaleStorefront = (function (exports) {
       }
     })();
     const sectionRef = useRef(null);
+    const isHero = section.type === "hero" || section.type === "collage_hero";
     useEffect(() => {
       const el2 = sectionRef.current;
       if (!el2 || typeof IntersectionObserver === "undefined") return;
@@ -1937,18 +1961,28 @@ var WhaleStorefront = (function (exports) {
         ([entry]) => {
           if (entry.isIntersecting) {
             onEvent?.("section_view", { section_id: section.id, section_type: section.type });
+            el2.setAttribute("data-reveal", "visible");
             obs.disconnect();
           }
         },
-        { threshold: 0.5 }
+        { threshold: 0.15 }
       );
       obs.observe(el2);
       return () => obs.disconnect();
     }, [section.id, section.type, onEvent]);
-    return /* @__PURE__ */ jsx("div", { ref: sectionRef, "data-section-id": section.id, "data-section-type": section.type, children: [
-      el,
-      showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
-    ] });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sectionRef,
+        "data-section-id": section.id,
+        "data-section-type": section.type,
+        ...!isHero ? { "data-reveal": "" } : {},
+        children: [
+          el,
+          showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
+        ]
+      }
+    );
   }
 
   // src/react/components/landing-page.tsx
@@ -2128,6 +2162,7 @@ var WhaleStorefront = (function (exports) {
     const sorted = [...lp.sections].sort((a, b) => a.order - b.order).filter((s) => isSectionVisible(s, urlParams));
     const sectionData = { ...data, gatewayUrl, landing_page: { slug: lp.slug }, analyticsContext };
     return /* @__PURE__ */ jsx("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
+      /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: LANDING_ANIMATIONS } }),
       lp.custom_css && /* @__PURE__ */ jsx("style", { children: lp.custom_css }),
       logoUrl && /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 40, objectFit: "contain" } }) }),
       sorted.map((section) => {
@@ -2151,6 +2186,49 @@ var WhaleStorefront = (function (exports) {
       });
     }
   }
+  var LANDING_ANIMATIONS = `
+@keyframes lp-fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
+@keyframes lp-fadeIn{from{opacity:0}to{opacity:1}}
+@keyframes lp-scaleIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* Hero staggered entrance */
+[data-section-type="hero"] h1{animation:lp-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) both}
+[data-section-type="hero"] p{animation:lp-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s both}
+[data-section-type="hero"] button,[data-section-type="hero"] a[style*="inline-block"]{animation:lp-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s both}
+[data-section-type="hero"] form{animation:lp-scaleIn 0.4s cubic-bezier(0.22,1,0.36,1) both}
+
+/* Scroll reveal \u2014 hidden by default, revealed by IntersectionObserver */
+[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1)}
+[data-reveal="visible"]{opacity:1;transform:translateY(0)}
+
+/* Stagger children inside revealed sections */
+[data-reveal="visible"] > *{animation:lp-fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) both}
+[data-reveal="visible"] > *:nth-child(1){animation-delay:0s}
+[data-reveal="visible"] > *:nth-child(2){animation-delay:0.08s}
+[data-reveal="visible"] > *:nth-child(3){animation-delay:0.16s}
+[data-reveal="visible"] > *:nth-child(4){animation-delay:0.24s}
+
+/* Gallery image hover */
+[data-section-type="gallery"] img{transition:transform 1.2s cubic-bezier(0.22,1,0.36,1)}
+[data-section-type="gallery"] div:hover > img{transform:scale(1.03)}
+
+/* Button hover effects */
+[data-section-type="cta"] a,[data-section-type="testimonials"] a{transition:opacity 0.3s,background 0.3s,transform 0.2s}
+[data-section-type="cta"] a:hover{opacity:0.88}
+[data-section-type="cta"] a:active{transform:scale(0.98)}
+
+/* Review card hover */
+.rv-card > div{transition:border-color 0.4s}
+.rv-card:hover > div{border-color:rgba(255,255,255,0.12)!important}
+
+/* Location card image hover */
+[data-section-type="gallery"] [style*="4/5"] img{transition:transform 1.2s cubic-bezier(0.22,1,0.36,1)}
+[data-section-type="gallery"] [style*="4/5"]:hover img{transform:scale(1.03)}
+
+/* Smooth logo entrance */
+[style*="justify-content: center"] > img[alt]{animation:lp-fadeIn 1s cubic-bezier(0.22,1,0.36,1) both}
+`;
   var screenStyle = {
     minHeight: "100dvh",
     display: "flex",

package/dist/react/index.cjs

@@ -2942,7 +2942,7 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
     fontFamily: "inherit",
     transition: "border-color 0.2s"
   };
-  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code });
+  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code, ctaText: c.success_cta_text, ctaUrl: c.success_cta_url });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)" }, children: [
@@ -3026,7 +3026,7 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
     ] })
   ] });
 }
-function SuccessState({ theme, heading, message, couponCode }) {
+function SuccessState({ theme, heading, message, couponCode, ctaText, ctaUrl }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)", textAlign: "center" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
       fontSize: "clamp(1.5rem, 5vw, 2rem)",
@@ -3048,7 +3048,30 @@ function SuccessState({ theme, heading, message, couponCode }) {
       fontFamily: "monospace",
       letterSpacing: "0.12em",
       color: theme.accent
-    }, children: couponCode })
+    }, children: couponCode }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          window.location.href = ctaUrl || "/shop";
+        },
+        style: {
+          marginTop: "1.5rem",
+          width: "100%",
+          padding: "0.875rem",
+          background: theme.accent,
+          color: "#fff",
+          border: "none",
+          fontSize: "0.85rem",
+          fontWeight: 500,
+          cursor: "pointer",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          fontFamily: "inherit"
+        },
+        children: ctaText || "shop now"
+      }
+    )
   ] }) });
 }
 var GOOGLE_G_LG = '<svg width="28" height="28" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 010-9.18l-7.98-6.19a24.03 24.03 0 000 21.56l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>';
@@ -3661,6 +3684,7 @@ function SectionRenderer({
     }
   })();
   const sectionRef = react.useRef(null);
+  const isHero = section.type === "hero" || section.type === "collage_hero";
   react.useEffect(() => {
     const el2 = sectionRef.current;
     if (!el2 || typeof IntersectionObserver === "undefined") return;
@@ -3668,18 +3692,28 @@ function SectionRenderer({
       ([entry]) => {
         if (entry.isIntersecting) {
           onEvent?.("section_view", { section_id: section.id, section_type: section.type });
+          el2.setAttribute("data-reveal", "visible");
           obs.disconnect();
         }
       },
-      { threshold: 0.5 }
+      { threshold: 0.15 }
     );
     obs.observe(el2);
     return () => obs.disconnect();
   }, [section.id, section.type, onEvent]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, "data-section-id": section.id, "data-section-type": section.type, children: [
-    el,
-    showCOA && data?.coa && /* @__PURE__ */ jsxRuntime.jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: sectionRef,
+      "data-section-id": section.id,
+      "data-section-type": section.type,
+      ...!isHero ? { "data-reveal": "" } : {},
+      children: [
+        el,
+        showCOA && data?.coa && /* @__PURE__ */ jsxRuntime.jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
+      ]
+    }
+  );
 }
 function QRLandingPage({
   code,
@@ -4155,6 +4189,7 @@ function PageLayout({
   const sorted = [...lp.sections].sort((a, b) => a.order - b.order).filter((s) => isSectionVisible(s, urlParams));
   const sectionData = { ...data, gatewayUrl, landing_page: { slug: lp.slug }, analyticsContext };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: LANDING_ANIMATIONS } }),
     lp.custom_css && /* @__PURE__ */ jsxRuntime.jsx("style", { children: lp.custom_css }),
     logoUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 40, objectFit: "contain" } }) }),
     sorted.map((section) => {
@@ -4178,6 +4213,49 @@ function sendEvents(gwUrl, slug, events) {
     });
   }
 }
+var LANDING_ANIMATIONS = `
+@keyframes lp-fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
+@keyframes lp-fadeIn{from{opacity:0}to{opacity:1}}
+@keyframes lp-scaleIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* Hero staggered entrance */
+[data-section-type="hero"] h1{animation:lp-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) both}
+[data-section-type="hero"] p{animation:lp-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s both}
+[data-section-type="hero"] button,[data-section-type="hero"] a[style*="inline-block"]{animation:lp-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s both}
+[data-section-type="hero"] form{animation:lp-scaleIn 0.4s cubic-bezier(0.22,1,0.36,1) both}
+
+/* Scroll reveal \u2014 hidden by default, revealed by IntersectionObserver */
+[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1)}
+[data-reveal="visible"]{opacity:1;transform:translateY(0)}
+
+/* Stagger children inside revealed sections */
+[data-reveal="visible"] > *{animation:lp-fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) both}
+[data-reveal="visible"] > *:nth-child(1){animation-delay:0s}
+[data-reveal="visible"] > *:nth-child(2){animation-delay:0.08s}
+[data-reveal="visible"] > *:nth-child(3){animation-delay:0.16s}
+[data-reveal="visible"] > *:nth-child(4){animation-delay:0.24s}
+
+/* Gallery image hover */
+[data-section-type="gallery"] img{transition:transform 1.2s cubic-bezier(0.22,1,0.36,1)}
+[data-section-type="gallery"] div:hover > img{transform:scale(1.03)}
+
+/* Button hover effects */
+[data-section-type="cta"] a,[data-section-type="testimonials"] a{transition:opacity 0.3s,background 0.3s,transform 0.2s}
+[data-section-type="cta"] a:hover{opacity:0.88}
+[data-section-type="cta"] a:active{transform:scale(0.98)}
+
+/* Review card hover */
+.rv-card > div{transition:border-color 0.4s}
+.rv-card:hover > div{border-color:rgba(255,255,255,0.12)!important}
+
+/* Location card image hover */
+[data-section-type="gallery"] [style*="4/5"] img{transition:transform 1.2s cubic-bezier(0.22,1,0.36,1)}
+[data-section-type="gallery"] [style*="4/5"]:hover img{transform:scale(1.03)}
+
+/* Smooth logo entrance */
+[style*="justify-content: center"] > img[alt]{animation:lp-fadeIn 1s cubic-bezier(0.22,1,0.36,1) both}
+`;
 var screenStyle = {
   minHeight: "100dvh",
   display: "flex",