@neowhale/storefront 0.2.54 → 0.2.56

package/dist/landing.global.js

@@ -496,6 +496,11 @@ var WhaleStorefront = (function (exports) {
             source: c.inline_form?.source || "landing_page",
             landing_page_slug: slug || void 0,
             tags: c.inline_form?.tags || void 0,
+            segment_id: c.inline_form?.segment_id || void 0,
+            campaign_id: c.inline_form?.campaign_id || void 0,
+            preferred_location_id: c.inline_form?.preferred_location_id || void 0,
+            template_slug: c.inline_form?.template_slug || void 0,
+            acquisition_campaign: c.inline_form?.acquisition_campaign || void 0,
             visitor_id: data?.analyticsContext?.visitorId || void 0,
             session_id: data?.analyticsContext?.sessionId || void 0,
             utm_source: urlParams?.get("utm_source") || void 0,
@@ -594,10 +599,11 @@ var WhaleStorefront = (function (exports) {
     ] });
   }
   function HeroInlineForm({ ctaText, formOpen, setFormOpen, firstName, setFirstName, email, setEmail, status, errorMsg, onSubmit, successHeading, successMessage, submitText, theme, onEvent, tracking }) {
+    const formMaxW = "min(480px, 90vw)";
     if (status === "success") {
-      return /* @__PURE__ */ jsx("div", { style: { padding: "1.25rem 2rem", background: `${theme.fg}08`, border: `1px solid ${theme.fg}15`, maxWidth: 420, margin: "0 auto" }, children: [
-        /* @__PURE__ */ jsx("p", { style: { fontSize: "1.1rem", fontWeight: 300, color: theme.fg, margin: "0 0 0.25rem", fontFamily: theme.fontDisplay || "inherit" }, children: successHeading }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: `${theme.fg}80`, margin: 0 }, children: successMessage })
+      return /* @__PURE__ */ jsx("div", { style: { maxWidth: formMaxW, margin: "0 auto", padding: "1.5rem 2rem", background: `${theme.fg}06`, border: `1px solid ${theme.fg}10` }, children: [
+        /* @__PURE__ */ jsx("p", { style: { fontSize: "clamp(1rem, 3vw, 1.25rem)", fontWeight: 300, color: theme.fg, margin: "0 0 0.375rem", fontFamily: theme.fontDisplay || "inherit" }, children: successHeading }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: "0.85rem", color: `${theme.fg}70`, margin: 0, lineHeight: 1.5 }, children: successMessage })
       ] });
     }
     if (!formOpen) {
@@ -611,37 +617,39 @@ var WhaleStorefront = (function (exports) {
           },
           style: {
             display: "inline-block",
-            padding: "0.875rem 2rem",
+            padding: "clamp(0.875rem, 2.5vw, 1.125rem) clamp(2rem, 5vw, 3rem)",
             background: theme.fg,
             color: theme.bg,
             border: "none",
             cursor: "pointer",
-            fontSize: "0.85rem",
+            fontSize: "clamp(0.85rem, 2vw, 1rem)",
             fontWeight: 500,
-            letterSpacing: "0.08em",
+            letterSpacing: "0.06em",
             textTransform: "uppercase",
-            fontFamily: "inherit",
-            transition: "transform 0.2s"
+            fontFamily: "inherit"
           },
           children: ctaText
         }
       );
     }
-    const inputStyle = {
-      flex: 1,
-      minWidth: 0,
-      padding: "0.875rem 1rem",
+    const inputBase = {
+      padding: "clamp(0.75rem, 2vw, 0.875rem) clamp(0.75rem, 2vw, 1rem)",
       background: theme.surface,
-      border: `1px solid ${theme.fg}25`,
+      border: `1px solid ${theme.fg}20`,
       color: theme.fg,
-      fontSize: "0.9rem",
+      fontSize: "clamp(0.8rem, 2vw, 0.9rem)",
       fontWeight: 300,
       outline: "none",
       fontFamily: "inherit",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      width: "100%"
     };
-    return /* @__PURE__ */ jsx("form", { onSubmit, style: { maxWidth: 480, margin: "0 auto" }, children: [
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 0 }, children: [
+    return /* @__PURE__ */ jsx("form", { onSubmit, style: { maxWidth: formMaxW, margin: "0 auto", width: "100%" }, children: [
+      /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .hero-form-row{display:flex;gap:0}
+        @media(max-width:480px){.hero-form-row{flex-direction:column;gap:0.5rem}}
+      ` } }),
+      /* @__PURE__ */ jsx("div", { className: "hero-form-row", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -650,7 +658,7 @@ var WhaleStorefront = (function (exports) {
             value: firstName,
             autoFocus: true,
             onChange: (e) => setFirstName(e.target.value),
-            style: { ...inputStyle, borderRight: "none" }
+            style: { ...inputBase, flex: 1, minWidth: 0, borderRight: "none" }
           }
         ),
         /* @__PURE__ */ jsx(
@@ -661,33 +669,33 @@ var WhaleStorefront = (function (exports) {
             value: email,
             required: true,
             onChange: (e) => setEmail(e.target.value),
-            style: { ...inputStyle, borderRight: "none" }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            disabled: status === "loading",
-            style: {
-              padding: "0.875rem 1.25rem",
-              background: theme.fg,
-              color: theme.bg,
-              border: "none",
-              fontSize: "0.75rem",
-              fontWeight: 600,
-              letterSpacing: "0.08em",
-              textTransform: "uppercase",
-              cursor: status === "loading" ? "wait" : "pointer",
-              fontFamily: "inherit",
-              whiteSpace: "nowrap",
-              flexShrink: 0,
-              opacity: status === "loading" ? 0.7 : 1
-            },
-            children: status === "loading" ? "..." : submitText
+            style: { ...inputBase, flex: 1.2, minWidth: 0 }
           }
         )
       ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: status === "loading",
+          style: {
+            width: "100%",
+            padding: "clamp(0.75rem, 2vw, 0.875rem)",
+            background: theme.fg,
+            color: theme.bg,
+            border: "none",
+            fontSize: "clamp(0.8rem, 2vw, 0.85rem)",
+            fontWeight: 600,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            cursor: status === "loading" ? "wait" : "pointer",
+            fontFamily: "inherit",
+            marginTop: "0.5rem",
+            opacity: status === "loading" ? 0.7 : 1
+          },
+          children: status === "loading" ? "..." : submitText
+        }
+      ),
       status === "error" && errorMsg && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "#e55", margin: "0.5rem 0 0", textAlign: "left" }, children: errorMsg })
     ] });
   }
@@ -792,29 +800,100 @@ var WhaleStorefront = (function (exports) {
       ] })
     ] });
   }
-  function GallerySection({ section, theme }) {
-    const { images } = section.content;
+  function GallerySection({ section, theme, onEvent }) {
+    const c = section.content;
+    const images = c.images || [];
     const columns = section.config?.columns || 3;
     const layout = section.config?.layout || "grid";
+    const loc = c.location_card;
     if (!images || images.length === 0) return null;
     if (layout === "collage") {
-      return /* @__PURE__ */ jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: {
-        gridColumn: i === 0 ? "1 / -1" : void 0,
-        aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
-        overflow: "hidden",
-        background: theme.surface
-      }, children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: img.url,
-          alt: img.alt || "",
-          loading: i < 2 ? "eager" : "lazy",
-          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-        }
-      ) }, i)) }) });
+      return /* @__PURE__ */ jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: [
+        loc && /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem", marginBottom: "0.375rem" }, children: [
+          /* @__PURE__ */ jsx(GalleryLocationCard, { loc, theme, onEvent }),
+          /* @__PURE__ */ jsx("div", { style: { aspectRatio: "4/5", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: images[0].url,
+              alt: images[0].alt || "",
+              loading: "eager",
+              style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.slice(loc ? 1 : 0).map((img, i) => /* @__PURE__ */ jsx("div", { style: {
+          gridColumn: !loc && i === 0 ? "1 / -1" : void 0,
+          aspectRatio: !loc && i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
+          overflow: "hidden",
+          background: theme.surface
+        }, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: img.url,
+            alt: img.alt || "",
+            loading: i < 2 ? "eager" : "lazy",
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }
+        ) }, i)) })
+      ] });
     }
     return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
   }
+  function GalleryLocationCard({ loc, theme, onEvent }) {
+    const dirUrl = loc.directions_url || `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(loc.address + ", " + loc.city + ", " + loc.state)}`;
+    const brandFont = loc.brand_font || "inherit";
+    return /* @__PURE__ */ jsx("div", { style: { background: "#0C0C0C", border: "1px solid rgba(255,255,255,0.06)", overflow: "hidden", display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { position: "relative", flex: 1, minHeight: 0, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsx("img", { src: loc.image, alt: loc.name, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }),
+        /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%)" } }),
+        /* @__PURE__ */ jsx("div", { style: { position: "absolute", bottom: 0, left: 0, padding: "clamp(0.75rem, 3vw, 1.25rem)" }, children: [
+          /* @__PURE__ */ jsx("p", { className: "loc-card-name", style: { fontFamily: brandFont, fontSize: "clamp(1.25rem, 5vw, 1.75rem)", color: "#fff", margin: 0, lineHeight: 1 }, children: loc.name }),
+          /* @__PURE__ */ jsx("p", { style: { fontSize: "0.6rem", letterSpacing: "0.2em", color: "rgba(255,255,255,0.6)", margin: "0.25rem 0 0", fontWeight: 600, textTransform: "uppercase" }, children: [
+            loc.city,
+            ", ",
+            loc.state
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { padding: "clamp(0.625rem, 2vw, 1rem)", display: "flex", flexDirection: "column", gap: "0.4rem" }, children: [
+        loc.tagline && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.5)", fontWeight: 500, fontStyle: "italic", margin: 0 }, children: loc.tagline }),
+        loc.rating != null && loc.review_count != null && loc.review_count > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", gap: "2px" }, children: [1, 2, 3, 4, 5].map((s) => /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 20 20", fill: s <= Math.round(loc.rating) ? theme.accent : "rgba(255,255,255,0.1)", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, s)) }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.5)", fontWeight: 500 }, children: `${loc.rating.toFixed(1)} \xB7 ${loc.review_count} reviews` })
+        ] }),
+        loc.address && /* @__PURE__ */ jsx("a", { href: dirUrl, target: "_blank", rel: "noopener noreferrer", style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.35)", fontWeight: 500, textDecoration: "none" }, children: [
+          loc.address,
+          ", ",
+          loc.city,
+          ", ",
+          loc.state
+        ] }),
+        loc.phone && /* @__PURE__ */ jsx("a", { href: loc.phone_href || `tel:${loc.phone}`, style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.35)", fontWeight: 500, textDecoration: "none" }, children: loc.phone }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.375rem", marginTop: "auto", paddingTop: "0.125rem" }, children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: dirUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: () => onEvent?.("cta_click", { label: "directions", location: loc.name }),
+              style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", padding: "0.5rem", background: "#fff", color: "#000", fontSize: "0.65rem", fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", textDecoration: "none" },
+              children: "directions"
+            }
+          ),
+          loc.shop_url && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: loc.shop_url,
+              onClick: () => onEvent?.("cta_click", { label: "shop", location: loc.name }),
+              style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "0.25rem", padding: "0.5rem", border: "1px solid rgba(255,255,255,0.15)", color: "rgba(255,255,255,0.8)", fontSize: "0.65rem", fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", textDecoration: "none" },
+              children: "shop"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
   function SocialLinksSection({ section, theme }) {
     const { links } = section.content;
     if (!links || links.length === 0) return null;
@@ -1239,15 +1318,26 @@ var WhaleStorefront = (function (exports) {
   }
 
   // src/react/components/sections/conversion-sections.tsx
+  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>';
+  var GOOGLE_G_SM = '<svg width="14" height="14" 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>';
   function TestimonialsSection({ section, theme }) {
     const c = section.content;
-    const layout = section.config?.layout || "grid";
+    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__ */ jsx("div", { style: { padding: "3rem 1.5rem", maxWidth: 640, margin: "0 auto" }, children: [
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "2rem" }, children: [
+    const googleUrl = section.config?.google_url || void 0;
+    const directionsUrl = section.config?.directions_url || void 0;
+    `reviews-${section.id}`;
+    return /* @__PURE__ */ jsx("div", { style: { padding: "3rem 0", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .rv-scroll{display:flex;gap:clamp(0.5rem,2vw,0.75rem);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 clamp(1rem,4vw,3rem)}
+        .rv-scroll::-webkit-scrollbar{display:none}
+        .rv-card{flex:0 0 clamp(260px,40vw,320px);scroll-snap-align:start}
+      ` } }),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "2rem", padding: "0 1.5rem" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "0.75rem" }, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_LG } }) }),
         c.heading && /* @__PURE__ */ jsx("h2", { style: {
           fontSize: "clamp(1.25rem, 4vw, 1.75rem)",
           fontWeight: 300,
@@ -1258,42 +1348,121 @@ var WhaleStorefront = (function (exports) {
           color: theme.fg
         }, children: /* @__PURE__ */ jsx(AnimatedText, { text: c.heading }) }),
         /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", marginBottom: "0.25rem" }, children: [
-          /* @__PURE__ */ jsx(Stars, { rating: overallRating, color: theme.accent, size: 18 }),
+          /* @__PURE__ */ jsx(Stars, { rating: overallRating, color: "#FBBC05", size: 18 }),
           /* @__PURE__ */ jsx("span", { style: { fontSize: "1.1rem", fontWeight: 500, color: theme.fg }, children: /* @__PURE__ */ jsx(AnimatedText, { text: overallRating.toFixed(1) }) })
         ] }),
         c.subtitle ? /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, margin: 0, letterSpacing: "0.1em", textTransform: "uppercase" }, children: c.subtitle }) : /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, margin: 0, letterSpacing: "0.1em", textTransform: "uppercase" }, children: [
           "from ",
           /* @__PURE__ */ jsx(AnimatedText, { text: String(reviewCount) }),
           " reviews"
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.625rem", justifyContent: "center", marginTop: "1.5rem", flexWrap: "wrap" }, children: [
+          googleUrl && /* @__PURE__ */ jsx("a", { href: googleUrl, target: "_blank", rel: "noopener noreferrer", style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            padding: "clamp(0.75rem, 2vw, 0.875rem) clamp(1.25rem, 3vw, 2rem)",
+            background: theme.fg,
+            color: theme.bg,
+            textDecoration: "none",
+            fontSize: "clamp(0.8rem, 2vw, 0.9rem)",
+            fontWeight: 600,
+            letterSpacing: "0.06em",
+            textTransform: "uppercase"
+          }, children: [
+            /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_SM } }),
+            `see all ${reviewCount} reviews`
+          ] }),
+          directionsUrl && /* @__PURE__ */ jsx("a", { href: directionsUrl, target: "_blank", rel: "noopener noreferrer", style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            padding: "clamp(0.75rem, 2vw, 0.875rem) clamp(1.25rem, 3vw, 2rem)",
+            border: `1px solid ${theme.fg}25`,
+            color: theme.fg,
+            textDecoration: "none",
+            fontSize: "clamp(0.8rem, 2vw, 0.9rem)",
+            fontWeight: 600,
+            letterSpacing: "0.06em",
+            textTransform: "uppercase"
+          }, children: "get directions" })
         ] })
       ] }),
-      /* @__PURE__ */ 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__ */ jsx("div", { style: {
-        background: theme.surface,
-        border: `1px solid ${theme.fg}08`,
-        padding: "1.25rem"
-      }, children: [
-        /* @__PURE__ */ jsx(Stars, { rating: review.rating ?? 5, color: theme.accent, size: 14 }),
-        /* @__PURE__ */ jsx("p", { style: {
-          fontSize: "0.88rem",
-          color: `${theme.fg}CC`,
-          margin: "0.75rem 0",
-          lineHeight: 1.6,
-          fontWeight: 300,
-          fontStyle: "italic"
+      /* @__PURE__ */ jsx("div", { className: "rv-scroll", children: [
+        reviews.map((review, i) => /* @__PURE__ */ jsx("div", { className: "rv-card", children: /* @__PURE__ */ jsx("div", { style: {
+          background: theme.surface,
+          border: `1px solid ${theme.fg}08`,
+          padding: "clamp(1rem, 3vw, 1.5rem)",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column"
         }, children: [
-          '"',
-          review.text,
-          '"'
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", fontWeight: 500, color: theme.fg }, children: review.name }),
-          review.location && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", color: theme.muted }, children: review.location })
-        ] })
-      ] }, i)) })
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }, children: [
+            /* @__PURE__ */ jsx(Stars, { rating: review.rating ?? 5, color: "#FBBC05", size: 13 }),
+            review.location && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6rem", letterSpacing: "0.15em", textTransform: "uppercase", color: theme.muted, fontWeight: 500 }, children: review.location })
+          ] }),
+          /* @__PURE__ */ jsx("p", { style: {
+            fontSize: "0.9rem",
+            color: `${theme.fg}B0`,
+            margin: "0 0 auto",
+            lineHeight: 1.65,
+            fontWeight: 400,
+            paddingBottom: "1rem"
+          }, children: `\u201C${review.text}\u201D` }),
+          /* @__PURE__ */ jsx("div", { style: { borderTop: `1px solid ${theme.fg}08`, paddingTop: "0.75rem", display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+            /* @__PURE__ */ jsx("div", { style: {
+              width: 28,
+              height: 28,
+              borderRadius: "50%",
+              background: `${theme.accent}18`,
+              border: `1px solid ${theme.accent}15`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", fontWeight: 600, color: theme.accent, textTransform: "uppercase" }, children: review.name.charAt(0) }) }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", fontWeight: 500, color: `${theme.fg}AA` }, children: review.name })
+          ] })
+        ] }) }, i)),
+        googleUrl && /* @__PURE__ */ jsx("div", { className: "rv-card", children: /* @__PURE__ */ jsx("a", { href: googleUrl, target: "_blank", rel: "noopener noreferrer", style: {
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.75rem",
+          background: theme.surface,
+          border: `1px solid ${theme.fg}08`,
+          padding: "clamp(1rem, 3vw, 1.5rem)",
+          textDecoration: "none"
+        }, children: [
+          /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_LG } }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85rem", color: theme.fg, fontWeight: 500 }, children: `read all ${reviewCount}` }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: theme.muted, letterSpacing: "0.08em" }, children: "reviews on google" })
+        ] }) })
+      ] }),
+      googleUrl && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "1.5rem", padding: "0 1.5rem" }, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: googleUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            fontSize: "0.8rem",
+            color: theme.muted,
+            textDecoration: "none",
+            letterSpacing: "0.08em",
+            fontWeight: 500
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_SM } }),
+            `read all ${reviewCount} reviews on google`
+          ]
+        }
+      ) })
     ] });
   }
   function Stars({ rating, color, size }) {
@@ -1729,7 +1898,7 @@ var WhaleStorefront = (function (exports) {
         case "video":
           return /* @__PURE__ */ jsx(VideoSection, { section, theme });
         case "gallery":
-          return /* @__PURE__ */ jsx(GallerySection, { section, theme });
+          return /* @__PURE__ */ jsx(GallerySection, { section, theme, onEvent });
         case "cta":
           return /* @__PURE__ */ jsx(CTASection, { section, theme, tracking, onEvent });
         case "stats":
@@ -1761,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;
@@ -1768,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
@@ -1959,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) => {
@@ -1982,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",