diy-template-components 0.2.31 → 0.2.32

package/build/index.es.js

@@ -1,12 +1,12 @@
-function ___$insertStyle(css) {
-    if (!css || typeof window === 'undefined') {
-        return;
-    }
-    const style = document.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.innerHTML = css;
-    document.head.appendChild(style);
-    return css;
+function ___$insertStyle(css) {
+    if (!css || !window) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
 }
 
 import React, { createContext, useContext, forwardRef, useRef, useEffect, useState, useMemo, useLayoutEffect, Suspense, memo, lazy, Fragment } from 'react';
@@ -18,17 +18,20 @@ import ReactDOMServer from 'react-dom/server';
 import { createTheming, createUseStyles as createUseStyles$1, useTheme as useTheme$1 } from 'react-jss';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
+  _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
+
   return _extends.apply(this, arguments);
 }
 
@@ -284,17 +287,21 @@ const alpha = {
   seventyPercent: 0.7,
   eightyPercent: 0.8
 };
+
 const getRGBFromHex = hex => {
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
   const b = parseInt(hex.slice(5, 7), 16);
   return [r, g, b];
 };
+
 const hexToRgbA = (hex, alpha = null) => {
   const values = getRGBFromHex(hex);
+
   if (alpha !== null) {
     values.push(alpha);
   }
+
   return `rgba(${values.join(',')})`;
 };
 const colorMixer = (hex1, weightage = 1, hex2 = colors.white) => {
@@ -434,24 +441,29 @@ function useLinkBuilder(data) {
     basePath,
     isMasterTemplate
   } = useContext(PageContext);
+
   if (isEdit || !data.isLink) {
     return null;
   }
+
   if (data?.isExistingLink === false) {
     return data.link;
   }
+
   if (data?.isExternal) {
     return data.link;
   }
+
   if (!isPreview) {
     const link = data.link === '/' ? '' : '/' + data.link;
     return basePath ? `//${basePath}${link}` : null;
-  }
+  } // courses in preview: special case
+
 
-  // courses in preview: special case
   if (data.link === 'courses') {
     return `//${basePath}/courses`;
   }
+
   const {
     pageId
   } = navList.find(el => el.slug === data?.link) || {};
@@ -627,12 +639,14 @@ var calendar$1 = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%
 var video = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2219%22%20viewBox%3D%220%200%2018%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.8625%205.1275C15.555%204.9625%2014.91%204.79%2014.0325%205.405L12.93%206.185C12.8475%203.8525%2011.835%202.9375%209.375%202.9375H4.875C2.31%202.9375%201.3125%203.935%201.3125%206.5V12.5C1.3125%2014.225%202.25%2016.0625%204.875%2016.0625H9.375C11.835%2016.0625%2012.8475%2015.1475%2012.93%2012.815L14.0325%2013.595C14.4975%2013.925%2014.9025%2014.03%2015.225%2014.03C15.5025%2014.03%2015.72%2013.9475%2015.8625%2013.8725C16.17%2013.715%2016.6875%2013.2875%2016.6875%2012.215V6.785C16.6875%205.7125%2016.17%205.285%2015.8625%205.1275ZM8.25%209.035C7.4775%209.035%206.84%208.405%206.84%207.625C6.84%206.845%207.4775%206.215%208.25%206.215C9.0225%206.215%209.66%206.845%209.66%207.625C9.66%208.405%209.0225%209.035%208.25%209.035Z%22%20fill%3D%22%23589DF5%22%2F%3E%3C%2Fsvg%3E";
 
 /** @returns {import('./types').IconData} */
+
 const getConfiguredIcon1 = url => ({
   url,
   svgChildrenConfigs: []
 });
-
 /** @returns {import('./types').IconData} */
+
+
 const getConfiguredIcon2 = (url, stroke, fill) => ({
   url,
   svgChildrenConfigs: [{
@@ -641,6 +655,7 @@ const getConfiguredIcon2 = (url, stroke, fill) => ({
     fill
   }]
 });
+
 const icons = {
   'Live class': getConfiguredIcon2(liveTv, false, true),
   'Recorded videos': getConfiguredIcon2(liveTv2, false, true),
@@ -673,51 +688,41 @@ const icons = {
   'Video Play': getConfiguredIcon2(videoPlay, false, true),
   Quote: getConfiguredIcon2(quote, false, true),
   // Stock
-
   'Stock Growth': getConfiguredIcon2(stockGrowth, false, true),
   Money: getConfiguredIcon2(money, false, true),
   Split: getConfiguredIcon2(split, false, true),
   Chart: getConfiguredIcon2(chart, false, true),
   // Personality Development
-
   Leaders: getConfiguredIcon2(leaders, false, true),
   Women: getConfiguredIcon2(women, false, true),
   Program: getConfiguredIcon2(program, false, true),
   // Photography
-
   'Video Editing': getConfiguredIcon2(videoEditing, false, true),
   Editing: getConfiguredIcon2(editing, false, true),
   Camera: getConfiguredIcon2(camera, false, true),
   Sessions: getConfiguredIcon2(sessions, false, true),
   // Computer
-
   'Regular Batches': getConfiguredIcon2(regularBatches, false, true),
   'Alternate Batches': getConfiguredIcon2(alternateBatches, false, true),
   'Weekend Batches': getConfiguredIcon2(weekendBatches, false, true),
   // Life Coach
-
   Girl: getConfiguredIcon2(girl, false, true),
   Smile: getConfiguredIcon2(smile, false, true),
   Relationships: getConfiguredIcon2(relationships, false, true),
   // Music
-
   Vocal: getConfiguredIcon2(vocal, false, true),
   Instrument: getConfiguredIcon2(instrument, false, true),
   Music: getConfiguredIcon2(music, false, true),
   // Fitness
-
   Workout: getConfiguredIcon2(workout, false, true),
   Barbell: getConfiguredIcon2(barbell, false, true),
   Trainer: getConfiguredIcon2(trainer, false, true),
   Report: getConfiguredIcon2(report, false, true),
   // Govt Exam
-
   'Govt Exam': getConfiguredIcon2(govtExam, false, true),
   // IIT JEE
-
   College: getConfiguredIcon2(college, false, true),
   // Others
-
   Teachers: getConfiguredIcon2(teachers, false, true),
   Learning: getConfiguredIcon2(learning, false, true),
   Success: getConfiguredIcon2(success, false, true),
@@ -729,9 +734,12 @@ const icons = {
   Video: getConfiguredIcon2(video, false, true)
 };
 
-const someMethod1 = ( /** @type {import('./types').IconData["svgChildrenConfigs"]} */svgChildrenConfigs, color, hoverColor) => {
+const someMethod1 = (
+/** @type {import('./types').IconData["svgChildrenConfigs"]} */
+svgChildrenConfigs, color, hoverColor) => {
   /** @type {{ [k:string]:React.CSSProperties; }} */
   const obj = {};
+
   for (const svgChildConfig of svgChildrenConfigs) {
     if (color) obj['& ' + svgChildConfig.selector] = {
       fill: svgChildConfig.fill ? color : undefined,
@@ -742,8 +750,10 @@ const someMethod1 = ( /** @type {import('./types').IconData["svgChildrenConfigs"
       stroke: svgChildConfig.stroke ? hoverColor : undefined
     };
   }
+
   return obj;
 };
+
 const useStyles$1 = createUseStyles$1({
   '@keyframes slideRight': {
     to: {
@@ -787,8 +797,8 @@ const defaultSvgState = {
   childrenConfigs: [],
   attributes: defaultAttributes
 };
-
 /** @type {import('./props.type').IconProps} */
+
 const iconDefaultProps = {
   name: undefined,
   width: 'auto',
@@ -798,8 +808,8 @@ const iconDefaultProps = {
   opacity: undefined,
   className: undefined
 };
-
 /** @type {import("react").FC<import('./props.type').IconProps>} */
+
 const Icon = ({
   name,
   width,
@@ -818,8 +828,10 @@ const Icon = ({
   }, []);
   /** */
 
-  const rootRef = useRef( /** @type {HTMLElement} */null);
-  // this ref is used to cancel the fetch promise success callback in case name prop changed
+  const rootRef = useRef(
+  /** @type {HTMLElement} */
+  null); // this ref is used to cancel the fetch promise success callback in case name prop changed
+
   const currentName = useRef(name);
   const [svgState, setSvgState] = useState(defaultSvgState);
   const styles = useStyles$1({
@@ -830,41 +842,46 @@ const Icon = ({
     opacity,
     hoverColor
   });
+
   const _className = useMemo(() => `${styles.root} ${className || ''}`, [className]);
+
   useEffect(() => {
     // reset
     currentName.current = name;
     setSvgState(defaultSvgState);
     const icon = icons[name];
+
     if (icon) {
       /**
        * retrieve from cache
        * @type {Promise<string>}
        */
       let svgProm = Icon.getCachedSvgPromise(name);
+
       if (!svgProm) {
         svgProm = fetch(icon.url).then(r => r.text()).catch(() => {
           // unset in cache
           Icon.setCachedSvgPromise(name, undefined);
           return null;
-        });
-        //save in cache
+        }); //save in cache
+
         Icon.setCachedSvgPromise(name, svgProm);
       }
+
       svgProm.then(svg => {
         if (svg && isMounted.current && name === currentName.current) {
           const div = document.createElement('div');
-          div.innerHTML = svg;
+          div.innerHTML = svg; // set the new attributes
 
-          // set the new attributes
           const newAttributes = {};
+
           for (const ob of div.firstElementChild.attributes) {
             const camelCased = ob.name.replace(/(-|:)([a-z])/g, g => g[1].toUpperCase());
             newAttributes[camelCased] = ob.value;
-          }
-
-          // setting the state in last.
+          } // setting the state in last.
           // Set state calls are called immediately inside asynchronous operations, timeouts, and intervals.
+
+
           setSvgState({
             innerHtml: div.firstElementChild.innerHTML,
             childrenConfigs: icon.svgChildrenConfigs,
@@ -884,11 +901,14 @@ const Icon = ({
     onClick: onClick
   }));
 };
-Icon.defaultProps = iconDefaultProps;
 
+Icon.defaultProps = iconDefaultProps;
 /** static properties for caching */
+
 Icon.cacheStore = {};
+
 Icon.getCachedSvgPromise = name => Icon.cacheStore[name];
+
 Icon.setCachedSvgPromise = (name, prom) => Icon.cacheStore[name] = prom;
 
 const useDropdownStyles = createUseStyles(theme => ({
@@ -1000,6 +1020,7 @@ function OptionList({
   isLandingPages
 }) {
   useContext(PageContext);
+
   const tabsDataModifier = () => {
     return optionsData?.map(dt => {
       return {
@@ -1011,6 +1032,7 @@ function OptionList({
       };
     });
   };
+
   const tabData = tabsDataModifier();
   const classes = useSectionStyles$a();
   return /*#__PURE__*/React.createElement("div", {
@@ -1099,24 +1121,31 @@ function DesktopHeader({
   const classes = useSectionStyles$a({
     isFixed
   });
+
   const optionDataFn = () => {
     let optionsArr = navData;
     let optionsData = [];
+
     if (optionsArr?.length > 5) {
       optionsData = optionsArr?.slice(0, 4);
     } else {
       optionsData = optionsArr;
     }
+
     return optionsData;
   };
+
   const moreContentFn = () => {
     let optionsArr = navData;
     let moreContent = [];
+
     if (optionsArr?.length > 5) {
       moreContent = optionsArr?.slice(4);
     }
+
     return moreContent;
   };
+
   return /*#__PURE__*/React.createElement("nav", {
     className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
@@ -1174,6 +1203,7 @@ function MobileHeader({
   const navEl = useRef(null);
   useLayoutEffect(() => {
     const body = navEl?.current?.ownerDocument?.body;
+
     if (sideMenu) {
       body?.setAttribute('style', 'overflow: hidden;');
     } else {
@@ -1183,6 +1213,7 @@ function MobileHeader({
   let iosUrl = null;
   let androidUrl = null;
   let downloadLink = null;
+
   if (isTutorWebsite) {
     if (header?.iosUrl) {
       iosUrl = /*#__PURE__*/React.createElement(Button, {
@@ -1205,6 +1236,7 @@ function MobileHeader({
         }
       });
     }
+
     if (header?.androidURL) {
       androidUrl = /*#__PURE__*/React.createElement(Button, {
         data: {
@@ -1225,6 +1257,7 @@ function MobileHeader({
         }
       });
     }
+
     if (iosUrl && androidUrl) {
       downloadLink = /*#__PURE__*/React.createElement("div", null, iosUrl, androidUrl);
     } else if (header?.iosUrl) {
@@ -1274,6 +1307,7 @@ function MobileHeader({
       downloadLink = null;
     }
   }
+
   return /*#__PURE__*/React.createElement("nav", {
     ref: navEl,
     className: classes.section
@@ -1330,9 +1364,11 @@ function Header({
     isMobile,
     isTutorWebsite
   } = useContext(PageContext);
+
   const filterHiddenNavs = () => {
     return data?.navs?.filter(dt => !dt.isHiddenNav);
   };
+
   return isMobile ? /*#__PURE__*/React.createElement(MobileHeader, {
     navData: filterHiddenNavs(),
     header: data,
@@ -1360,9 +1396,6 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       boxSizing: 'border-box'
     }
   },
-  sectionNoBranding: {
-    paddingBottom: '0px'
-  },
   upperContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -1371,9 +1404,6 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     borderBottom: '1px solid #E1EAF6',
     alignItems: 'flex-start'
   },
-  upperContainerNoBranding: {
-    borderBottom: '0px'
-  },
   upperContainerItem1: {
     width: '33%',
     display: 'flex',
@@ -1521,9 +1551,9 @@ function Footer({
   const classes = useSectionStyles$9();
   console.log(data, 'this is data');
   return /*#__PURE__*/React.createElement("footer", {
-    className: data.metadata.isCpBranding ? `${classes.section}` : `${classes.section} ${classes.sectionNoBranding}`
+    className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
-    className: data.metadata.isCpBranding ? `${classes.upperContainer}` : `${classes.upperContainer} ${classes.upperContainerNoBranding}`
+    className: classes.upperContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.upperContainerItem1
   }, /*#__PURE__*/React.createElement("img", {
@@ -1694,6 +1724,7 @@ const rustTheme = {
   light: colors.lightRust,
   lightest: colors.lightestRust
 };
+
 const generateThemePalette = themeColors => ({
   primary: themeColors,
   background: {
@@ -1716,6 +1747,7 @@ const generateThemePalette = themeColors => ({
     tertiary: colors.blueGrey
   }
 });
+
 const bluePalette = generateThemePalette(blueTheme);
 const redPalette = generateThemePalette(redTheme);
 const orangePalette = generateThemePalette(orangeTheme);
@@ -1756,7 +1788,9 @@ const fontComponents = {
   'Merriweather Sans': MerriweatherSans,
   'Arima Madurai': ArimaMadurai
 };
+
 const getFontComponent = font => fontComponents[font] || (() => null);
+
 function FontSeeder({
   fontFamily
 }) {
@@ -1766,30 +1800,37 @@ function FontSeeder({
 const useRubikFont = createUseStyles$1({
   '@import': `url('https://fonts.googleapis.com/css2?family=Lato&family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap')`
 });
+
 function Rubik() {
   // to import "Rubik" font css
   useRubikFont();
   return null;
 }
+
 const useIbmPlexSansFont = createUseStyles$1({
   '@import': 'url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap)'
 });
+
 function IbmPlexSans() {
   // to import "Ibm Plex Sans" font css
   useIbmPlexSansFont();
   return null;
 }
+
 const useMerriweatherSansFont = createUseStyles$1({
   '@import': 'url(https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap)'
 });
+
 function MerriweatherSans() {
   // to import "Merriweather Sans" font css
   useMerriweatherSansFont();
   return null;
 }
+
 const useArimaMaduraiFont = createUseStyles$1({
   '@import': 'url(https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@400;500;700&display=swap)'
 });
+
 function ArimaMadurai() {
   // to import "Arima Madurai" font css
   useArimaMaduraiFont();
@@ -1820,7 +1861,9 @@ const TYPE_TO_COMPONENT_MAP$1 = {
   TILES_SECTION: /*#__PURE__*/lazy(() => Promise.resolve().then(function () { return index$1; })),
   EMAIL_DRIP_MARKET: /*#__PURE__*/lazy(() => Promise.resolve().then(function () { return index; }))
 };
+
 const getCompToRender$1 = type => TYPE_TO_COMPONENT_MAP$1[type] || (() => null);
+
 const MemoisedSection$1 = /*#__PURE__*/memo(({
   sectionData,
   extraProps
@@ -1837,7 +1880,9 @@ function SectionRenderer$1({
   extraProps
 }) {
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null /*GIF maybe*/
+    fallback: null
+    /*GIF maybe*/
+
   }, /*#__PURE__*/React.createElement(MemoisedSection$1, {
     sectionData: sectionData,
     extraProps: extraProps
@@ -1885,7 +1930,8 @@ function PageRenderer$1({
   templateId,
   isTutorWebsite = false,
   extraProps,
-  hideLogin
+  hideLogin,
+  isCustomWebsite
 }) {
   const theme = useMemo(() => getTheme(color, font), [color, font]);
   const navList = header?.navs;
@@ -1905,9 +1951,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 || Fragment;
+  const Wrapper = SectionWrapper || Fragment; // console.log("CONTEXT______", context)
+
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, /*#__PURE__*/React.createElement(PageContext.Provider, {
@@ -1984,6 +2032,11 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     margin: '0 auto',
     maxWidth: '100%'
   },
+  imageContainer: {
+    width: '100%',
+    position: 'relative',
+    height: '90%'
+  },
   subTitleHeading: {
     marginBottom: '8px',
     fontSize: '16px',
@@ -2040,6 +2093,10 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     linkButton: {
       padding: '12px 16px'
+    },
+    imageContainer: {
+      height: 'undefined',
+      paddingBottom: '80%'
     }
   }
 }));
@@ -2121,18 +2178,23 @@ const getArrowRotationAngle = props => {
   switch (true) {
     case props.left:
       return 180;
+
     case props.up:
       return 270;
+
     case props.down:
       return 90;
+
     case props.right:
     default:
       return 0;
   }
 };
+
 const sizeHandler = ({
   size
 }) => size === 'small' ? '32px' : '48px';
+
 const useArrowButtonStyles = createUseStyles(theme => ({
   arrowButtonContainer: {
     cursor: 'pointer',
@@ -2172,6 +2234,7 @@ function dotsToShow(i, n) {
   const leftToShow = i < elementsToShow / 2;
   const rightToShow = n - i - 1 < elementsToShow / 2;
   let leftCount, rightCount;
+
   if (leftToShow) {
     leftCount = i;
     rightCount = elementsToShow - i - 1;
@@ -2182,11 +2245,13 @@ function dotsToShow(i, n) {
     leftCount = 2;
     rightCount = 2;
   }
+
   return {
     leftCount,
     rightCount
   };
 }
+
 function Carousel({
   settings,
   children,
@@ -2240,12 +2305,15 @@ function Carousel({
     ...settings,
     className: settings?.className ? settings?.className + ' ' + classes.sliderClass : classes.sliderClass
   };
+
   const nextClick = () => {
     sliderRef.current.slickNext();
   };
+
   const previousClick = () => {
     sliderRef.current.slickPrev();
   };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, _extends({
     ref: sliderRef
   }, sliderSettings), children), hideArrow || isMobile ? null : /*#__PURE__*/React.createElement("div", {
@@ -2261,6 +2329,41 @@ function Carousel({
   })));
 }
 
+const NextImageRenderer = ({
+  src,
+  ...props
+}) => {
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
+  let {
+    refSetter,
+    className
+  } = props;
+
+  if (isCustomWebsite) {
+    return /*#__PURE__*/React.createElement(require.resolve('next/image').default, {
+      src: src,
+      // height: "640",
+      // width: "959",
+      layout: 'fill',
+      ref: {
+        refSetter
+      },
+      className: {
+        className
+      },
+      ...props
+    });
+  } else {
+    return /*#__PURE__*/React.createElement("img", {
+      ref: refSetter,
+      className: className,
+      src: src
+    });
+  }
+};
+
 function Section$4({
   nodeData
 }) {
@@ -2299,17 +2402,20 @@ function Section$4({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
-  })), /*#__PURE__*/React.createElement("img", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes?.imageContainer
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     ref: nodeData?.image?.refSetter,
     className: classes.sideBannerImage,
     src: nodeData.image.metadata.value
-  })));
+  }))));
 }
+
 function BannerCarouselRight({
   sectionData
 }) {
@@ -2335,7 +2441,9 @@ 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 */
+
   })))));
 }
 
@@ -2542,9 +2650,11 @@ function List({
     containerWidth
   });
   const [nodeData] = sectionData.components;
+
   const getNumber = val => {
     return val.toString().length == 1 ? '0' + val : val;
   };
+
   return /*#__PURE__*/React.createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
@@ -2614,9 +2724,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',
@@ -2630,19 +2740,33 @@ 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,
@@ -2652,7 +2776,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
   },
   heading: {
     margin: '0',
-    fontSize: '72px',
+    fontSize: '62px',
     color: theme?.palette?.font?.invertedDefault,
     wordBreak: 'break-word'
   },
@@ -2674,7 +2798,9 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     },
     contentContainer: {
       display: 'flex',
-      flexFlow: 'column-reverse'
+      flexFlow: 'column-reverse',
+      justifyContent: 'center',
+      padding: '0px'
     },
     textContainer: {
       padding: '20px'
@@ -2684,12 +2810,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: {
@@ -2701,6 +2834,7 @@ 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", {
@@ -2729,16 +2863,24 @@ const Section$3 = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
-  })))));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: classes?.centerBgImageContainer
+  }, /*#__PURE__*/React.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
@@ -2752,7 +2894,10 @@ function BannerCarouselCenter({
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$3, {
     nodeData: node,
-    key: idx /* or some other unique property */
+    isCustomWebsite: isCustomWebsite,
+    key: idx
+    /* or some other unique property */
+
   }))));
 }
 
@@ -2793,7 +2938,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}`,
@@ -2884,10 +3032,10 @@ function Section$2({
     className: classes.imageContainerDiv
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.imageContainer
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
+    src: nodeData.image.metadata.value,
     ref: nodeData?.image?.refSetter,
-    className: classes.sideBannerImage,
-    src: nodeData.image.metadata.value
+    className: classes.sideBannerImage
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.imageBorder
   }))), /*#__PURE__*/React.createElement("div", {
@@ -2912,16 +3060,19 @@ function Section$2({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
   })));
 }
+
 function BannerCarouselLeft({
-  sectionData
+  sectionData,
+  isCustomWebsite
 }) {
+  console.log('isCustomWebsite______', isCustomWebsite);
   const {
     layout: {
       containerWidth
@@ -2940,7 +3091,9 @@ 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 */
+
   })))));
 }
 
@@ -3095,6 +3248,7 @@ async function postApiCall(baseURLs, data) {
         },
         data
       });
+
       if (res) {
         return res.data;
       }
@@ -3119,6 +3273,7 @@ async function postApiCallForm(baseURLs, data, extraProps) {
         if (extraProps && extraProps.formSubmitSuccess) {
           extraProps.formSubmitSuccess();
         }
+
         return res.data;
       });
     } catch (err) {
@@ -3231,6 +3386,7 @@ function SubscribeToNewsletter({
   const [inputVal, setInputVal] = useState(formInitialValue);
   let [isValid, setIsValid] = useState(true);
   let [btnDisabled, setBtnDisabled] = useState(false);
+
   const handleSubmit = () => {
     let data = {
       sectionId: sectionData.sectionId,
@@ -3246,9 +3402,11 @@ function SubscribeToNewsletter({
     setBtnDisabled(true);
     setInputVal(formInitialValue);
   };
+
   const checkValidity = () => {
     if (validations?.[nodeData?.inputField?.metadata?.validationType]?.length) {
       let regex = new RegExp(validations[nodeData?.inputField?.metadata?.validationType]);
+
       if (regex?.test(inputVal)) {
         setIsValid(true);
       } else {
@@ -3256,6 +3414,7 @@ function SubscribeToNewsletter({
       }
     }
   };
+
   useEffect(() => {
     if (!isValid) {
       setBtnDisabled(true);
@@ -3309,7 +3468,7 @@ function SubscribeToNewsletter({
     onFocus: () => {
       setIsValid(true);
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.btnContainer
   }, /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
@@ -3375,8 +3534,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: {
@@ -3416,8 +3574,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',
@@ -3459,8 +3625,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: {
@@ -3487,6 +3652,10 @@ const useTestimonialStyles = createUseStyles(theme => {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
+      },
+      userImageContainer: {
+        width: '48px',
+        height: '48px'
       }
     }
   };
@@ -3545,12 +3714,22 @@ function Section$1({
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.userContainer
-  }, el?.cardUserImage?.metadata?.value ? /*#__PURE__*/React.createElement("img", {
+  }, el?.cardUserImage?.metadata?.value ?
+  /*#__PURE__*/
+  // <img
+  //   ref={el?.cardUserImage?.refSetter}
+  //   className={classes.userImage}
+  //   src={el?.cardUserImage?.metadata?.value}
+  //   alt="userImg"
+  // />
+  React.createElement("div", {
+    className: classes.userImageContainer
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImage,
     src: el?.cardUserImage?.metadata?.value,
     alt: "userImg"
-  }) : /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React.createElement("div", {
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImageDummy
   }), /*#__PURE__*/React.createElement("h3", {
@@ -3585,6 +3764,7 @@ function Section$1({
     className: classes.contentRow
   }, carouselContent))));
 }
+
 function Testimonials({
   sectionData
 }) {
@@ -3649,6 +3829,7 @@ const loaderStyle = theme => ({
 });
 
 const useStyles = createUseStyles$1(loaderStyle);
+
 function Loader({
   texts
 }) {
@@ -3660,11 +3841,13 @@ function Loader({
   useEffect(() => {
     if (texts && texts.length) {
       let textID = '';
+
       for (let i = 0; i < texts.length; i++) {
         textID = setTimeout(() => {
           setLoaderText(texts[i]);
         }, 2000 * i);
       }
+
       return () => {
         clearTimeout(textID);
       };
@@ -3693,14 +3876,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',
@@ -3732,20 +3917,26 @@ function VideoPlayer(props) {
     imageUrl: imageUrl
   });
   const theme = useTheme();
+
   function getId(url) {
     var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
     var match = url?.match(regExp);
+
     if (match?.[2].length == 11) {
       return 'https://www.youtube.com/embed/' + match[2];
     } else {
       return url;
     }
   }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoaded && /*#__PURE__*/React.createElement("div", {
     className: classes.imgContainer
-  }, isEnabled ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, props.onlyThumbnail ? null : /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
+    src: imageUrl
+  }), 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,
+    className: classes?.icon,
     onClick: () => {
       setIsEnableed(true);
     }
@@ -4583,8 +4774,8 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       width: 'calc(100% - 2px)',
       position: 'relative',
       paddingBottom: '59.83%' // keeping aspect ratio 585x350
-    },
 
+    },
     contentRow: {
       display: 'grid',
       gridTemplateColumns: ({
@@ -4666,11 +4857,10 @@ function PhotoGallery({
       key: idx
     }, /*#__PURE__*/React.createElement("div", {
       className: classes.singleCard
-    }, /*#__PURE__*/React.createElement("img", {
-      ref: el?.cardImage?.refSetter,
-      className: classes?.carouselImage,
+    }, /*#__PURE__*/React.createElement(NextImageRenderer, {
       src: el?.cardImage?.metadata?.value,
-      alt: ""
+      ref: el?.cardImage?.refSetter,
+      className: classes?.carouselImage
     })));
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -4843,6 +5033,7 @@ const FAQListing = ({
     isSelected: selectedIndex === index
   })))));
 };
+
 const Accordion = ({
   item,
   isSelected,
@@ -5116,9 +5307,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
     },
@@ -5127,10 +5320,9 @@ const useCourseStyles = createUseStyles(theme => {
       flexGrow: 1,
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'space-between'
-      //alignItems: 'center',
-    },
+      justifyContent: 'space-between' //alignItems: 'center',
 
+    },
     courseCardTags: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -5156,12 +5348,11 @@ const useCourseStyles = createUseStyles(theme => {
       wordBreak: 'break-word',
       padding: '12px 0px',
       textAlign: 'left',
-      display: 'inline-block'
-      // overflow: 'hidden',
+      display: 'inline-block' // overflow: 'hidden',
       // whiteSpace: 'nowrap',
       // textOverflow: 'ellipsis'
-    },
 
+    },
     courseCardDiscount: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -5243,8 +5434,7 @@ const useCourseStyles = createUseStyles(theme => {
       }
     },
     '@media (max-width: 768px)': {
-      coursesContainer: {
-        //background: theme?.palette?.background?.primary
+      coursesContainer: {//background: theme?.palette?.background?.primary
       },
       coursesCardAndText: {
         padding: '70px 30px'
@@ -5276,6 +5466,7 @@ async function getCourseList(baseURLs, hashToken) {
   if (!hashToken) {
     throw 'Missing hash token';
   }
+
   const res = await axios({
     method: 'get',
     baseURL: baseURLs?.API_COURSE_URL,
@@ -5287,6 +5478,7 @@ async function getCourseList(baseURLs, hashToken) {
       requiredFilters: '[10]'
     }
   });
+
   if (res) {
     return res.data;
   }
@@ -5298,6 +5490,7 @@ function getShortenedSubstring(name, length, allowDots = true) {
   if (name) {
     return name.length < length ? name : `${name.substr(0, length)}${allowDots && '...'}`;
   }
+
   return '';
 }
 
@@ -5313,13 +5506,11 @@ function CourseCard({
   return /*#__PURE__*/React.createElement("div", {
     className: classes.singleCard
   }, /*#__PURE__*/React.createElement("div", {
-    style: card?.imageUrl ? {
-      backgroundImage: `url("${card?.imageUrl}")`
-    } : {
-      backgroundImage: `url("${defaultCardImg}")`
-    },
     className: classes.courseCardImg
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
+    src: card?.imageUrl ? card?.imageUrl : defaultCardImg,
+    className: classes.courseCardImgThumbnail
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardData
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardTags
@@ -5346,9 +5537,9 @@ function CourseCard({
     className: classes.courseCardPriceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardPrice
-  }, '₹', card?.finalPrice), card?.price !== card?.finalPrice ? /*#__PURE__*/React.createElement("div", {
+  }, '₹', card?.finalPrice), /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardStrikePrice
-  }, /*#__PURE__*/React.createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF') : null), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF')), /*#__PURE__*/React.createElement("a", {
     className: classes.coursesAnchorTag,
     href: isEdit ? null : card?.shareableLink
   }, /*#__PURE__*/React.createElement("div", {
@@ -5377,11 +5568,13 @@ function courses({
     containerWidth
   });
   const [nodeData] = sectionData?.components;
+
   const handleApiCall = () => {
     if (baseURLs) {
       getCourseList(baseURLs, hashToken).then(response => {
         const placeholders = nodeData?.cardCarousel?.metadata?.placeholders;
         const coursesData = response?.data?.coursesData;
+
         if (coursesData && coursesData.length) {
           setCardList(response?.data?.coursesData);
           setShowShimmer(false);
@@ -5392,12 +5585,12 @@ function courses({
               setShowShimmer(false);
               setFallbackImages(placeholders);
             }
-          }
-          // For User Website & Draft Preview: If no data found, hide section.
+          } // For User Website & Draft Preview: If no data found, hide section.
           else setErrored(true);
         }
       }).catch(err => {
         const errMsg = err?.response?.data?.data?.message;
+
         if (errMsg === 'NOT_FOUND') {
           if (nodeData?.cardCarousel?.metadata?.placeholders?.length && isEdit) {
             setShowShimmer(false);
@@ -5409,16 +5602,16 @@ function courses({
       });
     }
   };
+
   useEffect(() => {
-    const placeholders = nodeData?.cardCarousel?.metadata?.placeholders;
-    // For Master template Preview: Show placeholder images. If placeholder doesn't come from backend, show shimmer.
+    const placeholders = nodeData?.cardCarousel?.metadata?.placeholders; // For Master template Preview: Show placeholder images. If placeholder doesn't come from backend, show shimmer.
+
     if (isMasterTemplate) {
       if (placeholders && placeholders.length) {
         setShowShimmer(false);
         setFallbackImages(placeholders);
       }
-    }
-    // other
+    } // other
     else {
       handleApiCall();
     }
@@ -5483,6 +5676,7 @@ function courses({
     });
   })))));
 }
+
 function SimpleCardsContainer({
   children,
   classes
@@ -5636,7 +5830,7 @@ const SingleSlide = ({
     className: classes.singleSlideContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.imageContainer
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     ref: data?.image?.refSetter,
     className: classes.image,
     alt: "Hero Image",
@@ -5778,7 +5972,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     marginTop: '32px'
   },
   leftContainer: {
-    width: '65%'
+    width: '50%'
   },
   subtitle: {
     margin: '0 0 40px 0',
@@ -5898,6 +6092,7 @@ function FormEnquiry({
       setBtnDisabled(true);
     }
   }, [validData]);
+
   const handleSubmit = () => {
     let data = {
       sectionId: sectionData?._id || null,
@@ -5908,22 +6103,23 @@ function FormEnquiry({
     setBtnDisabled(true);
     setInputVal(formInitialValue);
   };
+
   const checkValidity = (regexField, fieldname, fieldValidity) => {
     if (validations?.[regexField]?.length) {
       let regex = new RegExp(validations[regexField]);
+
       if (regex?.test(inputVal[fieldname])) {
-        setValidData({
-          ...validData,
+        setValidData({ ...validData,
           [fieldValidity]: 1
         });
       } else {
-        setValidData({
-          ...validData,
+        setValidData({ ...validData,
           [fieldValidity]: 0
         });
       }
     }
   };
+
   return /*#__PURE__*/React.createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
@@ -6003,8 +6199,7 @@ function FormEnquiry({
     isValid: validData.nameValid,
     inputType: 'input',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         name: e.target.value
       });
     },
@@ -6012,8 +6207,7 @@ function FormEnquiry({
       checkValidity(nodeData?.nameField?.metadata?.validationType, 'name', 'nameValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         nameValid: 1
       });
     }
@@ -6025,8 +6219,7 @@ function FormEnquiry({
     isValid: validData.phoneValid,
     inputType: 'input',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         phone: e.target.value
       });
     },
@@ -6034,8 +6227,7 @@ function FormEnquiry({
       checkValidity(nodeData?.phoneField?.metadata?.validationType, 'phone', 'phoneValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         phoneValid: 1
       });
     }
@@ -6047,8 +6239,7 @@ function FormEnquiry({
     isValid: validData.emailValid,
     inputType: 'input',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         email: e.target.value
       });
     },
@@ -6056,8 +6247,7 @@ function FormEnquiry({
       checkValidity(nodeData?.emailField?.metadata?.validationType, 'email', 'emailValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         emailValid: 1
       });
     }
@@ -6069,8 +6259,7 @@ function FormEnquiry({
     isValid: validData.messageValid,
     inputType: 'textarea',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         message: e.target.value
       });
     },
@@ -6078,12 +6267,11 @@ function FormEnquiry({
       checkValidity(nodeData?.messageField?.metadata?.validationType, 'message', 'messageValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6123,6 +6311,7 @@ const useSectionStyles = createUseStyles(theme => ({
     }
   },
   contactContainer: {
+    width: '80%',
     margin: '0 auto',
     maxWidth: ({
       containerWidth
@@ -6173,10 +6362,15 @@ 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%',
@@ -6275,6 +6469,9 @@ const useSectionStyles = createUseStyles(theme => ({
     },
     error: {
       bottom: '-2px'
+    },
+    contactContainer: {
+      width: '97%'
     }
   }
 }));
@@ -6310,6 +6507,7 @@ function Contact({
     phoneValid: 1,
     messageValid: 1
   });
+
   const handleSubmit = () => {
     const data = {
       sectionId: sectionData?._id || null,
@@ -6320,6 +6518,7 @@ function Contact({
     setBtnDisabled(true);
     setInputVal(formInitialValue);
   };
+
   useEffect(() => {
     if (validData?.nameValid && validData?.emailValid && validData?.phoneValid && validData?.messageValid) {
       setBtnDisabled(false);
@@ -6327,22 +6526,23 @@ function Contact({
       setBtnDisabled(true);
     }
   }, [validData]);
+
   const checkValidity = (regexField, fieldname, fieldValidity) => {
     if (validations?.[regexField]?.length) {
       let regex = new RegExp(validations[regexField]);
+
       if (regex?.test(inputVal[fieldname])) {
-        setValidData({
-          ...validData,
+        setValidData({ ...validData,
           [fieldValidity]: 1
         });
       } else {
-        setValidData({
-          ...validData,
+        setValidData({ ...validData,
           [fieldValidity]: 0
         });
       }
     }
   };
+
   return /*#__PURE__*/React.createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
@@ -6370,10 +6570,10 @@ function Contact({
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.addressContainer
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
+    className: classes?.telephoneImage,
     ref: nodeData?.image?.refSetter,
-    src: nodeData?.image?.metadata?.value,
-    alt: ""
+    src: nodeData?.image?.metadata?.value
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.rightContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -6384,8 +6584,7 @@ function Contact({
     isValid: validData.nameValid,
     inputType: 'input',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         name: e.target.value
       });
     },
@@ -6393,8 +6592,7 @@ function Contact({
       checkValidity(nodeData?.nameField?.metadata?.validationType, 'name', 'nameValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         nameValid: 1
       });
     }
@@ -6406,8 +6604,7 @@ function Contact({
     isValid: validData.phoneValid,
     inputType: 'input',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         phone: e.target.value
       });
     },
@@ -6415,8 +6612,7 @@ function Contact({
       checkValidity(nodeData?.phoneField?.metadata?.validationType, 'phone', 'phoneValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         phoneValid: 1
       });
     }
@@ -6428,8 +6624,7 @@ function Contact({
     isValid: validData.emailValid,
     inputType: 'input',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         email: e.target.value
       });
     },
@@ -6437,8 +6632,7 @@ function Contact({
       checkValidity(nodeData?.emailField?.metadata?.validationType, 'email', 'emailValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         emailValid: 1
       });
     }
@@ -6450,8 +6644,7 @@ function Contact({
     isValid: validData.messageValid,
     inputType: 'textarea',
     onChange: e => {
-      setInputVal({
-        ...inputVal,
+      setInputVal({ ...inputVal,
         message: e.target.value
       });
     },
@@ -6459,12 +6652,11 @@ function Contact({
       checkValidity(nodeData?.messageField?.metadata?.validationType, 'message', 'messageValid');
     },
     onFocus: () => {
-      setValidData({
-        ...validData,
+      setValidData({ ...validData,
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6604,11 +6796,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'
     },
@@ -6656,10 +6847,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',
@@ -6722,8 +6913,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
 const SingleVideoSlide$1 = props => {
   const [isReadMore, setIsReadMore] = useState(false);
   const theme = useTheme();
-  useEffect(() => {
-    // remaining days epoch
+  useEffect(() => {// remaining days epoch
     // current date epoch
     // subtract remaining days from current day epoch
     // moment the result - and see if there are days
@@ -6735,6 +6925,7 @@ const SingleVideoSlide$1 = props => {
     webinarCtaClick,
     conversions = 0
   } = props;
+
   const renderer = ({
     days,
     hours,
@@ -6750,7 +6941,9 @@ const SingleVideoSlide$1 = props => {
       return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), " day(s)");
     }
   };
+
   const checkIfOfferIsValid = () => moment().diff(moment(props.data.offerPriceEndDate)) < 0;
+
   const checkForShowDiscount = () => {
     if (props.data.endDate === null || checkIfOfferIsValid()) {
       if (data.discount > 0 && data.offerPriceValidFor === 0) {
@@ -6762,16 +6955,19 @@ const SingleVideoSlide$1 = props => {
       if (data.offerPriceValidFor <= conversions) {
         return false;
       }
+
       if (data.offerPriceValidFor - conversions < 0) {
         return false;
       } else {
         return true;
       }
     }
+
     if (data.discount > 0) {
       return true;
     }
   };
+
   const discount = ({
     price,
     discount
@@ -6779,6 +6975,7 @@ const SingleVideoSlide$1 = props => {
     console.log('discountxx', props.data.price, props.data.discount);
     return (discount / price * 100).toFixed(2);
   };
+
   const classes = useWebinarPromotionPage();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.videoCarouselContainer
@@ -6874,10 +7071,9 @@ const SingleVideoSlide$1 = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW'
-      // isExternal: 1
-    },
+      value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW' // isExternal: 1
 
+    },
     onClick: webinarCtaClick,
     type: 'primary',
     size: 'medium',
@@ -7211,14 +7407,14 @@ const SingleVideoSlide = props => {
     isEdit
   } = useContext(PageContext);
   console.log(isEdit, 'isEdit');
-  useEffect(() => {
-    // remaining days epoch
+  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,
@@ -7234,6 +7430,7 @@ const SingleVideoSlide = props => {
       return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), " day(s)");
     }
   };
+
   const {
     data,
     courseBuyNow,
@@ -7242,7 +7439,9 @@ const SingleVideoSlide = props => {
   } = props;
   const showCourseInstallmentData = data?.courseOverviewData;
   const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
+
   const checkIfOfferIsValid = () => moment().diff(moment(props?.data?.endDate || 0)) < 0;
+
   const checkForShowDiscount = () => {
     if (props.data.endDate === null || checkIfOfferIsValid()) {
       if (data.discount > 0 && data.offerPriceValidFor === 0) {
@@ -7254,23 +7453,28 @@ const SingleVideoSlide = props => {
       if (data.offerPriceValidFor <= conversions) {
         return false;
       }
+
       if (data.offerPriceValidFor - conversions < 0) {
         return false;
       } else {
         return true;
       }
     }
+
     if (data.discount > 0) {
       return true;
     }
   };
+
   const classes = useCoursePromotionPage();
+
   const discount = ({
     price,
     discount
   }) => {
     return (discount / price * 100).toFixed(2);
   };
+
   return /*#__PURE__*/React.createElement("div", {
     className: classes.videoCarouselContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -7384,16 +7588,15 @@ const SingleVideoSlide = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: 'BUY NOW'
-      // isExternal: 1
-    },
+      value: 'BUY NOW' // isExternal: 1
 
+    },
     onClick: courseBuyNow,
     type: 'primary',
     size: 'medium',
     target: null,
-    rel: null
-    // styling={isMobile ? { margin: '0 40px' } : {}}
+    rel: null // styling={isMobile ? { margin: '0 40px' } : {}}
+
   })))), showCourseInstallmentData && InstalmentData && /*#__PURE__*/React.createElement("div", {
     className: classes.payInstallmentContainer,
     onClick: showCourseInstallment
@@ -7598,15 +7801,18 @@ const FormPage = ({
     _id,
     baseURLs
   } = useContext(PageContext);
+
   const handleSubmit = async e => {
     e.preventDefault();
     let formResponse = [];
+
     for (const [key, value] of Object.entries(formData)) {
       if (value.questionType === 'MC') {
         if (value.solutionArray.length > 1) {
           value.solutionArray.shift();
         }
       }
+
       formResponse.push({
         questionId: key,
         questionName: value.questionName,
@@ -7614,6 +7820,7 @@ const FormPage = ({
         solutionArray: value.solutionArray
       });
     }
+
     const data = {
       sectionId: sectionData?.components?.[0]?._id || null,
       landingPageId: _id || null,
@@ -7623,6 +7830,7 @@ const FormPage = ({
     setFormData({});
     setformSubmitted(!formSubmitted);
   };
+
   useEffect(() => {
     //add all questions to formData
     let formData = {};
@@ -7635,26 +7843,23 @@ const FormPage = ({
     });
     setFormData(formData);
   }, [metadata, formSubmitted]);
+
   const handleOnClick = (e, item, option) => {
     // if the checkbox is checked
     if (!e.target.checked) {
       // if the checkbox is checked and the solution array is empty
       if (!formData[item._id]?.solutionArray?.length) {
-        setFormData({
-          ...formData,
+        setFormData({ ...formData,
           [item._id]: {
             questionName: item.text,
             solutionArray: [option.value],
             questionType: 'MC'
           }
         });
-      }
-      // if the checkbox is checked and the solution array is not empty and the value is already in the array remove it
+      } // if the checkbox is checked and the solution array is not empty and the value is already in the array remove it
       else if (formData[item._id]?.solutionArray?.includes(option.value)) {
         // if only one value is in the array remove it
-
-        setFormData({
-          ...formData,
+        setFormData({ ...formData,
           [item._id]: {
             questionName: item.text,
             solutionArray: formData[item._id]?.solutionArray?.filter(item => item !== option.value),
@@ -7662,24 +7867,20 @@ const FormPage = ({
           }
         });
       }
-    }
-    // if the checkbox is unchecked
+    } // if the checkbox is unchecked
     else {
       // if the checkbox is unchecked and the solution array is empty
       if (typeof formData[item._id]?.solutionArray?.length === 'undefined') {
-        setFormData({
-          ...formData,
+        setFormData({ ...formData,
           [item._id]: {
             questionName: item.text,
             solutionArray: [option.value],
             questionType: 'MC'
           }
         });
-      }
-      // if the checkbox is unchecked and the solution array is not empty and the value is not in the array add it
+      } // if the checkbox is unchecked and the solution array is not empty and the value is not in the array add it
       else if (!formData[item._id]?.solutionArray?.includes(option.value)) {
-        setFormData({
-          ...formData,
+        setFormData({ ...formData,
           [item._id]: {
             questionName: item.text,
             solutionArray: [...formData[item._id]?.solutionArray, option.value],
@@ -7689,6 +7890,7 @@ const FormPage = ({
       }
     }
   };
+
   return /*#__PURE__*/React.createElement("section", {
     className: classes.formPageSection
   }, /*#__PURE__*/React.createElement("div", {
@@ -7715,8 +7917,7 @@ const FormPage = ({
     placeholder: "Short answer",
     name: item._id,
     onChange: e => {
-      setFormData({
-        ...formData,
+      setFormData({ ...formData,
         [item._id]: {
           index,
           questionName: item.text,
@@ -7756,13 +7957,11 @@ const FormPage = ({
     name: "text",
     required: item.isRequired,
     value: option.value,
-    checked: formData[item._id]?.solutionArray?.[0] === option.value
-    // name={option.value}
+    checked: formData[item._id]?.solutionArray?.[0] === option.value // name={option.value}
     // id={option.value}
     ,
     onClick: e => {
-      setFormData({
-        ...formData,
+      setFormData({ ...formData,
         [item._id]: {
           questionName: item.text,
           solutionArray: [option.value],
@@ -7778,10 +7977,9 @@ const FormPage = ({
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: 'SUBMIT'
-      // isExternal: 1
-    },
+      value: 'SUBMIT' // isExternal: 1
 
+    },
     type: 'primary',
     size: 'medium',
     target: null,
@@ -7875,6 +8073,7 @@ function Tiles({
   const nodeData = sectionData.components;
   console.log(nodeData);
   const tilesList = nodeData[0]?.tilesList.components;
+
   const handleClick = value => {
     if (!isEdit && value) {
       if (value.indexOf('http://') == 0 || value.indexOf('https://') == 0) {
@@ -7884,6 +8083,7 @@ function Tiles({
       }
     }
   };
+
   const TileDiv = tilesList?.map((tile, i) => {
     return /*#__PURE__*/React.createElement(Fragment, {
       key: i
@@ -7946,8 +8146,8 @@ const useEmailStyles = createUseStyles(theme => ({
     width: 'auto',
     height: '48px'
     /* margin: 18px 0px; */
-  },
 
+  },
   'p-young-guru-title': {
     fontFamily: theme?.typography?.fontFamily,
     fontStyle: 'normal',
@@ -7974,8 +8174,8 @@ const useEmailStyles = createUseStyles(theme => ({
     fontSize: '0',
     textAlign: 'center'
     /* padding:35px 0 40px */
-  },
 
+  },
   'two-columns .column': {
     width: '100%',
     maxWidth: '275px',
@@ -7991,10 +8191,9 @@ const useEmailStyles = createUseStyles(theme => ({
     color: '#030a21',
     marginBottom: '5px',
     textAlign: 'left'
-  }
-
-  //   @media screen and (max-width: 600px) {
+  } //   @media screen and (max-width: 600px) {
   //   }
+
 }));
 
 function Section({
@@ -8023,8 +8222,8 @@ function Section({
   }, /*#__PURE__*/React.createElement("tbody", null, customHtmlData?.isCustomHtml ? /*#__PURE__*/React.createElement("div", {
     className: classes.email_description_para,
     dangerouslySetInnerHTML: {
-      __html: `${customHtmlData?.html ? customHtmlData?.html : ''}`
-      // __html: '<div>sdnfksdnflksdnfklsndk</div>'
+      __html: `${customHtmlData?.html ? customHtmlData?.html : ''}` // __html: '<div>sdnfksdnflksdnfklsndk</div>'
+
     }
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, header?.isActive ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("table", {
     style: {
@@ -8057,8 +8256,7 @@ function Section({
       textAlign: 'center'
     }
   }, header?.components[1]?.metadata?.image?.length ? /*#__PURE__*/React.createElement("img", {
-    src: header?.components[1]?.metadata?.image
-    // width={600}
+    src: header?.components[1]?.metadata?.image // width={600}
     ,
     alt: "",
     style: {
@@ -8344,12 +8542,14 @@ function Section({
     }
   }, "All rights reserved.")))))))))))))) : null)))));
 }
+
 function EmailDripMarket({
   sectionData,
   extraProps = {}
 }) {
   console.log('extrapropstemplate', extraProps);
   const isInitialMount = useRef(true);
+
   const convertToHtml = sectionData => {
     const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(Section, {
       nodeData: sectionData,
@@ -8359,15 +8559,15 @@ function EmailDripMarket({
     }));
     return html;
   };
+
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
       extraProps?.callbackHtml(convertToHtml(sectionData));
     }
-  }, [extraProps?.convertedHtml]);
+  }, [extraProps?.convertedHtml]); // const mockData = sectionData?.sections[0];
 
-  // const mockData = sectionData?.sections[0];
   const emailRef = useRef(null);
   return /*#__PURE__*/React.createElement("section", {
     style: {
@@ -8377,6 +8577,7 @@ function EmailDripMarket({
   }, /*#__PURE__*/React.createElement("div", {
     onClick: e => {
       e.stopPropagation(); // prevent the click from event Capturing, in email onClick events do not work
+
       e.preventDefault();
     }
   }, /*#__PURE__*/React.createElement(Section, {
@@ -8415,25 +8616,33 @@ const TYPE_TO_COMPONENT_MAP = {
   TILES_SECTION: Tiles,
   EMAIL_DRIP_MARKET: EmailDripMarket
 };
+
 const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
+
 const MemoisedSection = /*#__PURE__*/memo(({
   sectionData,
-  extraProps
+  extraProps,
+  isCustomWebsite
 }) => {
+  // console.log("isCustomWebsite______", isCustomWebsite)
   console.log('templatesectiondata', sectionData);
   const SectionComp = getCompToRender(sectionData.type);
   return /*#__PURE__*/React.createElement(SectionComp, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite
   });
 });
 function SectionRenderer({
   sectionData,
-  extraProps
+  extraProps,
+  isCustomWebsite
 }) {
+  // console.log("isCustomWebsite______", isCustomWebsite)
   return /*#__PURE__*/React.createElement(MemoisedSection, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite
   });
 }
 
@@ -8451,7 +8660,8 @@ function PageRenderer({
     footer,
     validations = {},
     _id,
-    isLandingPage = false
+    isLandingPage = false,
+    isCustomWebsite = false
   },
   isMobile = false,
   isLandingPages = false,
@@ -8486,6 +8696,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 || Fragment;
@@ -8508,7 +8719,8 @@ function PageRenderer({
     key: sectionData.type + (sectionData._id || sectionIndex)
   }), /*#__PURE__*/React.createElement(SectionRenderer, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    isCustomWebsite: isCustomWebsite
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React.createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true
@@ -8528,9 +8740,11 @@ const componentParser = compObj => {
     });
     return component;
   }
+
   if (Array.isArray(compObj.components)) {
     compObj.components = compObj.components.map(componentParser);
   }
+
   return compObj;
 };
 const inverseComponentParser = compObj => {
@@ -8555,6 +8769,7 @@ const inverseComponentParser = compObj => {
     if (compObj.components) {
       compObj.components = compObj.components.map(inverseComponentParser);
     }
+
     return compObj;
   }
 };