diy-template-components 4.0.1 → 4.0.5

package/build/index.js

@@ -21,6 +21,19 @@ var Countdown__default = /*#__PURE__*/_interopDefaultLegacy(Countdown);
 var koreanLocale__default = /*#__PURE__*/_interopDefaultLegacy(koreanLocale);
 var ReactDOMServer__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOMServer);
 
+function insertStyle(css) {
+  if (!css || typeof window === 'undefined') {
+    return;
+  }
+  const style = document.createElement('style');
+  style.setAttribute('type', 'text/css');
+  style.innerHTML = css;
+  document.head.appendChild(style);
+  return css;
+}
+
+insertStyle("/* Brush stroke underline - for rich text content (color via --brush-color inline style) */\n.brush-stroke {\n  position: relative;\n  display: inline-block;\n  white-space: pre-wrap;\n}\n\n.brush-stroke::after {\n  content: \"\";\n  position: absolute;\n  top: 90%;\n  left: 0;\n  height: 0.5em;\n  width: 100%;\n  z-index: -1;\n  border: solid var(--brush-width, 0.15em) var(--brush-color, #FFFFFF);\n  border-color: var(--brush-color, #FFFFFF) transparent transparent transparent;\n  border-radius: 100%;\n}\n\n/* Font size classes for rich text editor - Desktop (default) */\n.font-size-extra-small {\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.font-size-small {\n  font-size: 16px;\n  line-height: 20px;\n}\n\n.font-size-medium {\n  font-size: 20px;\n  line-height: 24px;\n}\n\n.font-size-large {\n  font-size: 24px;\n  line-height: 28px;\n}\n\n.font-size-very-large {\n  font-size: 32px;\n  line-height: 36px;\n}\n\n.font-size-extra-large {\n  font-size: 56px;\n  line-height: 64px;\n}\n\n.font-size-huge {\n  font-size: 72px;\n  line-height: 80px;\n}\n\n/* Font size classes - Mobile */\n@media (max-width: 768px) {\n  .font-size-extra-small {\n    font-size: 10px;\n    line-height: 14px;\n  }\n  .font-size-small {\n    font-size: 14px;\n    line-height: 18px;\n  }\n  .font-size-medium {\n    font-size: 16px;\n    line-height: 20px;\n  }\n  .font-size-large {\n    font-size: 18px;\n    line-height: 20px;\n  }\n  .font-size-very-large {\n    font-size: 24px;\n    line-height: 36px;\n  }\n  .font-size-extra-large {\n    font-size: 40px;\n    line-height: 48px;\n  }\n  .font-size-huge {\n    font-size: 56px;\n    line-height: 64px;\n  }\n}");
+
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -560,7 +573,7 @@ function useLinkBuilder(data) {
     basePath,
     isMasterTemplate
   } = React.useContext(PageContext);
-  if (isEdit || !data.isLink) {
+  if (!data || isEdit || !data.isLink) {
     return null;
   }
   if (data?.isExistingLink === false) {
@@ -580,7 +593,7 @@ function useLinkBuilder(data) {
   }
   const {
     pageId
-  } = navList.find(el => el.slug === data?.link) || {};
+  } = navList?.find(el => el.slug === data?.link) || {};
   return `//${basePath}?templateId=${templateId}&pageId=${pageId}${isMasterTemplate ? '&mld=true' : ''}`;
 }
 
@@ -2297,11 +2310,6 @@ function Footer({
   }, "\xA9\uFE0F Leaverage Consultants Private Limited") : null);
 }
 
-const borderRadius = {
-  small: 4,
-  regular: 8,
-  large: 12
-};
 const generateShadows = palette => ({
   primary: `0 2px 8px ${palette.shadow.primary}`,
   secondary: `0 4px 10px ${palette.shadow.secondary}`
@@ -2458,7 +2466,41 @@ const fontWeight = {
   superBold: 900
 };
 
-function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
+const getBorderRadius = roundness => {
+  const mapping = {
+    sharp: {
+      small: 0,
+      regular: 0,
+      large: 0
+    },
+    soft: {
+      small: 8,
+      regular: 8,
+      large: 8
+    },
+    rounded: {
+      small: 16,
+      regular: 16,
+      large: 16
+    },
+    'extra-round': {
+      small: 24,
+      regular: 24,
+      large: 24
+    },
+    pill: {
+      small: 9999,
+      regular: 9999,
+      large: 9999
+    }
+  };
+  return mapping[roundness] || {
+    small: 16,
+    regular: 16,
+    large: 16
+  };
+};
+function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile, roundness = 'rounded') {
   const palette = palettes[colorTheme] || palettes['blue'];
   const typography = {
     fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
@@ -2466,7 +2508,7 @@ function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
     fontWeight
   };
   const shape = {
-    borderRadius
+    borderRadius: getBorderRadius(roundness)
   };
   return {
     palette,
@@ -2533,17 +2575,6 @@ function NanumSquare() {
   return null;
 }
 
-function insertStyle(css) {
-  if (!css || typeof window === 'undefined') {
-    return;
-  }
-  const style = document.createElement('style');
-  style.setAttribute('type', 'text/css');
-  style.innerHTML = css;
-  document.head.appendChild(style);
-  return css;
-}
-
 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}");
 
 /**
@@ -2757,33 +2788,36 @@ function withSectionBackground(WrappedSectionRenderer) {
 }
 
 const TYPE_TO_COMPONENT_MAP$1 = {
-  BANNER_CAROUSEL_RIGHT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$q; })),
-  GRID_CARD: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$p; })),
-  BANNER_CAROUSEL_CENTER: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$o; })),
-  BANNER_CAROUSEL_CENTER_V2: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$n; })),
-  BANNER_CAROUSEL_LEFT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$m; })),
-  FORM_SUBSCRIBE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$l; })),
-  TEXT_TESTIMONIAL: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$k; })),
-  VIDEO_TESTIMONIAL: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$j; })),
-  VIDEO_WORKSHOP_PROMOTION: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$2; })),
-  VIDEO: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$i; })),
-  INFO: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$h; })),
-  TEXT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$g; })),
-  IMAGE_GALLERY: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$f; })),
-  FAQ_LISTING: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$e; })),
-  COURSE_CAROUSEL: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$c; })),
-  TEAM_CARD: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$b; })),
-  TEXT_GRID: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$d; })),
-  CONTACT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$a; })),
-  FORM_ENQUIRY: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$9; })),
-  WEBINAR_LANDING_PAGE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$8; })),
-  COURSE_LANDING_PAGE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$7; })),
-  COURSE_LANDING_PAGE_V2: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$1; })),
-  FORM_LANDING_PAGE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$6; })),
-  TILES_SECTION: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$5; })),
-  EMAIL_DRIP_MARKET: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$4; })),
-  ABOUT_INSTITUTE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$3; })),
-  COUNTER_SECTION: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index; }))
+  BANNER_CAROUSEL_RIGHT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$t; })),
+  GRID_CARD: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$s; })),
+  BANNER_CAROUSEL_CENTER: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$r; })),
+  BANNER_CAROUSEL_CENTER_V2: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$q; })),
+  BANNER_CAROUSEL_LEFT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$p; })),
+  FORM_SUBSCRIBE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$o; })),
+  TEXT_TESTIMONIAL: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$n; })),
+  VIDEO_TESTIMONIAL: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$m; })),
+  VIDEO_WORKSHOP_PROMOTION: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$1; })),
+  VIDEO: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$l; })),
+  INFO: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$k; })),
+  TEXT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$j; })),
+  IMAGE_GALLERY: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$i; })),
+  FAQ_LISTING: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$h; })),
+  COURSE_CAROUSEL: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$f; })),
+  TEAM_CARD: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$e; })),
+  TEXT_GRID: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$g; })),
+  CONTACT: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$d; })),
+  FORM_ENQUIRY: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$c; })),
+  WEBINAR_LANDING_PAGE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$b; })),
+  COURSE_LANDING_PAGE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$a; })),
+  COURSE_LANDING_PAGE_V2: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index; })),
+  FORM_LANDING_PAGE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$9; })),
+  TILES_SECTION: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$8; })),
+  EMAIL_DRIP_MARKET: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$7; })),
+  ABOUT_INSTITUTE: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$6; })),
+  COUNTER_SECTION: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$5; })),
+  TIMER_AND_CALL: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$2; })),
+  STICKY_CTA: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$4; })),
+  CUSTOM_HTML_SECTION: /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return index$3; }))
 };
 const getCompToRender$1 = type => {
   const Comp = TYPE_TO_COMPONENT_MAP$1[type];
@@ -2817,35 +2851,21 @@ function SectionRenderer$1({
 
   console.log('nishu222', sectionData);
   let sectionBg = {};
-  debugger;
   if (sectionData?.isV2Section) {
-    let currentObj = sectionData?.components?.find(component => component.hasOwnProperty('sectionsBgname')?.sectionBgData || {});
-    sectionBg = currentObj?.sectionsBgname?.sectionBgData || {};
+    sectionBg = sectionData?.bgSection?.components?.[0]?.sectionBgData || {};
+  }
+  if (sectionData?.type === 'STICKY_CTA') {
+    sectionData = {
+      ...sectionData,
+      isDefaultEditor: true
+    };
   }
-
-  //   sectionBg ={
-  //     id:"625fb1a879d4c9001261cewqsazxs21",
-  //      value: "imagev",
-  //      label: "",
-  //      type: "image",
-  //      bgType: "video",
-  //      name: "Image",
-  //      isYoutubeVideo: true,
-  //      elementType: "div",
-  //      isV2: true,
-  //      metadata: {
-  //        value: "https://www.youtube.com/watch?v=bjxTIcuzB6k&list=PLe6YKWr4VVM1x2LIpiqmVvG4QgIvoDEdO",
-  //      }
-  //  }
-  console.log('nishu222333', sectionData);
   return /*#__PURE__*/React__default["default"].createElement(React.Suspense, {
     fallback: null /*GIF maybe*/
   }, /*#__PURE__*/React__default["default"].createElement(SectionWithBackground$1, {
     sectionData: sectionData,
     extraProps: extraProps,
-    sectionIndex: sectionIndex
-    // isSkipV2Section={sectionData?.isV2Section}
-    ,
+    sectionIndex: sectionIndex,
     isSkipV2Section: sectionData?.isV2Section
     // componentBg={sectionData?.componentBg || { type: "image", value: "https://fastly.picsum.photos/id/4/5000/3333.jpg?hmac=ghf06FdmgiD0-G4c9DdNM8RnBIN7BO0-ZGEw47khHP4" }}
     ,
@@ -2855,7 +2875,8 @@ function SectionRenderer$1({
 
 const defaultTheme = {
   color: 'blue',
-  font: 'rubik'
+  font: 'rubik',
+  roundness: 'rounded'
 };
 const defaultLayout = {
   containerWidth: 1440
@@ -2929,7 +2950,7 @@ const allColors = {
   tertiaryskyblue: '#F2FCFF'
 };
 
-const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile) => {
+const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile, roundness = 'rounded') => {
   let themeColor = theme.split('-');
   let color, gradient, darkMode;
   if (themeColor.length === 1) {
@@ -3030,7 +3051,7 @@ const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile) => {
     margin: isMobile ? mobileMargin : margin
   };
   return {
-    ...getTheme(theme),
+    ...getTheme(theme, fontFamily, isMobile, roundness),
     typography,
     spacing,
     colors
@@ -3042,7 +3063,8 @@ function PageRenderer$1({
     metadata: {
       theme: {
         color = defaultTheme.color,
-        font = defaultTheme.font
+        font = defaultTheme.font,
+        roundness = defaultTheme.roundness
       } = defaultTheme,
       layout = defaultLayout
     } = defaultMetadata,
@@ -3094,7 +3116,7 @@ function PageRenderer$1({
     countryCode,
     currencySymbol
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
-  const theme = React.useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = React.useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
     theme: theme
@@ -3571,9 +3593,9 @@ function BannerCarouselRight({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : React.Fragment;
-  const wrapperProps = bannerCarousel.components.length > 1 ? {
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : React.Fragment;
+  const wrapperProps = bannerCarousel?.components?.length > 1 ? {
     buttonContainerClass: classes.absoluteButtonsBannerRight,
     inverted: false
   } : {};
@@ -3581,7 +3603,7 @@ function BannerCarouselRight({
     className: classes.bannerCarouselRightSection
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$5, {
+  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$5, {
     nodeData: node,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex,
@@ -3589,9 +3611,9 @@ function BannerCarouselRight({
   })))));
 }
 
-var index$q = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselRight
+var index$t = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': BannerCarouselRight
 });
 
 const useSectionStyles$8 = createUseStyles(theme => ({
@@ -3765,7 +3787,7 @@ function List({
     containerWidth,
     isMobile
   });
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const getNumber = val => {
     return val.toString().length == 1 ? '0' + val : val;
   };
@@ -3813,9 +3835,9 @@ function List({
   }))));
 }
 
-var index$p = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': List
+var index$s = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': List
 });
 
 const useSectionStyles$7 = createUseStyles(theme => {
@@ -4104,15 +4126,15 @@ function BannerCarouselCenter({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : React.Fragment;
-  const wrapperProps = bannerCarousel.components.length > 1 ? {
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : React.Fragment;
+  const wrapperProps = bannerCarousel?.components?.length > 1 ? {
     buttonContainerClass: classes.absoluteButtons,
     inverted: true
   } : {};
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.bannerCarouselCenterSection
-  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$4, {
+  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$4, {
     nodeData: node,
     isCustomWebsite: isCustomWebsite,
     key: idx /* or some other unique property */,
@@ -4121,9 +4143,9 @@ function BannerCarouselCenter({
   }))));
 }
 
-var index$o = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselCenter
+var index$r = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': BannerCarouselCenter
 });
 
 const useSectionStyles$6 = createUseStyles(theme => {
@@ -4416,9 +4438,9 @@ function BannerCarouselCenterv2({
   }))));
 }
 
-var index$n = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselCenterv2
+var index$q = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': BannerCarouselCenterv2
 });
 
 const useSectionStyles$5 = createUseStyles(theme => {
@@ -4643,13 +4665,13 @@ function BannerCarouselLeft({
   });
   const [{
     bannerCarousel
-  }] = sectionData.components;
-  const Wrapper = bannerCarousel.components.length > 1 ? Carousel : React.Fragment;
+  }] = sectionData?.components;
+  const Wrapper = bannerCarousel?.components?.length > 1 ? Carousel : React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, null, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$2, {
+  }, /*#__PURE__*/React__default["default"].createElement(Wrapper, null, bannerCarousel?.components?.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$2, {
     nodeData: node,
     key: idx /* or some other unique property */,
     sectionIndex: sectionIndex,
@@ -4657,9 +4679,9 @@ function BannerCarouselLeft({
   })))));
 }
 
-var index$m = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': BannerCarouselLeft
+var index$p = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': BannerCarouselLeft
 });
 
 const useSectionStyles$4 = createUseStyles(theme => ({
@@ -4938,7 +4960,7 @@ function SubscribeToNewsletter({
     isLandingPages,
     extraProps
   } = React.useContext(PageContext);
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const classes = useSectionStyles$4({
     containerWidth,
     isMobile
@@ -5053,9 +5075,9 @@ function SubscribeToNewsletter({
   })))))));
 }
 
-var index$l = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': SubscribeToNewsletter
+var index$o = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': SubscribeToNewsletter
 });
 
 const useTestimonialStyles = createUseStyles(theme => ({
@@ -5341,9 +5363,9 @@ function Testimonials({
   }));
 }
 
-var index$k = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Testimonials
+var index$n = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': Testimonials
 });
 
 const loaderStyle = theme => ({
@@ -5714,7 +5736,7 @@ function VideoTestimonial({
     containerWidth,
     isMobile
   });
-  const [videoData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [videoData] = sectionData.components;
   const Wrapper = videoData.videoCarousel.components.length > 1 ? Carousel : React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoTestimonialSuperContainer
@@ -5745,9 +5767,9 @@ function VideoTestimonial({
   }))))));
 }
 
-var index$j = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': VideoTestimonial
+var index$m = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': VideoTestimonial
 });
 
 const useVideoStyles = createUseStyles(theme => {
@@ -5934,7 +5956,7 @@ function Video({
       containerWidth
     }
   } = React.useContext(PageContext);
-  const [videoData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [videoData] = sectionData.components;
   const cardsCount = videoData?.videoCarousel?.components?.length;
   const slidesToShow = isMobile ? 1 : 2;
   const classes = useVideoStyles({
@@ -5981,9 +6003,9 @@ function Video({
   }, carouselContent))));
 }
 
-var index$i = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Video
+var index$l = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': Video
 });
 
 const useSectionStyles$3 = createUseStyles(theme => ({
@@ -6141,7 +6163,7 @@ function Info({
   } = React.useContext(PageContext);
   const theme = useTheme();
   const slidesToShow = isMobile ? 1 : 4;
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const carouselList = nodeData?.contentList?.components;
   const cardsCount = carouselList?.length;
   const classes = useSectionStyles$3({
@@ -6217,9 +6239,9 @@ function Info({
   }, carouselContent))));
 }
 
-var index$h = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Info
+var index$k = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': Info
 });
 
 const useSectionStyles$2 = createUseStyles(theme => ({
@@ -6300,7 +6322,7 @@ const TextSection = ({
     containerWidth,
     isMobile
   });
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6336,9 +6358,9 @@ const TextSection = ({
   })))));
 };
 
-var index$g = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TextSection
+var index$j = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': TextSection
 });
 
 const usePhotoGalleryStyles = createUseStyles(theme => {
@@ -6477,7 +6499,7 @@ function PhotoGallery({
       containerWidth
     }
   } = React.useContext(PageContext);
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const carouselList = nodeData?.cardCarousel?.components;
   const cardsCount = carouselList?.length;
   const slidesToShow = isMobile ? 1 : 2;
@@ -6559,9 +6581,9 @@ function PhotoGallery({
   }, carouselContent))));
 }
 
-var index$f = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': PhotoGallery
+var index$i = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': PhotoGallery
 });
 
 const useFaqListStyles = createUseStyles(theme => ({
@@ -6676,7 +6698,7 @@ const FAQListing = ({
     containerWidth,
     isMobile
   });
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6742,9 +6764,9 @@ const Accordion = ({
   })));
 };
 
-var index$e = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FAQListing
+var index$h = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': FAQListing
 });
 
 const useTextGridStyles = createUseStyles(theme => ({
@@ -6854,7 +6876,7 @@ const TextGrid = ({
       containerWidth
     }
   } = React.useContext(PageContext);
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const cardsCount = nodeData?.contentList?.components?.length;
   const slidesToShow = isMobile ? 1 : 2;
   const classes = useTextGridStyles({
@@ -6913,9 +6935,9 @@ const TextGrid = ({
   }, carouselContent))));
 };
 
-var index$d = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TextGrid
+var index$g = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': TextGrid
 });
 
 const useCourseStyles = createUseStyles(theme => {
@@ -8197,9 +8219,9 @@ function SimpleCardsContainer({
   }, children);
 }
 
-var index$c = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': courses
+var index$f = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': courses
 });
 
 const useTeamStyles = createUseStyles(theme => {
@@ -8463,7 +8485,7 @@ function TeamCard({
       containerWidth
     }
   } = React.useContext(PageContext);
-  const [teamData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [teamData] = sectionData.components;
   const cardsCount = teamData?.teamCarousel?.components?.length;
   const slidesToShow = isMobile ? 1 : 4;
   const classes = useTeamStyles({
@@ -8515,9 +8537,9 @@ function TeamCard({
   }, " ", getCarouselContent())));
 }
 
-var index$b = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TeamCard
+var index$e = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': TeamCard
 });
 
 const useSectionStyles$1 = createUseStyles(theme => ({
@@ -8702,7 +8724,7 @@ function FormEnquiry({
     containerWidth,
     isMobile
   });
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const theme = useTheme();
   let [btnDisabled, setBtnDisabled] = React.useState(false);
@@ -8936,9 +8958,9 @@ function FormEnquiry({
   })))))));
 }
 
-var index$a = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FormEnquiry
+var index$d = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': FormEnquiry
 });
 
 const useSectionStyles = createUseStyles(theme => ({
@@ -9159,7 +9181,7 @@ function Contact({
   } = React.useContext(PageContext);
   let [btnDisabled, setBtnDisabled] = React.useState(false);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const classes = useSectionStyles({
     containerWidth,
     isMobile
@@ -9358,9 +9380,9 @@ function Contact({
   })))))));
 }
 
-var index$9 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Contact
+var index$c = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': Contact
 });
 
 const useWebinarPromotionPage = createUseStyles(theme => {
@@ -9835,13 +9857,12 @@ function CoursePromotionPage$1({
   }))));
 }
 
-var index$8 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPage$1
+var index$b = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': CoursePromotionPage$1
 });
 
 const useCoursePromotionPage$1 = createUseStyles(theme => {
-  console.log(theme, 'themere');
   return {
     courseSuperContainer: {
       display: 'flex',
@@ -10422,9 +10443,9 @@ function CoursePromotionPage({
   }))));
 }
 
-var index$7 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPage
+var index$a = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': CoursePromotionPage
 });
 
 const useFormPageStyles = createUseStyles(theme => ({
@@ -10785,9 +10806,9 @@ const FormPage = ({
   })))));
 };
 
-var index$6 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FormPage
+var index$9 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': FormPage
 });
 
 const useTilesStyles = createUseStyles(theme => {
@@ -10885,7 +10906,7 @@ function Tiles({
   const classes = useTilesStyles({
     isMobile
   });
-  const nodeData = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const nodeData = sectionData.components;
   const tilesList = nodeData[0]?.tilesList.components;
   const handleClick = value => {
     if (!isEdit && value) {
@@ -10933,9 +10954,9 @@ function Tiles({
   }, TileDiv)));
 }
 
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': Tiles
+var index$8 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': Tiles
 });
 
 const useEmailStyles = createUseStyles(theme => ({
@@ -11406,9 +11427,9 @@ function EmailDripMarket({
   })));
 }
 
-var index$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': EmailDripMarket
+var index$7 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': EmailDripMarket
 });
 
 const useAboutInstituteStyles = createUseStyles(theme => ({
@@ -11632,7 +11653,7 @@ function ABOUT_INSTITUTE({
     containerWidth,
     isMobile
   });
-  const [nodeData] = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
+  const [nodeData] = sectionData.components;
   const [highlightNodeData] = nodeData?.highlight?.components;
   const theme = useTheme();
   const ImageJSX = () => {
@@ -11774,85 +11795,936 @@ function ABOUT_INSTITUTE({
   }, /*#__PURE__*/React__default["default"].createElement(ImageJSX, null), /*#__PURE__*/React__default["default"].createElement(ContentJSX, null)), /*#__PURE__*/React__default["default"].createElement(HighlightJSX, null)));
 }
 
-var index$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': ABOUT_INSTITUTE
+var index$6 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': ABOUT_INSTITUTE
 });
 
-// import TIMER_AND_CALL from '../../sections/timerAndCall';
-const TYPE_TO_COMPONENT_MAP = {
-  BANNER_CAROUSEL_RIGHT: BannerCarouselRight,
-  GRID_CARD: List,
-  BANNER_CAROUSEL_CENTER: BannerCarouselCenter,
-  BANNER_CAROUSEL_CENTER_V2: BannerCarouselCenterv2,
-  BANNER_CAROUSEL_LEFT: BannerCarouselLeft,
-  FORM_SUBSCRIBE: SubscribeToNewsletter,
-  TEXT_TESTIMONIAL: Testimonials,
-  VIDEO_TESTIMONIAL: VideoTestimonial,
-  VIDEO: Video,
-  INFO: Info,
-  TEXT: TextSection,
-  IMAGE_GALLERY: PhotoGallery,
-  FAQ_LISTING: FAQListing,
-  TEXT_GRID: TextGrid,
-  COURSE_CAROUSEL: courses,
-  TEAM_CARD: TeamCard,
-  CONTACT: FormEnquiry,
-  FORM_ENQUIRY: Contact,
-  WEBINAR_LANDING_PAGE: CoursePromotionPage$1,
-  COURSE_LANDING_PAGE: CoursePromotionPage,
-  FORM_LANDING_PAGE: FormPage,
-  TILES_SECTION: Tiles,
-  EMAIL_DRIP_MARKET: EmailDripMarket,
-  ABOUT_INSTITUTE
-};
-const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
-const MemoisedSection = /*#__PURE__*/React.memo(({
-  sectionData,
-  extraProps,
-  isCustomWebsite,
-  sectionIndex
-}) => {
-  console.log('extraProps in section data', extraProps);
-  const SectionComp = getCompToRender(sectionData.type);
-  return /*#__PURE__*/React__default["default"].createElement(SectionComp, {
-    sectionData: sectionData,
-    extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite,
-    sectionIndex: sectionIndex
-  });
+const useCounterSectionStyles = createUseStyles(theme => {
+  return {
+    section: {
+      width: '100%',
+      borderRadius: theme.shape?.borderRadius?.regular || '12px',
+      overflow: 'hidden',
+      backgroundImage: ({
+        backgroundImage
+      } = {}) => backgroundImage ? `url("${backgroundImage}")` : 'none',
+      backgroundColor: ({
+        backgroundColor
+      } = {}) => backgroundColor || '#f8f8fa',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      '&, & *, & *:before, & *:after': {
+        fontFamily: theme?.typography?.fontFamily,
+        boxSizing: 'border-box'
+      }
+    },
+    container: {
+      width: '100%',
+      maxWidth: ({
+        containerWidth
+      } = {}) => containerWidth || '1440px',
+      margin: '0 auto',
+      padding: ({
+        isMobile
+      } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.tiny}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`
+    },
+    grid: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, 1fr)',
+      gap: ({
+        isMobile
+      } = {}) => isMobile ? '24px' : '32px',
+      alignItems: 'stretch'
+    },
+    counterItem: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    value: {
+      margin: 0,
+      marginBottom: '8px',
+      fontSize: '64px',
+      fontWeight: theme.typography?.fontWeight?.bold,
+      lineHeight: 1.1,
+      color: 'rgba(247, 37, 133, 1)' ,
+      wordBreak: 'break-word'
+    },
+    description: {
+      margin: 0,
+      fontSize: '20px',
+      lineHeight: 1.4,
+      fontWeight: '700',
+      color: 'rgba(51, 51, 51, 1)' ,
+      wordBreak: 'break-word'
+    },
+    '@media (max-width: 1024px)': {
+      grid: {
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gap: '28px'
+      }
+    },
+    '@media (max-width: 767px)': {
+      section: {
+        borderRadius: theme.shape?.borderRadius?.small || '8px'
+      },
+      container: {
+        padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.tiny}px`
+      },
+      grid: {
+        gridTemplateColumns: '1fr',
+        gap: '24px'
+      },
+      value: {
+        fontSize: theme.typography.fontSize.h3,
+        marginBottom: '4px',
+        lineHeight: 1.1
+      },
+      description: {
+        fontSize: theme.typography.fontSize.body,
+        lineHeight: 1.4
+      }
+    }
+  };
 });
-const SectionWithBackground = withSectionBackground(MemoisedSection);
-function SectionRenderer({
+
+function CounterSection({
   sectionData,
-  extraProps,
-  isCustomWebsite,
   sectionIndex
 }) {
-  let sectionBg = {};
-  if (sectionData?.isV2Section) {
-    let currentObj = sectionData?.components?.find(component => component.hasOwnProperty('sectionsBgname')?.sectionBgData || {});
-    sectionBg = currentObj?.sectionsBgname?.sectionBgData || {};
-  }
-  return /*#__PURE__*/React__default["default"].createElement(SectionWithBackground, {
-    sectionData: sectionData,
-    extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite,
-    sectionIndex: sectionIndex,
-    isSkipV2Section: sectionData?.isV2Section,
-    componentBg: sectionBg || {}
+  const {
+    layout: {
+      containerWidth
+    },
+    isMobile
+  } = React.useContext(PageContext);
+  console.log('llll', sectionData);
+  sectionData.components = sectionData.components;
+  const metadata = sectionData.metadata || {};
+  const backgroundImage = metadata.backgroundImage || '';
+  const backgroundColor = metadata.backgroundColor || '#f8f8fa';
+  const classes = useCounterSectionStyles({
+    containerWidth,
+    isMobile,
+    backgroundImage: backgroundImage || null,
+    backgroundColor
   });
-}
-
-function PageRenderer({
-  pageData: {
-    metadata: {
-      theme: {
-        color = defaultTheme.color,
-        font = defaultTheme.font
-      } = defaultTheme,
-      layout = defaultLayout
-    } = defaultMetadata,
+  const cardData = sectionData?.components[0];
+  const [sectionComponent] = sectionData.components || [];
+  const counterSection = sectionComponent?.counterSection;
+  counterSection?.components || [];
+  if (!cardData) return null;
+  return /*#__PURE__*/React__default["default"].createElement("section", {
+    className: classes.section
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.grid
+  }, cardData?.contentList?.components?.map((item, index) => /*#__PURE__*/React__default["default"].createElement("div", {
+    key: item._id || index,
+    className: classes.counterItem
+  }, item.contentHeading?.metadata?.value != null && item.contentHeading?.metadata?.value !== '' && /*#__PURE__*/React__default["default"].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__default["default"].createElement("p", {
+    ref: item.contentPara?.refSetter,
+    className: classes.description,
+    dangerouslySetInnerHTML: {
+      __html: item.contentPara.metadata.value
+    }
+  }))))));
+}
+
+var index$5 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': CounterSection
+});
+
+const BREAKPOINTS = {
+  mobile: 0,
+  tablet: 768,
+  desktop: 1024
+};
+
+/**
+ * Get current breakpoint from window width
+ */
+const getBreakpoint = width => {
+  if (width >= BREAKPOINTS.desktop) return 'desktop';
+  if (width >= BREAKPOINTS.tablet) return 'tablet';
+  return 'mobile';
+};
+const stickyBarBase = {
+  position: 'fixed',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 9998,
+  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'
+  }
+};
+const getStickyBarStyle = breakpoint => stickyBarResponsive[breakpoint] || stickyBarResponsive.mobile;
+const stickyTextBase = {
+  color: '#343A40',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  margin: 0
+};
+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;
+
+// --- Floating (WhatsApp) type ---
+
+const floatingButtonBase = {
+  position: 'fixed',
+  bottom: 24,
+  right: 24,
+  width: 'fit-content',
+  marginLeft: 'auto',
+  zIndex: 9999,
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '10px',
+  padding: '12px 20px',
+  backgroundColor: '#FFFFFF',
+  border: '1px solid #E5E7EB',
+  borderRadius: '9999px',
+  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+  cursor: 'pointer',
+  textDecoration: 'none',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontWeight: 700,
+  fontSize: '14px',
+  textTransform: 'uppercase',
+  letterSpacing: '0.02em',
+  color: '#000000',
+  transition: 'box-shadow 0.2s ease, transform 0.2s ease'
+};
+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 whatsAppIconSvgSize = {
+  mobile: 24,
+  tablet: 26,
+  desktop: 28
+};
+const getWhatsAppIconSize = breakpoint => whatsAppIconSvgSize[breakpoint] ?? whatsAppIconSvgSize.mobile;
+
+const DEFAULT_WHATSAPP_ICON_COLOR = '#25D366';
+
+/** Build WhatsApp wa.me URL from phone number (digits only, optional + prefix). */
+function buildWhatsAppUrl(phoneNumber) {
+  if (!phoneNumber || typeof phoneNumber !== 'string') return null;
+  const digits = phoneNumber.replace(/\D/g, '');
+  return digits.length > 0 ? `https://wa.me/${digits}` : null;
+}
+
+/**
+ * WhatsApp icon SVG – bubble color is dynamic via props (default #25D366)
+ */
+const WhatsAppIcon = ({
+  size = 28,
+  color = DEFAULT_WHATSAPP_ICON_COLOR
+}) => /*#__PURE__*/React__default["default"].createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": true
+}, /*#__PURE__*/React__default["default"].createElement("path", {
+  d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z",
+  fill: color
+}));
+
+/** Icon: image when iconImageUrl is provided, otherwise WhatsApp SVG */
+const CtaIcon = ({
+  size = 28,
+  color,
+  iconImageUrl
+}) => {
+  if (iconImageUrl && typeof iconImageUrl === 'string') {
+    return /*#__PURE__*/React__default["default"].createElement("img", {
+      src: iconImageUrl,
+      alt: "",
+      width: size,
+      height: size,
+      style: {
+        display: 'block',
+        objectFit: 'contain'
+      },
+      "aria-hidden": true
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement(WhatsAppIcon, {
+    size: size,
+    color: color ?? DEFAULT_WHATSAPP_ICON_COLOR
+  });
+};
+
+/**
+ * Sticky CTA component.
+ * Renders relative to viewport (app root), not parent section.
+ * Accepts either sectionData (from pageRenderer/sectionRenderer) or flat props.
+ *
+ * @param {object} [sectionData] - Section payload when rendered via SectionRenderer: { type, label, components: [{ type, stickyMessage, ... }] }
+ * @param {string} type - "sticky" | "floating"
+ * @param {string} [stickyMessage] - Message text for sticky bar
+ * @param {string} [stickyButtonText] - CTA button label (default "ENQUIRE NOW")
+ * @param {string} [whatsAppPhoneNumber] - Mobile number for WhatsApp
+ * @param {string} [whatsAppHref] - Optional fallback full URL when whatsAppPhoneNumber is not provided
+ * @param {string} [whatsAppLabel] - Label next to icon (default "SUPPORT")
+ * @param {string} [whatsAppIconColor] - WhatsApp icon color (used when iconImageUrl is not set)
+ * @param {string} [whatsAppButtonBackgroundColor] - Floating button background color
+ * @param {string} [iconImageUrl] - Optional image URL for the icon; when set, shows <img> instead of WhatsApp SVG
+ * @param {object} [extraProps] - From SectionRenderer; extraProps.isEdit true shows in-flow edit hint
+ * @param {boolean} [showEditHint] - When true, shows "Click on edit button to edit this section" in normal flow
+ */
+function StickyCta({
+  sectionData,
+  type = 'sticky',
+  stickyMessage = 'Live Masterclass will be on 26 January (Monday) from 05:00 PM',
+  stickyButtonText = 'ENQUIRE NOW',
+  whatsAppPhoneNumber,
+  whatsAppHref,
+  whatsAppLabel = 'SUPPORT',
+  whatsAppIconColor,
+  whatsAppButtonBackgroundColor,
+  iconImageUrl
+}) {
+  console.log('nishu03333', sectionData);
+  const node = sectionData?.components?.[0];
+  const contentList = node?.contentList?.components || [];
+  const showEditHint = sectionData?.isDefaultEditor ?? false;
+  const propsFromSection = node ? {
+    type: node?.title?.metadata?.value ?? type,
+    stickyMessage: contentList[1]?.contentPara?.metadata?.value ?? stickyMessage,
+    stickyButtonText: contentList[1]?.contentHeading?.metadata?.value ?? stickyButtonText,
+    whatsAppPhoneNumber: node.subheading?.metadata?.value ?? whatsAppPhoneNumber,
+    whatsAppHref: node.whatsAppHref ?? whatsAppHref,
+    whatsAppLabel: contentList[0]?.contentHeading?.metadata?.value ?? whatsAppLabel,
+    whatsAppIconColor: node.whatsAppIconColor ?? whatsAppIconColor,
+    whatsAppButtonBackgroundColor: node.whatsAppButtonBackgroundColor ?? whatsAppButtonBackgroundColor,
+    iconImageUrl: contentList[0]?.contentPara?.metadata?.value ?? iconImageUrl
+  } : null;
+  const p = propsFromSection ?? {
+    type,
+    stickyMessage,
+    stickyButtonText,
+    whatsAppPhoneNumber,
+    whatsAppHref,
+    whatsAppLabel,
+    whatsAppIconColor,
+    whatsAppButtonBackgroundColor,
+    iconImageUrl
+  };
+  const whatsAppUrl = p?.whatsAppPhoneNumber ? p?.whatsAppPhoneNumber : buildWhatsAppUrl(p?.whatsAppPhoneNumber);
+  const [breakpoint, setBreakpoint] = React.useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : 'mobile');
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onResize = () => setBreakpoint(getBreakpoint(window.innerWidth));
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  const editHintBlock = showEditHint ? /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-section": "sticky-cta-edit-hint",
+    style: {
+      position: 'relative',
+      width: '100%',
+      padding: '12px 16px',
+      textAlign: 'center',
+      backgroundColor: '#f5f5f5',
+      border: '1px dashed #ccc',
+      borderRadius: 8,
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("h2", {
+    style: {
+      margin: 0,
+      fontSize: 16,
+      fontWeight: 600,
+      color: '#555'
+    }
+  }, "Click on edit button to edit this section")) : null;
+  if (p.type === 'floating') {
+    const buttonStyle = {
+      ...getFloatingButtonStyle(breakpoint),
+      ...(p.whatsAppButtonBackgroundColor != null && {
+        backgroundColor: p.whatsAppButtonBackgroundColor
+      })
+    };
+    const iconSize = getWhatsAppIconSize(breakpoint);
+    const iconColor = p.whatsAppIconColor ?? DEFAULT_WHATSAPP_ICON_COLOR;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, editHintBlock, /*#__PURE__*/React__default["default"].createElement("a", {
+      href: whatsAppUrl,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "access-cta": "DIY",
+      style: buttonStyle,
+      onMouseEnter: e => {
+        e.currentTarget.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.12)';
+        e.currentTarget.style.transform = 'scale(1.02)';
+      },
+      onMouseLeave: e => {
+        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
+        e.currentTarget.style.transform = 'scale(1)';
+      },
+      "aria-label": `${p.whatsAppLabel} via WhatsApp`
+    }, /*#__PURE__*/React__default["default"].createElement(CtaIcon, {
+      size: iconSize,
+      color: iconColor,
+      iconImageUrl: p.iconImageUrl
+    }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null, editHintBlock, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: barStyle,
+    role: "banner"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    style: textStyle
+  }, p.stickyMessage), /*#__PURE__*/React__default["default"].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)));
+}
+
+var index$4 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': StickyCta,
+    WhatsAppIcon: WhatsAppIcon
+});
+
+/**
+ * Styles for CustomHtmlRender section.
+ * Wrapper for user-provided HTML content.
+ */
+
+const sectionStyle = {
+  width: '100%',
+  maxWidth: '100%',
+  height: 'auto',
+  minHeight: 'auto',
+  margin: 0,
+  padding: 0,
+  overflow: 'visible'
+};
+
+const SHADOW_WRAPPER_CLASS = 'custom-html-body-wrap';
+const SHADOW_INNER_CLASS = 'custom-html-render__shadow-inner';
+
+/**
+ * Parses full HTML string and extracts styles + body/content for Shadow DOM.
+ * - Strips <!DOCTYPE>, <html>, <head>, <body> and uses inner content + all <style>.
+ * - Scopes "body" and "html" selectors to a wrapper class so styles don't leak to the main app.
+ */
+function parseHtmlForShadow(html) {
+  if (typeof html !== 'string' || !html.trim()) return {
+    styles: '',
+    content: ''
+  };
+  const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  const bodyRegex = /<body[^>]*>([\s\S]*?)<\/body>/i;
+  let styles = '';
+  let match;
+  while ((match = styleRegex.exec(html)) !== null) {
+    styles += match[1];
+  }
+  const bodyMatch = html.match(bodyRegex);
+  const rawContent = bodyMatch ? bodyMatch[1].trim() : html;
+
+  // Scope "body" and "html" in CSS to the wrapper so they don't affect the main page.
+  // Only replace as standalone selectors (word boundary) to avoid breaking values like content: "body"
+  let scopedStyles = styles.replace(/\bbody\b(?=\s*[{,])/g, `.${SHADOW_WRAPPER_CLASS}`).replace(/\bhtml\b(?=\s*[{,])/g, `.${SHADOW_WRAPPER_CLASS}`);
+  const content = bodyMatch ? `<div class="${SHADOW_WRAPPER_CLASS}">${rawContent}</div>` : rawContent;
+  return {
+    styles: scopedStyles,
+    content
+  };
+}
+
+/**
+ * Base styles inside shadow so the body wrapper has layout and can show background/padding.
+ */
+const SHADOW_BASE_STYLES = `
+  .${SHADOW_INNER_CLASS}, .${SHADOW_WRAPPER_CLASS} {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .${SHADOW_INNER_CLASS} {
+    min-height: 0;
+  }
+`;
+
+/**
+ * Resolves HTML string from section data.
+ * Supports: sectionData.components[0].CustomHtml.metadata.value (API shape)
+ * and sectionData.components[0].html or props.html (legacy/flat).
+ */
+function getHtmlFromSectionData(sectionData, fallbackHtml = '') {
+  const node = sectionData?.components?.[0];
+  if (!node) return fallbackHtml;
+  const fromCustomHtml = node.CustomHtml?.metadata?.value;
+  if (typeof fromCustomHtml === 'string') return fromCustomHtml;
+  if (typeof node.html === 'string') return node.html;
+  return fallbackHtml;
+}
+
+/**
+ * CustomHtmlRender – renders any full HTML document or fragment in an encapsulated Shadow DOM.
+ * Receives html via sectionData.components[0].CustomHtml.metadata.value (or .html) or props.html.
+ * Body/html background, padding, and all other CSS apply only inside this section.
+ */
+function CustomHtmlRender({
+  sectionData,
+  html = '',
+  className,
+  style = {}
+}) {
+  const containerRef = React.useRef(null);
+  const node = sectionData?.components?.[0];
+  const resolvedHtml = getHtmlFromSectionData(sectionData, html);
+  const p = node ? {
+    html: resolvedHtml,
+    className: node.className ?? className,
+    style: node.style ?? style
+  } : {
+    html: resolvedHtml,
+    className,
+    style
+  };
+  const safeHtml = typeof p.html === 'string' ? p.html : '';
+  const setSectionRef = el => {
+    containerRef.current = el;
+    const refSetter = node?.CustomHtml?.refSetter;
+    if (refSetter) {
+      if (typeof refSetter === 'function') refSetter(el);else if (refSetter && typeof refSetter === 'object') refSetter.current = el;
+    }
+  };
+  React.useEffect(() => {
+    if (!safeHtml.trim() || !containerRef.current) return;
+    const {
+      styles,
+      content
+    } = parseHtmlForShadow(safeHtml);
+    const host = containerRef.current;
+    if (!host.shadowRoot) {
+      host.attachShadow({
+        mode: 'open'
+      });
+    }
+    const shadowRoot = host.shadowRoot;
+    shadowRoot.innerHTML = '';
+    const inner = document.createElement('div');
+    inner.className = SHADOW_INNER_CLASS;
+    if (SHADOW_BASE_STYLES) {
+      const baseStyle = document.createElement('style');
+      baseStyle.textContent = SHADOW_BASE_STYLES;
+      shadowRoot.appendChild(baseStyle);
+    }
+    if (styles) {
+      const styleEl = document.createElement('style');
+      styleEl.textContent = styles;
+      shadowRoot.appendChild(styleEl);
+    }
+    const contentWrap = document.createElement('div');
+    contentWrap.innerHTML = content;
+    while (contentWrap.firstChild) {
+      inner.appendChild(contentWrap.firstChild);
+    }
+    shadowRoot.appendChild(inner);
+    return () => {
+      shadowRoot.innerHTML = '';
+    };
+  }, [safeHtml]);
+  if (!safeHtml.trim()) {
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("section", {
+    ref: setSectionRef,
+    className: p.className,
+    style: {
+      ...sectionStyle,
+      ...p.style
+    },
+    "data-section": "custom-html-render"
+  });
+}
+
+var index$3 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': CustomHtmlRender
+});
+
+const useTimerCallPageStyles = createUseStyles(theme => ({
+  timerAndCallSection: {
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? '24px' : '80px 120px',
+    background: theme?.colors?.white,
+    '&, & *, & *:before, & *:after': {
+      fontFamily: theme?.typography?.fontFamily,
+      boxSizing: 'border-box'
+    }
+  },
+  timerAndCallContainer: {
+    padding: '72px',
+    background: '#F4F9FF',
+    borderRadius: '8px',
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
+  },
+  timerAndCallBox: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '42px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  title: {
+    fontWeight: '700',
+    fontSize: '40px',
+    textAlign: 'center',
+    lineHeight: '45px'
+  },
+  offerWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  offerEndsTitle: {
+    fontWeight: '700',
+    fontSize: '16px'
+  },
+  countdown: {
+    display: 'flex',
+    gap: '10px'
+  },
+  counterBox: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    border: '0.56px solid #2C88FF',
+    borderRadius: '8px',
+    background: '#FFFFFF',
+    color: '#2C88FF',
+    padding: '12px 16px 12px 16px',
+    fontWeight: '600',
+    fontSize: '14px'
+  },
+  // SMALL SCREEN
+  '@media screen and (max-width: 767px)': {
+    timerAndCallSection: {
+      padding: '24px'
+    },
+    timerAndCallContainer: {
+      padding: '16px'
+    },
+    timerAndCallBox: {
+      gap: '32px'
+    },
+    title: {
+      fontSize: '24px'
+    },
+    offerWrapper: {
+      gap: '16px'
+    }
+  }
+}));
+
+const TimerAndCall = ({
+  sectionData,
+  extraProps = {}
+}) => {
+  const {
+    isMobile,
+    fullPageData
+  } = React.useContext(PageContext);
+  const [nodeData] = sectionData?.components;
+  const classes = useTimerCallPageStyles({
+    isMobile
+  });
+  const CounterBox = ({
+    value,
+    text
+  }) => {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classes.counterBox
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, value), /*#__PURE__*/React__default["default"].createElement("div", null, text));
+  };
+  const renderer = ({
+    formatted,
+    completed
+  }) => {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classes.countdown
+    }, /*#__PURE__*/React__default["default"].createElement(CounterBox, {
+      value: formatted?.hours,
+      text: "Hours"
+    }), /*#__PURE__*/React__default["default"].createElement(CounterBox, {
+      value: formatted?.minutes,
+      text: "Mins"
+    }), /*#__PURE__*/React__default["default"].createElement(CounterBox, {
+      value: formatted?.seconds,
+      text: "Secs"
+    }));
+  };
+  const CountDownJSX = offerPriceValidFor => {
+    let conversions = extraProps?.conversions || 0;
+    if (offerPriceValidFor && offerPriceValidFor - conversions <= 0) {
+      return null;
+    }
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classes.offerWrapper
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classes.offerEndsTitle
+    }, "Offer ends in"), /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
+      renderer: renderer,
+      date: nodeData.offerCounter?.metadata?.endDate,
+      daysInHours: true
+    }));
+  };
+  return /*#__PURE__*/React__default["default"].createElement("section", {
+    className: classes.timerAndCallSection
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.timerAndCallContainer
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.timerAndCallBox
+  }, nodeData?.showOffer?.metadata?.value && nodeData.offerCounter?.metadata?.isOfferActive ? CountDownJSX(nodeData.offerCounter?.metadata?.offerPriceValidFor) : null, nodeData?.title?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.title
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: nodeData?.heading?.refSetter,
+    dangerouslySetInnerHTML: {
+      __html: nodeData?.title?.metadata?.value
+    }
+  })) : null, nodeData?.timerButton?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement(Button, {
+    style: {
+      width: '100%',
+      fontWeight: '700',
+      fontSize: '14px'
+    },
+    data: {
+      // link: 'headerData?.loginCtaLink',
+      // isLink: 1,
+      value: nodeData.timerButton.metadata.value
+      // isExternal: 1
+    },
+    onClick: extraProps?.courseBuyNow,
+    type: 'primary',
+    size: 'medium',
+    target: null,
+    name: "button",
+    rel: null
+    // styling={isMobile ? { margin: '0 40px' } : {}}
+  }) : null)));
+};
+
+var index$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': TimerAndCall
+});
+
+const TYPE_TO_COMPONENT_MAP = {
+  BANNER_CAROUSEL_RIGHT: BannerCarouselRight,
+  GRID_CARD: List,
+  BANNER_CAROUSEL_CENTER: BannerCarouselCenter,
+  BANNER_CAROUSEL_CENTER_V2: BannerCarouselCenterv2,
+  BANNER_CAROUSEL_LEFT: BannerCarouselLeft,
+  FORM_SUBSCRIBE: SubscribeToNewsletter,
+  TEXT_TESTIMONIAL: Testimonials,
+  VIDEO_TESTIMONIAL: VideoTestimonial,
+  VIDEO: Video,
+  INFO: Info,
+  TEXT: TextSection,
+  IMAGE_GALLERY: PhotoGallery,
+  FAQ_LISTING: FAQListing,
+  TEXT_GRID: TextGrid,
+  COURSE_CAROUSEL: courses,
+  TEAM_CARD: TeamCard,
+  CONTACT: FormEnquiry,
+  FORM_ENQUIRY: Contact,
+  WEBINAR_LANDING_PAGE: CoursePromotionPage$1,
+  COURSE_LANDING_PAGE: CoursePromotionPage,
+  FORM_LANDING_PAGE: FormPage,
+  TILES_SECTION: Tiles,
+  EMAIL_DRIP_MARKET: EmailDripMarket,
+  ABOUT_INSTITUTE,
+  COUNTER_SECTION: CounterSection,
+  STICKY_CTA: StickyCta,
+  CUSTOM_HTML_SECTION: CustomHtmlRender,
+  TIMER_AND_CALL: TimerAndCall
+};
+const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
+const MemoisedSection = /*#__PURE__*/React.memo(({
+  sectionData,
+  extraProps,
+  isCustomWebsite,
+  sectionIndex
+}) => {
+  console.log('extraProps in section data', extraProps);
+  const SectionComp = getCompToRender(sectionData.type);
+  return /*#__PURE__*/React__default["default"].createElement(SectionComp, {
+    sectionData: sectionData,
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
+  });
+});
+const SectionWithBackground = withSectionBackground(MemoisedSection);
+function SectionRenderer({
+  sectionData,
+  extraProps,
+  isCustomWebsite,
+  sectionIndex
+}) {
+  let sectionBg = {};
+  if (sectionData?.isV2Section) {
+    sectionBg = sectionData?.bgSection?.components?.[0]?.sectionBgData || {};
+  }
+  return /*#__PURE__*/React__default["default"].createElement(SectionWithBackground, {
+    sectionData: sectionData,
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex,
+    isSkipV2Section: sectionData?.isV2Section,
+    componentBg: sectionBg || {}
+  });
+}
+
+function PageRenderer({
+  pageData: {
+    metadata: {
+      theme: {
+        color = defaultTheme.color,
+        font = defaultTheme.font,
+        roundness = defaultTheme.roundness
+      } = defaultTheme,
+      layout = defaultLayout
+    } = defaultMetadata,
     sections,
     header,
     footer,
@@ -11900,7 +12772,7 @@ function PageRenderer({
     countryCode,
     currencySymbol
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
-  const theme = React.useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = React.useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
     theme: theme
@@ -12162,30 +13034,12 @@ function VideoWorkshopPromotion({
     },
     isMobile
   } = React.useContext(PageContext);
-  console.log('nnnn', sectionData);
   const classes = useVideoWorkshopPromotionStyles({
     containerWidth,
     isMobile
   });
-  const [sectionComponent] = sectionData?.components?.slice(1) || [];
-  const videoWorkshopPromotion = sectionComponent?.videoWorkshopPromotion;
-  const [contentNode] = videoWorkshopPromotion?.components || [];
-  if (!contentNode) return null;
-  const {
-    testimonialCategory,
-    mainHeading,
-    subHeading,
-    cta,
-    videoThumbnail,
-    videoEmbed,
-    videoTitleOverlay,
-    videoCaption,
-    watchOnYouTube
-  } = contentNode;
-  const videoUrl = videoEmbed?.metadata?.value;
-  const thumbnailUrl = videoEmbed?.metadata?.thumbnail || videoThumbnail?.metadata?.value;
-  const showCta = cta?.metadata?.value && (cta?.validations?.isEmptyAllowed ? true : cta?.metadata?.value !== '');
-  const showWatchOnYouTube = watchOnYouTube?.metadata?.value && (watchOnYouTube?.validations?.isEmptyAllowed ? true : watchOnYouTube?.metadata?.value !== '');
+  const wokShopData = sectionData?.components[0];
+  const videoData = wokShopData?.videoCarousel?.components?.[0];
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -12194,72 +13048,42 @@ function VideoWorkshopPromotion({
     className: classes.sectionInner
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.textBlock
-  }, testimonialCategory?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("h5", {
-    ref: testimonialCategory?.refSetter,
+  }, wokShopData?.videoHeading?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("h5", {
+    ref: wokShopData?.videoHeading?.refSetter,
     className: classes.category,
     dangerouslySetInnerHTML: {
-      __html: testimonialCategory.metadata.value
+      __html: wokShopData?.videoHeading?.metadata?.value
     }
-  }), mainHeading?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("h1", {
-    ref: mainHeading?.refSetter,
+  }), wokShopData?.title?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("h1", {
+    ref: wokShopData?.title?.refSetter,
     className: classes.mainHeading,
     dangerouslySetInnerHTML: {
-      __html: mainHeading.metadata.value
-    }
-  }), subHeading?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("p", {
-    ref: subHeading?.refSetter,
-    className: classes.subHeading,
-    dangerouslySetInnerHTML: {
-      __html: subHeading.metadata.value
+      __html: wokShopData?.title?.metadata?.value
     }
-  }), showCta && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), videoData?.videoTextContent?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.ctaWrap
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
-    ref: cta?.refSetter,
-    data: cta.metadata,
-    type: cta.metadata?.type || 'primary',
+    ref: videoData?.videoTextContent?.metadata?.refSetter,
+    data: videoData?.videoTextContent?.metadata,
+    type: 'primary',
     size: isMobile ? 'small' : 'medium'
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoBlock
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoWrapper
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: videoEmbed?.refSetter,
+    ref: videoData?.videoFrame?.refSetter,
     className: classes.videoAspectWrap
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
-    imageUrl: thumbnailUrl,
-    videoUrl: videoUrl,
+    imageUrl: videoData?.videoFrame?.metadata?.thumbnail,
+    videoUrl: videoData?.videoFrame?.metadata?.value,
     sectionIndex: sectionIndex
-  })), videoTitleOverlay?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.videoTitleOverlay
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: videoTitleOverlay?.refSetter,
-    dangerouslySetInnerHTML: {
-      __html: videoTitleOverlay.metadata.value
-    }
-  })), videoCaption?.metadata?.value && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.videoCaption
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    ref: videoCaption?.refSetter,
-    dangerouslySetInnerHTML: {
-      __html: videoCaption.metadata.value
-    }
-  })), showWatchOnYouTube && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.watchOnYouTubeWrap
-  }, /*#__PURE__*/React__default["default"].createElement(Button, {
-    ref: watchOnYouTube?.refSetter,
-    data: {
-      ...watchOnYouTube.metadata,
-      isExternal: true
-    },
-    type: watchOnYouTube.metadata?.type || 'secondary',
-    size: "small"
   })))))));
 }
 
-var index$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': VideoWorkshopPromotion
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    'default': VideoWorkshopPromotion
 });
 
 const useCoursePromotionPage = createUseStyles(theme => {
@@ -12890,157 +13714,9 @@ function CoursePromotionPagev2({
   }))));
 }
 
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CoursePromotionPagev2
-});
-
-const useCounterSectionStyles = createUseStyles(theme => {
-  return {
-    section: {
-      width: '100%',
-      borderRadius: theme.shape?.borderRadius?.regular || '12px',
-      overflow: 'hidden',
-      backgroundImage: ({
-        backgroundImage
-      } = {}) => backgroundImage ? `url("${backgroundImage}")` : 'none',
-      backgroundColor: ({
-        backgroundColor
-      } = {}) => backgroundColor || '#f8f8fa',
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      backgroundRepeat: 'no-repeat',
-      '&, & *, & *:before, & *:after': {
-        fontFamily: theme?.typography?.fontFamily,
-        boxSizing: 'border-box'
-      }
-    },
-    container: {
-      width: '100%',
-      maxWidth: ({
-        containerWidth
-      } = {}) => containerWidth || '1440px',
-      margin: '0 auto',
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.tiny}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`
-    },
-    grid: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(4, 1fr)',
-      gap: ({
-        isMobile
-      } = {}) => isMobile ? '24px' : '32px',
-      alignItems: 'stretch'
-    },
-    counterItem: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      textAlign: 'center'
-    },
-    value: {
-      margin: 0,
-      marginBottom: '8px',
-      fontSize: theme.typography.fontSize.h2,
-      fontWeight: theme.typography?.fontWeight?.bold,
-      lineHeight: 1.1,
-      color: theme.palette?.primary?.main || '#1976d2',
-      wordBreak: 'break-word'
-    },
-    description: {
-      margin: 0,
-      fontSize: theme.typography.fontSize.body,
-      lineHeight: 1.4,
-      color: theme.palette?.font?.primary || '#4a4a4a',
-      wordBreak: 'break-word'
-    },
-    '@media (max-width: 1024px)': {
-      grid: {
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gap: '28px'
-      }
-    },
-    '@media (max-width: 767px)': {
-      section: {
-        borderRadius: theme.shape?.borderRadius?.small || '8px'
-      },
-      container: {
-        padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.tiny}px`
-      },
-      grid: {
-        gridTemplateColumns: '1fr',
-        gap: '24px'
-      },
-      value: {
-        fontSize: theme.typography.fontSize.h3,
-        marginBottom: '4px',
-        lineHeight: 1.1
-      },
-      description: {
-        fontSize: theme.typography.fontSize.body,
-        lineHeight: 1.4
-      }
-    }
-  };
-});
-
-function CounterSection({
-  sectionData,
-  sectionIndex
-}) {
-  const {
-    layout: {
-      containerWidth
-    },
-    isMobile
-  } = React.useContext(PageContext);
-  console.log('llll', sectionData);
-  sectionData.components = sectionData?.isV2Section ? sectionData.components.slice(1) : sectionData.components;
-
-  // console.log("llll",sectionData);
-
-  const metadata = sectionData.metadata || {};
-  const backgroundImage = metadata.backgroundImage || '';
-  const backgroundColor = metadata.backgroundColor || '#f8f8fa';
-  const classes = useCounterSectionStyles({
-    containerWidth,
-    isMobile,
-    backgroundImage: backgroundImage || null,
-    backgroundColor
-  });
-  const [sectionComponent] = sectionData.components || [];
-  const counterSection = sectionComponent?.counterSection;
-  const counters = counterSection?.components || [];
-  if (!counters.length) return null;
-  return /*#__PURE__*/React__default["default"].createElement("section", {
-    className: classes.section
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.container
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.grid
-  }, counters.map((item, index) => /*#__PURE__*/React__default["default"].createElement("div", {
-    key: item._id || index,
-    className: classes.counterItem
-  }, item.value?.metadata?.value != null && item.value?.metadata?.value !== '' && /*#__PURE__*/React__default["default"].createElement("h2", {
-    ref: item.value?.refSetter,
-    className: classes.value,
-    dangerouslySetInnerHTML: {
-      __html: item.value.metadata.value
-    }
-  }), item.description?.metadata?.value != null && item.description?.metadata?.value !== '' && /*#__PURE__*/React__default["default"].createElement("p", {
-    ref: item.description?.refSetter,
-    className: classes.description,
-    dangerouslySetInnerHTML: {
-      __html: item.description.metadata.value
-    }
-  }))))));
-}
-
 var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': CounterSection
+    __proto__: null,
+    'default': CoursePromotionPagev2
 });
 
 exports.Icon = Icon;