diy-template-components 0.2.41 → 0.2.43

package/build/index.es.js

@@ -142,14 +142,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'
@@ -165,7 +165,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
   mobileContent: {
     display: 'flex',
     alignItems: 'center',
-    width: "100%",
+    width: '100%',
     '& img': {
       marginRight: '8px',
       maxWidth: '80px',
@@ -209,7 +209,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: "10%"
+    width: '10%'
   },
   '@media screen and (max-width: 767px)': {
     optionsContainer: {
@@ -1102,17 +1102,20 @@ function OptionList({
 
 const NextImageRenderer = ({
   src,
+  sectionIndex,
   ...props
 }) => {
   const {
-    isCustomWebsite
+    isCustomWebsite,
+    pageData
   } = 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,
@@ -1121,6 +1124,7 @@ const NextImageRenderer = ({
   if (isCustomWebsite) {
     const NextImage = require('next/image').default;
     return /*#__PURE__*/React.createElement(NextImage, _extends({
+      priority: sectionIndex == '0' ? true : false,
       loader: imageLoader,
       src: src,
       layout: 'fill',
@@ -1189,7 +1193,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", {
@@ -1359,7 +1364,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 +1425,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       boxSizing: 'border-box'
     }
   },
+  sectionNoBranding: {
+    paddingBottom: '0px'
+  },
   upperContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -1427,6 +1436,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     borderBottom: '1px solid #E1EAF6',
     alignItems: 'flex-start'
   },
+  upperContainerNoBranding: {
+    borderBottom: '0px'
+  },
   upperContainerItem1: {
     width: '33%',
     display: 'flex',
@@ -1502,9 +1514,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 +1530,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',
@@ -1562,13 +1585,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'
     }
   }
 }));
@@ -1580,9 +1612,9 @@ function Footer({
   const classes = useSectionStyles$9();
   console.log(data, 'this is data');
   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", {
@@ -1695,15 +1727,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 +1919,28 @@ 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);
+  console.log('sectionIndex MEMO', sectionIndex);
   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
   }));
 }
 
@@ -1992,7 +2031,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
@@ -2335,7 +2375,8 @@ function Carousel({
 }
 
 function Section$4({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const classes = useSectionStyles$8();
   const {
@@ -2344,6 +2385,7 @@ function Section$4({
     },
     isMobile
   } = useContext(PageContext);
+  console.log('nodedata_____', nodeData?.metadata?.order);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -2372,7 +2414,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 +2424,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 +2454,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
   })))));
 }
 
@@ -2788,7 +2833,8 @@ const useSectionStyles$6 = createUseStyles(theme => ({
 
 const Section$3 = ({
   nodeData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) => {
   const {
     layout: {
@@ -2829,7 +2875,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,12 +2884,14 @@ 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();
@@ -2860,7 +2908,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
   }))));
 }
 
@@ -2980,7 +3029,8 @@ const useSectionStyles$5 = createUseStyles(theme => {
 });
 
 function Section$2({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const classes = useSectionStyles$5();
   const {
@@ -2989,6 +3039,7 @@ function Section$2({
     },
     isMobile
   } = useContext(PageContext);
+  console.log('nodedata_____SDF', sectionIndex);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -2998,7 +3049,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,7 +3075,7 @@ 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,
@@ -3032,9 +3084,9 @@ function Section$2({
 }
 function BannerCarouselLeft({
   sectionData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) {
-  console.log('isCustomWebsite______', isCustomWebsite);
   const {
     layout: {
       containerWidth
@@ -3053,7 +3105,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
   })))));
 }
 
@@ -3422,7 +3475,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 +3541,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 +3633,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 +3681,8 @@ function QuotesComponent() {
 }
 
 function Section$1({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -3648,6 +3704,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
@@ -3682,7 +3739,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 +3777,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 +3939,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 +4105,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 +4131,8 @@ const SingleVideoSlide$2 = props => {
 };
 
 function VideoTestimonial({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -4103,7 +4166,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 +4836,8 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
 });
 
 function PhotoGallery({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -4807,7 +4872,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 +5549,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 +5832,8 @@ const useTeamStyles = createUseStyles(theme => {
 });
 
 const SingleSlide = ({
-  data
+  data,
+  sectionIndex
 }) => {
   const classes = useTeamStyles();
   return /*#__PURE__*/React.createElement("div", {
@@ -5777,7 +5844,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 +5864,8 @@ const SingleSlide = ({
 };
 
 function TeamCard({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -5823,7 +5892,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 +5985,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     marginTop: '32px'
   },
   leftContainer: {
-    width: '50%'
+    width: '65%'
   },
   subtitle: {
     margin: '0 0 40px 0',
@@ -6220,7 +6290,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 +6497,8 @@ const useSectionStyles = createUseStyles(theme => ({
 }));
 
 function Contact({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -6441,6 +6512,7 @@ function Contact({
   } = useContext(PageContext);
   let [btnDisabled, setBtnDisabled] = useState(false);
   const [nodeData] = sectionData.components;
+  console.log('nodedata_____', nodeData?.metadata?.order);
   const classes = useSectionStyles({
     containerWidth
   });
@@ -6520,7 +6592,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 +6684,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'
@@ -6751,10 +6824,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 +6876,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',
@@ -6991,7 +7065,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 +7109,8 @@ const SingleVideoSlide$1 = props => {
 
 function CoursePromotionPage$1({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7053,7 +7129,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
   }))));
 }
 
@@ -7507,7 +7584,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", {
@@ -7561,7 +7639,8 @@ const SingleVideoSlide = props => {
 
 function CoursePromotionPage({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7582,7 +7661,8 @@ function CoursePromotionPage({
     data: sectionData.components[0].metadata,
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
-    conversions: extraProps.conversions
+    conversions: extraProps.conversions,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -8007,7 +8087,8 @@ const useTilesStyles = createUseStyles(theme => {
 });
 
 function Tiles({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const classes = useTilesStyles({});
   const {
@@ -8021,6 +8102,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) {
@@ -8036,9 +8118,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,
@@ -8565,7 +8648,8 @@ 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);
@@ -8573,19 +8657,22 @@ const MemoisedSection = /*#__PURE__*/memo(({
   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 +8750,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