diy-template-components 0.2.75 → 0.2.77

package/build/index.es.js

@@ -338,118 +338,117 @@ const colorMixer = (hex1, weightage = 1, hex2 = colors.white) => {
   };
 };
 
-const buttonStyles = createUseStyles(theme => {
-  console.log('themexxxxdsfb', theme);
-  return {
-    primary: {
-      width: ({
-        fluid
-      } = {}) => fluid ? '100%' : '',
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      fontWeight: '700',
-      fontSize: '14px',
-      lineHeight: '18px',
-      textAlign: 'center',
-      color: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.isGradient ? theme?.themeGradient?.CtaTextColor : theme?.themeColors?.CtaTextColor,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.isGradient ? theme?.themeGradient?.ctaColor : theme?.themeColors?.ctaColor,
-      border: 'none',
-      textDecoration: 'none',
-      cursor: ({
-        disabled
-      } = {}) => disabled ? 'not-allowed' : 'pointer',
-      maxWidth: '100%',
-      display: 'inline-block',
-      wordBreak: 'break-word',
-      flexShrink: '0'
+const buttonStyles = createUseStyles(theme => ({
+  primary: {
+    width: ({
+      fluid
+    } = {}) => fluid ? '100%' : '',
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    fontWeight: '700',
+    fontSize: '14px',
+    lineHeight: '18px',
+    textAlign: 'center',
+    color: ({
+      disabled
+    } = {}) => 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?.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
+    } = {}) => disabled ? 'not-allowed' : 'pointer',
+    maxWidth: '100%',
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    flexShrink: '0'
+  },
+  secondary: {
+    width: ({
+      fluid
+    } = {}) => fluid ? '100%' : '',
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    fontSize: '14px',
+    fontWeight: '700',
+    display: 'inline-block',
+    textDecoration: 'none',
+    lineHeight: '18px',
+    color: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
+    background: ({
+      disabled
+    } = {}) => 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.palette.primary.main}`,
+    cursor: ({
+      disabled
+    } = {}) => disabled ? 'not-allowed' : 'pointer',
+    maxWidth: '100%',
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    flexShrink: '0'
+  },
+  tertiary: {
+    width: ({
+      fluid
+    } = {}) => fluid ? '100%' : '',
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    border: 'none',
+    color: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
+    background: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
+    cursor: ({
+      disabled
+    } = {}) => disabled ? 'not-allowed' : 'pointer',
+    maxWidth: '100%',
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    flexShrink: '0',
+    '&:hover': {
+      background: theme.palette.primary.lightest,
+      borderRadius: '4px'
     },
-    secondary: {
-      width: ({
-        fluid
-      } = {}) => fluid ? '100%' : '',
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      fontSize: '14px',
+    '&$active': {
       fontWeight: '700',
-      display: 'inline-block',
-      textDecoration: 'none',
-      lineHeight: '18px',
-      color: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme?.themeColors?.CtaTextColor,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.isGradient ? theme?.themeGradient?.ctaColor : theme?.themeColors?.ctaColor,
-      border: ({
-        disabled
-      } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.themeColors?.ctaColor}`,
-      cursor: ({
-        disabled
-      } = {}) => disabled ? 'not-allowed' : 'pointer',
-      maxWidth: '100%',
-      display: 'inline-block',
-      wordBreak: 'break-word',
-      flexShrink: '0'
-    },
-    tertiary: {
-      width: ({
-        fluid
-      } = {}) => fluid ? '100%' : '',
-      fontWeight: '400',
-      fontSize: '16px',
-      lineHeight: '20px',
-      display: 'flex',
-      alignItems: 'center',
-      border: 'none',
-      color: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
-      cursor: ({
-        disabled
-      } = {}) => disabled ? 'not-allowed' : 'pointer',
-      maxWidth: '100%',
-      display: 'inline-block',
-      wordBreak: 'break-word',
-      flexShrink: '0',
-      '&:hover': {
-        background: theme.palette.primary.lightest,
-        borderRadius: '4px'
-      },
-      '&$active': {
-        fontWeight: '700',
-        background: theme.palette.primary.lightest,
-        borderRadius: theme.shape.borderRadius.small,
-        color: theme.palette.primary.main
-      }
-    },
-    anchorClass: {
-      textDecoration: 'none'
-    },
-    active: {},
-    large: {
-      padding: '20px 24px'
-    },
-    medium: {
-      padding: '16px 24px'
-    },
-    small: {
-      padding: '12px 16px'
-    },
-    '@media screen and (max-width: 767px)': {
-      active: {
-        fontWeight: 'initial',
-        background: theme?.palette?.background?.default,
-        borderRadius: '0',
-        color: theme.palette.primary.main
-      }
+      background: theme.palette.primary.lightest,
+      borderRadius: theme.shape.borderRadius.small,
+      color: theme.palette.primary.main
     }
-  };
-});
+  },
+  anchorClass: {
+    textDecoration: 'none'
+  },
+  active: {},
+  large: {
+    padding: '20px 24px'
+  },
+  medium: {
+    padding: '16px 24px'
+  },
+  small: {
+    padding: '12px 16px'
+  },
+  '@media screen and (max-width: 767px)': {
+    active: {
+      fontWeight: 'initial',
+      background: theme?.palette?.background?.default,
+      borderRadius: '0',
+      color: theme.palette.primary.main
+    }
+  }
+}));
 
 function useLinkBuilder(data) {
   const {
@@ -1986,6 +1985,7 @@ const fontWeight = {
 };
 
 function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
+  console.log(isMobile, "isMobileisMobile");
   const palette = palettes[colorTheme] || palettes['blue'];
   const typography = {
     fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
@@ -2206,125 +2206,13 @@ function PageRenderer$1({
   }))));
 }
 
-const GRADIENT = `linear-gradient`;
-const solidBaseColors = {
-  white: '#FFFFFF',
-  blue: '#1676F3',
-  tertiaryblue: '#F4F9FF',
-  orange: '#FF9000',
-  tertiaryorange: '#FFF6EA',
-  pink: '#F72585',
-  tertiarypink: '#FEE9F3',
-  green: '#8ECE19',
-  tertiarygreen: '#F4FAEB',
-  violet: '#6269C9',
-  tertiaryviolet: '#F4F6FF',
-  red: '#F41828',
-  tertiaryred: '#FFF2F3',
-  maroon: '#9B2226',
-  tertiarymaroon: '#FFF0F0',
-  blue2: '#00ADE7',
-  tertiaryblue2: '#F2FCFF'
-};
-const gradientColors = {
-  white: '#FFFFFF',
-  black: '#000000',
-  //  Blue gradient
-
-  blue: '#1676F3',
-  bluegradient: `${GRADIENT}(#5418D1,#2C88FF)`,
-  tertiaryblue: '#F4F9FF',
-  // Orange gradient
-
-  orange: '#FF9000',
-  orangegradient: `${GRADIENT}(#E96263 , #EAAE4C)`,
-  tertiaryorange: '#FFF6EA',
-  // Pink gradient
-
-  pink: '#F72585',
-  pinkgradient: `${GRADIENT}(#F97794,#623AA2)`,
-  tertiarypink: '#FEE9F3',
-  // Violet gradient
-
-  violet: '#6026A8',
-  violetgradient: `${GRADIENT}(#B66EC0 , #460FA1)`,
-  tertiaryviolet: '#F5F2FA',
-  // Green gradient
-
-  green: '#46A9A9',
-  greengradient: `${GRADIENT}(#0E5CAD, #79F1A4)`,
-  tertiarygreen: '#F4FAFA'
-};
-
-// temporary , will move this
-
-let fontFamily = 'Arial';
-const typography = {
-  fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
-  fontSize: fontSize,
-  fontWeight
-};
-const spacing = {
-  padding: padding,
-  margin: margin
-};
-
-// till here
-
-const generateTheme = (theme, isGradient) => {
-  console.log('isGradient', isGradient);
-  const themeColors = {
-    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
-  };
-  const themeGradient = {
-    font1: gradientColors?.white,
-    font2: gradientColors?.black,
-    font3: gradientColors?.black,
-    font4: gradientColors?.white,
-    AccentColor: gradientColors[theme],
-    background1: gradientColors[theme + 'gradient'],
-    background2: gradientColors['tertiary' + theme],
-    background3: gradientColors[theme + 'gradient'],
-    ctaColor: gradientColors[theme + 'gradient'],
-    CtaTextColor: gradientColors?.white,
-    icon: gradientColors[theme],
-    iconBg: gradientColors['tertiary' + theme],
-    stripBg: gradientColors?.black,
-    stripText: gradientColors?.white
-  };
-  return {
-    ...getTheme(theme),
-    themeColors,
-    typography,
-    spacing,
-    isGradient,
-    themeGradient
-  };
-};
-
 const useSectionStyles$8 = createUseStyles(theme => ({
   bannerCarouselRightSection: {
     position: 'relative',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    backgroundColor: generateTheme('blue')?.background2,
+    backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -2541,7 +2429,7 @@ const useArrowButtonStyles = createUseStyles(theme => ({
     height: sizeHandler,
     border: ({
       inverted
-    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.themeColors?.ctaColor}`,
+    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.light}`,
     borderRadius: '50%',
     display: 'flex',
     justifyContent: 'center',
@@ -2563,7 +2451,7 @@ function ArrowButton(props) {
   }, /*#__PURE__*/React.createElement(Icon, {
     height: props.size === 'small' ? '12px' : '18px',
     name: "Angle",
-    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.themeColors?.ctaColor,
+    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.main,
     inverted: true
   }));
 }
@@ -2757,183 +2645,176 @@ var index$l = /*#__PURE__*/Object.freeze({
   'default': BannerCarouselRight
 });
 
-const useSectionStyles$7 = createUseStyles(theme => {
-  console.log('sdkjfndkjsnfk', theme);
-  return {
-    section: {
-      width: '100%',
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-      display: 'flex',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      alignItems: 'center',
-      backgroundColor: theme?.palette?.background?.default,
-      '&, & *, & *:before, & *:after': {
-        fontFamily: theme?.typography?.fontFamily,
-        boxSizing: 'border-box'
+const useSectionStyles$7 = createUseStyles(theme => ({
+  section: {
+    width: '100%',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: theme?.palette?.background?.default,
+    '&, & *, & *:before, & *:after': {
+      fontFamily: theme?.typography?.fontFamily,
+      boxSizing: 'border-box'
+    },
+    '& h2,& h3': {
+      marginTop: '0'
+    }
+  },
+  sectionContainer: {
+    margin: '0 auto',
+    maxWidth: ({
+      containerWidth
+    } = {}) => containerWidth
+  },
+  subTitleHeading: {
+    marginBottom: '8px',
+    fontSize: theme.typography.fontSize.subHead,
+    color: theme?.palette?.font?.tertiary,
+    alignItems: 'center',
+    textAlign: 'center',
+    wordBreak: 'break-word',
+    textTransform: 'uppercase'
+  },
+  heading: {
+    marginBottom: theme.spacing.margin.tiny,
+    fontSize: theme.typography.fontSize.h2,
+    color: theme?.palette?.font?.default,
+    fontWeight: theme.typography.fontWeight.bold,
+    textAlign: 'center',
+    wordBreak: 'break-word'
+  },
+  contentContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '770px',
+    margin: 'auto'
+  },
+  content: {
+    display: 'flex',
+    width: 'calc(100% - 100px)',
+    alignItems: 'center',
+    background: theme?.palette?.background?.default,
+    boxShadow: theme?.shadows?.primary,
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    overflow: 'hidden',
+    minHeight: 200,
+    marginBottom: theme.spacing.margin.small,
+    position: 'relative',
+    '&:nth-child(2n)': {
+      alignSelf: 'flex-end',
+      '& $contentNumber': {
+        right: '0'
+      },
+      '& $contentText': {
+        marginRight: '170px'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
-    sectionContainer: {
-      margin: '0 auto',
-      maxWidth: ({
-        containerWidth
-      } = {}) => containerWidth
+    '&:nth-child(2n+1)': {
+      alignSelf: 'flex-start',
+      '& $contentNumber': {
+        left: '0'
+      },
+      '& $contentText': {
+        marginLeft: '170px'
+      }
     },
-    subTitleHeading: {
-      marginBottom: '8px',
-      fontSize: theme.typography.fontSize.subHead,
-      color: theme?.palette?.font?.tertiary,
-      alignItems: 'center',
-      textAlign: 'center',
-      wordBreak: 'break-word',
-      textTransform: 'uppercase'
+    '&:nth-child(7n+1) $contentNumber': {
+      background: palettes.purple.primary.lightest
     },
-    heading: {
-      marginBottom: theme.spacing.margin.tiny,
-      fontSize: theme.typography.fontSize.h2,
-      color: theme?.palette?.font?.default,
-      fontWeight: theme.typography.fontWeight.bold,
-      textAlign: 'center',
-      wordBreak: 'break-word'
+    '&: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',
+    fontSize: '72px',
+    letterSpacing: '-3px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '48px',
+    height: '100%',
+    color: theme?.palette?.font?.default,
+    wordBreak: 'break-word'
+  },
+  contentText: {
+    padding: theme.spacing.padding.tiny
+  },
+  contentHeading: {
+    fontStyle: 'normal',
+    fontSize: theme.typography.fontSize.h5,
+    fontWeight: theme.typography.fontWeight.bold,
+    lineHeight: '32px',
+    marginBottom: '8px',
+    color: theme?.palette?.font?.default,
+    wordBreak: 'break-word'
+  },
+  contentPara: {
+    fontStyle: 'normal',
+    fontSize: theme.typography.fontSize.subHead,
+    lineHeight: '32px',
+    color: theme?.palette?.font?.primary,
+    wordBreak: 'break-word'
+  },
+  '@media screen and (max-width: 767px)': {
     contentContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '770px',
-      margin: 'auto'
+      width: '100%'
     },
     content: {
       display: 'flex',
-      width: 'calc(100% - 100px)',
-      alignItems: 'center',
-      background: theme?.palette?.background?.default,
-      boxShadow: theme?.shadows?.primary,
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      overflow: 'hidden',
-      minHeight: 200,
-      marginBottom: theme.spacing.margin.small,
-      position: 'relative',
+      flexDirection: 'column',
+      borderRadius: theme.shape.borderRadius.large,
+      width: '100%',
+      height: 'auto',
       '&:nth-child(2n)': {
-        alignSelf: 'flex-end',
-        '& $contentNumber': {
-          right: '0'
-        },
+        marginLeft: '0',
         '& $contentText': {
-          marginRight: '170px'
+          marginRight: '0',
+          alignSelf: 'flex-start'
+          // padding: '0'
         }
       },
+
       '&:nth-child(2n+1)': {
-        alignSelf: 'flex-start',
-        '& $contentNumber': {
-          left: '0'
-        },
+        marginRight: '0',
         '& $contentText': {
-          marginLeft: '170px'
+          marginLeft: '0',
+          alignSelf: 'flex-start'
+          // padding: '0'
         }
-      },
-      '&:nth-child(7n+1) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+2) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+3) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+4) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+5) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+6) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
       }
     },
-    contentNumber: {
-      position: 'absolute',
-      top: '0',
-      fontWeight: '700',
-      fontSize: '72px',
-      letterSpacing: '-3px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '48px',
-      height: '100%',
-      color: theme?.isGradient ? theme?.themeGradient?.font4 : theme?.themeColors?.font4,
-      wordBreak: 'break-word'
-    },
-    contentText: {
-      padding: theme.spacing.padding.tiny
-    },
-    contentHeading: {
-      fontStyle: 'normal',
-      fontSize: theme.typography.fontSize.h5,
-      fontWeight: theme.typography.fontWeight.bold,
-      lineHeight: '32px',
-      marginBottom: '8px',
-      color: theme?.palette?.font?.default,
-      wordBreak: 'break-word'
-    },
-    contentPara: {
-      fontStyle: 'normal',
-      fontSize: theme.typography.fontSize.subHead,
-      lineHeight: '32px',
-      color: theme?.palette?.font?.primary,
-      wordBreak: 'break-word'
-    },
-    '@media screen and (max-width: 767px)': {
-      contentContainer: {
-        width: '100%'
-      },
-      content: {
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: theme.shape.borderRadius.large,
-        width: '100%',
-        height: 'auto',
-        '&:nth-child(2n)': {
-          marginLeft: '0',
-          '& $contentText': {
-            marginRight: '0',
-            alignSelf: 'flex-start'
-            // padding: '0'
-          }
-        },
-
-        '&:nth-child(2n+1)': {
-          marginRight: '0',
-          '& $contentText': {
-            marginLeft: '0',
-            alignSelf: 'flex-start'
-            // padding: '0'
-          }
-        }
-      },
 
-      contentNumber: {
-        width: '100%',
-        padding: '24px',
-        position: 'static'
-      }
+    contentNumber: {
+      width: '100%',
+      padding: '24px',
+      position: 'static'
     }
-  };
-});
+  }
+}));
 
 function List({
   sectionData
@@ -2963,7 +2844,7 @@ function List({
     dangerouslySetInnerHTML: {
       __html: nodeData.cardHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -2980,13 +2861,13 @@ function List({
       className: classes.contentNumber
     }, getNumber(ind + 1)), /*#__PURE__*/React.createElement("div", {
       className: classes.contentText
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("h3", {
       ref: dt?.contentHeading?.refSetter,
       className: classes.contentHeading,
       dangerouslySetInnerHTML: {
         __html: dt.contentHeading.metadata.value
       }
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("p", {
       ref: dt?.contentPara?.refSetter,
       className: classes.contentPara,
       dangerouslySetInnerHTML: {
@@ -3244,16 +3125,15 @@ var index$j = /*#__PURE__*/Object.freeze({
 const useSectionStyles$5 = createUseStyles(theme => {
   return {
     section: {
-      paddingBottom: `${theme?.spacing?.padding?.regular}px`,
-      background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+      paddingBottom: theme?.spacing?.padding?.regular,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
       },
       '& h2,& h3': {
-        fontWeight: `${theme?.typography?.fontWeight?.medium}`,
+        fontWeight: theme?.typography?.fontWeight?.medium,
         '& b,& strong': {
-          fontWeight: `${theme?.typography?.fontWeight?.bold}`
+          fontWeight: theme?.typography?.fontWeight?.bold
         }
       }
     },
@@ -3286,7 +3166,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%',
@@ -3321,7 +3201,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
     },
     description: {
       margin: '40px 0',
-      // color: theme?.palette?.font?.primary,
+      color: theme?.palette?.font?.primary,
       lineHeight: '24px',
       wordBreak: 'break-word'
     },
@@ -3466,15 +3346,11 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
+    },
+    '& h2,& h3': {
+      marginTop: '0'
     }
-    // '& h2,& h3': {
-    //   fontWeight: '500',
-    //   '& b,& strong': {
-    //     fontWeight: '700'
-    //   }
-    // }
   },
-
   newsLetterContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -3486,12 +3362,11 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     left: '0',
     width: '100%',
     height: '50%',
-    position: 'absolute'
-    // background: theme?.palette?.background?.primary
+    position: 'absolute',
+    background: theme?.palette?.background?.primary
   },
-
   sectionContainer: {
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+    backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: theme.spacing.padding.small,
@@ -3637,59 +3512,56 @@ async function postApiCallForm(baseURLs, data, extraProps) {
   }
 }
 
-const inputStyles = createUseStyles(theme => {
-  console.log('themexxxxdsf', theme);
-  return {
-    inputField: {
-      width: '100%',
-      maxWidth: '314px',
-      background: theme?.palette?.background?.default,
-      border: `1px solid ${theme?.isGradient ? theme?.themeGradient?.AccentColor : theme?.themeColors?.inputBorderColor}`,
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: '14px 12px',
-      display: 'flex',
+const inputStyles = createUseStyles(theme => ({
+  inputField: {
+    width: '100%',
+    maxWidth: '314px',
+    background: theme?.palette?.background?.default,
+    border: `1px solid ${theme?.palette?.border?.secondary}`,
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    padding: '14px 12px',
+    display: 'flex',
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '20px',
+    verticalalign: 'top',
+    resize: 'none',
+    fontFamily: 'inherit',
+    '&::placeholder': {
       fontWeight: '400',
       fontSize: '16px',
       lineHeight: '20px',
-      verticalalign: 'top',
-      resize: 'none',
-      fontFamily: 'inherit',
-      '&::placeholder': {
-        fontWeight: '400',
-        fontSize: '16px',
-        lineHeight: '20px',
-        color: theme?.palette?.font?.primary,
-        fontFamily: theme?.typography?.fontFamily
-      },
-      '&:focus': {
-        outline: 'none'
-      }
-    },
-    error: {
-      borderBottom: '1px solid red',
-      position: 'absolute',
-      bottom: '-8px',
-      width: 'calc(100% - 24px)'
+      color: theme?.palette?.font?.primary,
+      fontFamily: theme?.typography?.fontFamily
     },
-    errorBorder: {
-      border: `1px solid red`,
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  error: {
+    borderBottom: '1px solid red',
+    position: 'absolute',
+    bottom: '-8px',
+    width: 'calc(100% - 24px)'
+  },
+  errorBorder: {
+    border: `1px solid red`,
+    color: 'red',
+    '&::placeholder': {
       color: 'red',
-      '&::placeholder': {
-        color: 'red',
-        opacity: '0.5'
-      }
+      opacity: '0.5'
+    }
+  },
+  '@media screen and (max-width: 767px)': {
+    inputField: {
+      width: '100%',
+      maxWidth: 'unset'
     },
-    '@media screen and (max-width: 767px)': {
-      inputField: {
-        width: '100%',
-        maxWidth: 'unset'
-      },
-      error: {
-        bottom: '-2px'
-      }
+    error: {
+      bottom: '-2px'
     }
-  };
-});
+  }
+}));
 
 function Input({
   data,
@@ -3702,12 +3574,9 @@ function Input({
   const {
     onChange,
     onBlur,
-    onFocus,
-    theme
+    onFocus
   } = props;
-  const classes = inputStyles({
-    theme
-  });
+  const classes = inputStyles();
   const Comp = inputType;
   return /*#__PURE__*/React.createElement(Comp, _extends({}, inputType === 'input' ? {
     type: 'text'
@@ -3787,7 +3656,7 @@ function SubscribeToNewsletter({
     className: classes.partialBackground
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h2", {
     className: classes.cardHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.cardHeading?.refSetter,
@@ -3838,14 +3707,12 @@ function SubscribeToNewsletter({
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
     styling: isMobile ? {
-      marginTop: '12px',
-      border: 'none'
+      marginTop: '12px'
     } : {
       maxWidth: '200px',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      border: 'none'
+      textOverflow: 'ellipsis'
     },
     disabled: btnDisabled
   })))))));
@@ -3858,21 +3725,17 @@ var index$h = /*#__PURE__*/Object.freeze({
 
 const useTestimonialStyles = createUseStyles(theme => ({
   testimonialContainer: {
-    // background: theme?.palette?.background?.primary,
+    background: theme?.palette?.background?.primary,
     overflow: 'hidden',
     padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
+    },
+    '& h3,& p': {
+      marginTop: '0'
     }
-    // '& h2,& h3': {
-    //   fontWeight: '500',
-    //   '& b,& strong': {
-    //     fontWeight: '700'
-    //   }
-    // }
   },
-
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -3904,7 +3767,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     position: 'relative',
     height: 'calc(100% - 12px)',
     width: 'calc(100% - 24px)',
-    background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background1,
+    background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme?.shape?.borderRadius?.regular
   },
@@ -3920,7 +3783,6 @@ const useTestimonialStyles = createUseStyles(theme => ({
     flexDirection: 'column',
     justifyContent: 'space-between',
     padding: '48px',
-    borderRadius: '8px',
     alignItems: 'flex-start'
   },
   quoteIcon: {
@@ -3932,7 +3794,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     marginBottom: theme.spacing.margin.tiny,
     fontSize: theme.typography.fontSize.subHead,
     wordBreak: 'break-word',
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font2,
+    color: theme?.palette?.font?.primary,
     lineHeight: '22px'
   },
   userContainer: {
@@ -3962,7 +3824,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     marginRight: '16px'
   },
   userName: {
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font2,
+    color: theme?.palette?.font?.default,
     margin: '0',
     fontSize: theme.typography.fontSize.h5,
     // paddingTop: '16px',
@@ -4079,7 +3941,7 @@ function Section$1({
     className: classes.quoteIcon
   }, /*#__PURE__*/React.createElement(QuotesComponent, null)), /*#__PURE__*/React.createElement("div", {
     className: classes.cardDetails
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", {
     ref: el?.cardTextContent?.refSetter,
     className: classes.reviewText,
     dangerouslySetInnerHTML: {
@@ -4124,7 +3986,7 @@ function Section$1({
     dangerouslySetInnerHTML: {
       __html: nodeData?.carouselHeading?.metadata?.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.testimonialHeader
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -4342,15 +4204,12 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily
         // boxSizing: 'border-box'
+      },
+
+      '& h2,& h3,& p': {
+        marginTop: '0'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
     sectionContainer: {
       // margin: '0 auto',
       maxWidth: ({
@@ -4474,19 +4333,19 @@ const SingleVideoSlide$2 = props => {
     sectionIndex: props?.sectionIndex
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
       __html: data.videoTextHeading.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.videoDetailsContent,
     dangerouslySetInnerHTML: {
       __html: data.videoTextContent.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextSubContent?.refSetter,
     className: classes.videoDetailsSubContent,
     dangerouslySetInnerHTML: {
@@ -4524,7 +4383,7 @@ function VideoTestimonial({
     dangerouslySetInnerHTML: {
       __html: videoData.videoHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.videoTestimonialTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: videoData?.title?.refSetter,
@@ -4549,19 +4408,15 @@ const useVideoStyles = 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?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+      backgroundColor: theme?.palette?.background?.primary,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
+      },
+      '& h3': {
+        marginTop: '0'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -4704,7 +4559,7 @@ const SingleSlide$1 = props => {
     videoUrl: data.videoFrame.metadata?.value
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetailsContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTitle?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -4760,7 +4615,7 @@ function Video({
     dangerouslySetInnerHTML: {
       __html: videoData.videoHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.videoTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: videoData?.videoTitle?.refSetter,
@@ -4780,7 +4635,7 @@ var index$e = /*#__PURE__*/Object.freeze({
   'default': Video
 });
 
-const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
+const useSectionStyles$3 = createUseStyles(theme => ({
   section: {
     position: 'relative',
     padding: `${theme?.spacing?.padding?.regular}px 0px ${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px`,
@@ -4807,7 +4662,7 @@ const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
     top: '0',
     left: '0',
     height: '350px',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+    background: theme?.palette?.background?.primary,
     width: '100%'
   },
   content: {
@@ -5001,19 +4856,15 @@ const useSectionStyles$2 = 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?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background1,
+    backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
+    },
+    '& h2,& h3,& p': {
+      margin: '0'
     }
-    // '& h2,& h3': {
-    //   fontWeight: '500',
-    //   '& b,& strong': {
-    //     fontWeight: '700'
-    //   }
-    // }
   },
-
   sectionContainer: {
     maxWidth: ({
       containerWidth
@@ -5022,7 +4873,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   subHeading: {
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
+    color: theme?.palette?.font?.tertiary,
     wordBreak: 'break-word',
     textTransform: 'uppercase',
     letterSpacing: '3px'
@@ -5032,7 +4883,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: 'normal',
     margin: '0',
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     marginBottom: theme.spacing.margin.tiny
   },
@@ -5043,14 +4894,10 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     padding: '48px 0px'
   },
   textPara: {
-    background: 'white',
-    borderRadius: '8px',
-    padding: '40px',
     lineHeight: '24px',
     color: theme?.palette?.font?.primary,
     wordBreak: 'break-word',
-    fontSize: theme.typography.fontSize.subHead,
-    boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.08)'
+    fontSize: theme.typography.fontSize.subHead
   },
   '@media screen and (max-width: 767px)': {
     textContent: {
@@ -5094,13 +4941,13 @@ const TextSection = ({
     }
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.textContent
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", {
     ref: nodeData?.textLeft?.refSetter,
     className: classes.textPara,
     dangerouslySetInnerHTML: {
       __html: nodeData.textLeft.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: nodeData?.textRight?.refSetter,
     className: classes.textPara,
     dangerouslySetInnerHTML: {
@@ -5230,7 +5077,7 @@ function PhotoGallery({
   });
   const settings = {
     className: classes.sliderContainer,
-    dots: true,
+    dots: isMobile,
     infinite: true,
     speed: 500,
     slidesToShow,
@@ -5284,22 +5131,18 @@ var index$b = /*#__PURE__*/Object.freeze({
 const useFaqListStyles = createUseStyles(theme => ({
   section: {
     width: '100%',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
+    },
+    '& h2,& h3': {
+      marginTop: '0'
     }
-    // '& h2,& h3': {
-    //   fontWeight: '500',
-    //   '& b,& strong': {
-    //     fontWeight: '700'
-    //   }
-    // }
   },
-
   sectionContainer: {
     maxWidth: ({
       containerWidth
@@ -5397,7 +5240,7 @@ const FAQListing = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.subheading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.sectionHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -5461,10 +5304,13 @@ const useTextGridStyles = 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?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+    backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
+    },
+    '& h2,& h3,& p': {
+      marginTop: '0'
     }
     // '& h2,& h3': {
     //   fontWeight: '500',
@@ -5582,7 +5428,7 @@ const TextGrid = ({
     dangerouslySetInnerHTML: {
       __html: item.contentHeading.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: item?.contentPara?.refSetter,
     className: classes.nodePara,
     dangerouslySetInnerHTML: {
@@ -5600,7 +5446,7 @@ const TextGrid = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.subheading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -6153,19 +5999,15 @@ const useTeamStyles = 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 ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-      background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+      backgroundColor: theme?.palette?.background?.primary,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
+      },
+      '& h2,& h3': {
+        margin: '0'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -6355,7 +6197,7 @@ function TeamCard({
     dangerouslySetInnerHTML: {
       __html: teamData.teamHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.teamTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: teamData?.teamTitle?.refSetter,
@@ -6411,7 +6253,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2
+    background: theme?.palette?.background?.primary
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
@@ -6670,7 +6512,6 @@ function FormEnquiry({
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.inputDiv
   }, /*#__PURE__*/React.createElement(Input, {
-    theme: theme,
     data: nodeData.nameField,
     value: inputVal.name,
     isValid: validData.nameValid,
@@ -6786,6 +6627,7 @@ const useSectionStyles = 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`,
+    backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -6811,8 +6653,7 @@ const useSectionStyles = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    // background: theme?.palette?.background?.primary
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.tertiaryBlue2
+    background: theme?.palette?.background?.primary
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
@@ -7188,15 +7029,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
+      },
+      '& h2,& h3,& p': {
+        margin: '0'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -7518,7 +7355,7 @@ const SingleVideoSlide$1 = props => {
     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("div", {
+  })), /*#__PURE__*/React.createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.courseDetailContent,
     dangerouslySetInnerHTML: {
@@ -7535,7 +7372,7 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("div", {
+  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
     className: classes.offerText
   }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.courseDetailTime
@@ -7559,7 +7396,7 @@ const SingleVideoSlide$1 = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.offerPrice
-  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("div", {
+  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
     style: {
       fontSize: '20px'
     }
@@ -7628,7 +7465,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
     courseSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background1,
       padding: ({
         isMobile
       } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
@@ -7749,7 +7585,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1
+      color: theme.palette.font.default
     },
     courseViewContainer: {
       width: '445px',
@@ -7814,7 +7650,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
+      color: theme.palette.font.primary,
       whiteSpace: 'pre-wrap',
       margin: '10px 0 20px'
     },
@@ -7823,7 +7659,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       marginTop: '-24px',
-      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
+      color: '#00ADE7',
       wordBreak: 'break-word'
     },
     courseDetailTime: {