diy-template-components 0.2.41 → 0.2.43

package/build/index.js

@@ -157,14 +157,14 @@ const useSectionStyles$a = createUseStyles(theme => ({
     position: 'relative',
     maxHeight: '55px',
     alignItems: 'center',
-    width: '25%'
+    width: '24%'
   },
   imageDivImageMobile: {},
   imageAnchorMobile: {
     pointerEvents: 'auto',
     cursor: 'default',
     width: '100%',
-    maxWidth: '80px',
+    maxWidth: '60px',
     cursor: 'default',
     height: '46px',
     position: 'relative'
@@ -180,7 +180,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
   mobileContent: {
     display: 'flex',
     alignItems: 'center',
-    width: "100%",
+    width: '100%',
     '& img': {
       marginRight: '8px',
       maxWidth: '80px',
@@ -224,7 +224,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: "10%"
+    width: '10%'
   },
   '@media screen and (max-width: 767px)': {
     optionsContainer: {
@@ -1117,17 +1117,20 @@ function OptionList({
 
 const NextImageRenderer = ({
   src,
+  sectionIndex,
   ...props
 }) => {
   const {
-    isCustomWebsite
+    isCustomWebsite,
+    pageData
   } = React.useContext(PageContext);
+  console.log('contexttest___', sectionIndex);
   const imageLoader = ({
     src,
     quality,
     width
   }) => {
-    return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${width}`;
+    return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${640}`;
   };
   let {
     refSetter,
@@ -1136,6 +1139,7 @@ const NextImageRenderer = ({
   if (isCustomWebsite) {
     const NextImage = require('next/image').default;
     return /*#__PURE__*/React__default["default"].createElement(NextImage, _extends({
+      priority: sectionIndex == '0' ? true : false,
       loader: imageLoader,
       src: src,
       layout: 'fill',
@@ -1204,7 +1208,8 @@ function DesktopHeader({
     className: classes?.imageDivImage
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: header?.websiteLogo,
-    className: classes.imageDivImageNext
+    className: classes.imageDivImageNext,
+    order: 1
   }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React__default["default"].createElement("a", {
     href: logoUrl
   }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -1374,7 +1379,8 @@ function MobileHeader({
     className: classes?.imageDivImageMobile
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: header?.websiteLogo,
-    className: classes.imageDivImageNext
+    className: classes.imageDivImageNext,
+    order: 1
   }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: classes.mobileAppNameClass
   }, " ", header?.appName) : null), downloadLink), sideMenu ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1434,6 +1440,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       boxSizing: 'border-box'
     }
   },
+  sectionNoBranding: {
+    paddingBottom: '0px'
+  },
   upperContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -1442,6 +1451,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     borderBottom: '1px solid #E1EAF6',
     alignItems: 'flex-start'
   },
+  upperContainerNoBranding: {
+    borderBottom: '0px'
+  },
   upperContainerItem1: {
     width: '33%',
     display: 'flex',
@@ -1517,9 +1529,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',
@@ -1532,6 +1545,16 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       width: '100px'
     }
   },
+  poweredByContainer: {
+    display: 'flex',
+    width: '60%',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: '5%'
+  },
+  poweredDivImg: {
+    width: '100px !important'
+  },
   '@media screen and (max-width: 767px)': {
     section: {
       padding: '45px 30px',
@@ -1577,13 +1600,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'
     }
   }
 }));
@@ -1595,9 +1627,9 @@ function Footer({
   const classes = useSectionStyles$9();
   console.log(data, 'this is data');
   return /*#__PURE__*/React__default["default"].createElement("footer", {
-    className: classes.section
+    className: data.metadata.isCpBranding ? `${classes.section}` : `${classes.section} ${classes.sectionNoBranding}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.upperContainer
+    className: data.metadata.isCpBranding ? `${classes.upperContainer}` : `${classes.upperContainer} ${classes.upperContainerNoBranding}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.upperContainerItem1
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1710,15 +1742,18 @@ function Footer({
     className: classes.lowerContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bottomLeftText
-  }, "2022 All Rights Reserved"), /*#__PURE__*/React__default["default"].createElement("a", {
+  }, "2022 All Rights Reserved"), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.poweredByContainer
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, "Powered by"), /*#__PURE__*/React__default["default"].createElement("a", {
     title: "Powered by Classplus",
     target: "_blank",
     href: "https://classplusapp.com/",
     className: classes.poweredDiv
-  }, /*#__PURE__*/React__default["default"].createElement("p", null, "Powered by"), /*#__PURE__*/React__default["default"].createElement("img", {
+  }, /*#__PURE__*/React__default["default"].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 = {
@@ -1899,24 +1934,28 @@ const TYPE_TO_COMPONENT_MAP$1 = {
 const getCompToRender$1 = type => TYPE_TO_COMPONENT_MAP$1[type] || (() => null);
 const MemoisedSection$1 = /*#__PURE__*/React.memo(({
   sectionData,
-  extraProps
+  extraProps,
+  sectionIndex
 }) => {
-  console.log('templatesectiondata', sectionData);
+  console.log('sectionIndex MEMO', sectionIndex);
   const SectionComp = getCompToRender$1(sectionData.type);
   return /*#__PURE__*/React__default["default"].createElement(SectionComp, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   });
 });
 function SectionRenderer$1({
   sectionData,
+  sectionIndex,
   extraProps
 }) {
   return /*#__PURE__*/React__default["default"].createElement(React.Suspense, {
     fallback: null /*GIF maybe*/
   }, /*#__PURE__*/React__default["default"].createElement(MemoisedSection$1, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   }));
 }
 
@@ -2007,7 +2046,8 @@ function PageRenderer$1({
     key: sectionData.type + (sectionData._id || sectionIndex)
   }), /*#__PURE__*/React__default["default"].createElement(SectionRenderer$1, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React__default["default"].createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true
@@ -2350,7 +2390,8 @@ function Carousel({
 }
 
 function Section$4({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const classes = useSectionStyles$8();
   const {
@@ -2359,6 +2400,7 @@ function Section$4({
     },
     isMobile
   } = React.useContext(PageContext);
+  console.log('nodedata_____', nodeData?.metadata?.order);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2387,7 +2429,7 @@ function Section$4({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -2397,11 +2439,13 @@ function Section$4({
   }, /*#__PURE__*/React__default["default"].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: {
@@ -2425,7 +2469,8 @@ function BannerCarouselRight({
     className: classes.sectionContainer
   }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$4, {
     nodeData: node,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   })))));
 }
 
@@ -2803,7 +2848,8 @@ const useSectionStyles$6 = createUseStyles(theme => ({
 
 const Section$3 = ({
   nodeData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) => {
   const {
     layout: {
@@ -2844,7 +2890,7 @@ const Section$3 = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -2853,12 +2899,14 @@ const Section$3 = ({
     className: classes?.centerBgImageContainer
   }, /*#__PURE__*/React__default["default"].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();
@@ -2875,7 +2923,8 @@ function BannerCarouselCenter({
   }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$3, {
     nodeData: node,
     isCustomWebsite: isCustomWebsite,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -2995,7 +3044,8 @@ const useSectionStyles$5 = createUseStyles(theme => {
 });
 
 function Section$2({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const classes = useSectionStyles$5();
   const {
@@ -3004,6 +3054,7 @@ function Section$2({
     },
     isMobile
   } = React.useContext(PageContext);
+  console.log('nodedata_____SDF', sectionIndex);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3013,7 +3064,8 @@ function Section$2({
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: nodeData.image.metadata.value,
     ref: nodeData?.image?.refSetter,
-    className: classes.sideBannerImage
+    className: classes.sideBannerImage,
+    sectionIndex: sectionIndex
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imageBorder
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3038,7 +3090,7 @@ function Section$2({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -3047,9 +3099,9 @@ function Section$2({
 }
 function BannerCarouselLeft({
   sectionData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) {
-  console.log('isCustomWebsite______', isCustomWebsite);
   const {
     layout: {
       containerWidth
@@ -3068,7 +3120,8 @@ function BannerCarouselLeft({
     className: classes.sectionContainer
   }, /*#__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 */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   })))));
 }
 
@@ -3437,7 +3490,7 @@ function SubscribeToNewsletter({
     onFocus: () => {
       setIsValid(true);
     }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.btnContainer
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
@@ -3503,7 +3556,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: {
@@ -3594,7 +3648,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: {
@@ -3641,7 +3696,8 @@ function QuotesComponent() {
 }
 
 function Section$1({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -3663,6 +3719,7 @@ function Section$1({
     centerMode: true,
     centerPadding: isMobile ? '10px 0 0' : '80px 0 0'
   };
+  console.log('nodedata_____', nodeData?.metadata?.order);
   const carouselContent = carouselList.map((el, idx) =>
   /*#__PURE__*/
   // kept an extra element as slick mutates this element and gives it 100% width
@@ -3697,7 +3754,8 @@ function Section$1({
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImage,
     src: el?.cardUserImage?.metadata?.value,
-    alt: "userImg"
+    alt: "userImg",
+    sectionIndex: sectionIndex
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImageDummy
@@ -3734,13 +3792,15 @@ function Section$1({
   }, carouselContent))));
 }
 function Testimonials({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const classes = useTestimonialStyles();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.testimonialContainer
   }, /*#__PURE__*/React__default["default"].createElement(Section$1, {
-    nodeData: sectionData.components[0]
+    nodeData: sectionData.components[0],
+    sectionIndex: sectionIndex
   }));
 }
 
@@ -3894,7 +3954,8 @@ function VideoPlayer(props) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLoaded && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imgContainer
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
-    src: imageUrl
+    src: imageUrl,
+    sectionIndex: props?.sectionIndex
   }), isEnabled ? /*#__PURE__*/React__default["default"].createElement(Loader, null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, props.onlyThumbnail ? null : /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: "Video Play",
     color: theme.palette.font.invertedDefault,
@@ -4059,7 +4120,8 @@ const SingleVideoSlide$2 = props => {
     className: classes.iframeContainer
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
     imageUrl: data.videoFrame.metadata?.thumbnail,
-    videoUrl: data.videoFrame.metadata?.value
+    videoUrl: data.videoFrame.metadata?.value,
+    sectionIndex: props?.sectionIndex
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoDetails
   }, /*#__PURE__*/React__default["default"].createElement("h3", {
@@ -4084,7 +4146,8 @@ const SingleVideoSlide$2 = props => {
 };
 
 function VideoTestimonial({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -4118,7 +4181,8 @@ function VideoTestimonial({
     }
   })), /*#__PURE__*/React__default["default"].createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React__default["default"].createElement(SingleVideoSlide$2, {
     data: data,
-    key: index
+    key: index,
+    sectionIndex: sectionIndex
   }))))));
 }
 
@@ -4787,7 +4851,8 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
 });
 
 function PhotoGallery({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -4822,7 +4887,8 @@ function PhotoGallery({
     }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
       src: el?.cardImage?.metadata?.value,
       ref: el?.cardImage?.refSetter,
-      className: classes?.carouselImage
+      className: classes?.carouselImage,
+      sectionIndex: sectionIndex
     })));
   });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5498,9 +5564,9 @@ function CourseCard({
     className: classes.courseCardPriceContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardPrice
-  }, '₹', card?.finalPrice), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, '₹', card?.finalPrice), card?.price !== card?.finalPrice ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardStrikePrice
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF')), /*#__PURE__*/React__default["default"].createElement("a", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF') : null), /*#__PURE__*/React__default["default"].createElement("a", {
     className: classes.coursesAnchorTag,
     href: isEdit ? null : card?.shareableLink
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5781,7 +5847,8 @@ const useTeamStyles = createUseStyles(theme => {
 });
 
 const SingleSlide = ({
-  data
+  data,
+  sectionIndex
 }) => {
   const classes = useTeamStyles();
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5792,7 +5859,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__default["default"].createElement("div", {
     className: classes.teamDetailsContainer
   }, /*#__PURE__*/React__default["default"].createElement("h3", {
@@ -5811,7 +5879,8 @@ const SingleSlide = ({
 };
 
 function TeamCard({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -5838,7 +5907,8 @@ function TeamCard({
   const carouselContent = teamData.teamCarousel.components.map((data, idx) => {
     return /*#__PURE__*/React__default["default"].createElement(SingleSlide, {
       key: idx,
-      data: data
+      data: data,
+      sectionIndex: sectionIndex
     });
   });
   return /*#__PURE__*/React__default["default"].createElement("section", {
@@ -5930,7 +6000,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     marginTop: '32px'
   },
   leftContainer: {
-    width: '50%'
+    width: '65%'
   },
   subtitle: {
     margin: '0 0 40px 0',
@@ -6235,7 +6305,7 @@ function FormEnquiry({
         messageValid: 1
       });
     }
-  })), /*#__PURE__*/React__default["default"].createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6442,7 +6512,8 @@ const useSectionStyles = createUseStyles(theme => ({
 }));
 
 function Contact({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -6456,6 +6527,7 @@ function Contact({
   } = React.useContext(PageContext);
   let [btnDisabled, setBtnDisabled] = React.useState(false);
   const [nodeData] = sectionData.components;
+  console.log('nodedata_____', nodeData?.metadata?.order);
   const classes = useSectionStyles({
     containerWidth
   });
@@ -6535,7 +6607,8 @@ function Contact({
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     className: classes?.telephoneImage,
     ref: nodeData?.image?.refSetter,
-    src: nodeData?.image?.metadata?.value
+    src: nodeData?.image?.metadata?.value,
+    sectionIndex: sectionIndex
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.rightContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6626,7 +6699,7 @@ function Contact({
         messageValid: 1
       });
     }
-  })), /*#__PURE__*/React__default["default"].createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6766,10 +6839,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'
     },
@@ -6817,10 +6891,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',
@@ -7006,7 +7080,8 @@ const SingleVideoSlide$1 = props => {
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
     onlyThumbnail: true,
     imageUrl: data.thumbnail,
-    videoUrl: data.thumbnail
+    videoUrl: data.thumbnail,
+    sectionIndex: props?.sectionIndex
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: data.isPaid ? 'flex' : 'block'
@@ -7049,7 +7124,8 @@ const SingleVideoSlide$1 = props => {
 
 function CoursePromotionPage$1({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7068,7 +7144,8 @@ function CoursePromotionPage$1({
   }, /*#__PURE__*/React__default["default"].createElement(SingleVideoSlide$1, {
     data: sectionData.components[0].metadata,
     webinarCtaClick: extraProps.webinarCtaClick,
-    conversions: extraProps.conversions
+    conversions: extraProps.conversions,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -7522,7 +7599,8 @@ const SingleVideoSlide = props => {
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
     onlyThumbnail: true,
     imageUrl: data.thumbnail,
-    videoUrl: data.thumbnail
+    videoUrl: data.thumbnail,
+    sectionIndex: props?.sectionIndex
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bottomContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7576,7 +7654,8 @@ const SingleVideoSlide = props => {
 
 function CoursePromotionPage({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7597,7 +7676,8 @@ function CoursePromotionPage({
     data: sectionData.components[0].metadata,
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
-    conversions: extraProps.conversions
+    conversions: extraProps.conversions,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -8022,7 +8102,8 @@ const useTilesStyles = createUseStyles(theme => {
 });
 
 function Tiles({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const classes = useTilesStyles({});
   const {
@@ -8036,6 +8117,7 @@ function Tiles({
   const nodeData = sectionData.components;
   console.log(nodeData);
   const tilesList = nodeData[0]?.tilesList.components;
+  console.log('nodedata_____', nodeData?.metadata?.order);
   const handleClick = value => {
     if (!isEdit && value) {
       if (value.indexOf('http://') == 0 || value.indexOf('https://') == 0) {
@@ -8051,9 +8133,10 @@ function Tiles({
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.tileDiv,
       onClick: () => handleClick(tile.cta?.metadata?.value)
-    }, /*#__PURE__*/React__default["default"].createElement("img", {
+    }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
       className: classes.tileImg,
-      src: tile?.tileImage?.metadata?.value
+      src: tile?.tileImage?.metadata?.value,
+      sectionIndex: sectionIndex
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.title,
       ref: tile.tileName?.refSetter,
@@ -8580,7 +8663,8 @@ const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
 const MemoisedSection = /*#__PURE__*/React.memo(({
   sectionData,
   extraProps,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) => {
   // console.log("isCustomWebsite______", isCustomWebsite)
   console.log('templatesectiondata', sectionData);
@@ -8588,19 +8672,22 @@ const MemoisedSection = /*#__PURE__*/React.memo(({
   return /*#__PURE__*/React__default["default"].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__default["default"].createElement(MemoisedSection, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   });
 }
 
@@ -8678,7 +8765,8 @@ function PageRenderer({
   }), /*#__PURE__*/React__default["default"].createElement(SectionRenderer, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React__default["default"].createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true