diy-template-components 1.1.11 → 2.0.1

package/build/index.es.js

@@ -57,7 +57,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     height: '60px'
   },
   headerContainer: {
-    background: theme?.palette?.background?.default,
+    background: theme?.colors?.white,
     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.palette.primary.main,
+    color: theme?.colors?.headerText,
     padding: '20px',
     '&:hover': {
       cursor: 'pointer',
-      background: theme.palette.primary.lightest,
+      background: theme?.colors?.headerHover,
       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?.palette?.background?.default,
+    background: theme?.colors?.white,
     boxShadow: theme?.shadows?.primary,
     position: ({
       isFixed
@@ -204,7 +204,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     height: '100%'
   },
   menuContainer: {
-    background: theme?.palette?.background?.default,
+    background: theme?.colors?.white,
     boxShadow: theme.shadows.secondary,
     width: '75%',
     height: '100%',
@@ -361,13 +361,11 @@ const buttonStyles = createUseStyles(theme => ({
     textAlign: 'center',
     color: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.colors?.CtaTextColor,
     background: ({
       disabled
-    } = {}) => 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}`,
+    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.colors?.ctaColor,
+    border: 'none',
     textDecoration: 'none',
     cursor: ({
       disabled
@@ -389,13 +387,13 @@ const buttonStyles = createUseStyles(theme => ({
     lineHeight: '18px',
     color: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
+    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme?.colors?.CtaTextColor,
     background: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
+    } = {}) => disabled ? colorMixer(theme?.palette?.parimar?.default, 0.5).color : theme?.colors?.ctaColor,
     border: ({
       disabled
-    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme.palette.primary.main}`,
+    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.colors?.ctaColor}`,
     cursor: ({
       disabled
     } = {}) => disabled ? 'not-allowed' : 'pointer',
@@ -2081,17 +2079,13 @@ 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
   };
 }
 
@@ -2213,6 +2207,178 @@ 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: {
@@ -2269,7 +2435,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(() => getTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -2307,7 +2473,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`,
-    backgroundColor: theme?.palette?.background?.primary,
+    background: theme?.colors?.background2,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -2365,14 +2531,14 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     marginBottom: '8px',
     fontSize: theme.typography.fontSize.subHead,
     letterSpacing: '3px',
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font3,
     wordBreak: 'break-word',
     maxWidth: '100%'
   },
   heading: {
     margin: '0',
     fontSize: theme.typography.fontSize.h1,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font3,
     wordBreak: ({
       wordBreakValue
     }) => wordBreakValue || 'break-word',
@@ -2381,7 +2547,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   },
   description: {
     margin: `${theme.spacing.margin.tiny}px 0px`,
-    color: theme?.palette?.font?.primary,
+    color: theme?.colors?.font3,
     lineHeight: '24px',
     wordBreak: 'break-word'
   },
@@ -2498,7 +2664,7 @@ const useCarouselStyles = createUseStyles(theme => ({
     width: '26px',
     background: ({
       inverted
-    } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.palette.primary.main
+    } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.colors.AccentColor
   },
   '@media screen and (max-width: 767px)': {
     sliderClass: {
@@ -2534,7 +2700,7 @@ const useArrowButtonStyles = createUseStyles(theme => ({
     height: sizeHandler,
     border: ({
       inverted
-    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.light}`,
+    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.colors?.AccentColor}`,
     borderRadius: '50%',
     display: 'flex',
     justifyContent: 'center',
@@ -2556,7 +2722,7 @@ function ArrowButton(props) {
   }, /*#__PURE__*/React.createElement(Icon, {
     height: props.size === 'small' ? '12px' : '18px',
     name: "Angle",
-    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.main,
+    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.colors?.AccentColor,
     inverted: true
   }));
 }
@@ -2766,7 +2932,6 @@ 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'
@@ -2784,7 +2949,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
   subTitleHeading: {
     marginBottom: '8px',
     fontSize: theme.typography.fontSize.subHead,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.black,
     alignItems: 'center',
     textAlign: 'center',
     wordBreak: 'break-word',
@@ -2794,7 +2959,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
   heading: {
     marginBottom: theme.spacing.margin.tiny,
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.black,
     fontWeight: theme.typography.fontWeight.bold,
     textAlign: 'center',
     wordBreak: 'break-word'
@@ -2811,7 +2976,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     display: 'flex',
     width: 'calc(100% - 200px)',
     alignItems: 'center',
-    background: theme?.palette?.background?.default,
+    background: theme?.colors?.white,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     overflow: 'hidden',
@@ -2835,33 +3000,13 @@ 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',
@@ -2869,7 +3014,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     justifyContent: 'center',
     padding: '48px',
     height: '100%',
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font4,
     wordBreak: 'break-word'
   },
   contentText: {
@@ -2881,14 +3026,14 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '32px',
     marginBottom: '8px',
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     wordBreak: 'break-word'
   },
   contentPara: {
     fontStyle: 'normal',
     fontSize: '16px',
     lineHeight: '26px',
-    color: theme?.palette?.font?.primary,
+    color: theme?.colors?.gray,
     wordBreak: 'break-word'
   },
   '@media screen and (max-width: 767px)': {
@@ -3301,6 +3446,7 @@ 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'
@@ -3344,7 +3490,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%',
@@ -3369,13 +3515,13 @@ const useSectionStyles$5 = createUseStyles(theme => {
       marginBottom: '8px',
       fontSize: theme?.typography?.fontSize?.subHead,
       letterSpacing: '3px',
-      color: theme?.palette?.font?.default,
+      color: theme?.colors?.font3,
       wordBreak: 'break-word'
     },
     heading: {
       margin: '0',
       fontSize: theme?.typography?.fontSize?.h1,
-      color: theme?.palette?.font?.default,
+      color: theme?.colors?.font3,
       wordBreak: ({
         wordBreakValue
       }) => wordBreakValue || 'break-word',
@@ -3385,7 +3531,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
     description: {
       marginTop: theme.spacing.margin.tiny,
       marginBottom: theme.spacing.margin.tiny,
-      color: theme?.palette?.font?.primary,
+      color: theme?.colors?.font3,
       lineHeight: '24px',
       wordBreak: 'break-word'
     },
@@ -3551,16 +3697,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?.palette?.background?.default,
+    backgroundColor: theme?.colors?.background2,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: theme.spacing.padding.small,
@@ -3571,7 +3717,7 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '71px',
     letterSpacing: '-3px',
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font3,
     marginBottom: theme.spacing.padding.tiny,
     wordBreak: 'break-word'
   },
@@ -3583,7 +3729,7 @@ const useSectionStyles$4 = createUseStyles(theme => ({
   title: {
     fontSize: theme.typography.fontSize.h6,
     lineHeight: '32px',
-    color: theme?.palette?.font?.primary,
+    color: theme?.colors?.font3,
     wordBreak: 'break-word',
     flex: 1
   },
@@ -3711,8 +3857,8 @@ const inputStyles = createUseStyles(theme => ({
   inputField: {
     width: '100%',
     // maxWidth: '314px',
-    background: theme?.palette?.background?.default,
-    border: `1px solid ${theme?.palette?.border?.secondary}`,
+    // background: theme?.palette?.background?.default,
+    border: `1px solid ${theme?.colors?.icon}`,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: '14px 12px',
     display: 'flex',
@@ -3726,7 +3872,7 @@ const inputStyles = createUseStyles(theme => ({
       fontWeight: '400',
       fontSize: '16px',
       lineHeight: '20px',
-      color: theme?.palette?.font?.primary,
+      color: theme?.colors?.black,
       fontFamily: theme?.typography?.fontFamily
     },
     '&:focus': {
@@ -3926,7 +4072,6 @@ 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': {
@@ -3944,14 +4089,14 @@ const useTestimonialStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   testimonialText: {
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     fontSize: theme.typography.fontSize.subHead,
     wordBreak: 'break-word',
     textTransform: 'uppercase'
   },
   testimonialHeader: {
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     fontWeight: theme.typography.fontWeight.bold,
     marginBottom: theme.spacing.margin.tiny,
     marginTop: '8px',
@@ -3968,7 +4113,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     position: 'relative',
     height: 'calc(100% - 12px)',
     width: 'calc(100% - 24px)',
-    background: theme?.palette?.background?.default,
+    background: theme?.colors?.background1,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme?.shape?.borderRadius?.regular
   },
@@ -3995,7 +4140,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     marginBottom: theme.spacing.margin.tiny,
     fontSize: theme.typography.fontSize.body,
     wordBreak: 'break-word',
-    color: theme?.palette?.font?.primary,
+    color: theme?.colors?.font1,
     lineHeight: '26px'
   },
   userContainer: {
@@ -4024,7 +4169,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     marginRight: '16px'
   },
   userName: {
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font1,
     margin: '0',
     fontSize: theme.typography.fontSize.h5,
     // paddingTop: '16px',
@@ -4043,19 +4188,6 @@ 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'
     },
@@ -4108,7 +4240,7 @@ function QuotesComponent() {
     width: "28px",
     height: "21px",
     name: "Quote",
-    color: theme?.palette?.primary?.main
+    color: theme?.colors?.icon
   }));
 }
 
@@ -4638,7 +4770,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?.palette?.background?.primary,
+      backgroundColor: theme?.colors?.background2,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -4661,7 +4793,7 @@ const useVideoStyles = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       textTransform: 'uppercase',
       lineHeight: '20px',
-      color: theme?.palette?.font?.default,
+      color: theme?.colors?.font2,
       letterSpacing: '3px',
       wordBreak: 'break-word'
     },
@@ -4672,14 +4804,14 @@ const useVideoStyles = createUseStyles(theme => {
       letterSpacing: '-3px',
       marginBottom: theme.spacing.margin.tiny,
       marginTop: '8px',
-      color: theme?.palette?.font?.default,
+      color: theme?.colors?.font2,
       wordBreak: 'break-word'
     },
     sliderContainer: {
       marginRight: `-${theme.spacing.padding.medium}px`
     },
     singleSlideContainer: {
-      backgroundColor: theme?.palette?.background?.default,
+      backgroundColor: 'white',
       // margin: '20px',
       width: 'calc(100% - 24px)',
       height: 'calc(100% - 40px)',
@@ -4716,14 +4848,14 @@ const useVideoStyles = createUseStyles(theme => {
       fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '32px',
       marginBottom: '8px',
-      color: theme?.palette?.font?.default,
+      color: theme?.colors?.lightblack,
       wordBreak: 'break-word'
     },
     videoDetailsSubHeading: {
       fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme?.palette?.font?.primary
+      color: theme?.colors?.gray
     },
     '@media (max-width: 767px)': {
       videoHeading: {
@@ -4870,11 +5002,10 @@ 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`,
-    backgroundColor: theme?.palette?.background?.default,
+    background: `linear-gradient(180deg, ${theme?.colors?.background2} 50%, #FFFFFF 50%)`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -4893,21 +5024,13 @@ const useSectionStyles$3 = createUseStyles(theme => ({
       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?.palette?.font?.default,
+    color: theme?.colors?.font2,
     textTransform: 'uppercase',
     textAlign: 'left',
     lineHeight: '20px',
@@ -4919,7 +5042,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     fontSize: theme.typography.fontSize.h2,
     width: '100%',
     lineHeight: '70px',
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font2,
     textAlign: 'left',
     wordBreak: 'break-word'
   },
@@ -4929,7 +5052,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
   // },
 
   card: {
-    background: theme?.palette?.background?.default,
+    background: theme?.colors?.white,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme.shape.borderRadius.large,
     margin: ({
@@ -4950,7 +5073,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     textAlign: 'center',
     fontSize: theme.typography.fontSize.h6,
     fontWeight: theme.typography.fontWeight.bold,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     margin: `16px 0px`,
     wordBreak: 'break-word'
   },
@@ -4962,7 +5085,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: '50%',
-    background: theme?.palette?.background?.primary
+    background: theme?.colors?.background2
   },
   buttonContainerClass: {
     marginRight: theme.spacing.margin.regular,
@@ -4976,7 +5099,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     textAlign: 'center',
     fontSize: theme.typography.fontSize.body,
     lineHeight: '22px',
-    color: theme?.palette?.font?.primary,
+    color: theme?.colors?.gray,
     margin: '0',
     wordBreak: 'break-word'
   },
@@ -5062,7 +5185,7 @@ function Info({
     className: classes.imageContainer
   }, /*#__PURE__*/React.createElement(Icon, {
     name: dt.icon.metadata.value,
-    color: theme.palette.primary.main,
+    color: theme?.colors?.icon,
     width: isMobile ? '30px' : '40px',
     height: isMobile ? '30px' : '40px'
   })), /*#__PURE__*/React.createElement("h3", {
@@ -5119,7 +5242,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?.palette?.background?.default,
+    backgroundColor: theme?.colors?.background2,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5136,7 +5259,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   subHeading: {
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font3,
     wordBreak: 'break-word',
     textTransform: 'uppercase',
     letterSpacing: '3px'
@@ -5146,7 +5269,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: 'normal',
     margin: '0',
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.font3,
     wordBreak: 'break-word',
     marginBottom: theme.spacing.margin.tiny
   },
@@ -5157,7 +5280,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     padding: '32px 0px'
   },
   textPara: {
-    color: theme?.palette?.font?.primary,
+    color: theme?.colors?.font3,
     wordBreak: 'break-word',
     fontSize: theme.typography.fontSize.body,
     lineHeight: '24px'
@@ -5464,7 +5587,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?.palette?.background?.primary,
+    backgroundColor: theme?.colors?.background2,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5479,7 +5602,7 @@ const useFaqListStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   sectionSubheading: {
-    color: theme?.palette?.font.default,
+    color: theme?.colors?.font3,
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
     wordBreak: 'break-word'
@@ -5488,15 +5611,16 @@ const useFaqListStyles = createUseStyles(theme => ({
     fontSize: theme.typography.fontSize.h2,
     fontWeight: theme.typography.fontWeight.bold,
     wordBreak: 'break-word',
-    marginBottom: `${theme.spacing.margin.tiny}px`
+    marginBottom: `${theme.spacing.margin.tiny}px`,
+    color: theme?.colors?.font3
   },
   container: {
     boxShadow: theme?.shadows?.secondary,
     borderRadius: '8px',
-    backgroundColor: theme?.palette?.background?.default
+    backgroundColor: theme?.colors?.white
   },
   basicCardContainer: {
-    borderBottom: theme?.borders?.secondary,
+    borderBottom: `1px solid #D8E0F0`,
     padding: `${theme.spacing.padding.tiny}px`
   },
   innerContainer: {
@@ -5515,14 +5639,14 @@ const useFaqListStyles = createUseStyles(theme => ({
     alignItems: 'center'
   },
   title: {
-    color: theme?.palette?.font.default,
+    color: theme?.colors?.lightblack,
     fontSize: theme.typography.fontSize.h5,
     fontWeight: theme.typography.fontWeight.bold,
     margin: '0',
     wordBreak: 'break-word'
   },
   content: {
-    color: theme?.palette?.font.primary,
+    color: theme?.colors?.lightblack,
     fontSize: theme.typography.fontSize.body,
     lineHeight: '24px',
     maxHeight: ({
@@ -5642,11 +5766,10 @@ 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'
@@ -5654,14 +5777,7 @@ const useTextGridStyles = createUseStyles(theme => ({
     '& h2,& h3,& p': {
       marginTop: '0'
     }
-    // '& h2,& h3': {
-    //   fontWeight: '500',
-    //   '& b,& strong': {
-    //     fontWeight: '700'
-    //   }
-    // }
   },
-
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -5669,7 +5785,7 @@ const useTextGridStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   subheading: {
-    color: theme?.palette?.font.default,
+    color: theme?.colors?.font1,
     fontSize: theme.typography.fontSize.subHead,
     lineHeight: '20px',
     letterSpacing: '3px',
@@ -5683,7 +5799,8 @@ const useTextGridStyles = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     letterSpacing: '-3px',
     marginBottom: theme.spacing.margin.tiny,
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    color: theme?.colors?.font1
   },
   sliderContainer: {
     margin: '0 -10px'
@@ -5953,7 +6070,7 @@ const useCourseStyles = createUseStyles(theme => {
       display: 'flex',
       justifyContent: 'flex-start',
       alignItems: 'center',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       color: theme?.palette?.font?.primary,
       '& img': {
         marginRight: '5px'
@@ -5986,8 +6103,8 @@ const useCourseStyles = createUseStyles(theme => {
     },
     courseCardBuyBtn: {
       cursor: 'pointer',
-      background: theme?.palette?.primary?.main,
-      color: theme?.palette?.font?.invertedDefault,
+      background: theme?.colors?.ctaColor,
+      color: theme?.colors?.CtaTextColor,
       padding: '8px 16px',
       fontWeight: theme.typography.fontWeight.bold,
       cursor: 'pointer',
@@ -6360,11 +6477,10 @@ 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'
@@ -6385,25 +6501,17 @@ const useTeamStyles = createUseStyles(theme => {
       lineHeight: '20px',
       letterSpacing: '3px',
       marginBottom: '8px',
-      color: theme?.palette?.font?.default,
+      color: theme?.colors?.font2,
       // 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?.palette?.font?.default,
+      color: theme?.colors?.font2,
       position: 'relative'
     },
     sliderContainer: {
@@ -6495,12 +6603,10 @@ const useTeamStyles = createUseStyles(theme => {
       teamDetailsHeading: {
         fontSize: '16px',
         lineHeight: '24px',
-        margin: '0',
-        color: theme?.palette?.font?.body
+        margin: '0'
       },
       teamDetailsSubHeading: {
-        marginTop: '0px',
-        color: theme?.palette?.font?.primary
+        marginTop: '0px'
       }
     }
   };
@@ -6611,7 +6717,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     alignItems: 'center',
-    backgroundColor: theme?.palette?.background?.default,
+    background: `linear-gradient(180deg, ${theme?.colors?.background2} 50%, #FFFFFF 50%)`,
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
@@ -6633,16 +6739,16 @@ const useSectionStyles$1 = 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?.colors?.white
+  // },
   sectionContainer: {
-    backgroundColor: theme?.palette?.background?.default,
+    backgroundColor: theme?.colors?.white,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: '48px',
@@ -6651,7 +6757,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   title: {
     margin: '0',
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '71px',
     letterSpacing: '-3px',
@@ -6674,7 +6780,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   subtitle: {
     // margin: '0 0 40px 0',
     fontSize: theme.typography.fontSize.h5,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     lineHeight: '32px',
     wordBreak: 'break-word',
     marginBottom: '32px'
@@ -6697,7 +6803,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   },
   addressText: {
     fontSize: theme.typography.fontSize.h6,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     lineHeight: '24px',
     fontSize: '16px'
   },
@@ -7034,7 +7140,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`,
-    backgroundColor: theme?.palette?.background?.default,
+    background: `linear-gradient(180deg, ${theme?.colors?.background2} 50%, #FFFFFF 50%)`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -7054,16 +7160,8 @@ 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?.palette?.background?.default,
+    backgroundColor: theme?.colors?.white,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: '48px',
@@ -7072,7 +7170,7 @@ const useSectionStyles = createUseStyles(theme => ({
   title: {
     margin: '0',
     fontSize: theme.typography.fontSize.h2,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack?.default,
     lineHeight: '71px',
     letterSpacing: '-3px',
     textAlign: 'left',
@@ -7097,7 +7195,7 @@ const useSectionStyles = createUseStyles(theme => ({
   subtitle: {
     // margin: '0 0 auto 0',
     fontSize: theme.typography.fontSize.h6,
-    color: theme?.palette?.font?.default,
+    color: theme?.colors?.lightblack,
     // lineHeight: '32px',
     // margin: '16px 0',
     textAlign: 'center',
@@ -7128,8 +7226,8 @@ const useSectionStyles = createUseStyles(theme => ({
   inputField: {
     width: '100%',
     // maxWidth: '314px',
-    background: theme?.palette?.background?.default,
-    border: `1px solid ${theme?.palette?.border?.secondary}`,
+    // background: theme?.palette?.background?.default,
+    border: `1px solid ${theme?.colors?.cta}`,
     borderRadius: theme?.shape?.borderRadius?.regular,
     // padding: '14px 12px',
     display: 'flex',
@@ -7142,7 +7240,7 @@ const useSectionStyles = createUseStyles(theme => ({
       fontWeight: '400',
       fontSize: theme.typography.fontSize.subHead,
       lineHeight: '20px',
-      color: theme?.palette?.font?.primary,
+      color: theme?.colors?.lightblack,
       fontFamily: theme?.typography?.fontFamily
     },
     '&:focus': {
@@ -7455,6 +7553,7 @@ 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`,
@@ -7477,30 +7576,6 @@ 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',
@@ -7529,8 +7604,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     offerText: {
       textAlign: 'center',
-      color: theme.palette.font.primary,
-      marginBottom: '5%'
+      color: theme?.colors?.lightblack,
+      marginBottom: '5% !important',
+      fontWeight: '700'
     },
     offerPrice: {
       fontSize: theme.typography.fontSize.h5,
@@ -7576,7 +7652,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: wordBreakValue => wordBreakValue || 'break-word',
-      color: theme.palette.font.default
+      color: theme?.colors?.font1
     },
     courseViewContainer: {
       width: '645px',
@@ -7590,8 +7666,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     bannerContainer: {
       width: '100%',
-      background: '#EB5757',
-      color: '#fff',
+      background: theme?.colors?.bannerColor,
+      color: theme?.colors?.bannerCtaColor,
+      fontWeight: '600',
       textAlign: 'center',
       padding: '10px 10px 23px 40px',
       wordWrap: 'break-word',
@@ -7610,24 +7687,26 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       marginRight: '20px',
+      color: theme?.colors?.font1,
       '& div': {
-        fontSize: theme.typography.fontSize.subHead,
+        fontSize: theme.typography.fontSize.body,
         marginLeft: '10px'
       }
     },
     courseDetailContent: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
+      lineHeight: '21px',
       wordBreak: 'break-word',
-      color: theme.palette.font.primary,
+      color: theme?.colors?.font1,
       whiteSpace: 'pre-wrap',
       width: '80%'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
+      color: theme?.colors?.font1,
       marginTop: '-20px',
-      color: '#00ADE7',
       wordBreak: 'break-word'
     },
     courseDetailTime: {
@@ -7642,7 +7721,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       display: 'flex',
       width: '36px',
       height: '36px',
-      backgroundColor: 'rgb(240, 244, 248)',
+      backgroundColor: theme?.colors?.icon,
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: '6px'
@@ -7834,14 +7913,15 @@ const SingleVideoSlide$1 = props => {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Calendar',
-    color: theme.palette.primary.main
+    width: "24px",
+    color: theme?.colors?.background2
   })), /*#__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.palette.primary.main,
-    width: "20px",
+    color: theme?.colors?.background2,
+    width: "24px",
     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,
@@ -7948,13 +8028,15 @@ 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.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      } = {}) => isMobile ? `${theme.spacing.padding.small}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -8025,7 +8107,8 @@ const useCoursePromotionPage = createUseStyles(theme => {
 
     offerText: {
       textAlign: 'center',
-      color: theme.palette.font.primary
+      color: theme.palette.font.primary,
+      fontWeight: '700'
     },
     offerPrice: {
       fontSize: theme.typography.fontSize.h4,
@@ -8072,7 +8155,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme.palette.font.default
+      color: theme?.colors?.font1
     },
     courseViewContainer: {
       width: '445px',
@@ -8087,8 +8170,9 @@ const useCoursePromotionPage = createUseStyles(theme => {
 
     bannerContainer: {
       width: '100%',
-      background: '#EB5757',
-      color: '#fff',
+      background: theme?.colors?.bannerColor,
+      color: theme?.colors?.bannerCtaColor,
+      fontWeight: '600',
       textAlign: 'center',
       padding: '10px 10px 23px 40px',
       wordWrap: 'break-word',
@@ -8109,8 +8193,8 @@ const useCoursePromotionPage = createUseStyles(theme => {
     },
     courseEmblem: {
       background: '#F0F4F8',
-      fontSize: '18px',
-      borderRadius: '2.00337px',
+      fontSize: theme.typography.fontSize.body,
+      borderRadius: '4px',
       padding: '8px',
       display: 'flex',
       alignItems: 'center',
@@ -8126,6 +8210,7 @@ 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,
@@ -8133,20 +8218,21 @@ const useCoursePromotionPage = createUseStyles(theme => {
       }
     },
     courseDetailContent: {
-      // marginTop: '16px',
+      marginTop: '20px',
       fontSize: theme.typography.fontSize.body,
-      lineHeight: '24px',
+      lineHeight: '21px',
       wordBreak: 'break-word',
-      color: theme.palette.font.primary,
+      color: theme?.colors?.font1,
       whiteSpace: 'pre-wrap',
       margin: '10px 0 20px'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: theme.typography.fontSize.subHead,
-      lineHeight: '24px',
-      marginTop: '-24px',
-      color: '#00ADE7',
+      fontSize: theme.typography.fontSize.body,
+      textDecoration: 'underline',
+      lineHeight: '21px',
+      marginTop: '20px',
+      color: theme.colors?.font1,
       wordBreak: 'break-word'
     },
     courseDetailTime: {
@@ -8157,7 +8243,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       display: 'flex',
       width: '36px',
       height: '36px',
-      backgroundColor: 'rgb(240, 244, 248)',
+      backgroundColor: theme?.colors?.icon,
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: '6px'
@@ -8217,7 +8303,8 @@ const useCoursePromotionPage = createUseStyles(theme => {
         // fontSize: '20px',
         fontWeight: '600',
         lineHeight: 'normal',
-        letterSpacing: '0px'
+        letterSpacing: '0px',
+        color: theme?.colors?.font1
       },
       videoTestimonialTitle: {
         // fontSize: '24px',
@@ -8386,28 +8473,32 @@ const SingleVideoSlide = props => {
     className: classes.iconBackground
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Clock',
-    color: theme.palette.primary.main
+    width: "24px",
+    color: theme?.colors?.background2
   })), /*#__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.palette.primary.main
+    color: theme?.colors?.background2,
+    width: "24px"
   })), /*#__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.palette.primary.main
+    color: theme?.colors?.background2,
+    width: "24px"
   })), /*#__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.palette.primary.main
+    color: theme?.colors?.background2,
+    width: "24px"
   })), /*#__PURE__*/React.createElement("div", null, data?.courseOverviewData?.resourseDataText?.heading)) : null), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.courseDetailContent,
@@ -8534,7 +8625,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: '#F4F9FF',
+    background: theme?.colors?.background3,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -8551,7 +8642,7 @@ const useFormPageStyles = createUseStyles(theme => ({
     marginTop: '8px',
     fontSize: theme.typography.fontSize.h6,
     lineHeight: '23px',
-    color: 'rgba(51, 51, 51, 0.5)',
+    color: theme?.colors?.gray,
     marginBottom: theme.spacing.margin.tiny
   },
   formPageFormContainer: {
@@ -8570,8 +8661,8 @@ const useFormPageStyles = createUseStyles(theme => ({
   },
 
   inputFieldLabel: {
-    color: '#333',
-    fontSize: theme.typography.fontSize.subHead,
+    color: theme?.colors?.lightblack,
+    fontSize: theme.typography.fontSize.body,
     fontWeight: theme.typography.fontWeight.semiBold,
     display: 'block',
     marginTop: '20px',
@@ -8582,8 +8673,8 @@ const useFormPageStyles = createUseStyles(theme => ({
     borderRadius: '8px',
     border: '1px solid #D8E0F0',
     padding: '12px 16px',
-    color: '#7D8592',
-    fontSize: theme.typography.fontSize.subHead
+    color: theme?.colors?.lightblack,
+    fontSize: theme.typography.fontSize.body
   },
   checkboxField: {
     // padding: '20px',
@@ -8591,21 +8682,21 @@ const useFormPageStyles = createUseStyles(theme => ({
     // borderRadius: '8px'
   },
   checkBoxFieldLabel: {
-    color: '#333',
-    fontSize: theme.typography.fontSize.subHead,
+    color: theme?.colors?.lightblack,
+    fontSize: theme.typography.fontSize.body,
     fontWeight: theme.typography.fontWeight.semiBold,
     marginTop: '20px',
     marginBottom: '12px'
   },
   inputFieldRequired: {
-    color: '#F41828'
+    color: theme?.colors?.lightblack
   },
   checkboxFieldControl: {
     padding: '8px 0',
     '& label': {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       marginLeft: '10px',
-      color: '#7D8592'
+      color: theme?.colors?.lightblack
     }
   },
   submitBtnContainer: {
@@ -8618,8 +8709,7 @@ const useFormPageStyles = createUseStyles(theme => ({
     '& button': {
       // height: '44px',
       padding: '16px 24px',
-      color: '#FFFFFF',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       cursor: 'pointer',
       borderRadius: '8px'
     }
@@ -9627,7 +9717,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(() => getTheme(color, font, context.isMobile), [color, font, context.isMobile]);
+  const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme