diy-template-components 5.1.4 → 5.11.0

package/build/index.es.js

@@ -881,7 +881,7 @@ const someMethod1 = (/** @type {import('./types').IconData["svgChildrenConfigs"]
   }
   return obj;
 };
-const useStyles$1 = createUseStyles$1({
+const useStyles$2 = createUseStyles$1({
   '@keyframes slideRight': {
     to: {
       backgroundPosition: '1250% 0, 0 0'
@@ -959,7 +959,7 @@ const Icon = ({
   // this ref is used to cancel the fetch promise success callback in case name prop changed
   const currentName = useRef(name);
   const [svgState, setSvgState] = useState(defaultSvgState);
-  const styles = useStyles$1({
+  const styles = useStyles$2({
     width,
     height,
     color,
@@ -2548,7 +2548,87 @@ function FontSeeder({
   return null;
 }
 
-insertStyle("@charset \"UTF-8\";\n/* Wrapper: no height/min-height – height comes only from section content, not from HOC */\n.sectionBackgroundWrapper {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Section root transparent so background (image/color/gradient/video) shows through */\n.sectionBackgroundWrapper > .sectionBackgroundContent > * {\n  background: transparent !important;\n}\n\n/* Video: absolute so it does not affect wrapper height; height follows section */\n.sectionBackgroundVideo {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: 0;\n  pointer-events: none;\n}\n\n/* YouTube embed: cover background, no UI interaction, minimal branding via URL params */\n.sectionBackgroundYoutube {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 100vw;\n  min-width: 100%;\n  min-height: 100%;\n  height: 56.25vw; /* 16:9 */\n  min-height: 100vh;\n  transform: translate(-50%, -50%);\n  border: none;\n  z-index: 0;\n  pointer-events: none;\n}\n\n@media (min-aspect-ratio: 16/9) {\n  .sectionBackgroundYoutube {\n    width: 177.78vh;\n    height: 100vh;\n    min-width: 100%;\n    min-height: 100%;\n  }\n}\n/* Blur overlay: frosted glass so content stays readable over video/image/gradient */\n.sectionBackgroundBlur {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  pointer-events: none;\n  /* backdrop-filter: blur(2px);\n  -webkit-backdrop-filter: blur(2px); */\n  /* background: rgba(255, 255, 255, 0.08); */\n}\n\n/* Content wrapper: above blur so component items are clear */\n.sectionBackgroundContent {\n  position: relative;\n  z-index: 2;\n}\n\n/* Background layer: fills wrapper only (absolute), does not affect wrapper height */\n.sectionBackgroundLayer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.sectionBackgroundLayer.sectionBackgroundImage {\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n}");
+/**
+ * JSS styles for section background wrapper (replaces styles.css).
+ * Used with react-jss createUseStyles.
+ */
+const sectionBackgroundStyles = () => ({
+  /* Wrapper: no height/min-height – height comes only from section content */
+  sectionBackgroundWrapper: {
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+    '& > $sectionBackgroundContent > *': {
+      background: 'transparent !important'
+    }
+  },
+  /* Section root transparent so background (image/color/gradient/video) shows through */
+  sectionBackgroundContent: {
+    position: 'relative',
+    zIndex: 2
+  },
+  /* Video: absolute so it does not affect wrapper height; height follows section */
+  sectionBackgroundVideo: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    zIndex: 0,
+    pointerEvents: 'none'
+  },
+  /* YouTube embed: cover background, no UI interaction */
+  sectionBackgroundYoutube: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: '100vw',
+    minWidth: '100%',
+    minHeight: '100vh',
+    height: '56.25vw' /* 16:9 */,
+    transform: 'translate(-50%, -50%)',
+    border: 'none',
+    zIndex: 0,
+    pointerEvents: 'none',
+    '@media (min-aspect-ratio: 16/9)': {
+      width: '177.78vh',
+      height: '100vh',
+      minWidth: '100%',
+      minHeight: '100%'
+    }
+  },
+  /* Blur overlay: frosted glass so content stays readable */
+  sectionBackgroundBlur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+    pointerEvents: 'none'
+  },
+  /* Background layer: fills wrapper only (absolute), does not affect wrapper height */
+  sectionBackgroundLayer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 0,
+    pointerEvents: 'none'
+  },
+  sectionBackgroundImage: {
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat'
+  },
+  sectionBackgroundGradient: {
+    /* inherits from sectionBackgroundLayer; gradient value comes from inline style */
+  }
+});
+
+const useStyles$1 = createUseStyles$1(sectionBackgroundStyles);
 
 /**
  * Extracts YouTube video ID from various YouTube URL formats.
@@ -2567,6 +2647,13 @@ function getYoutubeVideoId(url) {
   return null;
 }
 
+/**
+ * Returns YouTube thumbnail URL for a video ID (used when app is in iframe and YouTube iframe won't play).
+ */
+function getYoutubeThumbnailUrl(videoId) {
+  return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
+}
+
 /**
  * Builds YouTube embed URL with params for background video:
  * autoplay, mute, loop (via playlist), no controls, minimal branding, no end-screen suggestions.
@@ -2610,10 +2697,13 @@ function withSectionBackground(WrappedSectionRenderer) {
       sectionIndex,
       ...restProps
     } = props;
+    const {
+      isMobile
+    } = useContext(PageContext);
+    const classes = useStyles$1();
 
     // Use props first, then fall back to sectionData so it works for all sections
     const componentBg = componentBgProp ?? {};
-    console.log('amit1111', componentBg, isSkipV2Section, sectionData);
 
     // version !== 2: skip background — render section only, no wrapper
 
@@ -2667,7 +2757,7 @@ function withSectionBackground(WrappedSectionRenderer) {
           return {};
       }
     };
-    const layerClassName = type === 'image' ? 'sectionBackgroundLayer sectionBackgroundImage' : type === 'gradient' ? 'sectionBackgroundLayer sectionBackgroundGradient' : 'sectionBackgroundLayer';
+    const layerClassName = type === 'image' ? `${classes.sectionBackgroundLayer} ${classes.sectionBackgroundImage}` : type === 'gradient' ? `${classes.sectionBackgroundLayer} ${classes.sectionBackgroundGradient}` : classes.sectionBackgroundLayer;
 
     // Video background: YouTube embed (when isYoutube/isYoutubeVideo) or normal <video> from url
     if (type === 'video') {
@@ -2676,9 +2766,9 @@ function withSectionBackground(WrappedSectionRenderer) {
         if (!videoId) {
           // Fallback to normal video if we can't parse YouTube ID
           return /*#__PURE__*/React.createElement("div", {
-            className: "sectionBackgroundWrapper"
+            className: classes.sectionBackgroundWrapper
           }, /*#__PURE__*/React.createElement("video", {
-            className: "sectionBackgroundVideo",
+            className: classes.sectionBackgroundVideo,
             src: value,
             autoPlay: true,
             muted: true,
@@ -2686,10 +2776,33 @@ function withSectionBackground(WrappedSectionRenderer) {
             playsInline: true,
             "aria-hidden": "true"
           }), /*#__PURE__*/React.createElement("div", {
-            className: "sectionBackgroundBlur",
+            className: classes.sectionBackgroundBlur,
             "aria-hidden": "true"
           }), /*#__PURE__*/React.createElement("div", {
-            className: "sectionBackgroundContent"
+            className: classes.sectionBackgroundContent
+          }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
+            sectionData: sectionData,
+            extraProps: extraProps,
+            sectionIndex: sectionIndex
+          }, restProps))));
+        }
+        // When isMobile is true, app is rendered inside an iframe; YouTube iframe often fails in nested iframes.
+        // Use static YouTube thumbnail as background instead of the YouTube player.
+        if (isMobile) {
+          const thumbUrl = getYoutubeThumbnailUrl(videoId);
+          return /*#__PURE__*/React.createElement("div", {
+            className: classes.sectionBackgroundWrapper
+          }, /*#__PURE__*/React.createElement("div", {
+            className: `${classes.sectionBackgroundLayer} ${classes.sectionBackgroundImage}`,
+            style: {
+              backgroundImage: `url(${thumbUrl})`
+            },
+            "aria-hidden": "true"
+          }), /*#__PURE__*/React.createElement("div", {
+            className: classes.sectionBackgroundBlur,
+            "aria-hidden": "true"
+          }), /*#__PURE__*/React.createElement("div", {
+            className: classes.sectionBackgroundContent
           }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
             sectionData: sectionData,
             extraProps: extraProps,
@@ -2698,19 +2811,20 @@ function withSectionBackground(WrappedSectionRenderer) {
         }
         const embedUrl = getYoutubeEmbedUrl(videoId);
         return /*#__PURE__*/React.createElement("div", {
-          className: "sectionBackgroundWrapper"
+          className: classes.sectionBackgroundWrapper
         }, /*#__PURE__*/React.createElement("iframe", {
-          className: "sectionBackgroundYoutube",
+          className: classes.sectionBackgroundYoutube,
           src: embedUrl,
           title: "Background video",
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
           allowFullScreen: true,
+          referrerPolicy: "strict-origin-when-cross-origin",
           "aria-hidden": "true"
         }), /*#__PURE__*/React.createElement("div", {
-          className: "sectionBackgroundBlur",
+          className: classes.sectionBackgroundBlur,
           "aria-hidden": "true"
         }), /*#__PURE__*/React.createElement("div", {
-          className: "sectionBackgroundContent"
+          className: classes.sectionBackgroundContent
         }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
           sectionData: sectionData,
           extraProps: extraProps,
@@ -2719,9 +2833,9 @@ function withSectionBackground(WrappedSectionRenderer) {
       }
       // Normal video from URL
       return /*#__PURE__*/React.createElement("div", {
-        className: "sectionBackgroundWrapper"
+        className: classes.sectionBackgroundWrapper
       }, /*#__PURE__*/React.createElement("video", {
-        className: "sectionBackgroundVideo",
+        className: classes.sectionBackgroundVideo,
         src: value,
         autoPlay: true,
         muted: true,
@@ -2729,10 +2843,10 @@ function withSectionBackground(WrappedSectionRenderer) {
         playsInline: true,
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement("div", {
-        className: "sectionBackgroundBlur",
+        className: classes.sectionBackgroundBlur,
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement("div", {
-        className: "sectionBackgroundContent"
+        className: classes.sectionBackgroundContent
       }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
         sectionData: sectionData,
         extraProps: extraProps,
@@ -2742,16 +2856,17 @@ function withSectionBackground(WrappedSectionRenderer) {
 
     // color | image | gradient: background layer behind content so section can be transparent
     return /*#__PURE__*/React.createElement("div", {
-      className: "sectionBackgroundWrapper"
+      className: classes.sectionBackgroundWrapper,
+      style: isMobile ? getLayerStyle() : {}
     }, /*#__PURE__*/React.createElement("div", {
       className: layerClassName,
       style: getLayerStyle(),
       "aria-hidden": "true"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "sectionBackgroundBlur",
+      className: classes.sectionBackgroundBlur,
       "aria-hidden": "true"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "sectionBackgroundContent"
+      className: classes.sectionBackgroundContent
     }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
       sectionData: sectionData,
       extraProps: extraProps,
@@ -5517,8 +5632,9 @@ function VideoPlayer(props) {
     className: classes.iframe + ' ' + classes.hideImg,
     src: imageUrl ? getId(videoUrl) + '?autoplay=1' : getId(videoUrl),
     frameBorder: "0",
-    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
     allowFullScreen: true,
+    referrerPolicy: "strict-origin-when-cross-origin",
     onLoad: () => {
       setIsLoaded(true);
     }
@@ -11786,7 +11902,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       } = {}) => backgroundImage ? `url("${backgroundImage}")` : 'none',
       backgroundColor: ({
         backgroundColor
-      } = {}) => backgroundColor || '#f8f8fa',
+      } = {}) => backgroundColor || theme?.colors?.background2,
       backgroundSize: 'cover',
       backgroundPosition: 'center',
       backgroundRepeat: 'no-repeat',
@@ -11807,7 +11923,8 @@ const useCounterSectionStyles = createUseStyles(theme => {
     },
     grid: {
       display: 'grid',
-      gridTemplateColumns: 'repeat(4, 1fr)',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+      // fits 4 columns in desktop
       gap: ({
         isMobile
       } = {}) => isMobile ? '24px' : '32px',
@@ -11826,7 +11943,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       fontSize: '64px',
       fontWeight: theme.typography?.fontWeight?.bold,
       lineHeight: 1.1,
-      color: 'rgba(247, 37, 133, 1)' ,
+      color: theme?.colors?.AccentColor,
       wordBreak: 'break-word'
     },
     description: {
@@ -11834,7 +11951,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       fontSize: '20px',
       lineHeight: 1.4,
       fontWeight: '700',
-      color: 'rgba(51, 51, 51, 1)' ,
+      color: theme?.colors?.font3,
       wordBreak: 'break-word'
     },
     '@media (max-width: 1024px)': {
@@ -11864,6 +11981,83 @@ const useCounterSectionStyles = createUseStyles(theme => {
   };
 });
 
+const DURATION_MS = 2000;
+const EASING = t => 1 - Math.pow(1 - t, 3); // easeOutCubic
+
+function parseCounterValue(value) {
+  if (value == null || value === '') return null;
+  const match = String(value).trim().match(/^([\d.]+)(.*)$/);
+  if (!match) return null;
+  const num = parseFloat(match[1]);
+  if (Number.isNaN(num)) return null;
+  return {
+    end: num,
+    suffix: match[2] || ''
+  };
+}
+function AnimatedCounter({
+  value,
+  className,
+  refSetter
+}) {
+  const elRef = useRef(null);
+  const rafIdRef = useRef(null);
+  const hasAnimatedRef = useRef(false);
+  useLayoutEffect(() => {
+    hasAnimatedRef.current = false; // Reset so we can re-animate when value changes (e.g. live edit)
+    const parsed = parseCounterValue(value);
+    if (!parsed || !elRef.current) return;
+    const observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      if (!entry.isIntersecting || hasAnimatedRef.current) return;
+      hasAnimatedRef.current = true;
+      const startTime = performance.now();
+      const {
+        end,
+        suffix
+      } = parsed;
+      const tick = now => {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / DURATION_MS, 1);
+        const eased = EASING(progress);
+        const current = eased * end;
+        if (elRef.current) {
+          const displayValue = Number.isInteger(end) ? Math.round(current) : parseFloat(current.toFixed(2));
+          elRef.current.textContent = displayValue + suffix;
+        }
+        if (progress < 1) {
+          rafIdRef.current = requestAnimationFrame(tick);
+        }
+      };
+      rafIdRef.current = requestAnimationFrame(tick);
+    }, {
+      threshold: 0.2
+    });
+    observer.observe(elRef.current);
+    return () => {
+      observer.disconnect();
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [value]);
+  const parsed = parseCounterValue(value);
+  const setRef = el => {
+    elRef.current = el;
+    refSetter?.(el);
+  };
+  if (parsed) {
+    return /*#__PURE__*/React.createElement("h2", {
+      ref: setRef,
+      className: className
+    }, "0", parsed.suffix);
+  }
+  return /*#__PURE__*/React.createElement("h2", {
+    ref: refSetter,
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: value
+    }
+  });
+}
 function CounterSection({
   sectionData,
   sectionIndex
@@ -11874,44 +12068,49 @@ function CounterSection({
     },
     isMobile
   } = useContext(PageContext);
-  console.log('llll', sectionData);
-  sectionData.components = sectionData.components;
   const metadata = sectionData.metadata || {};
   const backgroundImage = metadata.backgroundImage || '';
-  const backgroundColor = metadata.backgroundColor || '#f8f8fa';
+  const backgroundColor = metadata.backgroundColor;
   const classes = useCounterSectionStyles({
     containerWidth,
     isMobile,
     backgroundImage: backgroundImage || null,
     backgroundColor
   });
-  const cardData = sectionData?.components[0];
-  const [sectionComponent] = sectionData.components || [];
+  const cardData = sectionData?.components?.[0];
+  const [sectionComponent] = sectionData?.components || [];
   const counterSection = sectionComponent?.counterSection;
-  counterSection?.components || [];
+  const counters = counterSection?.components || [];
+  const items = cardData?.contentList?.components || counters;
   if (!cardData) return null;
+  const getValue = item => item?.contentHeading?.metadata?.value ?? item?.value?.metadata?.value;
+  const getDescription = item => item?.contentPara?.metadata?.value ?? item?.description?.metadata?.value;
+  const getValueRefSetter = item => item?.contentHeading?.refSetter ?? item?.value?.refSetter;
+  const getDescRefSetter = item => item?.contentPara?.refSetter ?? item?.description?.refSetter;
   return /*#__PURE__*/React.createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.grid
-  }, cardData?.contentList?.components?.map((item, index) => /*#__PURE__*/React.createElement("div", {
-    key: item._id || index,
-    className: classes.counterItem
-  }, item.contentHeading?.metadata?.value != null && item.contentHeading?.metadata?.value !== '' && /*#__PURE__*/React.createElement("h2", {
-    ref: item.contentHeading?.refSetter,
-    className: classes.value,
-    dangerouslySetInnerHTML: {
-      __html: item.contentHeading.metadata.value
-    }
-  }), item.contentPara?.metadata?.value != null && item.contentPara?.metadata?.value !== '' && /*#__PURE__*/React.createElement("p", {
-    ref: item.contentPara?.refSetter,
-    className: classes.description,
-    dangerouslySetInnerHTML: {
-      __html: item.contentPara.metadata.value
-    }
-  }))))));
+  }, items?.map((item, index) => {
+    const value = getValue(item);
+    const description = getDescription(item);
+    return /*#__PURE__*/React.createElement("div", {
+      key: item._id || index,
+      className: classes.counterItem
+    }, value != null && value !== '' && /*#__PURE__*/React.createElement(AnimatedCounter, {
+      value: value,
+      className: classes.value,
+      refSetter: getValueRefSetter(item)
+    }), description != null && description !== '' && /*#__PURE__*/React.createElement("p", {
+      ref: getDescRefSetter(item),
+      className: classes.description,
+      dangerouslySetInnerHTML: {
+        __html: description
+      }
+    }));
+  }))));
 }
 
 var index$5 = /*#__PURE__*/Object.freeze({
@@ -11928,12 +12127,13 @@ const BREAKPOINTS = {
 /**
  * Get current breakpoint from window width
  */
-const getBreakpoint = width => {
+const getBreakpoint = (width, isMobile) => {
+  if (isMobile) return 'mobile';
   if (width >= BREAKPOINTS.desktop) return 'desktop';
   if (width >= BREAKPOINTS.tablet) return 'tablet';
   return 'mobile';
 };
-const stickyBarBase = {
+const getStickyBarBase = theme => ({
   position: 'fixed',
   left: 0,
   right: 0,
@@ -11942,100 +12142,86 @@ const stickyBarBase = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '#F8F9FB',
-  boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.06)',
-  borderTop: '1px solid #E5E7EB'
-};
-const stickyBarResponsive = {
-  mobile: {
-    ...stickyBarBase,
-    padding: '12px 16px',
-    gap: '12px',
-    flexDirection: 'column',
-    alignItems: 'stretch'
-  },
-  tablet: {
-    ...stickyBarBase,
-    padding: '14px 24px',
-    gap: '16px',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  desktop: {
-    ...stickyBarBase,
-    padding: '16px 32px',
-    gap: '24px',
-    flexDirection: 'row',
-    alignItems: 'center'
-  }
+  fontFamily: theme?.typography?.fontFamily,
+  backgroundColor: theme?.colors?.ctaColor || '#FFFFFF',
+  boxShadow: theme?.shadows?.secondary ?? '0 -2px 8px rgba(0, 0, 0, 0.06)',
+  borderTop: `1px solid ${theme?.colors?.border2}`
+});
+const getStickyBarResponsive = (theme, bgColor) => {
+  const base = getStickyBarBase(theme);
+  return {
+    mobile: {
+      ...base,
+      padding: '12px 16px',
+      gap: '12px',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    },
+    tablet: {
+      ...base,
+      padding: '14px 24px',
+      gap: '16px',
+      flexDirection: 'row',
+      alignItems: 'center',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    },
+    desktop: {
+      ...base,
+      padding: '16px 32px',
+      gap: '24px',
+      flexDirection: 'row',
+      alignItems: 'center',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    }
+  };
 };
-const getStickyBarStyle = breakpoint => stickyBarResponsive[breakpoint] || stickyBarResponsive.mobile;
-const stickyTextBase = {
-  color: '#343A40',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+const getStickyBarStyle = (breakpoint, theme = {}, bgColor) => getStickyBarResponsive(theme)[breakpoint] || getStickyBarResponsive(theme).mobile;
+const getStickyTextBase = theme => ({
+  color: theme?.colors?.font2,
+  fontFamily: theme?.typography?.fontFamily ?? 'inherit',
   margin: 0
+});
+const getStickyTextResponsive = (theme, bgColor) => {
+  const base = getStickyTextBase(theme);
+  return {
+    mobile: {
+      ...base,
+      fontSize: '13px',
+      lineHeight: 1.4,
+      textAlign: 'center',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    },
+    tablet: {
+      ...base,
+      fontSize: '14px',
+      lineHeight: 1.45,
+      textAlign: 'left',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    },
+    desktop: {
+      ...base,
+      fontSize: '15px',
+      lineHeight: 1.5,
+      textAlign: 'left',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    }
+  };
 };
-const stickyTextResponsive = {
-  mobile: {
-    ...stickyTextBase,
-    fontSize: '13px',
-    lineHeight: 1.4,
-    textAlign: 'center'
-  },
-  tablet: {
-    ...stickyTextBase,
-    fontSize: '14px',
-    lineHeight: 1.45,
-    textAlign: 'left'
-  },
-  desktop: {
-    ...stickyTextBase,
-    fontSize: '15px',
-    lineHeight: 1.5,
-    textAlign: 'left'
-  }
-};
-const getStickyTextStyle = breakpoint => stickyTextResponsive[breakpoint] || stickyTextResponsive.mobile;
-const stickyButtonBase = {
-  backgroundColor: '#3366FF',
-  color: '#FFFFFF',
-  border: 'none',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontWeight: 600,
-  textTransform: 'uppercase',
-  letterSpacing: '0.02em',
-  cursor: 'pointer',
-  whiteSpace: 'nowrap',
-  flexShrink: 0
-};
-const stickyButtonResponsive = {
-  mobile: {
-    ...stickyButtonBase,
-    padding: '10px 20px',
-    fontSize: '12px',
-    borderRadius: '6px'
-  },
-  tablet: {
-    ...stickyButtonBase,
-    padding: '12px 24px',
-    fontSize: '13px',
-    borderRadius: '8px'
-  },
-  desktop: {
-    ...stickyButtonBase,
-    padding: '14px 28px',
-    fontSize: '14px',
-    borderRadius: '8px'
-  }
-};
-const getStickyButtonStyle = breakpoint => stickyButtonResponsive[breakpoint] || stickyButtonResponsive.mobile;
+const getStickyTextStyle = (breakpoint, theme = {}) => getStickyTextResponsive(theme)[breakpoint] || getStickyTextResponsive(theme).mobile;
 
 // --- Floating (WhatsApp) type ---
 
-const floatingButtonBase = {
+const getFloatingButtonBase = theme => ({
   position: 'fixed',
   bottom: 24,
-  right: 24,
+  right: 9,
   width: 'fit-content',
   marginLeft: 'auto',
   zIndex: 9999,
@@ -12043,47 +12229,53 @@ const floatingButtonBase = {
   alignItems: 'center',
   gap: '10px',
   padding: '12px 20px',
-  backgroundColor: '#FFFFFF',
-  border: '1px solid #E5E7EB',
+  backgroundColor: theme?.colors?.ctaColor || '#FFFFFF',
+  border: `1px solid ${theme?.palette?.border?.secondary ?? '#E5E7EB'}`,
   borderRadius: '9999px',
-  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+  boxShadow: theme?.shadows?.primary ?? '0 4px 12px rgba(0, 0, 0, 0.1)',
   cursor: 'pointer',
   textDecoration: 'none',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontWeight: 700,
+  fontFamily: theme?.typography?.fontFamily ?? 'inherit',
+  fontWeight: theme?.typography?.fontWeight?.bold ?? 700,
   fontSize: '14px',
   textTransform: 'uppercase',
   letterSpacing: '0.02em',
-  color: '#000000',
+  color: theme?.colors?.CtaTextColor || 'white',
   transition: 'box-shadow 0.2s ease, transform 0.2s ease'
+});
+const getFloatingButtonResponsive = theme => {
+  const base = getFloatingButtonBase(theme);
+  return {
+    mobile: {
+      ...base,
+      bottom: 142,
+      left: 16,
+      padding: '10px 16px',
+      gap: '8px',
+      fontSize: '12px',
+      background: theme?.colors?.ctaColor || '#FFFFFF'
+    },
+    tablet: {
+      ...base,
+      bottom: 20,
+      left: 20,
+      padding: '12px 18px',
+      gap: '10px',
+      fontSize: '13px',
+      background: theme?.colors?.ctaColor || '#FFFFFF'
+    },
+    desktop: {
+      ...base,
+      bottom: 24,
+      left: 24,
+      padding: '12px 20px',
+      gap: '10px',
+      fontSize: '14px',
+      background: theme?.colors?.ctaColor || '#FFFFFF'
+    }
+  };
 };
-const floatingButtonResponsive = {
-  mobile: {
-    ...floatingButtonBase,
-    bottom: 16,
-    left: 16,
-    padding: '10px 16px',
-    gap: '8px',
-    fontSize: '12px'
-  },
-  tablet: {
-    ...floatingButtonBase,
-    bottom: 20,
-    left: 20,
-    padding: '12px 18px',
-    gap: '10px',
-    fontSize: '13px'
-  },
-  desktop: {
-    ...floatingButtonBase,
-    bottom: 24,
-    left: 24,
-    padding: '12px 20px',
-    gap: '10px',
-    fontSize: '14px'
-  }
-};
-const getFloatingButtonStyle = breakpoint => floatingButtonResponsive[breakpoint] || floatingButtonResponsive.mobile;
+const getFloatingButtonStyle = (breakpoint, theme = {}) => getFloatingButtonResponsive(theme)[breakpoint] || getFloatingButtonResponsive(theme).mobile;
 const whatsAppIconSvgSize = {
   mobile: 24,
   tablet: 26,
@@ -12171,12 +12363,17 @@ function StickyCta({
   whatsAppLabel = 'SUPPORT',
   whatsAppIconColor,
   whatsAppButtonBackgroundColor,
-  iconImageUrl
+  iconImageUrl,
+  nodeData,
+  extraProps
 }) {
-  console.log('nishu03333', sectionData);
+  const {
+    isMobile
+  } = useContext(PageContext);
   const node = sectionData?.components?.[0];
   const contentList = node?.contentList?.components || [];
   const showEditHint = sectionData?.isDefaultEditor ?? false;
+  sectionData?.bgSection?.components?.[0]?.sectionBgData?.metadata?.value;
   const propsFromSection = node ? {
     type: node?.title?.metadata?.value ?? type,
     stickyMessage: contentList[1]?.contentPara?.metadata?.value ?? stickyMessage,
@@ -12199,8 +12396,9 @@ function StickyCta({
     whatsAppButtonBackgroundColor,
     iconImageUrl
   };
-  const whatsAppUrl = p?.whatsAppPhoneNumber ? p?.whatsAppPhoneNumber : buildWhatsAppUrl(p?.whatsAppPhoneNumber);
-  const [breakpoint, setBreakpoint] = useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : 'mobile');
+  const whatsAppUrl = buildWhatsAppUrl(p?.whatsAppPhoneNumber) ?? p?.whatsAppHref ?? '#';
+  const theme = useTheme() || {};
+  const [breakpoint, setBreakpoint] = useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, isMobile) : 'mobile');
   useEffect(() => {
     if (typeof window === 'undefined') return;
     const onResize = () => setBreakpoint(getBreakpoint(window.innerWidth));
@@ -12229,14 +12427,14 @@ function StickyCta({
   }, "Click on edit button to edit this section")) : null;
   if (p.type === 'floating') {
     const buttonStyle = {
-      ...getFloatingButtonStyle(breakpoint),
+      ...getFloatingButtonStyle(breakpoint, theme),
       ...(p.whatsAppButtonBackgroundColor != null && {
         backgroundColor: p.whatsAppButtonBackgroundColor
       })
     };
     const iconSize = getWhatsAppIconSize(breakpoint);
     const iconColor = p.whatsAppIconColor ?? DEFAULT_WHATSAPP_ICON_COLOR;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, editHintBlock, /*#__PURE__*/React.createElement("a", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React.createElement("a", {
       href: whatsAppUrl,
       target: "_blank",
       rel: "noopener noreferrer",
@@ -12258,28 +12456,29 @@ function StickyCta({
     }), /*#__PURE__*/React.createElement("span", null, p.whatsAppLabel)));
   }
 
-  // type === 'sticky' – button uses mobile number from props to build URL; click redirects to WhatsApp
-  const barStyle = getStickyBarStyle(breakpoint);
-  const textStyle = getStickyTextStyle(breakpoint);
-  const buttonStyle = getStickyButtonStyle(breakpoint);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, editHintBlock, /*#__PURE__*/React.createElement("div", {
+  // type === 'sticky' – use primary Button (same as other sections) linking to WhatsApp
+  const barStyle = getStickyBarStyle(breakpoint, theme);
+  const textStyle = getStickyTextStyle(breakpoint, theme);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React.createElement("div", {
     style: barStyle,
-    role: "banner"
+    role: "banner",
+    "access-cta-sticky": "DIY"
   }, /*#__PURE__*/React.createElement("p", {
     style: textStyle
-  }, p.stickyMessage), /*#__PURE__*/React.createElement("a", {
-    href: whatsAppUrl,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    "access-cta-container": "DIY",
-    style: {
-      ...buttonStyle,
-      textDecoration: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, p.stickyButtonText)));
+  }, p.stickyMessage), /*#__PURE__*/React.createElement(Button, {
+    data: {
+      isLink: 1,
+      isExternal: 1,
+      link: whatsAppUrl,
+      value: p.stickyButtonText
+    },
+    type: "primary",
+    styling: {
+      background: theme?.colors?.ctaColor
+    },
+    size: breakpoint === 'mobile' ? 'small' : 'medium',
+    "access-cta-container": "DIY"
+  })));
 }
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -12624,7 +12823,8 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
   return {
     section: {
       width: '100%',
-      background: 'linear-gradient(135deg, #6b2d5c 0%, #4a3f6b 40%, #2d5a6b 70%, #3d6b5a 100%)',
+      background: theme?.colors?.background2,
+      color: theme?.colors?.font3,
       minHeight: '100%',
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
@@ -12664,7 +12864,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       lineHeight: 1.25,
       letterSpacing: '3px',
       textTransform: 'uppercase',
-      color: theme.palette?.font?.invertedDefault || 'rgba(255,255,255,0.9)',
       wordBreak: 'break-word',
       fontWeight: theme.typography?.fontWeight?.regular
     },
@@ -12673,15 +12872,12 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.h2,
       lineHeight: 1.1,
       letterSpacing: '-1px',
-      fontWeight: theme.typography?.fontWeight?.bold,
-      color: theme.palette?.font?.invertedDefault || '#ffffff',
       wordBreak: 'break-word'
     },
     subHeading: {
       margin: 0,
       fontSize: theme.typography.fontSize.body,
       lineHeight: 1.5,
-      color: theme.palette?.font?.invertedDefault || 'rgba(255,255,255,0.95)',
       wordBreak: 'break-word',
       maxWidth: '600px'
     },
@@ -12727,7 +12923,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
         margin: 0,
         fontSize: theme.typography.fontSize.body,
         fontWeight: theme.typography?.fontWeight?.semiBold,
-        color: '#ffffff',
         lineHeight: 1.3
       }
     },
@@ -12742,7 +12937,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       '& p': {
         margin: 0,
         fontSize: theme.typography.fontSize.body,
-        color: '#ffffff',
         lineHeight: 1.4
       }
     },