diy-template-components 2.0.9 → 2.0.11

package/build/index.es.js

@@ -57,7 +57,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     height: '60px'
   },
   headerContainer: {
-    background: theme?.colors?.white,
+    background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
     padding: '20px 40px',
     display: 'flex',
@@ -115,11 +115,11 @@ const useSectionStyles$a = createUseStyles(theme => ({
     lineHeight: '20px',
     display: 'flex',
     alignItems: 'center',
-    color: theme?.colors?.headerText,
+    color: theme.palette.primary.main,
     padding: '20px',
     '&:hover': {
       cursor: 'pointer',
-      background: theme?.colors?.headerHover,
+      background: theme.palette.primary.lightest,
       borderRadius: theme?.shape?.borderRadius?.small
     }
   },
@@ -128,7 +128,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     padding: '18px 24px 18px 16px',
-    background: theme?.colors?.white,
+    background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
     position: ({
       isFixed
@@ -204,7 +204,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     height: '100%'
   },
   menuContainer: {
-    background: theme?.colors?.white,
+    background: theme?.palette?.background?.default,
     boxShadow: theme.shadows.secondary,
     width: '75%',
     height: '100%',
@@ -321,9 +321,9 @@ const alpha = {
   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);
+  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) => {
@@ -361,11 +361,13 @@ const buttonStyles = createUseStyles(theme => ({
     textAlign: 'center',
     color: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.colors?.CtaTextColor,
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
     background: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.colors?.ctaColor,
-    border: 'none',
+    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.palette?.primary?.main,
+    border: ({
+      disabled
+    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.palette?.primary?.main}`,
     textDecoration: 'none',
     cursor: ({
       disabled
@@ -387,13 +389,13 @@ const buttonStyles = createUseStyles(theme => ({
     lineHeight: '18px',
     color: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme?.colors?.CtaTextColor,
+    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
     background: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.parimar?.default, 0.5).color : theme?.colors?.ctaColor,
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
     border: ({
       disabled
-    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.colors?.ctaColor}`,
+    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme.palette.primary.main}`,
     cursor: ({
       disabled
     } = {}) => disabled ? 'not-allowed' : 'pointer',
@@ -1026,25 +1028,6 @@ var appStore = "data:image/svg+xml,%3Csvg%20width%3D%22116%22%20height%3D%2240%2
 
 var downloadApkImage = "data:image/png;base64,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";
 
-function getShortenedSubstring(name, length, allowDots = true) {
-  if (name) {
-    return name.length < length ? name : `${name.substr(0, length)}${allowDots && '...'}`;
-  }
-  return '';
-}
-function getAppDownloadLink(androidLink = '', iosLink = '') {
-  if (typeof window !== 'undefined') {
-    const userAgent = window.navigator?.userAgent;
-    if (/Android/.test(userAgent) && androidLink) {
-      return androidLink;
-    }
-    if (/iPad|iPhone|iPod/.test(userAgent) && iosLink) {
-      return iosLink;
-    }
-    return androidLink || iosLink;
-  }
-}
-
 function OptionList({
   optionsData,
   headerData,
@@ -1052,7 +1035,8 @@ function OptionList({
   moreContent,
   navDataCount,
   isTutorWebsite,
-  isLandingPages
+  isLandingPages,
+  onDownloadAppTriggered
 }) {
   const {
     isPreview,
@@ -1071,9 +1055,6 @@ function OptionList({
   };
   const tabData = tabsDataModifier();
   const classes = useSectionStyles$a();
-
-  // console.log(headerData, 'sakshat header options');
-
   const isAndroidDelisted = headerData?.isAndroidDelisted;
   const apkURL = headerData?.apkURL;
   const downloadApkURL = isAndroidDelisted && apkURL ? apkURL : null;
@@ -1083,7 +1064,12 @@ function OptionList({
       download: true,
       href: headerData?.apkURL,
       target: "_blank",
-      className: classes.socialBtnItems
+      className: classes.socialBtnItems,
+      onClick: () => {
+        if (typeof onDownloadAppTriggered == "function") {
+          onDownloadAppTriggered(isAndroidDelisted, headerData?.apkURL);
+        }
+      }
     }, /*#__PURE__*/React.createElement("img", {
       style: {
         width: '139px',
@@ -1119,10 +1105,6 @@ function OptionList({
       alt: "appStore"
     })) : null);
   };
-  const iosLink = isTutorWebsite ? headerData?.iosDownloadLink : headerData?.iosUrl;
-
-  // console.log(iosLink, 'sakshat ios link');
-
   return /*#__PURE__*/React.createElement("div", {
     className: classes.listSection
   }, /*#__PURE__*/React.createElement("div", {
@@ -1146,9 +1128,9 @@ function OptionList({
     list: moreContent,
     label: 'More',
     icon: arrowDown
-  }) : null, isTutorWebsite && /*#__PURE__*/React.createElement(React.Fragment, null, isAndroidDelisted && !headerData.navs ? /*#__PURE__*/React.createElement(React.Fragment, null, renderDownloadAppButton()) : /*#__PURE__*/React.createElement(React.Fragment, null, !headerData?.navs && renderAppDownloadLinks())), isMobile ? downloadApkURL?.length > 0 || headerData?.androidDownloadLink?.length || headerData?.iosDownloadLink?.length > 0 || headerData?.iosUrl?.length > 0 ? /*#__PURE__*/React.createElement(Button, {
+  }) : null, isTutorWebsite && /*#__PURE__*/React.createElement(React.Fragment, null, isAndroidDelisted && !headerData.navs ? /*#__PURE__*/React.createElement(React.Fragment, null, renderDownloadAppButton()) : /*#__PURE__*/React.createElement(React.Fragment, null, !headerData?.navs && renderAppDownloadLinks())), isMobile ? downloadApkURL?.length > 0 || headerData?.appLink?.length > 0 ? /*#__PURE__*/React.createElement(Button, {
     data: {
-      link: isAndroidDelisted ? getAppDownloadLink(downloadApkURL, iosLink) : getAppDownloadLink(headerData?.androidDownloadLink, iosLink),
+      link: downloadApkURL ? downloadApkURL : headerData?.appLink,
       isLink: 1,
       value: downloadAppText,
       isExternal: 1
@@ -1272,7 +1254,8 @@ function DesktopHeader({
   header,
   navData,
   isTutorWebsite,
-  isLandingPage = false
+  isLandingPage = false,
+  onDownloadAppTriggered
 }) {
   const {
     isFixed = true
@@ -1306,9 +1289,6 @@ function DesktopHeader({
     }
     return moreContent;
   };
-
-  // console.log(header, 'sakshat header desktop');
-
   return /*#__PURE__*/React.createElement("nav", {
     className: classes.section
   }, !(header?.websiteLogo === DEFAULT_HEADER_IMAGE_LP && isCustomWebsite) ? /*#__PURE__*/React.createElement("div", {
@@ -1341,7 +1321,8 @@ function DesktopHeader({
     isMobile: false,
     isLandingPages: isLandingPage,
     moreContent: moreContentFn(),
-    isTutorWebsite: isTutorWebsite
+    isTutorWebsite: isTutorWebsite,
+    onDownloadAppTriggered: onDownloadAppTriggered
   }))) : /*#__PURE__*/React.createElement("div", {
     style: {
       paddingTop: '30px'
@@ -1349,11 +1330,16 @@ function DesktopHeader({
   }));
 }
 
+var phoneIos = "data:image/svg+xml,%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_d_3094_7439%29%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%224%22%20fill%3D%22%23F0F4F8%22%2F%3E%3Cpath%20d%3D%22M30.4539%2016.8288C30.3555%2016.8912%2028.0131%2018.1908%2028.0131%2021.0732C28.1235%2024.3612%2030.9687%2025.5132%2031.0179%2025.5132C30.9699%2025.5744%2030.5883%2027.084%2029.4603%2028.6656C28.5651%2030.0276%2027.5715%2031.4016%2026.0631%2031.4016C24.6279%2031.4016%2024.1119%2030.4932%2022.4559%2030.4932C20.6775%2030.4932%2020.1747%2031.4016%2018.8127%2031.4016C17.3043%2031.4016%2016.2375%2029.9544%2015.2931%2028.6044C14.0667%2026.838%2013.0251%2024.066%2012.9879%2021.4044C12.9627%2019.9944%2013.2327%2018.6084%2013.9191%2017.43C14.8887%2015.786%2016.6179%2014.67%2018.5067%2014.634C19.9539%2014.5848%2021.2427%2015.6264%2022.1247%2015.6264C22.9719%2015.6264%2024.5535%2014.6328%2026.3439%2014.6328C27.1167%2014.634%2029.1783%2014.8668%2030.4539%2016.8288ZM22.0023%2014.352C21.7455%2013.0632%2022.4559%2011.7756%2023.1183%2010.9536C23.9655%209.95998%2025.3023%209.28558%2026.4543%209.28558C26.5287%2010.5744%2026.0619%2011.8368%2025.2279%2012.7572C24.4803%2013.7508%2023.1927%2014.4984%2022.0023%2014.352Z%22%20fill%3D%22%234D4D4D%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d_3094_7439%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2244%22%20height%3D%2244%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%20dy%3D%221%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.4%200%200%200%200%200.4%200%200%200%200%200.4%200%200%200%200.16%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_3094_7439%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_3094_7439%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
+
+var phoneAndroid = "data:image/svg+xml,%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_d_3094_7442%29%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%224%22%20fill%3D%22%23F0F4F8%22%2F%3E%3Cpath%20d%3D%22M13.9713%2011.7196C13.7108%2012.0303%2013.579%2012.4279%2013.6028%2012.8316V30.3709C13.5804%2030.7744%2013.712%2031.1716%2013.9713%2031.4829L14.0316%2031.5428L23.9128%2021.7144V21.4814L14.0316%2011.6597L13.9713%2011.7196Z%22%20fill%3D%22url%28%23paint0_linear_3094_7442%29%22%2F%3E%3Cpath%20d%3D%22M27.2088%2024.9906L23.9128%2021.7144V21.4814L27.2088%2018.2119L27.2825%2018.2519L31.1881%2020.4559C32.3069%2021.0819%2032.3069%2022.114%2031.1881%2022.7466L27.2825%2024.9506L27.2088%2024.9906Z%22%20fill%3D%22url%28%23paint1_linear_3094_7442%29%22%2F%3E%3Cpath%20d%3D%22M27.2824%2024.9507L23.9328%2021.6213L13.9712%2031.4829C14.2008%2031.6706%2014.4867%2031.777%2014.7838%2031.7854C15.0809%2031.7939%2015.3725%2031.7039%2015.6125%2031.5296L27.2623%2024.9507%22%20fill%3D%22url%28%23paint2_linear_3094_7442%29%22%2F%3E%3Cpath%20d%3D%22M27.2824%2018.2519L15.6125%2011.6663C15.375%2011.4849%2015.0816%2011.391%2014.7822%2011.4007C14.4829%2011.4104%2014.1962%2011.5231%2013.9712%2011.7196L23.9127%2021.6012L27.2824%2018.2519Z%22%20fill%3D%22url%28%23paint3_linear_3094_7442%29%22%2F%3E%3Cpath%20opacity%3D%220.1%22%20d%3D%22M27.209%2024.8774L15.6128%2031.4163C15.3815%2031.5876%2015.1007%2031.6802%2014.8123%2031.6802C14.5238%2031.6802%2014.243%2031.5876%2014.0117%2031.4163L13.9514%2031.4762L14.0117%2031.5362C14.243%2031.7075%2014.5238%2031.8%2014.8123%2031.8C15.1007%2031.8%2015.3815%2031.7075%2015.6128%2031.5362L27.2626%2024.9573L27.209%2024.8774Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20opacity%3D%220.07%22%20d%3D%22M13.9713%2031.3764C13.7116%2031.0627%2013.5801%2030.6633%2013.6029%2030.2577V30.3709C13.5804%2030.7745%2013.712%2031.1716%2013.9713%2031.4829L14.0316%2031.423L13.9713%2031.3764Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20opacity%3D%220.07%22%20d%3D%22M31.188%2022.6267L27.2087%2024.8773L27.2824%2024.9506L31.188%2022.7199C31.4171%2022.6198%2031.6154%2022.461%2031.7625%2022.2597C31.9096%2022.0585%2032.0003%2021.8221%2032.0254%2021.5746C31.9797%2021.8034%2031.88%2022.0181%2031.7344%2022.201C31.5888%2022.3839%2031.4015%2022.5298%2031.188%2022.6267Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M15.6123%2011.7861L31.1878%2020.5691C31.3992%2020.6635%2031.5852%2020.8062%2031.7307%2020.9856C31.8762%2021.1649%2031.9771%2021.3758%2032.0252%2021.6012C32.0015%2021.3533%2031.9113%2021.1162%2031.764%2020.9148C31.6167%2020.7133%2031.4177%2020.5548%2031.1878%2020.4559L15.6123%2011.6663C14.5136%2011.0403%2013.6025%2011.5597%2013.6025%2012.8315V12.9447C13.6025%2011.6796%2014.5136%2011.1535%2015.6123%2011.7861Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d_3094_7442%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2244%22%20height%3D%2244%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%20dy%3D%221%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.4%200%200%200%200%200.4%200%200%200%200%200.4%200%200%200%200.16%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_3094_7442%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_3094_7442%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22paint0_linear_3094_7442%22%20x1%3D%2223.0419%22%20y1%3D%2212.6452%22%20x2%3D%229.73126%22%20y2%3D%2226.0365%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23008EFF%22%2F%3E%3Cstop%20offset%3D%220.01%22%20stop-color%3D%22%23008FFF%22%2F%3E%3Cstop%20offset%3D%220.26%22%20stop-color%3D%22%2300ACFF%22%2F%3E%3Cstop%20offset%3D%220.51%22%20stop-color%3D%22%2300C0FF%22%2F%3E%3Cstop%20offset%3D%220.76%22%20stop-color%3D%22%2300CDFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300D1FF%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint1_linear_3094_7442%22%20x1%3D%2231.3221%22%20y1%3D%2221.6012%22%20x2%3D%2212.0152%22%20y2%3D%2221.6012%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FFD800%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF8A00%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint2_linear_3094_7442%22%20x1%3D%2225.4535%22%20y1%3D%2223.4192%22%20x2%3D%227.40854%22%20y2%3D%2241.5735%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF3A44%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23B11162%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint3_linear_3094_7442%22%20x1%3D%2211.4657%22%20y1%3D%225.87984%22%20x2%3D%2219.5294%22%20y2%3D%2213.9857%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23328E71%22%2F%3E%3Cstop%20offset%3D%220.07%22%20stop-color%3D%22%232D9571%22%2F%3E%3Cstop%20offset%3D%220.48%22%20stop-color%3D%22%2315BD74%22%2F%3E%3Cstop%20offset%3D%220.8%22%20stop-color%3D%22%2306D575%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300DE76%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
+
 function MobileHeader({
   header,
   navData,
   isTutorWebsite,
-  isLandingPage = false
+  isLandingPage = false,
+  onDownloadAppTriggered
 }) {
   const {
     isCustomWebsite,
@@ -1381,35 +1367,91 @@ function MobileHeader({
       body?.removeAttribute('style');
     }
   }, [sideMenu]);
+  let iosUrl = null;
+  let androidUrl = null;
   let downloadLink = null;
   const downloadAppText = countryCode === 'KR' ? '앱다운로드' : 'Download App';
-  const apkURL = header?.apkURL;
-  const isAndroidDelisted = header?.isAndroidDelisted;
-  const iosDownloadLink = header?.iosDownloadLink;
-  const androidDownloadLink = header?.androidDownloadLink;
-
-  // console.log(header, 'sakshat header mobile');
-
   if (isTutorWebsite) {
-    if (isAndroidDelisted && apkURL) {
-      downloadLink = /*#__PURE__*/React.createElement(Button, {
+    console.log("potato");
+    if (header?.iosUrl) {
+      iosUrl = /*#__PURE__*/React.createElement(Button, {
+        data: {
+          link: header?.iosUrl,
+          isLink: 1,
+          value: /*#__PURE__*/React.createElement("img", {
+            src: phoneIos,
+            alt: "iosUrl"
+          }),
+          isExternal: 1
+        },
+        type: '',
+        size: 'small',
+        target: 'blank',
+        rel: null,
+        style: {
+          padding: 0,
+          paddingRight: '8px'
+        }
+      });
+    }
+    if (header?.androidURL) {
+      androidUrl = /*#__PURE__*/React.createElement(Button, {
         data: {
-          link: getAppDownloadLink(apkURL, iosDownloadLink),
+          link: header?.androidURL,
           isLink: 1,
+          value: /*#__PURE__*/React.createElement("img", {
+            src: phoneAndroid,
+            alt: "iosUrl"
+          }),
+          isExternal: 1
+        },
+        type: '',
+        size: 'small',
+        target: 'blank',
+        rel: null,
+        style: {
+          padding: 0
+        }
+      });
+    }
+    if (header?.isAndroidDelisted && header?.apkURL) {
+      downloadLink = /*#__PURE__*/React.createElement(Button, {
+        data: {
           value: downloadAppText,
           isExternal: 1
         },
         type: 'primary',
         size: 'small',
         target: 'blank',
+        rel: null,
+        onClick: () => {
+          window.open(header?.iosUrl ? header?.iosUrl : header?.apkURL, "_blank");
+          if (!header?.iosUrl && typeof onDownloadAppTriggered == "function") {
+            onDownloadAppTriggered(header?.isAndroidDelisted, header?.apkURL);
+          }
+        }
+      });
+    } else if (iosUrl && androidUrl) {
+      downloadLink = /*#__PURE__*/React.createElement("div", null, iosUrl, androidUrl);
+    } else if (header?.iosUrl) {
+      downloadLink = /*#__PURE__*/React.createElement(Button, {
+        data: {
+          link: header?.iosUrl,
+          isLink: 1,
+          value: header?.downloadAppButtonText || downloadAppText,
+          isExternal: 1
+        },
+        type: 'primary',
+        size: 'small',
+        target: 'blank',
         rel: null
       });
-    } else if (androidDownloadLink?.length || iosDownloadLink?.length) {
+    } else if (header?.androidURL) {
       downloadLink = /*#__PURE__*/React.createElement(Button, {
         data: {
-          link: getAppDownloadLink(androidDownloadLink, iosDownloadLink),
+          link: header?.androidURL,
           isLink: 1,
-          value: downloadAppText,
+          value: header?.downloadAppButtonText || downloadAppText,
           isExternal: 1
         },
         type: 'primary',
@@ -1421,24 +1463,27 @@ function MobileHeader({
       downloadLink = null;
     }
   } else {
-    if (isAndroidDelisted && apkURL) {
+    if (header?.isAndroidDelisted && header?.apkURL) {
       downloadLink = /*#__PURE__*/React.createElement(Button, {
         data: {
-          link: getAppDownloadLink(header?.apkURL, header?.iosUrl),
-          isLink: 1,
           value: downloadAppText,
           isExternal: 1
         },
         type: 'primary',
         size: 'small',
         target: 'blank',
-        rel: null
+        rel: null,
+        onClick: () => {
+          window.open(header?.iosUrl ? header?.iosUrl : header?.apkURL, "_blank");
+          if (!header?.iosUrl && typeof onDownloadAppTriggered == "function") {
+            onDownloadAppTriggered(header?.isAndroidDelisted, header?.apkURL);
+          }
+        }
       });
-    } else if (header?.appLink || header?.iosUrl) {
-      console.log('inside custom website');
+    } else if (header?.appLink) {
       downloadLink = /*#__PURE__*/React.createElement(Button, {
         data: {
-          link: getAppDownloadLink(header?.appLink, header?.iosUrl),
+          link: header?.appLink,
           isLink: 1,
           value: downloadAppText,
           isExternal: 1
@@ -1510,7 +1555,8 @@ function MobileHeader({
 
 function Header({
   data,
-  isLandingPage
+  isLandingPage,
+  extraProps
 }) {
   const {
     isMobile,
@@ -1523,12 +1569,14 @@ function Header({
     navData: filterHiddenNavs(),
     header: data,
     isTutorWebsite: isTutorWebsite,
-    isLandingPage: isLandingPage
+    isLandingPage: isLandingPage,
+    onDownloadAppTriggered: extraProps.DownloadAppButtonTriggered
   }) : /*#__PURE__*/React.createElement(DesktopHeader, {
     navData: filterHiddenNavs(),
     header: data,
     isTutorWebsite: isTutorWebsite,
-    isLandingPage: isLandingPage
+    isLandingPage: isLandingPage,
+    onDownloadAppTriggered: extraProps.DownloadAppButtonTriggered
   });
 }
 
@@ -1567,7 +1615,6 @@ const useSectionStyles$9 = createUseStyles(theme => ({
 
     // '& img': { maxHeight: '55px' }
   },
-
   upperContainerItem1Img: {
     maxHeight: '55px',
     paddingBottom: '84px',
@@ -1994,7 +2041,6 @@ const mobilePadding = {
   // 24px
   medium: baseFactor * 6 // 48px
 };
-
 const padding = {
   minute: baseFactor * 2,
   // 16px
@@ -2054,13 +2100,17 @@ function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
   const shape = {
     borderRadius
   };
+  const spacing = {
+    padding: isMobile ? mobilePadding : padding,
+    margin: isMobile ? mobileMargin : margin
+  };
   return {
     palette,
     shape,
     typography,
     shadows: generateShadows(palette),
-    borders: generateBorders(palette)
-    // spacing
+    borders: generateBorders(palette),
+    spacing
   };
 }
 
@@ -2182,178 +2232,6 @@ const defaultMetadata = {
   layout: defaultLayout
 };
 
-const GRADIENT = `linear-gradient`;
-const allColors = {
-  white: '#FFFFFF',
-  black: '#000000',
-  lightblack: '#333333',
-  gray: '#999999',
-  bannerRed: '#EB5757',
-  //  Blue gradient
-
-  blue: '#1676F3',
-  bluegradient: `${GRADIENT}(180deg,#5418D1 0.42%,#2C88FF 79.92%)`,
-  tertiaryblue: '#F4F9FF',
-  // Orange gradient
-
-  orange: '#FF9000',
-  orangegradient: `${GRADIENT}(138deg, #E96263 12.32%, #EAAE4C 98.22%)`,
-  tertiaryorange: '#FFF6EA',
-  // Pink gradient
-
-  pink: '#F72585',
-  pinkgradient: `${GRADIENT}(135deg, #F97794 0%, #623AA2 100%)`,
-  tertiarypink: '#FEE9F3',
-  // Violet gradient
-
-  violet: '#6026A8',
-  violetgradient: `${GRADIENT}(226deg, #B66EC0 -12.73%, #460FA1 104.66%)`,
-  tertiaryviolet: '#F5F2FA',
-  // Teal gradient
-
-  teal: '#46A9A9',
-  tealgradient: `${GRADIENT}(135deg, #0E5CAD 0%, #79F1A4 100%)`,
-  tertiaryteal: '#F4FAFA',
-  //Red solid
-
-  red: '#F41828',
-  tertiaryred: '#FFF2F3',
-  // Green
-
-  green: '#8ECE19',
-  tertiarygreen: '#F4FAFA',
-  //Maroon solid
-
-  rust: '#9B2226',
-  tertiaryrust: '#FFF0F0',
-  //Purple solid
-
-  purple: '#6269C9',
-  tertiarypurple: '#F4F6FF',
-  //Golden gradient
-
-  golden: `#F2BA35`,
-  goldengradient: `${GRADIENT}(180deg, #F0EA88 0%, #CFA749 99.48%)`,
-  //light green gradient
-
-  lightgreen: `#D6E359`,
-  lightgreengradient: `${GRADIENT}(180deg, #D6E359 0%, #9DB545 100%)`,
-  //light blue gradient
-
-  lightblue: `#A8EDF8`,
-  lightbluegradient: `${GRADIENT}(90deg, #A8EDF8 0.29%, #5EC9E1 97.33%)`,
-  skyblue: '#00ADE7',
-  tertiaryskyblue: '#F2FCFF'
-};
-
-const generateTheme = (theme = 'blue', fontFamily = 'Arial', isMobile) => {
-  let themeColor = theme.split('-');
-  let color, gradient, darkMode;
-  if (themeColor.length === 1) {
-    color = themeColor[0] == 'default' ? 'skyblue' : themeColor[0];
-  } else if (themeColor.length === 2) {
-    color = themeColor[0];
-    gradient = themeColor[1];
-  } else {
-    color = themeColor[0];
-    gradient = themeColor[1];
-    darkMode = themeColor[2];
-  }
-  console.log('color', allColors, gradient, darkMode);
-
-  // switch (color) {
-  //   case solidColors:
-  //     break;
-
-  //   case gradientColors:
-  //     break;
-
-  //   default:
-  //     break;
-  // }
-
-  // type 1
-  //   const solidColors = {
-  //     font1: solidBaseColors?.black,
-  //     font2: solidBaseColors?.black,
-  //     font3: solidBaseColors?.black,
-  //     font4: solidBaseColors?.black,
-  //     AccentColor: solidBaseColors[theme],
-  //     background1: solidBaseColors?.white,
-  //     background2: solidBaseColors['tertiary' + theme],
-  //     background3: solidBaseColors['tertiary' + theme],
-  //     ctaColor: solidBaseColors[theme],
-  //     CtaTextColor: solidBaseColors?.white,
-  //     icon: solidBaseColors[theme],
-  //     iconBg: solidBaseColors['tertiary' + theme],
-  //     stripBg: solidBaseColors[theme],
-  //     stripText: solidBaseColors?.white,
-  //     inputBorderColor: solidBaseColors?.blue2,
-  //     tertiaryBlue2: solidBaseColors?.tertiaryblue2
-  //   };
-
-  //type 2
-  //   const gradientColors = {
-  //     font1: gradientBaseColors?.white,
-  //     font2: gradientBaseColors?.black,
-  //     font3: gradientBaseColors?.black,
-  //     font4: gradientBaseColors?.white,
-  //     AccentColor: gradientBaseColors[theme],
-  //     background1: gradientBaseColors[theme + 'gradient'],
-  //     background2: gradientBaseColors['tertiary' + theme],
-  //     background3: gradientBaseColors[theme + 'gradient'],
-  //     ctaColor: gradientBaseColors[theme + 'gradient'],
-  //     CtaTextColor: gradientBaseColors?.white,
-  //     icon: gradientBaseColors[theme],
-  //     iconBg: gradientBaseColors['tertiary' + theme],
-  //     stripBg: gradientBaseColors?.black,
-  //     stripText: gradientBaseColors?.white
-  //   };
-
-  const colors = {
-    font1: gradient ? allColors?.white : allColors?.black,
-    font2: darkMode ? allColors[color] : allColors?.black,
-    font3: darkMode ? allColors?.white : allColors?.black,
-    font4: darkMode ? allColors[color] : gradient ? allColors?.white : allColors?.black,
-    AccentColor: allColors[color],
-    background1: darkMode ? allColors?.lightblack : gradient ? allColors[color + 'gradient'] : allColors?.white,
-    background2: darkMode ? allColors?.lightblack : allColors['tertiary' + color],
-    background3: darkMode ? allColors?.lightblack : gradient ? allColors[color + 'gradient'] : allColors['tertiary' + color],
-    ctaColor: darkMode ? allColors[color + 'gradient'] : gradient ? allColors[color + 'gradient'] : allColors[color],
-    CtaTextColor: darkMode ? allColors?.lightblack : allColors?.white,
-    icon: allColors[color],
-    iconBg: darkMode ? allColors?.lightblack : allColors['tertiary' + color],
-    stripBg: darkMode ? allColors[color + 'gradient'] : allColors?.black,
-    stripText: darkMode ? allColors?.lightblack : allColors?.white,
-    inputBorderColor: allColors?.blue2,
-    tertiaryBlue2: allColors?.tertiaryblue2,
-    white: allColors?.white,
-    black: allColors?.black,
-    lightblack: allColors?.lightblack,
-    gray: allColors?.gray,
-    bannerColor: darkMode ? allColors[color] : gradient ? allColors?.white : allColors?.bannerRed,
-    bannerCtaColor: gradient ? allColors?.lightblack : allColors?.white,
-    headerText: allColors[color],
-    headerHover: allColors['tertiary' + color]
-  };
-  const typography = {
-    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
-    fontSize: isMobile ? fontSizeMob : fontSize,
-    fontWeight
-  };
-  // const shape = { borderRadius };
-  const spacing = {
-    padding: isMobile ? mobilePadding : padding,
-    margin: isMobile ? mobileMargin : margin
-  };
-  return {
-    ...getTheme(theme),
-    typography,
-    spacing,
-    colors
-  };
-};
-
 function PageRenderer$1({
   pageData: {
     metadata: {
@@ -2410,7 +2288,7 @@ function PageRenderer$1({
     countryCode,
     currencySymbol
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
-  const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = useMemo(() => getTheme(color, font, context.isMobile), [color, font, context.isMobile]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -2448,7 +2326,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
-    background: theme?.colors?.background2,
+    backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -2460,7 +2338,6 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     //   }
     // }
   },
-
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -2506,14 +2383,14 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     marginBottom: '8px',
     fontSize: theme.typography.fontSize.subHead,
     letterSpacing: '3px',
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     maxWidth: '100%'
   },
   heading: {
     margin: '0',
     fontSize: theme.typography.fontSize.h1,
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.default,
     wordBreak: ({
       wordBreakValue
     }) => wordBreakValue || 'break-word',
@@ -2522,7 +2399,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   },
   description: {
     margin: `${theme.spacing.margin.tiny}px 0px`,
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.primary,
     lineHeight: '24px',
     wordBreak: 'break-word'
   },
@@ -2639,7 +2516,7 @@ const useCarouselStyles = createUseStyles(theme => ({
     width: '26px',
     background: ({
       inverted
-    } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.colors.AccentColor
+    } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.palette.primary.main
   },
   '@media screen and (max-width: 767px)': {
     sliderClass: {
@@ -2675,7 +2552,7 @@ const useArrowButtonStyles = createUseStyles(theme => ({
     height: sizeHandler,
     border: ({
       inverted
-    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.colors?.AccentColor}`,
+    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.light}`,
     borderRadius: '50%',
     display: 'flex',
     justifyContent: 'center',
@@ -2697,7 +2574,7 @@ function ArrowButton(props) {
   }, /*#__PURE__*/React.createElement(Icon, {
     height: props.size === 'small' ? '12px' : '18px',
     name: "Angle",
-    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.colors?.AccentColor,
+    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.main,
     inverted: true
   }));
 }
@@ -2907,6 +2784,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     alignItems: 'center',
+    backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -2924,7 +2802,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
   subTitleHeading: {
     marginBottom: '8px',
     fontSize: theme.typography.fontSize.subHead,
-    color: theme?.colors?.black,
+    color: theme?.palette?.font?.default,
     alignItems: 'center',
     textAlign: 'center',
     wordBreak: 'break-word',
@@ -2934,7 +2812,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
   heading: {
     marginBottom: theme.spacing.margin.tiny,
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.colors?.black,
+    color: theme?.palette?.font?.default,
     fontWeight: theme.typography.fontWeight.bold,
     textAlign: 'center',
     wordBreak: 'break-word'
@@ -2951,7 +2829,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     display: 'flex',
     width: 'calc(100% - 200px)',
     alignItems: 'center',
-    background: theme?.colors?.white,
+    background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     overflow: 'hidden',
@@ -2975,13 +2853,33 @@ const useSectionStyles$7 = createUseStyles(theme => ({
       '& $contentText': {
         marginLeft: '170px'
       }
+    },
+    '&:nth-child(7n+1) $contentNumber': {
+      background: palettes.purple.primary.lightest
+    },
+    '&:nth-child(7n+2) $contentNumber': {
+      background: palettes.orange.primary.lightest
+    },
+    '&:nth-child(7n+3) $contentNumber': {
+      background: palettes.red.primary.lightest
+    },
+    '&:nth-child(7n+4) $contentNumber': {
+      background: palettes.green.primary.lightest
+    },
+    '&:nth-child(7n+5) $contentNumber': {
+      background: palettes.pink.primary.lightest
+    },
+    '&:nth-child(7n+6) $contentNumber': {
+      background: palettes.blue.primary.lightest
+    },
+    '&:nth-child(7n) $contentNumber': {
+      background: palettes.rust.primary.lightest
     }
   },
   contentNumber: {
     position: 'absolute',
     top: '0',
     fontWeight: '700',
-    background: theme?.colors?.background3,
     fontSize: '72px',
     letterSpacing: '-3px',
     display: 'flex',
@@ -2989,7 +2887,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     justifyContent: 'center',
     padding: '48px',
     height: '100%',
-    color: theme?.colors?.font4,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word'
   },
   contentText: {
@@ -3001,14 +2899,14 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '32px',
     marginBottom: '8px',
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word'
   },
   contentPara: {
     fontStyle: 'normal',
     fontSize: '16px',
     lineHeight: '26px',
-    color: theme?.colors?.gray,
+    color: theme?.palette?.font?.primary,
     wordBreak: 'break-word'
   },
   '@media screen and (max-width: 767px)': {
@@ -3030,7 +2928,6 @@ const useSectionStyles$7 = createUseStyles(theme => ({
           // padding: '0'
         }
       },
-
       '&:nth-child(2n+1)': {
         marginRight: '0',
         '& $contentText': {
@@ -3040,7 +2937,6 @@ const useSectionStyles$7 = createUseStyles(theme => ({
         }
       }
     },
-
     contentNumber: {
       width: '100%',
       padding: '24px',
@@ -3421,7 +3317,6 @@ const useSectionStyles$5 = createUseStyles(theme => {
   return {
     section: {
       padding: `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
-      background: theme?.colors?.background2,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -3433,7 +3328,6 @@ const useSectionStyles$5 = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -3447,7 +3341,6 @@ const useSectionStyles$5 = createUseStyles(theme => {
 
       // padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
     },
-
     imageContainerDiv: {
       width: '50%',
       position: 'relative'
@@ -3465,7 +3358,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
       }
     },
     imageBorder: {
-      // border: `2px solid ${theme?.palette?.primary?.light}`,
+      border: `2px solid ${theme?.palette?.primary?.light}`,
       borderRadius: theme?.shape?.borderRadius?.small,
       position: 'absolute',
       width: '100%',
@@ -3490,13 +3383,13 @@ const useSectionStyles$5 = createUseStyles(theme => {
       marginBottom: '8px',
       fontSize: theme?.typography?.fontSize?.subHead,
       letterSpacing: '3px',
-      color: theme?.colors?.font3,
+      color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     heading: {
       margin: '0',
       fontSize: theme?.typography?.fontSize?.h1,
-      color: theme?.colors?.font3,
+      color: theme?.palette?.font?.default,
       wordBreak: ({
         wordBreakValue
       }) => wordBreakValue || 'break-word',
@@ -3506,7 +3399,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
     description: {
       marginTop: theme.spacing.margin.tiny,
       marginBottom: theme.spacing.margin.tiny,
-      color: theme?.colors?.font3,
+      color: theme?.palette?.font?.primary,
       lineHeight: '24px',
       wordBreak: 'break-word'
     },
@@ -3519,7 +3412,6 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%'
         // padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
       },
-
       imageContainer: {
         height: 'unset !important',
         '& img': {
@@ -3672,16 +3564,16 @@ const useSectionStyles$4 = createUseStyles(theme => ({
       containerWidth
     } = {}) => containerWidth
   },
-  // partialBackground: {
-  //   top: '0',
-  //   left: '0',
-  //   width: '100%',
-  //   height: '50%',
-  //   position: 'absolute',
-  //   background: theme?.palette?.background?.primary
-  // },
+  partialBackground: {
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '50%',
+    position: 'absolute',
+    background: theme?.palette?.background?.primary
+  },
   sectionContainer: {
-    backgroundColor: theme?.colors?.background2,
+    backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: theme.spacing.padding.small,
@@ -3692,7 +3584,7 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '71px',
     letterSpacing: '-3px',
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.default,
     marginBottom: theme.spacing.padding.tiny,
     wordBreak: 'break-word'
   },
@@ -3704,7 +3596,7 @@ const useSectionStyles$4 = createUseStyles(theme => ({
   title: {
     fontSize: theme.typography.fontSize.h6,
     lineHeight: '32px',
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.primary,
     wordBreak: 'break-word',
     flex: 1
   },
@@ -3832,8 +3724,8 @@ const inputStyles = createUseStyles(theme => ({
   inputField: {
     width: '100%',
     // maxWidth: '314px',
-    // background: theme?.palette?.background?.default,
-    border: `1px solid ${theme?.colors?.icon}`,
+    background: theme?.palette?.background?.default,
+    border: `1px solid ${theme?.palette?.border?.secondary}`,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: '14px 12px',
     display: 'flex',
@@ -3847,7 +3739,7 @@ const inputStyles = createUseStyles(theme => ({
       fontWeight: '400',
       fontSize: '16px',
       lineHeight: '20px',
-      color: theme?.colors?.black,
+      color: theme?.palette?.font?.primary,
       fontFamily: theme?.typography?.fontFamily
     },
     '&:focus': {
@@ -4047,6 +3939,7 @@ var index$h = /*#__PURE__*/Object.freeze({
 
 const useTestimonialStyles = createUseStyles(theme => ({
   testimonialContainer: {
+    background: theme?.palette?.background?.primary,
     overflow: 'hidden',
     padding: `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
@@ -4064,14 +3957,14 @@ const useTestimonialStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   testimonialText: {
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     fontSize: theme.typography.fontSize.subHead,
     wordBreak: 'break-word',
     textTransform: 'uppercase'
   },
   testimonialHeader: {
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     fontWeight: theme.typography.fontWeight.bold,
     marginBottom: theme.spacing.margin.tiny,
     marginTop: '8px',
@@ -4088,7 +3981,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     position: 'relative',
     height: 'calc(100% - 12px)',
     width: 'calc(100% - 24px)',
-    background: theme?.colors?.background1,
+    background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme?.shape?.borderRadius?.regular
   },
@@ -4115,7 +4008,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     marginBottom: theme.spacing.margin.tiny,
     fontSize: theme.typography.fontSize.body,
     wordBreak: 'break-word',
-    color: theme?.colors?.font1,
+    color: theme?.palette?.font?.primary,
     lineHeight: '26px'
   },
   userContainer: {
@@ -4144,7 +4037,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     marginRight: '16px'
   },
   userName: {
-    color: theme?.colors?.font1,
+    color: theme?.palette?.font?.default,
     margin: '0',
     fontSize: theme.typography.fontSize.h5,
     // paddingTop: '16px',
@@ -4163,6 +4056,19 @@ const useTestimonialStyles = createUseStyles(theme => ({
     testimonialContainer: {
       padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px`
     },
+    // testimonialCardAndText: {
+    //   margin: '0 20px'
+    // },
+
+    // testimonialHeader: {
+    //   fontSize: '24px',
+    //   color: theme?.palette?.font?.default,
+    //   margin: '4px 0 12px 0',
+    //   overflow: 'hidden',
+    //   // whiteSpace: 'nowrap',
+    //   wordBreak: 'break-word',
+    //   textOverflow: 'ellipsis'
+    // },
     testimonialText: {
       textAlign: 'center'
     },
@@ -4215,7 +4121,7 @@ function QuotesComponent() {
     width: "28px",
     height: "21px",
     name: "Quote",
-    color: theme?.colors?.icon
+    color: theme?.palette?.primary?.main
   }));
 }
 
@@ -4526,7 +4432,6 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
         fontFamily: theme?.typography?.fontFamily
         // boxSizing: 'border-box'
       },
-
       '& h2,& h3,& p': {
         marginTop: '0'
       }
@@ -4551,7 +4456,6 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       wordBreak: 'break-word'
       // marginBottom: '8px'
     },
-
     videoTestimonialTitle: {
       fontSize: theme.typography.fontSize.h2,
       // lineHeight: '71px',
@@ -4745,7 +4649,7 @@ const useVideoStyles = createUseStyles(theme => {
       padding: ({
         isMobile
       } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
-      backgroundColor: theme?.colors?.background2,
+      backgroundColor: theme?.palette?.background?.primary,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -4768,7 +4672,7 @@ const useVideoStyles = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       textTransform: 'uppercase',
       lineHeight: '20px',
-      color: theme?.colors?.font2,
+      color: theme?.palette?.font?.default,
       letterSpacing: '3px',
       wordBreak: 'break-word'
     },
@@ -4779,14 +4683,14 @@ const useVideoStyles = createUseStyles(theme => {
       letterSpacing: '-3px',
       marginBottom: theme.spacing.margin.tiny,
       marginTop: '8px',
-      color: theme?.colors?.font2,
+      color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     sliderContainer: {
       marginRight: `-${theme.spacing.padding.medium}px`
     },
     singleSlideContainer: {
-      backgroundColor: 'white',
+      backgroundColor: theme?.palette?.background?.default,
       // margin: '20px',
       width: 'calc(100% - 24px)',
       height: 'calc(100% - 40px)',
@@ -4823,14 +4727,14 @@ const useVideoStyles = createUseStyles(theme => {
       fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '32px',
       marginBottom: '8px',
-      color: theme?.colors?.lightblack,
+      color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     videoDetailsSubHeading: {
       fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme?.colors?.gray
+      color: theme?.palette?.font?.primary
     },
     '@media (max-width: 767px)': {
       videoHeading: {
@@ -4977,10 +4881,11 @@ var index$e = /*#__PURE__*/Object.freeze({
 
 const useSectionStyles$3 = createUseStyles(theme => ({
   section: {
+    position: 'relative',
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px 0px ${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
-    background: `linear-gradient(180deg, ${theme?.colors?.background2} 50%, #FFFFFF 50%)`,
+    backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -4992,20 +4897,27 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     //   }
     // }
   },
-
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
       containerWidth
     } = {}) => containerWidth
   },
+  partialBackground: {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    height: '50%',
+    background: theme?.palette?.background?.primary,
+    width: '100%'
+  },
   content: {
     position: 'relative'
   },
   subTitleHeading: {
     width: '100%',
     fontSize: theme.typography.fontSize.subHead,
-    color: theme?.colors?.font2,
+    color: theme?.palette?.font?.default,
     textTransform: 'uppercase',
     textAlign: 'left',
     lineHeight: '20px',
@@ -5017,7 +4929,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     fontSize: theme.typography.fontSize.h2,
     width: '100%',
     lineHeight: '70px',
-    color: theme?.colors?.font2,
+    color: theme?.palette?.font?.default,
     textAlign: 'left',
     wordBreak: 'break-word'
   },
@@ -5027,7 +4939,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
   // },
 
   card: {
-    background: theme?.colors?.white,
+    background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme.shape.borderRadius.large,
     margin: ({
@@ -5048,7 +4960,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     textAlign: 'center',
     fontSize: theme.typography.fontSize.h6,
     fontWeight: theme.typography.fontWeight.bold,
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     margin: `16px 0px`,
     wordBreak: 'break-word'
   },
@@ -5060,7 +4972,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: '50%',
-    background: theme?.colors?.background2
+    background: theme?.palette?.background?.primary
   },
   buttonContainerClass: {
     marginRight: theme.spacing.margin.regular,
@@ -5074,7 +4986,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     textAlign: 'center',
     fontSize: theme.typography.fontSize.body,
     lineHeight: '22px',
-    color: theme?.colors?.gray,
+    color: theme?.palette?.font?.primary,
     margin: '0',
     wordBreak: 'break-word'
   },
@@ -5160,7 +5072,7 @@ function Info({
     className: classes.imageContainer
   }, /*#__PURE__*/React.createElement(Icon, {
     name: dt.icon.metadata.value,
-    color: theme?.colors?.icon,
+    color: theme.palette.primary.main,
     width: isMobile ? '30px' : '40px',
     height: isMobile ? '30px' : '40px'
   })), /*#__PURE__*/React.createElement("h3", {
@@ -5217,7 +5129,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
-    backgroundColor: theme?.colors?.background2,
+    backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5234,7 +5146,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   subHeading: {
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     textTransform: 'uppercase',
     letterSpacing: '3px'
@@ -5244,7 +5156,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: 'normal',
     margin: '0',
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     marginBottom: theme.spacing.margin.tiny
   },
@@ -5255,7 +5167,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     padding: '32px 0px'
   },
   textPara: {
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font?.primary,
     wordBreak: 'break-word',
     fontSize: theme.typography.fontSize.body,
     lineHeight: '24px'
@@ -5350,7 +5262,6 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -5381,7 +5292,6 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       position: 'relative',
       paddingBottom: '59.83%' // keeping aspect ratio 585x350
     },
-
     contentRow: {
       display: 'grid',
       gridTemplateColumns: ({
@@ -5562,7 +5472,7 @@ const useFaqListStyles = createUseStyles(theme => ({
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
-    backgroundColor: theme?.colors?.background2,
+    backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5577,7 +5487,7 @@ const useFaqListStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   sectionSubheading: {
-    color: theme?.colors?.font3,
+    color: theme?.palette?.font.default,
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
     wordBreak: 'break-word'
@@ -5586,16 +5496,15 @@ const useFaqListStyles = createUseStyles(theme => ({
     fontSize: theme.typography.fontSize.h2,
     fontWeight: theme.typography.fontWeight.bold,
     wordBreak: 'break-word',
-    marginBottom: `${theme.spacing.margin.tiny}px`,
-    color: theme?.colors?.font3
+    marginBottom: `${theme.spacing.margin.tiny}px`
   },
   container: {
     boxShadow: theme?.shadows?.secondary,
     borderRadius: '8px',
-    backgroundColor: theme?.colors?.white
+    backgroundColor: theme?.palette?.background?.default
   },
   basicCardContainer: {
-    borderBottom: `1px solid #D8E0F0`,
+    borderBottom: theme?.borders?.secondary,
     padding: `${theme.spacing.padding.tiny}px`
   },
   innerContainer: {
@@ -5614,14 +5523,14 @@ const useFaqListStyles = createUseStyles(theme => ({
     alignItems: 'center'
   },
   title: {
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font.default,
     fontSize: theme.typography.fontSize.h5,
     fontWeight: theme.typography.fontWeight.bold,
     margin: '0',
     wordBreak: 'break-word'
   },
   content: {
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font.primary,
     fontSize: theme.typography.fontSize.body,
     lineHeight: '24px',
     maxHeight: ({
@@ -5741,10 +5650,11 @@ var index$a = /*#__PURE__*/Object.freeze({
 
 const useTextGridStyles = createUseStyles(theme => ({
   section: {
-    background: theme.colors.background1,
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
+    // backgroundColor: theme?.palette?.background?.primary,
+
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5752,6 +5662,12 @@ const useTextGridStyles = createUseStyles(theme => ({
     '& h2,& h3,& p': {
       marginTop: '0'
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
   sectionContainer: {
     margin: '0 auto',
@@ -5760,7 +5676,7 @@ const useTextGridStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   subheading: {
-    color: theme?.colors?.font1,
+    color: theme?.palette?.font.default,
     fontSize: theme.typography.fontSize.subHead,
     lineHeight: '20px',
     letterSpacing: '3px',
@@ -5774,8 +5690,7 @@ const useTextGridStyles = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     letterSpacing: '-3px',
     marginBottom: theme.spacing.margin.tiny,
-    wordBreak: 'break-word',
-    color: theme?.colors?.font1
+    wordBreak: 'break-word'
   },
   sliderContainer: {
     margin: '0 -10px'
@@ -5928,7 +5843,6 @@ const useCourseStyles = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -5961,7 +5875,6 @@ const useCourseStyles = createUseStyles(theme => {
       // textAlign: 'center',
       // wordBreak: 'break-word'
     },
-
     slickContainer: {
       marginRight: '-20px'
     },
@@ -6009,7 +5922,6 @@ const useCourseStyles = createUseStyles(theme => {
       justifyContent: 'space-between'
       //alignItems: 'center',
     },
-
     courseCardTags: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -6040,12 +5952,11 @@ const useCourseStyles = createUseStyles(theme => {
       // whiteSpace: 'nowrap',
       // textOverflow: 'ellipsis'
     },
-
     courseCardDiscount: {
       display: 'flex',
       justifyContent: 'flex-start',
       alignItems: 'center',
-      fontSize: theme.typography.fontSize.body,
+      fontSize: theme.typography.fontSize.subHead,
       color: theme?.palette?.font?.primary,
       '& img': {
         marginRight: '5px'
@@ -6078,8 +5989,8 @@ const useCourseStyles = createUseStyles(theme => {
     },
     courseCardBuyBtn: {
       cursor: 'pointer',
-      background: theme?.colors?.ctaColor,
-      color: theme?.colors?.CtaTextColor,
+      background: theme?.palette?.primary?.main,
+      color: theme?.palette?.font?.invertedDefault,
       padding: '8px 16px',
       fontWeight: theme.typography.fontWeight.bold,
       cursor: 'pointer',
@@ -6147,7 +6058,6 @@ const useCourseStyles = createUseStyles(theme => {
         // whiteSpace: 'nowrap',
         // textOverflow: 'ellipsis'
       },
-
       singleCard: {
         margin: '6px 2px'
         // width: 'calc(100% - 12px)'
@@ -6178,6 +6088,13 @@ async function getCourseList(baseURLs, hashToken) {
 
 var tagIcon = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.843%208.64984L9.34297%201.14984C9.04297%200.849837%208.6263%200.666504%208.16797%200.666504H2.33464C1.41797%200.666504%200.667969%201.4165%200.667969%202.33317V8.1665C0.667969%208.62484%200.851302%209.0415%201.15964%209.34984L8.65964%2016.8498C8.95964%2017.1498%209.3763%2017.3332%209.83464%2017.3332C10.293%2017.3332%2010.7096%2017.1498%2011.0096%2016.8415L16.843%2011.0082C17.1513%2010.7082%2017.3346%2010.2915%2017.3346%209.83317C17.3346%209.37484%2017.143%208.94984%2016.843%208.64984ZM3.58464%204.83317C2.89297%204.83317%202.33464%204.27484%202.33464%203.58317C2.33464%202.8915%202.89297%202.33317%203.58464%202.33317C4.2763%202.33317%204.83464%202.8915%204.83464%203.58317C4.83464%204.27484%204.2763%204.83317%203.58464%204.83317Z%22%20fill%3D%22%23FE9B0E%22%2F%3E%3C%2Fsvg%3E";
 
+function getShortenedSubstring(name, length, allowDots = true) {
+  if (name) {
+    return name.length < length ? name : `${name.substr(0, length)}${allowDots && '...'}`;
+  }
+  return '';
+}
+
 const formatCurrency = (countryCode, value, currencySymbol) => {
   let formattedValue = Number(value);
   const getFormattedValue = (countryCode, currencySymbol, value) => {
@@ -6445,10 +6362,11 @@ var index$8 = /*#__PURE__*/Object.freeze({
 const useTeamStyles = createUseStyles(theme => {
   return {
     teamSuperContainer: {
-      background: `linear-gradient(180deg, ${theme?.colors?.background2} 50%, #FFFFFF 50%)`,
       padding: ({
         isMobile
       } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
+      // backgroundColor: theme?.palette?.background?.primary,
+
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -6469,17 +6387,25 @@ const useTeamStyles = createUseStyles(theme => {
       lineHeight: '20px',
       letterSpacing: '3px',
       marginBottom: '8px',
-      color: theme?.colors?.font2,
+      color: theme?.palette?.font?.default,
       // wordBreak: 'break-word',
       position: 'relative'
     },
+    partialBackground: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      height: '50%',
+      background: theme?.palette?.background?.primary,
+      width: '100%'
+    },
     teamTitle: {
       fontSize: theme.typography.fontSize.h2,
       fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '70px',
       letterSpacing: '-3px',
       wordBreak: 'break-word',
-      color: theme?.colors?.font2,
+      color: theme?.palette?.font?.default,
       position: 'relative'
     },
     sliderContainer: {
@@ -6523,7 +6449,6 @@ const useTeamStyles = createUseStyles(theme => {
       margin: '20px 0 0'
       // overflowWrap: 'break-word'
     },
-
     teamDetailsHeading: {
       fontSize: theme.typography.fontSize.h6,
       fontWeight: theme.typography.fontWeight.bold,
@@ -6567,14 +6492,15 @@ const useTeamStyles = createUseStyles(theme => {
         // margin: '15px 0 0',
         // paddingBottom: '0'
       },
-
       teamDetailsHeading: {
         fontSize: '16px',
         lineHeight: '24px',
-        margin: '0'
+        margin: '0',
+        color: theme?.palette?.font?.body
       },
       teamDetailsSubHeading: {
-        marginTop: '0px'
+        marginTop: '0px',
+        color: theme?.palette?.font?.primary
       }
     }
   };
@@ -6685,7 +6611,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     alignItems: 'center',
-    background: `linear-gradient(180deg, ${theme?.colors?.background2} 50%, #FFFFFF 50%)`,
+    backgroundColor: theme?.palette?.background?.default,
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
@@ -6700,23 +6626,22 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     //   }
     // }
   },
-
   formContainer: {
     margin: '0 auto',
     maxWidth: ({
       containerWidth
     } = {}) => containerWidth
   },
-  // partialBackground: {
-  //   top: '0',
-  //   left: '0',
-  //   width: '100%',
-  //   height: '50%',
-  //   position: 'absolute',
-  //   background: theme?.colors?.white
-  // },
+  partialBackground: {
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '50%',
+    position: 'absolute',
+    background: theme?.palette?.background?.primary
+  },
   sectionContainer: {
-    backgroundColor: theme?.colors?.white,
+    backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: '48px',
@@ -6725,7 +6650,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   title: {
     margin: '0',
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '71px',
     letterSpacing: '-3px',
@@ -6737,18 +6662,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     display: 'flex'
     // alignItems: 'flex-start',
   },
-
   leftContainerForm: {
     width: '65%',
     display: 'flex',
     flexDirection: 'column'
     // justifyContent: 'space-between'
   },
-
   subtitle: {
     // margin: '0 0 40px 0',
     fontSize: theme.typography.fontSize.h5,
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     lineHeight: '32px',
     wordBreak: 'break-word',
     marginBottom: '32px'
@@ -6771,7 +6694,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   },
   addressText: {
     fontSize: theme.typography.fontSize.h6,
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     lineHeight: '24px',
     fontSize: '16px'
   },
@@ -6812,7 +6735,6 @@ const useSectionStyles$1 = createUseStyles(theme => ({
       width: '100%'
       // padding: '0 16ox'
     },
-
     rightContainer: {
       width: '100%',
       padding: '0'
@@ -7108,7 +7030,7 @@ const useSectionStyles = createUseStyles(theme => ({
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
-    background: `linear-gradient(180deg, ${theme?.colors?.background2} 50%, #FFFFFF 50%)`,
+    backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -7120,7 +7042,6 @@ const useSectionStyles = createUseStyles(theme => ({
     //   }
     // }
   },
-
   contactContainer: {
     width: '100%',
     margin: '0 auto',
@@ -7128,8 +7049,16 @@ const useSectionStyles = createUseStyles(theme => ({
       containerWidth
     } = {}) => containerWidth
   },
+  partialBackground: {
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '50%',
+    position: 'absolute',
+    background: theme?.palette?.background?.primary
+  },
   sectionContainer: {
-    backgroundColor: theme?.colors?.white,
+    backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: '48px',
@@ -7138,7 +7067,7 @@ const useSectionStyles = createUseStyles(theme => ({
   title: {
     margin: '0',
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.colors?.lightblack?.default,
+    color: theme?.palette?.font?.default,
     lineHeight: '71px',
     letterSpacing: '-3px',
     textAlign: 'left',
@@ -7159,11 +7088,10 @@ const useSectionStyles = createUseStyles(theme => ({
     // justifyContent: 'space-between',
     // flex: 1
   },
-
   subtitle: {
     // margin: '0 0 auto 0',
     fontSize: theme.typography.fontSize.h6,
-    color: theme?.colors?.lightblack,
+    color: theme?.palette?.font?.default,
     // lineHeight: '32px',
     // margin: '16px 0',
     textAlign: 'center',
@@ -7194,8 +7122,8 @@ const useSectionStyles = createUseStyles(theme => ({
   inputField: {
     width: '100%',
     // maxWidth: '314px',
-    // background: theme?.palette?.background?.default,
-    border: `1px solid ${theme?.colors?.cta}`,
+    background: theme?.palette?.background?.default,
+    border: `1px solid ${theme?.palette?.border?.secondary}`,
     borderRadius: theme?.shape?.borderRadius?.regular,
     // padding: '14px 12px',
     display: 'flex',
@@ -7208,7 +7136,7 @@ const useSectionStyles = createUseStyles(theme => ({
       fontWeight: '400',
       fontSize: theme.typography.fontSize.subHead,
       lineHeight: '20px',
-      color: theme?.colors?.lightblack,
+      color: theme?.palette?.font?.primary,
       fontFamily: theme?.typography?.fontFamily
     },
     '&:focus': {
@@ -7521,7 +7449,6 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     webinarSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      background: theme.colors.background1,
       padding: ({
         isMobile
       } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
@@ -7544,6 +7471,30 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       maxWidth: '1440px',
       fontFamily: theme?.typography?.fontFamily
     },
+    // videoTestimonialHeading: {
+    //   fontSize: theme.typography.fontSize.subHead,
+    //   lineHeight: '20px',
+    //   letterSpacing: '3px',
+    //   textTransform: 'uppercase',
+    //   color: theme.palette.font.tertiary,
+    //   wordBreak: 'break-word',
+    //   fontWeight: theme.typography.fontWeight.bold,
+    // },
+
+    // videoTestimonialTitle: {
+    //   fontSize: theme.typography.fontSize.h2,
+    //   lineHeight: '71px',
+    //   fontWeight: theme.typography.fontWeight.bold,
+    //   letterSpacing: '-3px',
+    //   margin: '0',
+    //   color: theme.palette.font.default,
+    //   wordBreak: 'break-word'
+    // },
+
+    // videoCarouselContainer: {
+    //   marginTop: '16px'
+    // },
+
     webinarCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -7564,7 +7515,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     iframeContainer: {
       width: '100%',
       position: 'relative',
-      aspectRatio: '4/3',
+      paddingBottom: '56.25%',
       // top: "6%",
       // left: '5%'
       borderRadius: '8px',
@@ -7572,9 +7523,8 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     offerText: {
       textAlign: 'center',
-      color: theme?.colors?.lightblack,
-      marginBottom: '5% !important',
-      fontWeight: '700'
+      color: theme.palette.font.primary,
+      marginBottom: '5%'
     },
     offerPrice: {
       fontSize: theme.typography.fontSize.h5,
@@ -7599,7 +7549,6 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       marginTop: '5%'
       // padding: '0px 5% 0px 5%'
     },
-
     iframe: {
       position: 'absolute',
       width: '100%',
@@ -7620,7 +7569,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: wordBreakValue => wordBreakValue || 'break-word',
-      color: theme?.colors?.font1
+      color: theme.palette.font.default
     },
     courseViewContainer: {
       width: '645px',
@@ -7634,9 +7583,8 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     bannerContainer: {
       width: '100%',
-      background: theme?.colors?.bannerColor,
-      color: theme?.colors?.bannerCtaColor,
-      fontWeight: '600',
+      background: '#EB5757',
+      color: '#fff',
       textAlign: 'center',
       padding: '10px 10px 23px 40px',
       wordWrap: 'break-word',
@@ -7655,26 +7603,24 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       marginRight: '20px',
-      color: theme?.colors?.font1,
       '& div': {
-        fontSize: theme.typography.fontSize.body,
+        fontSize: theme.typography.fontSize.subHead,
         marginLeft: '10px'
       }
     },
     courseDetailContent: {
-      fontSize: theme.typography.fontSize.body,
-      lineHeight: '21px',
+      fontSize: theme.typography.fontSize.subHead,
       wordBreak: 'break-word',
-      color: theme?.colors?.font1,
+      color: theme.palette.font.primary,
       whiteSpace: 'pre-wrap',
       width: '80%'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: theme.typography.fontSize.body,
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
-      color: theme?.colors?.font1,
       marginTop: '-20px',
+      color: '#00ADE7',
       wordBreak: 'break-word'
     },
     courseDetailTime: {
@@ -7689,7 +7635,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       display: 'flex',
       width: '36px',
       height: '36px',
-      backgroundColor: theme?.colors?.icon,
+      backgroundColor: 'rgb(240, 244, 248)',
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: '6px'
@@ -7881,15 +7827,14 @@ const SingleVideoSlide$1 = props => {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Calendar',
-    width: "24px",
-    color: theme?.colors?.background2
+    color: theme.palette.primary.main
   })), /*#__PURE__*/React.createElement("div", null, moment(data.startDate).locale(momentLocale).format('Do MMM YY') + ' ', moment(data.startTime).locale(momentLocale).format('h:mm A'), /*#__PURE__*/React.createElement("span", null, " - "), moment(data.endTime).locale(momentLocale).format('h:mm A'))), /*#__PURE__*/React.createElement("div", {
     className: classes.courseDetailTag
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
-    color: theme?.colors?.background2,
-    width: "24px",
+    color: theme.palette.primary.main,
+    width: "20px",
     name: `${data.webinarLocation === 'Location' ? 'Location' : 'Video'}`
   })), /*#__PURE__*/React.createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextContent?.refSetter,
@@ -7947,7 +7892,6 @@ const SingleVideoSlide$1 = props => {
       value: data.isPaid ? buyNowText : registerNowText
       // isExternal: 1
     },
-
     onClick: webinarCtaClick,
     type: 'primary',
     size: 'medium',
@@ -7996,15 +7940,13 @@ var index$4 = /*#__PURE__*/Object.freeze({
 });
 
 const useCoursePromotionPage = createUseStyles(theme => {
-  console.log(theme, 'themere');
   return {
     courseSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      background: theme?.colors?.background1,
       padding: ({
         isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.small}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -8016,7 +7958,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -8068,14 +8009,13 @@ const useCoursePromotionPage = createUseStyles(theme => {
     iframeContainer: {
       width: '100%',
       position: 'relative',
-      aspectRatio: '4/3',
-      borderRadius: '8px',
-      overflow: 'hidden'
+      paddingBottom: '56.25%'
+      // top: "6%",
+      // left: '5%'
     },
     offerText: {
       textAlign: 'center',
-      color: theme.palette.font.primary,
-      fontWeight: '700'
+      color: theme.palette.font.primary
     },
     offerPrice: {
       fontSize: theme.typography.fontSize.h4,
@@ -8122,7 +8062,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme?.colors?.font1
+      color: theme.palette.font.default
     },
     courseViewContainer: {
       width: '445px',
@@ -8134,22 +8074,19 @@ const useCoursePromotionPage = createUseStyles(theme => {
       // paddingBottom: '10px',
       // paddingTop: '10px'
     },
-
     bannerContainer: {
       width: '100%',
-      background: theme?.colors?.bannerColor,
-      color: theme?.colors?.bannerCtaColor,
-      fontWeight: '600',
+      background: '#EB5757',
+      color: '#fff',
       textAlign: 'center',
       padding: '10px 10px 23px 40px',
       wordWrap: 'break-word',
       position: 'relative',
-      fontSize: '14px',
+      fontSize: theme.typography.fontSize.subHead,
       transform: 'rotate(180deg)',
       clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
       // marginBottom: '16px'
     },
-
     bannerContainerText: {
       transform: 'rotate(180deg)'
     },
@@ -8160,8 +8097,8 @@ const useCoursePromotionPage = createUseStyles(theme => {
     },
     courseEmblem: {
       background: '#F0F4F8',
-      fontSize: theme.typography.fontSize.body,
-      borderRadius: '4px',
+      fontSize: theme.typography.fontSize.subHead,
+      borderRadius: '2.00337px',
       padding: '8px',
       display: 'flex',
       alignItems: 'center',
@@ -8177,29 +8114,27 @@ const useCoursePromotionPage = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       marginRight: '20px',
-      color: theme?.colors?.font1,
       '& div': {
-        fontSize: theme.typography.fontSize.body,
-        fontWeight: theme.typography.fontWeight.medium,
+        fontSize: theme.typography.fontSize.subHead,
+        fontWeight: theme.typography.fontWeight.semiBold,
         marginLeft: '10px'
       }
     },
     courseDetailContent: {
-      marginTop: '20px',
-      fontSize: theme.typography.fontSize.body,
-      lineHeight: '21px',
+      // marginTop: '16px',
+      fontSize: theme.typography.fontSize.subHead,
+      lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme?.colors?.font1,
+      color: theme.palette.font.primary,
       whiteSpace: 'pre-wrap',
       margin: '10px 0 20px'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: theme.typography.fontSize.body,
-      textDecoration: 'underline',
-      lineHeight: '21px',
-      marginTop: '20px',
-      color: theme.colors?.font1,
+      fontSize: theme.typography.fontSize.subHead,
+      lineHeight: '24px',
+      marginTop: '-24px',
+      color: '#00ADE7',
       wordBreak: 'break-word'
     },
     courseDetailTime: {
@@ -8210,7 +8145,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       display: 'flex',
       width: '36px',
       height: '36px',
-      backgroundColor: theme?.colors?.icon,
+      backgroundColor: 'rgb(240, 244, 248)',
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: '6px'
@@ -8262,7 +8197,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
         height: 'max-content'
         // paddingRight: '10px'
       },
-
       videoDetails: {
         width: '100%'
       },
@@ -8270,8 +8204,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
         // fontSize: '20px',
         fontWeight: '600',
         lineHeight: 'normal',
-        letterSpacing: '0px',
-        color: theme?.colors?.font1
+        letterSpacing: '0px'
       },
       videoTestimonialTitle: {
         // fontSize: '24px',
@@ -8440,32 +8373,28 @@ const SingleVideoSlide = props => {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Clock',
-    width: "24px",
-    color: theme?.colors?.background2
+    color: theme.palette.primary.main
   })), /*#__PURE__*/React.createElement("div", null, data?.courseOverviewData?.courseDuration?.text)) : null, data?.courseOverviewData?.metaData?.isPhysicalDeliveryEnabled ? /*#__PURE__*/React.createElement("div", {
     className: classes.courseDetailTag
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Book Saved',
-    color: theme?.colors?.background2,
-    width: "24px"
+    color: theme.palette.primary.main
   })), /*#__PURE__*/React.createElement("div", null, data?.courseOverviewData?.metaData?.isPhysicalDeliveryEnabled ? 'Physical Books' : null)) : null, data?.courseOverviewData?.metaData?.isCertificateEnabled ? /*#__PURE__*/React.createElement("div", {
     className: classes.courseDetailTag
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Certificate',
-    color: theme?.colors?.background2,
-    width: "20px"
-  })), /*#__PURE__*/React.createElement("div", null, data?.courseOverviewData?.metaData?.isCertificateEnabled ? handleCourseCertificateText() : null)) : null, data?.courseOverviewData?.resourseDataText?.heading ? /*#__PURE__*/React.createElement("div", {
+    color: theme.palette.primary.main
+  })), /*#__PURE__*/React.createElement("div", null, data?.courseOverviewData?.metaData?.isCertificateEnabled ? handleCourseCertificateText() : null)) : null, data?.courseOverviewData?.resourseDataText.heading ? /*#__PURE__*/React.createElement("div", {
     className: classes.courseDetailTag
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Certificate',
-    color: theme?.colors?.background2,
-    width: "20px"
+    color: theme.palette.primary.main
   })), /*#__PURE__*/React.createElement("div", null, data?.courseOverviewData?.resourseDataText?.heading)) : null), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.courseDetailContent,
@@ -8521,7 +8450,6 @@ const SingleVideoSlide = props => {
       value: buyNowText
       // isExternal: 1
     },
-
     onClick: courseBuyNow,
     type: 'primary',
     size: 'medium',
@@ -8592,7 +8520,7 @@ const useFormPageStyles = createUseStyles(theme => ({
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    background: theme?.colors?.background3,
+    background: '#F4F9FF',
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -8609,7 +8537,7 @@ const useFormPageStyles = createUseStyles(theme => ({
     marginTop: '8px',
     fontSize: theme.typography.fontSize.h6,
     lineHeight: '23px',
-    color: theme?.colors?.gray,
+    color: 'rgba(51, 51, 51, 0.5)',
     marginBottom: theme.spacing.margin.tiny
   },
   formPageFormContainer: {
@@ -8626,10 +8554,9 @@ const useFormPageStyles = createUseStyles(theme => ({
     // border: '1px solid #D8E0F0',
     // borderRadius: '16px'
   },
-
   inputFieldLabel: {
-    color: theme?.colors?.lightblack,
-    fontSize: theme.typography.fontSize.body,
+    color: '#333',
+    fontSize: theme.typography.fontSize.subHead,
     fontWeight: theme.typography.fontWeight.semiBold,
     display: 'block',
     marginTop: '20px',
@@ -8640,8 +8567,8 @@ const useFormPageStyles = createUseStyles(theme => ({
     borderRadius: '8px',
     border: '1px solid #D8E0F0',
     padding: '12px 16px',
-    color: theme?.colors?.lightblack,
-    fontSize: theme.typography.fontSize.body
+    color: '#7D8592',
+    fontSize: theme.typography.fontSize.subHead
   },
   checkboxField: {
     // padding: '20px',
@@ -8649,21 +8576,21 @@ const useFormPageStyles = createUseStyles(theme => ({
     // borderRadius: '8px'
   },
   checkBoxFieldLabel: {
-    color: theme?.colors?.lightblack,
-    fontSize: theme.typography.fontSize.body,
+    color: '#333',
+    fontSize: theme.typography.fontSize.subHead,
     fontWeight: theme.typography.fontWeight.semiBold,
     marginTop: '20px',
     marginBottom: '12px'
   },
   inputFieldRequired: {
-    color: theme?.colors?.lightblack
+    color: '#F41828'
   },
   checkboxFieldControl: {
     padding: '8px 0',
     '& label': {
-      fontSize: theme.typography.fontSize.body,
+      fontSize: theme.typography.fontSize.subHead,
       marginLeft: '10px',
-      color: theme?.colors?.lightblack
+      color: '#7D8592'
     }
   },
   submitBtnContainer: {
@@ -8676,7 +8603,8 @@ const useFormPageStyles = createUseStyles(theme => ({
     '& button': {
       // height: '44px',
       padding: '16px 24px',
-      fontSize: theme.typography.fontSize.body,
+      color: '#FFFFFF',
+      fontSize: theme.typography.fontSize.subHead,
       cursor: 'pointer',
       borderRadius: '8px'
     }
@@ -8939,7 +8867,6 @@ const FormPage = ({
       value: countryCode === 'KR' ? '제출하기' : 'SUBMIT'
       // isExternal: 1
     },
-
     type: 'primary',
     size: 'medium',
     target: null,
@@ -9122,7 +9049,6 @@ const useEmailStyles = createUseStyles(theme => ({
     height: '48px'
     /* margin: 18px 0px; */
   },
-
   'p-young-guru-title': {
     fontFamily: theme?.typography?.fontFamily,
     fontStyle: 'normal',
@@ -9150,7 +9076,6 @@ const useEmailStyles = createUseStyles(theme => ({
     textAlign: 'center'
     /* padding:35px 0 40px */
   },
-
   'two-columns .column': {
     width: '100%',
     maxWidth: '275px',
@@ -9684,7 +9609,7 @@ function PageRenderer({
     countryCode,
     currencySymbol
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
-  const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = useMemo(() => getTheme(color, font, context.isMobile), [color, font, context.isMobile]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -9697,7 +9622,8 @@ function PageRenderer({
     isHeader: true
   }, /*#__PURE__*/React.createElement(Header, {
     data: header,
-    isLandingPage: isLandingPage
+    isLandingPage: isLandingPage,
+    extraProps: extraProps
   })), sections?.length ? sections?.map((sectionData, sectionIndex) => /*#__PURE__*/React.createElement(Wrapper, _extends({}, !!SectionWrapper && {
     sectionData,
     sectionIndex