diy-template-components 0.2.31 → 0.2.33

package/build/index.js

@@ -1375,9 +1375,6 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       boxSizing: 'border-box'
     }
   },
-  sectionNoBranding: {
-    paddingBottom: '0px'
-  },
   upperContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -1386,9 +1383,6 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     borderBottom: '1px solid #E1EAF6',
     alignItems: 'flex-start'
   },
-  upperContainerNoBranding: {
-    borderBottom: '0px'
-  },
   upperContainerItem1: {
     width: '33%',
     display: 'flex',
@@ -1536,9 +1530,9 @@ function Footer({
   const classes = useSectionStyles$9();
   console.log(data, 'this is data');
   return /*#__PURE__*/React__default["default"].createElement("footer", {
-    className: data.metadata.isCpBranding ? `${classes.section}` : `${classes.section} ${classes.sectionNoBranding}`
+    className: classes.section
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: data.metadata.isCpBranding ? `${classes.upperContainer}` : `${classes.upperContainer} ${classes.upperContainerNoBranding}`
+    className: classes.upperContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.upperContainerItem1
   }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -1900,7 +1894,8 @@ function PageRenderer$1({
   templateId,
   isTutorWebsite = false,
   extraProps,
-  hideLogin
+  hideLogin,
+  isCustomWebsite
 }) {
   const theme = React.useMemo(() => getTheme(color, font), [color, font]);
   const navList = header?.navs;
@@ -1920,9 +1915,11 @@ function PageRenderer$1({
     isTutorWebsite,
     extraProps,
     hideLogin,
+    isCustomWebsite,
     _id
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
   const Wrapper = SectionWrapper || React.Fragment;
+  // console.log("CONTEXT______", context)
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
     theme: theme
   }, /*#__PURE__*/React__default["default"].createElement(PageContext.Provider, {
@@ -1999,6 +1996,11 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     margin: '0 auto',
     maxWidth: '100%'
   },
+  imageContainer: {
+    width: '100%',
+    position: 'relative',
+    height: '90%'
+  },
   subTitleHeading: {
     marginBottom: '8px',
     fontSize: '16px',
@@ -2055,6 +2057,10 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     linkButton: {
       padding: '12px 16px'
+    },
+    imageContainer: {
+      height: 'undefined',
+      paddingBottom: '80%'
     }
   }
 }));
@@ -2276,6 +2282,46 @@ function Carousel({
   })));
 }
 
+const NextImageRenderer = ({
+  src,
+  ...props
+}) => {
+  try {
+    const {
+      isCustomWebsite
+    } = React.useContext(PageContext);
+    let {
+      refSetter,
+      className
+    } = props;
+    if (isCustomWebsite) {
+      return /*#__PURE__*/React__default["default"].createElement(require.resolve('next/image').default, {
+        src: src,
+        // height: "640",
+        // width: "959",
+        layout: 'fill',
+        ref: {
+          refSetter
+        },
+        className: {
+          className
+        },
+        ...props
+      });
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("img", {
+        ref: refSetter,
+        className: className,
+        src: src
+      });
+    }
+  } catch (err) {
+    return {
+      notFound: true
+    };
+  }
+};
+
 function Section$4({
   nodeData
 }) {
@@ -2314,16 +2360,18 @@ function Section$4({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
-  })), /*#__PURE__*/React__default["default"].createElement("img", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes?.imageContainer
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     ref: nodeData?.image?.refSetter,
     className: classes.sideBannerImage,
     src: nodeData.image.metadata.value
-  })));
+  }))));
 }
 function BannerCarouselRight({
   sectionData
@@ -2629,9 +2677,9 @@ const useSectionStyles$6 = createUseStyles(theme => ({
   sectionContainer: {
     margin: '0 auto',
     width: '100%',
-    maxWidth: ({
-      containerWidth
-    } = {}) => containerWidth
+    // maxWidth: ({ containerWidth } = {}) => containerWidth,
+    position: 'absolute',
+    zIndex: '99'
   },
   absoluteButtons: {
     display: 'flex',
@@ -2645,19 +2693,34 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     padding: '100px 0',
     height: '100%',
     display: 'flex',
-    alignItems: 'center',
-    backgroundImage: ({
-      imageUrl
-    } = {}) => `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
-    backgroundPosition: 'center',
-    backgroundSize: 'cover'
+    alignItems: 'center'
+    // backgroundImage: ({ imageUrl } = {}) =>
+    //   `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
+    // backgroundPosition: 'center',
+    // backgroundSize: 'cover'
+  },
+
+  centerBgImageContainer: {
+    width: '100%',
+    position: 'relative',
+    paddingBottom: '35rem',
+    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center center'
+  },
+  centerBgImage: {
+    objectFit: 'cover',
+    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center center'
   },
   partialBackground: {
     height: '100%'
   },
   textContainer: {
     padding: '0 18%',
-    margin: '0 auto'
+    margin: '0 auto',
+    width: '80%'
   },
   subTitleHeading: {
     color: theme?.palette?.font?.invertedDefault,
@@ -2667,7 +2730,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
   },
   heading: {
     margin: '0',
-    fontSize: '72px',
+    fontSize: '62px',
     color: theme?.palette?.font?.invertedDefault,
     wordBreak: 'break-word'
   },
@@ -2689,7 +2752,9 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     },
     contentContainer: {
       display: 'flex',
-      flexFlow: 'column-reverse'
+      flexFlow: 'column-reverse',
+      justifyContent: 'center',
+      padding: '0px'
     },
     textContainer: {
       padding: '20px'
@@ -2699,12 +2764,19 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     },
     description: {
       margin: '16px 0'
+    },
+    centerBgImageContainer: {
+      width: '100%',
+      position: 'relative',
+      height: '34rem',
+      paddingBottom: '100%'
     }
   }
 }));
 
 const Section$3 = ({
-  nodeData
+  nodeData,
+  isCustomWebsite
 }) => {
   const {
     layout: {
@@ -2716,6 +2788,7 @@ const Section$3 = ({
     imageUrl: nodeData.image.metadata.value,
     containerWidth
   });
+  console.log('isCustomWebsite______', isCustomWebsite);
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2744,16 +2817,23 @@ const Section$3 = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
-  })))));
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes?.centerBgImageContainer
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
+    src: nodeData.image.metadata.value,
+    className: classes?.centerBgImage
+  }))));
 };
 function BannerCarouselCenter({
-  sectionData
+  sectionData,
+  isCustomWebsite
 }) {
+  console.log('isCustomWebsite______', isCustomWebsite);
   const classes = useSectionStyles$6();
   const [{
     bannerCarousel
@@ -2767,6 +2847,7 @@ function BannerCarouselCenter({
     className: classes.bannerCarouselCenterSection
   }, /*#__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 */
   }))));
 }
@@ -2808,7 +2889,10 @@ const useSectionStyles$5 = createUseStyles(theme => {
       position: 'relative'
     },
     imageContainer: {
-      position: 'relative'
+      position: 'relative',
+      width: '100%',
+      // height: "650px"
+      paddingBottom: '82%'
     },
     imageBorder: {
       border: `2px solid ${theme?.palette?.primary?.light}`,
@@ -2899,10 +2983,10 @@ function Section$2({
     className: classes.imageContainerDiv
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imageContainer
-  }, /*#__PURE__*/React__default["default"].createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
+    src: nodeData.image.metadata.value,
     ref: nodeData?.image?.refSetter,
-    className: classes.sideBannerImage,
-    src: nodeData.image.metadata.value
+    className: classes.sideBannerImage
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imageBorder
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2927,7 +3011,7 @@ function Section$2({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -2935,8 +3019,10 @@ function Section$2({
   })));
 }
 function BannerCarouselLeft({
-  sectionData
+  sectionData,
+  isCustomWebsite
 }) {
+  console.log('isCustomWebsite______', isCustomWebsite);
   const {
     layout: {
       containerWidth
@@ -3324,7 +3410,7 @@ function SubscribeToNewsletter({
     onFocus: () => {
       setIsValid(true);
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.btnContainer
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
@@ -3390,8 +3476,7 @@ const useTestimonialStyles = createUseStyles(theme => {
       color: theme?.palette?.font?.default,
       margin: '10px 0 40px 10px',
       overflow: 'hidden',
-      wordBreak: 'break-word',
-      // whiteSpace: 'nowrap',
+      whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     },
     sliderContainer: {
@@ -3431,8 +3516,16 @@ const useTestimonialStyles = createUseStyles(theme => {
     },
     userContainer: {
       display: 'flex',
+      gap: '15px',
       padding: '0 0 29px 48px'
     },
+    userImageContainer: {
+      width: '64px',
+      height: '64px',
+      position: 'relative',
+      // paddingBottom: '55px',
+      objectFit: 'cover'
+    },
     userImageDummy: {
       width: '64px',
       height: '64px',
@@ -3474,8 +3567,7 @@ const useTestimonialStyles = createUseStyles(theme => {
         color: theme?.palette?.font?.default,
         margin: '4px 0 12px 0',
         overflow: 'hidden',
-        // whiteSpace: 'nowrap',
-        wordBreak: 'break-word',
+        whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
       },
       userImageDummy: {
@@ -3502,6 +3594,10 @@ const useTestimonialStyles = createUseStyles(theme => {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
+      },
+      userImageContainer: {
+        width: '48px',
+        height: '48px'
       }
     }
   };
@@ -3560,12 +3656,22 @@ function Section$1({
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.userContainer
-  }, el?.cardUserImage?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("img", {
+  }, el?.cardUserImage?.metadata?.value ?
+  /*#__PURE__*/
+  // <img
+  //   ref={el?.cardUserImage?.refSetter}
+  //   className={classes.userImage}
+  //   src={el?.cardUserImage?.metadata?.value}
+  //   alt="userImg"
+  // />
+  React__default["default"].createElement("div", {
+    className: classes.userImageContainer
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImage,
     src: el?.cardUserImage?.metadata?.value,
     alt: "userImg"
-  }) : /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : /*#__PURE__*/React__default["default"].createElement("div", {
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImageDummy
   }), /*#__PURE__*/React__default["default"].createElement("h3", {
@@ -3708,14 +3814,16 @@ const useVideoStyles$1 = createUseStyles(theme => {
         isLoaded
       } = {}) => isLoaded ? 'block' : 'none'
     },
+    icon: {
+      zIndex: '999'
+    },
     imgContainer: {
       position: 'absolute',
       width: '100%',
       height: '100%',
       borderRadius: theme.shape.borderRadius.small,
-      backgroundImage: ({
-        imageUrl
-      } = {}) => `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
+      // backgroundImage: ({ imageUrl } = {}) =>
+      //   `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
       backgroundSize: 'cover',
       display: 'flex',
       justifyContent: 'center',
@@ -3758,9 +3866,12 @@ function VideoPlayer(props) {
   }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLoaded && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imgContainer
-  }, 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, {
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
+    src: imageUrl
+  }), 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,
+    className: classes?.icon,
     onClick: () => {
       setIsEnableed(true);
     }
@@ -4681,11 +4792,10 @@ function PhotoGallery({
       key: idx
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.singleCard
-    }, /*#__PURE__*/React__default["default"].createElement("img", {
-      ref: el?.cardImage?.refSetter,
-      className: classes?.carouselImage,
+    }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
       src: el?.cardImage?.metadata?.value,
-      alt: ""
+      ref: el?.cardImage?.refSetter,
+      className: classes?.carouselImage
     })));
   });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5131,9 +5241,11 @@ const useCourseStyles = createUseStyles(theme => {
     courseCardImg: {
       width: '100%',
       height: '200px',
-      backgroundSize: '100% 100%',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
+      position: 'relative',
+      borderTopLeftRadius: theme?.shape?.borderRadius?.regular,
+      borderTopRightRadius: theme?.shape?.borderRadius?.regular
+    },
+    courseCardImgThumbnail: {
       borderTopLeftRadius: theme?.shape?.borderRadius?.regular,
       borderTopRightRadius: theme?.shape?.borderRadius?.regular
     },
@@ -5328,13 +5440,11 @@ function CourseCard({
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.singleCard
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: card?.imageUrl ? {
-      backgroundImage: `url("${card?.imageUrl}")`
-    } : {
-      backgroundImage: `url("${defaultCardImg}")`
-    },
     className: classes.courseCardImg
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
+    src: card?.imageUrl ? card?.imageUrl : defaultCardImg,
+    className: classes.courseCardImgThumbnail
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardData
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardTags
@@ -5361,9 +5471,9 @@ function CourseCard({
     className: classes.courseCardPriceContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardPrice
-  }, '₹', card?.finalPrice), card?.price !== card?.finalPrice ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, '₹', card?.finalPrice), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardStrikePrice
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF') : null), /*#__PURE__*/React__default["default"].createElement("a", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF')), /*#__PURE__*/React__default["default"].createElement("a", {
     className: classes.coursesAnchorTag,
     href: isEdit ? null : card?.shareableLink
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5651,7 +5761,7 @@ const SingleSlide = ({
     className: classes.singleSlideContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imageContainer
-  }, /*#__PURE__*/React__default["default"].createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     ref: data?.image?.refSetter,
     className: classes.image,
     alt: "Hero Image",
@@ -5793,7 +5903,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     marginTop: '32px'
   },
   leftContainer: {
-    width: '65%'
+    width: '50%'
   },
   subtitle: {
     margin: '0 0 40px 0',
@@ -6098,7 +6208,7 @@ function FormEnquiry({
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
+  })), /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6138,6 +6248,7 @@ const useSectionStyles = createUseStyles(theme => ({
     }
   },
   contactContainer: {
+    width: '80%',
     margin: '0 auto',
     maxWidth: ({
       containerWidth
@@ -6188,10 +6299,16 @@ const useSectionStyles = createUseStyles(theme => ({
     display: 'flex',
     alignItems: 'flex-start',
     flexDirection: 'column',
-    width: '100%',
-    '& img': {
-      width: '80%'
-    }
+    width: '85%',
+    position: 'relative',
+    paddingBottom: '55%'
+    // '& img': {
+    //   width: '80%'
+    // }
+  },
+
+  telephoneImage: {
+    width: '80%'
   },
   rightContainer: {
     width: '50%',
@@ -6290,6 +6407,9 @@ const useSectionStyles = createUseStyles(theme => ({
     },
     error: {
       bottom: '-2px'
+    },
+    contactContainer: {
+      width: '97%'
     }
   }
 }));
@@ -6385,10 +6505,10 @@ function Contact({
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.addressContainer
-  }, /*#__PURE__*/React__default["default"].createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
+    className: classes?.telephoneImage,
     ref: nodeData?.image?.refSetter,
-    src: nodeData?.image?.metadata?.value,
-    alt: ""
+    src: nodeData?.image?.metadata?.value
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.rightContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6479,7 +6599,7 @@ function Contact({
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
+  })), /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6619,11 +6739,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     courseViewContainer: {
       width: '645px',
-      height: 'fit-content',
       backgroundColor: '#f4f9ff',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'start',
+      justifyContent: 'center',
       paddingTop: '20px',
       borderRadius: '10px'
     },
@@ -6671,10 +6790,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     courseDetailContent: {
       marginTop: '16px',
       fontSize: '16px',
+      lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme.palette.font.primary,
-      margin: '10px 0 20px',
-      whiteSpace: 'pre-wrap'
+      margin: '10px 0 20px'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
@@ -8433,22 +8552,28 @@ const TYPE_TO_COMPONENT_MAP = {
 const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
 const MemoisedSection = /*#__PURE__*/React.memo(({
   sectionData,
-  extraProps
+  extraProps,
+  isCustomWebsite
 }) => {
+  // console.log("isCustomWebsite______", isCustomWebsite)
   console.log('templatesectiondata', sectionData);
   const SectionComp = getCompToRender(sectionData.type);
   return /*#__PURE__*/React__default["default"].createElement(SectionComp, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite
   });
 });
 function SectionRenderer({
   sectionData,
-  extraProps
+  extraProps,
+  isCustomWebsite
 }) {
+  // console.log("isCustomWebsite______", isCustomWebsite)
   return /*#__PURE__*/React__default["default"].createElement(MemoisedSection, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite
   });
 }
 
@@ -8466,7 +8591,8 @@ function PageRenderer({
     footer,
     validations = {},
     _id,
-    isLandingPage = false
+    isLandingPage = false,
+    isCustomWebsite = false
   },
   isMobile = false,
   isLandingPages = false,
@@ -8501,6 +8627,7 @@ function PageRenderer({
     isTutorWebsite,
     extraProps,
     hideLogin,
+    isCustomWebsite,
     _id
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
   const Wrapper = SectionWrapper || React.Fragment;
@@ -8523,7 +8650,8 @@ function PageRenderer({
     key: sectionData.type + (sectionData._id || sectionIndex)
   }), /*#__PURE__*/React__default["default"].createElement(SectionRenderer, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React__default["default"].createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true