@neowhale/storefront 0.2.55 → 0.2.56

package/dist/landing.global.js

@@ -1930,6 +1930,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 +1938,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 +2139,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 +2163,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

@@ -3661,6 +3661,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 +3669,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 +4166,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 +4190,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",