diy-template-components 0.2.42 → 0.2.44

package/build/index.es.js

@@ -142,14 +142,19 @@ const useSectionStyles$a = createUseStyles(theme => ({
     position: 'relative',
     maxHeight: '55px',
     alignItems: 'center',
-    width: '24%'
+    width: '30%'
   },
   imageDivImageMobile: {},
+  imageDivImageNext: {
+    objectFit: ({
+      isCustomWebsite
+    } = {}) => isCustomWebsite ? 'contain' : ''
+  },
   imageAnchorMobile: {
     pointerEvents: 'auto',
     cursor: 'default',
     width: '100%',
-    maxWidth: '60px',
+    maxWidth: '85px',
     cursor: 'default',
     height: '46px',
     position: 'relative'
@@ -165,7 +170,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
   mobileContent: {
     display: 'flex',
     alignItems: 'center',
-    width: "100%",
+    width: '100%',
     '& img': {
       marginRight: '8px',
       maxWidth: '80px',
@@ -209,7 +214,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: "10%"
+    width: '10%'
   },
   '@media screen and (max-width: 767px)': {
     optionsContainer: {
@@ -221,6 +226,9 @@ const useSectionStyles$a = createUseStyles(theme => ({
     mobileHeader: {
       height: '80px'
     },
+    sideDrawerImg: {
+      width: '15%'
+    },
     menuItem: {
       padding: '0'
     },
@@ -1100,34 +1108,73 @@ function OptionList({
   }) : null));
 }
 
+const nextImageRendererStyles = createUseStyles(() => ({
+  '@media (max-width: 640px)': {
+    imageContainer: {
+      maxWidth: '100%'
+    }
+  },
+  '@media (min-width: 641px) and (max-width: 1280px)': {
+    imageContainer: {
+      maxWidth: '75%'
+    }
+  },
+  '@media (min-width: 1281px)': {
+    imageContainer: {
+      maxWidth: '50%'
+    }
+  }
+}));
+
 const NextImageRenderer = ({
   src,
+  sectionIndex,
   ...props
 }) => {
   const {
-    isCustomWebsite
+    isCustomWebsite,
+    pageData,
+    isMobile
   } = useContext(PageContext);
-  const imageLoader = ({
-    src,
-    quality,
-    width
-  }) => {
-    return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${width}`;
-  };
-  let {
-    refSetter,
-    className
-  } = props;
-  if (isCustomWebsite) {
-    const NextImage = require('next/image').default;
-    return /*#__PURE__*/React.createElement(NextImage, _extends({
-      loader: imageLoader,
-      src: src,
-      layout: 'fill',
-      ref: refSetter,
-      className: className
-    }, props));
-  } else {
+  try {
+    let {
+      refSetter,
+      className
+    } = props;
+    if (isCustomWebsite && typeof Image !== 'undefined') {
+      const classes = nextImageRendererStyles();
+      const imageLoader = ({
+        src,
+        quality,
+        width
+      }) => {
+        const breakpoints = {
+          mobile: 640,
+          desktop: 1200
+        };
+        const dynamicWidth = isMobile ? breakpoints.mobile : breakpoints?.desktop;
+        return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${dynamicWidth}`;
+      };
+      const NextImage = require('next/image').default;
+      return /*#__PURE__*/React.createElement(NextImage, _extends({
+        priority: sectionIndex == '0' ? true : false,
+        loader: imageLoader,
+        src: src,
+        layout: 'fill',
+        ref: refSetter,
+        className: `${classes?.imageContainer} ${className}`
+      }, props, {
+        alt: "image"
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement("img", {
+        ref: refSetter,
+        className: className,
+        src: src
+      });
+    }
+  } catch (err) {
+    console.log('next image failed', err);
     return /*#__PURE__*/React.createElement("img", {
       ref: refSetter,
       className: className,
@@ -1145,12 +1192,16 @@ function DesktopHeader({
   const {
     isFixed = true
   } = header;
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
   const logoUrl = useLinkBuilder({
     isLink: true,
     link: '/'
   });
   const classes = useSectionStyles$a({
-    isFixed
+    isFixed,
+    isCustomWebsite
   });
   const optionDataFn = () => {
     let optionsArr = navData;
@@ -1189,7 +1240,8 @@ function DesktopHeader({
     className: classes?.imageDivImage
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: header?.websiteLogo,
-    className: classes.imageDivImageNext
+    className: classes.imageDivImageNext,
+    order: 1
   }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React.createElement("a", {
     href: logoUrl
   }, /*#__PURE__*/React.createElement("p", {
@@ -1215,6 +1267,9 @@ function MobileHeader({
   isTutorWebsite,
   isLandingPage = false
 }) {
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
   const {
     isFixed = true
   } = header;
@@ -1224,7 +1279,8 @@ function MobileHeader({
   });
   const theme = useTheme();
   const classes = useSectionStyles$a({
-    isFixed
+    isFixed,
+    isCustomWebsite
   });
   const [sideMenu, openSideMenu] = useState(false);
   const navEl = useRef(null);
@@ -1359,7 +1415,8 @@ function MobileHeader({
     className: classes?.imageDivImageMobile
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: header?.websiteLogo,
-    className: classes.imageDivImageNext
+    className: classes.imageDivImageNext,
+    order: 1
   }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React.createElement("p", {
     className: classes.mobileAppNameClass
   }, " ", header?.appName) : null), downloadLink), sideMenu ? /*#__PURE__*/React.createElement("div", {
@@ -1419,6 +1476,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       boxSizing: 'border-box'
     }
   },
+  sectionNoBranding: {
+    paddingBottom: '0px'
+  },
   upperContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -1427,6 +1487,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     borderBottom: '1px solid #E1EAF6',
     alignItems: 'flex-start'
   },
+  upperContainerNoBranding: {
+    borderBottom: '0px'
+  },
   upperContainerItem1: {
     width: '33%',
     display: 'flex',
@@ -1502,9 +1565,10 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     color: theme.palette.font.primary
   },
   poweredDiv: {
-    display: 'flex',
-    textDecoration: 'none',
-    alignItems: 'center',
+    width: '15%',
+    height: 'auto',
+    position: 'relative',
+    paddingBottom: ' 6%',
     '& p': {
       margin: '0',
       paddingRight: '8px',
@@ -1517,6 +1581,21 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       width: '100px'
     }
   },
+  poweredByContainer: {
+    display: 'flex',
+    width: '60%',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: '5%'
+  },
+  poweredDivImg: {
+    width: '100px !important'
+  },
+  footerLogoImage: {
+    objectFit: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? 'contain' : ''
+  },
   '@media screen and (max-width: 767px)': {
     section: {
       padding: '45px 30px',
@@ -1562,13 +1641,22 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       padding: '0'
     },
     poweredDiv: {
-      marginTop: '15px'
+      // marginTop: '15px'
+      width: '28%',
+      paddingBottom: '9%'
     },
     socialMediaCta: {
       margin: '0 8px 16px 8px'
     },
     bottomLeftText: {
       padding: '48px 0 10px 0'
+    },
+    poweredByContainer: {
+      gap: '2%',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }
 }));
@@ -1577,19 +1665,24 @@ function Footer({
   data
 }) {
   const theme = useTheme();
-  const classes = useSectionStyles$9();
-  console.log(data, 'this is data');
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
+  const classes = useSectionStyles$9({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React.createElement("footer", {
-    className: classes.section
+    className: data.metadata.isCpBranding ? `${classes.section}` : `${classes.section} ${classes.sectionNoBranding}`
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.upperContainer
+    className: data.metadata.isCpBranding ? `${classes.upperContainer}` : `${classes.upperContainer} ${classes.upperContainerNoBranding}`
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.upperContainerItem1
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.upperContainerItem1Img
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: data?.logo?.metadata?.url,
-    ref: data?.logo?.refSetter
+    ref: data?.logo?.refSetter,
+    className: classes.footerLogoImage
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.upperContainerItem2
   }, data?.address?.metadata.value && data?.address?.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("p", {
@@ -1641,7 +1734,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.facebookLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Facebook Solid',
     color: theme.palette.background.default,
@@ -1652,7 +1746,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.twitterLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Twitter Solid',
     color: theme.palette.background.default,
@@ -1663,7 +1758,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.instagramLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Instagram',
     color: theme.palette.background.default,
@@ -1674,7 +1770,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.telegramLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Telegram',
     color: theme.palette.background.default,
@@ -1685,7 +1782,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.youtubeLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'YouTube',
     color: theme.palette.background.default,
@@ -1695,15 +1793,18 @@ function Footer({
     className: classes.lowerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bottomLeftText
-  }, "2022 All Rights Reserved"), /*#__PURE__*/React.createElement("a", {
+  }, "2022 All Rights Reserved"), /*#__PURE__*/React.createElement("div", {
+    className: classes.poweredByContainer
+  }, /*#__PURE__*/React.createElement("p", null, "Powered by"), /*#__PURE__*/React.createElement("a", {
     title: "Powered by Classplus",
     target: "_blank",
     href: "https://classplusapp.com/",
     className: classes.poweredDiv
-  }, /*#__PURE__*/React.createElement("p", null, "Powered by"), /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
+    src: 'https://storage.googleapis.com/coursewebview/logo.png',
     alt: "classplus",
-    src: 'https://storage.googleapis.com/coursewebview/logo.png'
-  }))) : null);
+    className: classes.poweredDivImg
+  })))) : null);
 }
 
 const borderRadius = {
@@ -1884,24 +1985,27 @@ const TYPE_TO_COMPONENT_MAP$1 = {
 const getCompToRender$1 = type => TYPE_TO_COMPONENT_MAP$1[type] || (() => null);
 const MemoisedSection$1 = /*#__PURE__*/memo(({
   sectionData,
-  extraProps
+  extraProps,
+  sectionIndex
 }) => {
-  console.log('templatesectiondata', sectionData);
   const SectionComp = getCompToRender$1(sectionData.type);
   return /*#__PURE__*/React.createElement(SectionComp, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   });
 });
 function SectionRenderer$1({
   sectionData,
+  sectionIndex,
   extraProps
 }) {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: null /*GIF maybe*/
   }, /*#__PURE__*/React.createElement(MemoisedSection$1, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   }));
 }
 
@@ -1971,7 +2075,6 @@ function PageRenderer$1({
     _id
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
   const Wrapper = SectionWrapper || Fragment;
-  // console.log("CONTEXT______", context)
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, /*#__PURE__*/React.createElement(PageContext.Provider, {
@@ -1992,7 +2095,8 @@ function PageRenderer$1({
     key: sectionData.type + (sectionData._id || sectionIndex)
   }), /*#__PURE__*/React.createElement(SectionRenderer$1, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React.createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true
@@ -2037,6 +2141,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   },
   contentContainer: {
     position: 'relative',
+    width: '100%',
     zIndex: '1',
     display: 'grid',
     gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
@@ -2335,7 +2440,8 @@ function Carousel({
 }
 
 function Section$4({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const classes = useSectionStyles$8();
   const {
@@ -2372,7 +2478,7 @@ function Section$4({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -2382,11 +2488,13 @@ function Section$4({
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     ref: nodeData?.image?.refSetter,
     className: classes.sideBannerImage,
-    src: nodeData.image.metadata.value
+    src: nodeData.image.metadata.value,
+    sectionIndex: sectionIndex
   }))));
 }
 function BannerCarouselRight({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -2410,7 +2518,8 @@ function BannerCarouselRight({
     className: classes.sectionContainer
   }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$4, {
     nodeData: node,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   })))));
 }
 
@@ -2702,9 +2811,13 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     width: '100%'
   },
   contentContainer: {
-    padding: '100px 0',
+    // padding: '100px 0',
+    // height: '100%',
+    // display: 'flex',
+    // alignItems: 'center'
     height: '100%',
     display: 'flex',
+    /* padding: 100px 0; */
     alignItems: 'center'
     // backgroundImage: ({ imageUrl } = {}) =>
     //   `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
@@ -2730,7 +2843,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     height: '100%'
   },
   textContainer: {
-    padding: '0 18%',
+    padding: '100px 0',
     margin: '0 auto',
     width: '80%'
   },
@@ -2788,7 +2901,8 @@ const useSectionStyles$6 = createUseStyles(theme => ({
 
 const Section$3 = ({
   nodeData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) => {
   const {
     layout: {
@@ -2800,7 +2914,6 @@ const Section$3 = ({
     imageUrl: nodeData.image.metadata.value,
     containerWidth
   });
-  console.log('isCustomWebsite______', isCustomWebsite);
   return /*#__PURE__*/React.createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React.createElement("div", {
@@ -2829,7 +2942,7 @@ const Section$3 = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -2838,14 +2951,15 @@ const Section$3 = ({
     className: classes?.centerBgImageContainer
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: nodeData.image.metadata.value,
-    className: classes?.centerBgImage
+    className: classes?.centerBgImage,
+    sectionIndex: sectionIndex
   }))));
 };
 function BannerCarouselCenter({
   sectionData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) {
-  console.log('isCustomWebsite______', isCustomWebsite);
   const classes = useSectionStyles$6();
   const [{
     bannerCarousel
@@ -2860,7 +2974,8 @@ function BannerCarouselCenter({
   }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$3, {
     nodeData: node,
     isCustomWebsite: isCustomWebsite,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -2904,7 +3019,13 @@ const useSectionStyles$5 = createUseStyles(theme => {
       position: 'relative',
       width: '100%',
       // height: "650px"
-      paddingBottom: '82%'
+      paddingBottom: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? '85%' : '',
+      '& img': {
+        height: '520px',
+        objectFit: 'cover'
+      }
     },
     imageBorder: {
       border: `2px solid ${theme?.palette?.primary?.light}`,
@@ -2955,6 +3076,14 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%',
         padding: '0'
       },
+      // imageContainer: {
+
+      //   '& img': {
+      //     height: "520px",
+      //     objectFit: "cover"
+      //   }
+
+      // },
       imageContainerDiv: {
         width: '100%'
       },
@@ -2980,15 +3109,19 @@ const useSectionStyles$5 = createUseStyles(theme => {
 });
 
 function Section$2({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
-  const classes = useSectionStyles$5();
   const {
     layout: {
       containerWidth
     },
-    isMobile
+    isMobile,
+    isCustomWebsite
   } = useContext(PageContext);
+  const classes = useSectionStyles$5({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -2998,7 +3131,8 @@ function Section$2({
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: nodeData.image.metadata.value,
     ref: nodeData?.image?.refSetter,
-    className: classes.sideBannerImage
+    className: classes.sideBannerImage,
+    sectionIndex: sectionIndex
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.imageBorder
   }))), /*#__PURE__*/React.createElement("div", {
@@ -3023,18 +3157,20 @@ function Section$2({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
-    size: isMobile ? 'small' : 'medium'
+    size: isMobile ? 'small' : 'medium',
+    name: "button"
   })));
 }
 function BannerCarouselLeft({
   sectionData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex,
+  isMobile
 }) {
-  console.log('isCustomWebsite______', isCustomWebsite);
   const {
     layout: {
       containerWidth
@@ -3053,7 +3189,8 @@ function BannerCarouselLeft({
     className: classes.sectionContainer
   }, /*#__PURE__*/React.createElement(Wrapper, null, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$2, {
     nodeData: node,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   })))));
 }
 
@@ -3212,7 +3349,6 @@ async function postApiCall(baseURLs, data) {
         return res.data;
       }
     } catch (err) {
-      console.log(err);
       return;
     }
   }
@@ -3235,7 +3371,6 @@ async function postApiCallForm(baseURLs, data, extraProps) {
         return res.data;
       });
     } catch (err) {
-      console.log(err);
       return;
     }
   }
@@ -3422,7 +3557,7 @@ function SubscribeToNewsletter({
     onFocus: () => {
       setIsValid(true);
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", {
     className: classes.btnContainer
   }, /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
@@ -3488,7 +3623,8 @@ const useTestimonialStyles = createUseStyles(theme => {
       color: theme?.palette?.font?.default,
       margin: '10px 0 40px 10px',
       overflow: 'hidden',
-      whiteSpace: 'nowrap',
+      wordBreak: 'break-word',
+      // whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     },
     sliderContainer: {
@@ -3579,7 +3715,8 @@ const useTestimonialStyles = createUseStyles(theme => {
         color: theme?.palette?.font?.default,
         margin: '4px 0 12px 0',
         overflow: 'hidden',
-        whiteSpace: 'nowrap',
+        // whiteSpace: 'nowrap',
+        wordBreak: 'break-word',
         textOverflow: 'ellipsis'
       },
       userImageDummy: {
@@ -3626,7 +3763,8 @@ function QuotesComponent() {
 }
 
 function Section$1({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -3682,7 +3820,8 @@ function Section$1({
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImage,
     src: el?.cardUserImage?.metadata?.value,
-    alt: "userImg"
+    alt: "userImg",
+    sectionIndex: sectionIndex
   })) : /*#__PURE__*/React.createElement("div", {
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImageDummy
@@ -3719,13 +3858,15 @@ function Section$1({
   }, carouselContent))));
 }
 function Testimonials({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const classes = useTestimonialStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.testimonialContainer
   }, /*#__PURE__*/React.createElement(Section$1, {
-    nodeData: sectionData.components[0]
+    nodeData: sectionData.components[0],
+    sectionIndex: sectionIndex
   }));
 }
 
@@ -3879,7 +4020,8 @@ function VideoPlayer(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoaded && /*#__PURE__*/React.createElement("div", {
     className: classes.imgContainer
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
-    src: imageUrl
+    src: imageUrl,
+    sectionIndex: props?.sectionIndex
   }), isEnabled ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, props.onlyThumbnail ? null : /*#__PURE__*/React.createElement(Icon, {
     name: "Video Play",
     color: theme.palette.font.invertedDefault,
@@ -4044,7 +4186,8 @@ const SingleVideoSlide$2 = props => {
     className: classes.iframeContainer
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
     imageUrl: data.videoFrame.metadata?.thumbnail,
-    videoUrl: data.videoFrame.metadata?.value
+    videoUrl: data.videoFrame.metadata?.value,
+    sectionIndex: props?.sectionIndex
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
   }, /*#__PURE__*/React.createElement("h3", {
@@ -4069,7 +4212,8 @@ const SingleVideoSlide$2 = props => {
 };
 
 function VideoTestimonial({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -4103,7 +4247,8 @@ function VideoTestimonial({
     }
   })), /*#__PURE__*/React.createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React.createElement(SingleVideoSlide$2, {
     data: data,
-    key: index
+    key: index,
+    sectionIndex: sectionIndex
   }))))));
 }
 
@@ -4772,7 +4917,8 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
 });
 
 function PhotoGallery({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -4807,7 +4953,8 @@ function PhotoGallery({
     }, /*#__PURE__*/React.createElement(NextImageRenderer, {
       src: el?.cardImage?.metadata?.value,
       ref: el?.cardImage?.refSetter,
-      className: classes?.carouselImage
+      className: classes?.carouselImage,
+      sectionIndex: sectionIndex
     })));
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -5483,9 +5630,9 @@ function CourseCard({
     className: classes.courseCardPriceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardPrice
-  }, '₹', card?.finalPrice), /*#__PURE__*/React.createElement("div", {
+  }, '₹', card?.finalPrice), card?.price !== card?.finalPrice ? /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardStrikePrice
-  }, /*#__PURE__*/React.createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF')), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF') : null), /*#__PURE__*/React.createElement("a", {
     className: classes.coursesAnchorTag,
     href: isEdit ? null : card?.shareableLink
   }, /*#__PURE__*/React.createElement("div", {
@@ -5766,7 +5913,8 @@ const useTeamStyles = createUseStyles(theme => {
 });
 
 const SingleSlide = ({
-  data
+  data,
+  sectionIndex
 }) => {
   const classes = useTeamStyles();
   return /*#__PURE__*/React.createElement("div", {
@@ -5777,7 +5925,8 @@ const SingleSlide = ({
     ref: data?.image?.refSetter,
     className: classes.image,
     alt: "Hero Image",
-    src: data.image.metadata.value
+    src: data.image.metadata.value,
+    sectionIndex: sectionIndex
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.teamDetailsContainer
   }, /*#__PURE__*/React.createElement("h3", {
@@ -5796,7 +5945,8 @@ const SingleSlide = ({
 };
 
 function TeamCard({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -5823,7 +5973,8 @@ function TeamCard({
   const carouselContent = teamData.teamCarousel.components.map((data, idx) => {
     return /*#__PURE__*/React.createElement(SingleSlide, {
       key: idx,
-      data: data
+      data: data,
+      sectionIndex: sectionIndex
     });
   });
   return /*#__PURE__*/React.createElement("section", {
@@ -5915,7 +6066,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     marginTop: '32px'
   },
   leftContainer: {
-    width: '50%'
+    width: '65%'
   },
   subtitle: {
     margin: '0 0 40px 0',
@@ -6220,7 +6371,7 @@ function FormEnquiry({
         messageValid: 1
       });
     }
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6427,7 +6578,8 @@ const useSectionStyles = createUseStyles(theme => ({
 }));
 
 function Contact({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -6520,7 +6672,8 @@ function Contact({
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     className: classes?.telephoneImage,
     ref: nodeData?.image?.refSetter,
-    src: nodeData?.image?.metadata?.value
+    src: nodeData?.image?.metadata?.value,
+    sectionIndex: sectionIndex
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.rightContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -6611,7 +6764,7 @@ function Contact({
         messageValid: 1
       });
     }
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6621,7 +6774,8 @@ function Contact({
     onClick: () => handleSubmit(),
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
-    disabled: btnDisabled
+    disabled: btnDisabled,
+    name: "button"
   }))))));
 }
 
@@ -6751,10 +6905,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     courseViewContainer: {
       width: '645px',
+      height: 'fit-content',
       backgroundColor: '#f4f9ff',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'center',
+      justifyContent: 'start',
       paddingTop: '20px',
       borderRadius: '10px'
     },
@@ -6802,10 +6957,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     courseDetailContent: {
       marginTop: '16px',
       fontSize: '16px',
-      lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme.palette.font.primary,
-      margin: '10px 0 20px'
+      margin: '10px 0 20px',
+      whiteSpace: 'pre-wrap'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
@@ -6922,7 +7077,6 @@ const SingleVideoSlide$1 = props => {
     price,
     discount
   }) => {
-    console.log('discountxx', props.data.price, props.data.discount);
     return (discount / price * 100).toFixed(2);
   };
   const classes = useWebinarPromotionPage();
@@ -6991,7 +7145,8 @@ const SingleVideoSlide$1 = props => {
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
     onlyThumbnail: true,
     imageUrl: data.thumbnail,
-    videoUrl: data.thumbnail
+    videoUrl: data.thumbnail,
+    sectionIndex: props?.sectionIndex
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: data.isPaid ? 'flex' : 'block'
@@ -7034,7 +7189,8 @@ const SingleVideoSlide$1 = props => {
 
 function CoursePromotionPage$1({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7053,7 +7209,8 @@ function CoursePromotionPage$1({
   }, /*#__PURE__*/React.createElement(SingleVideoSlide$1, {
     data: sectionData.components[0].metadata,
     webinarCtaClick: extraProps.webinarCtaClick,
-    conversions: extraProps.conversions
+    conversions: extraProps.conversions,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -7356,15 +7513,6 @@ const SingleVideoSlide = props => {
     isMobile,
     isEdit
   } = useContext(PageContext);
-  console.log(isEdit, 'isEdit');
-  useEffect(() => {
-    // remaining days epoch
-    // current date epoch
-    // subtract remaining days from current day epoch
-    // moment the result - and see if there are days
-    // days is present show days
-    // else start reverse timer
-  }, []);
   const renderer = ({
     days,
     hours,
@@ -7507,7 +7655,8 @@ const SingleVideoSlide = props => {
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
     onlyThumbnail: true,
     imageUrl: data.thumbnail,
-    videoUrl: data.thumbnail
+    videoUrl: data.thumbnail,
+    sectionIndex: props?.sectionIndex
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.bottomContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -7538,6 +7687,7 @@ const SingleVideoSlide = props => {
     type: 'primary',
     size: 'medium',
     target: null,
+    name: "button",
     rel: null
     // styling={isMobile ? { margin: '0 40px' } : {}}
   })))), showCourseInstallmentData && InstalmentData && /*#__PURE__*/React.createElement("div", {
@@ -7561,7 +7711,8 @@ const SingleVideoSlide = props => {
 
 function CoursePromotionPage({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7571,7 +7722,6 @@ function CoursePromotionPage({
   const classes = useCoursePromotionPage({
     containerWidth
   });
-  console.log(sectionData, 'sectionData');
   return /*#__PURE__*/React.createElement("div", {
     className: classes.courseSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -7582,7 +7732,8 @@ function CoursePromotionPage({
     data: sectionData.components[0].metadata,
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
-    conversions: extraProps.conversions
+    conversions: extraProps.conversions,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -8007,7 +8158,8 @@ const useTilesStyles = createUseStyles(theme => {
 });
 
 function Tiles({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const classes = useTilesStyles({});
   const {
@@ -8019,7 +8171,6 @@ function Tiles({
     isEdit
   } = useContext(PageContext);
   const nodeData = sectionData.components;
-  console.log(nodeData);
   const tilesList = nodeData[0]?.tilesList.components;
   const handleClick = value => {
     if (!isEdit && value) {
@@ -8036,9 +8187,10 @@ function Tiles({
     }, /*#__PURE__*/React.createElement("div", {
       className: classes.tileDiv,
       onClick: () => handleClick(tile.cta?.metadata?.value)
-    }, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement(NextImageRenderer, {
       className: classes.tileImg,
-      src: tile?.tileImage?.metadata?.value
+      src: tile?.tileImage?.metadata?.value,
+      sectionIndex: sectionIndex
     }), /*#__PURE__*/React.createElement("div", {
       className: classes.title,
       ref: tile.tileName?.refSetter,
@@ -8494,7 +8646,6 @@ function EmailDripMarket({
   sectionData,
   extraProps = {}
 }) {
-  console.log('extrapropstemplate', extraProps);
   const isInitialMount = useRef(true);
   const convertToHtml = sectionData => {
     const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(Section, {
@@ -8565,27 +8716,28 @@ const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
 const MemoisedSection = /*#__PURE__*/memo(({
   sectionData,
   extraProps,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) => {
-  // console.log("isCustomWebsite______", isCustomWebsite)
-  console.log('templatesectiondata', sectionData);
   const SectionComp = getCompToRender(sectionData.type);
   return /*#__PURE__*/React.createElement(SectionComp, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   });
 });
 function SectionRenderer({
   sectionData,
   extraProps,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) {
-  // console.log("isCustomWebsite______", isCustomWebsite)
   return /*#__PURE__*/React.createElement(MemoisedSection, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   });
 }
 
@@ -8663,7 +8815,8 @@ function PageRenderer({
   }), /*#__PURE__*/React.createElement(SectionRenderer, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React.createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true