diy-template-components 1.0.47 → 1.0.49

package/build/index.js

@@ -325,7 +325,7 @@ const colors = {
   // shades of grey
   darkGrey: '#333333',
   grey: '#666666',
-  lightGrey: '#999999',
+  lightGrey: '#9999',
   blueGrey: '#9497A5'
 };
 const alpha = {
@@ -364,118 +364,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?.colors?.CtaTextColor,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.colors?.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?.colors?.CtaTextColor,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.colors?.ctaColor,
-      border: ({
-        disabled
-      } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.colors?.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 {
@@ -1577,8 +1576,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: '140px 70px 80px 70px',
-    backgroundColor: theme?.palette?.background?.default,
+    padding: '64px 128px 55px 128px',
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -1618,7 +1616,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   upperContainerItem3: {
     width: '33%',
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: 'end',
     flexWrap: 'wrap',
     paddingBottom: '52px'
   },
@@ -1633,8 +1631,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
-    padding: '0 0 32px 0',
-    margin: '0'
+    marginBottom: '16px'
   },
   addressImg: {
     marginRight: '8px',
@@ -1712,7 +1709,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   },
   '@media screen and (max-width: 767px)': {
     section: {
-      padding: '45px 30px',
+      padding: '16px 24px',
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
@@ -1736,7 +1733,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     },
     upperContainerItem3: {
       width: '100%',
-      justifyContent: 'center'
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'start'
     },
     cardHeading: {
       justifyContent: 'center',
@@ -1904,7 +1903,7 @@ function Footer({
     className: classes.lowerContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bottomLeftText
-  }, "2022 All Rights Reserved"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "\xA9 ", new Date().getFullYear(), " All Rights Reserved"), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.poweredByContainer
   }, /*#__PURE__*/React__default["default"].createElement("p", null, "Powered by"), /*#__PURE__*/React__default["default"].createElement("a", {
     title: "Powered by Classplus",
@@ -1967,15 +1966,15 @@ const rustTheme = {
   light: colors.lightRust,
   lightest: colors.lightestRust
 };
-const generateThemePalette = solidColors => ({
-  primary: solidColors,
+const generateThemePalette = themeColors => ({
+  primary: themeColors,
   background: {
     default: colors.white,
-    primary: solidColors.lightest
+    primary: themeColors.lightest
   },
   border: {
-    primary: solidColors.main,
-    secondary: solidColors.light
+    primary: themeColors.main,
+    secondary: themeColors.light
   },
   shadow: {
     primary: hexToRgbA(colors.black, alpha.tenPercent),
@@ -1984,7 +1983,7 @@ const generateThemePalette = solidColors => ({
   font: {
     default: colors.darkGrey,
     invertedDefault: colors.white,
-    primary: colors.lightGrey,
+    primary: colors.darkGrey,
     secondary: colors.grey,
     tertiary: colors.blueGrey
   }
@@ -2056,17 +2055,19 @@ const fontSize = {
   h4: 32,
   h5: 24,
   h6: 20,
-  subHead: 16,
-  body: 14
+  subHead: 24,
+  description: 20,
+  body: 16
 };
 const fontSizeMob = {
   h1: 40,
-  h2: 20,
-  h3: 32,
+  h2: 24,
+  h3: 20,
   h4: 16,
   h5: 16,
   h6: 14,
   subHead: 14,
+  description: 16,
   body: 14
 };
 const fontWeight = {
@@ -2311,10 +2312,10 @@ function PageRenderer$1({
 const useSectionStyles$8 = createUseStyles(theme => ({
   bannerCarouselRightSection: {
     position: 'relative',
-    background: theme?.isGradient ? theme?.gradientColors?.background2 : theme?.solidColors?.background2,
     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.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'
@@ -2371,7 +2372,8 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   subTitleHeading: {
     marginBottom: '8px',
     fontSize: theme.typography.fontSize.subHead,
-    color: theme?.palette?.font?.tertiary,
+    letterSpacing: '3px',
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     maxWidth: '100%'
   },
@@ -2413,6 +2415,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     contentContainer: {
       display: 'flex',
+      flexDirection: 'column-reverse',
       flexFlow: 'column',
       paddingBottom: '48px',
       gap: '24px'
@@ -2539,7 +2542,7 @@ const useArrowButtonStyles = createUseStyles(theme => ({
     height: sizeHandler,
     border: ({
       inverted
-    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.solidColors?.ctaColor}`,
+    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.light}`,
     borderRadius: '50%',
     display: 'flex',
     justifyContent: 'center',
@@ -2561,7 +2564,7 @@ function ArrowButton(props) {
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     height: props.size === 'small' ? '12px' : '18px',
     name: "Angle",
-    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.solidColors?.ctaColor,
+    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.main,
     inverted: true
   }));
 }
@@ -2761,182 +2764,185 @@ var index$l = /*#__PURE__*/Object.freeze({
   'default': BannerCarouselRight
 });
 
-const useSectionStyles$7 = createUseStyles(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.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}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?.default,
+    alignItems: 'center',
+    textAlign: 'center',
+    wordBreak: 'break-word',
+    letterSpacing: '3px',
+    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: '16px',
+    lineHeight: '26px',
+    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?.gradientColors?.background1 : theme?.solidColors?.background3
-      },
-      '&:nth-child(7n+2) $contentNumber': {
-        background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.background3
-      },
-      '&:nth-child(7n+3) $contentNumber': {
-        background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.background3
-      },
-      '&:nth-child(7n+4) $contentNumber': {
-        background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.background3
-      },
-      '&:nth-child(7n+5) $contentNumber': {
-        background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.background3
-      },
-      '&:nth-child(7n+6) $contentNumber': {
-        background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.background3
-      },
-      '&:nth-child(7n) $contentNumber': {
-        background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.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?.gradientColors?.font4 : theme?.solidColors?.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'
+      width: '100%',
+      padding: '24px',
+      position: 'static'
     },
     contentPara: {
-      fontStyle: 'normal',
-      fontSize: theme.typography.fontSize.subHead,
-      lineHeight: '32px',
-      color: theme?.palette?.font?.primary,
-      wordBreak: 'break-word'
+      fontSize: '14px',
+      lineHeight: '22px'
     },
-    '@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'
-      }
+    contentHeading: {
+      fontSize: '20px',
+      lineHeight: '32px'
     }
-  };
-});
+  }
+}));
 
 function List({
   sectionData
@@ -3008,21 +3014,13 @@ const useSectionStyles$6 = createUseStyles(theme => {
   return {
     bannerCarouselCenterSection: {
       width: '100%',
-      // height: '100%',
       textAlign: 'center',
       position: 'relative',
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
     sectionContainer: {
       width: '100%',
       // maxWidth: ({ containerWidth } = {}) => containerWidth,
@@ -3042,20 +3040,9 @@ const useSectionStyles$6 = createUseStyles(theme => {
       margin: `${theme.spacing.margin.tiny}px 0px`
     },
     contentContainer: {
-      // padding: '100px 0',
-      // height: '100%',
-      // display: 'flex',
-      // alignItems: 'center'
-      // height: '100%',
       display: 'flex',
-      /* padding: 100px 0; */
       alignItems: 'center'
-      // backgroundImage: ({ imageUrl } = {}) =>
-      //   `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
-      // backgroundPosition: 'center',
-      // backgroundSize: 'cover'
     },
-
     centerBgImageContainer: {
       width: '100%',
       position: 'relative',
@@ -3089,7 +3076,8 @@ const useSectionStyles$6 = createUseStyles(theme => {
       color: theme?.palette?.font?.invertedDefault,
       marginBottom: '8px',
       fontSize: theme.typography.fontSize.subHead,
-      wordBreak: 'break-word'
+      wordBreak: 'break-word',
+      letterSpacing: '3px'
     },
     heading: {
       margin: '0',
@@ -3100,11 +3088,11 @@ const useSectionStyles$6 = createUseStyles(theme => {
       }) => wordBreakValue || 'break-word'
     },
     description: {
-      margin: `${theme.spacing.margin.tiny}px 0px`,
       color: theme?.palette?.font?.invertedDefault,
-      lineHeight: '24px',
+      lineHeight: '32px',
+      fontWeight: '400',
       wordBreak: 'break-word',
-      fontSize: theme.typography.fontSize.subHead
+      fontSize: theme.typography.fontSize.description
     },
     sideBannerImage: {
       width: '100%',
@@ -3112,37 +3100,44 @@ const useSectionStyles$6 = createUseStyles(theme => {
       objectFit: 'cover',
       objectPosition: '50% 50%'
     },
+    overlay: {
+      zIndex: 1,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'rgba(0, 0, 0, 0.4)'
+    },
     '@media screen and (max-width: 767px)': {
+      heading: {
+        fontSize: theme.typography.fontSize.h2
+      },
       partialBackground: {
         display: 'none'
       },
       contentContainer: {
-        display: 'flex',
-        flexFlow: 'column-reverse',
-        justifyContent: 'center',
-        padding: '0px'
-      },
-      // textContainer: {
-      //   padding: '20px 20px',
-      //   height: '100%',
-      //   width: '100%'
-      //   // backgroundColor: theme?.palette?.background?.primary
-      // },
-      subTitleHeading: {
-        color: theme?.palette?.font?.tertiary
+        display: 'block'
       },
-      heading: {
-        color: theme?.palette?.font?.default
+      textContainer: {
+        position: 'absolute',
+        padding: '20px 20px',
+        height: '100%',
+        width: '100%',
+        zIndex: '999999'
+        // backgroundColor: theme?.palette?.background?.primary
       },
+
       description: {
-        color: theme?.palette?.font?.primary
+        fontSize: '16px',
+        lineHeight: '24px'
       },
       centerBgImageContainer: {
         width: ({
           isCustomWebsite
         }) => isCustomWebsite ? '100%' : 'unset',
-        // position: 'relative',
-        // height: '34rem',
+        position: 'relative',
+        height: '40rem',
         minHeight: '200px',
         paddingBottom: '0'
       },
@@ -3170,12 +3165,16 @@ const Section$3 = ({
     isCustomWebsite,
     countryCode
   } = React.useContext(PageContext);
+  const hasContent = Boolean(nodeData.cardHeading.metadata.value || nodeData.title.metadata.valu || nodeData.description.metadata.value);
   const classes = useSectionStyles$6({
     wordBreakValue: wordBreakValue(countryCode),
     imageUrl: nodeData.image.metadata.value,
     containerWidth,
-    isCustomWebsite
+    isCustomWebsite,
+    hasContent
   });
+  const mobileImageSrc = isMobile && nodeData?.mobileImage?.metadata?.value;
+  const desktopImageSrc = nodeData?.image?.metadata?.value;
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3213,8 +3212,10 @@ const Section$3 = ({
     size: isMobile ? 'small' : 'medium'
   }))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes?.centerBgImageContainer
-  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
-    src: nodeData.image.metadata.value,
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: hasContent && classes?.overlay
+  }), /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
+    src: mobileImageSrc ? mobileImageSrc : desktopImageSrc,
     className: classes?.centerBgImage,
     sectionIndex: sectionIndex
   }))));
@@ -3253,8 +3254,7 @@ var index$j = /*#__PURE__*/Object.freeze({
 const useSectionStyles$5 = createUseStyles(theme => {
   return {
     section: {
-      padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-      background: theme?.isGradient ? theme?.gradientColors?.background2 : theme?.solidColors?.background2,
+      padding: `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -3275,7 +3275,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
     },
     centerData: {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'start',
       justifyContent: 'center'
 
       // padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
@@ -3298,7 +3298,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%',
@@ -3322,6 +3322,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
     subTitleHeading: {
       marginBottom: '8px',
       fontSize: theme?.typography?.fontSize?.subHead,
+      letterSpacing: '3px',
       color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
@@ -3344,10 +3345,10 @@ const useSectionStyles$5 = createUseStyles(theme => {
     },
     '@media screen and (max-width: 767px)': {
       section: {
-        padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
+        padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.small}px`
       },
       centerData: {
-        flexDirection: 'column-reverse',
+        flexDirection: 'column',
         width: '100%'
         // padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
       },
@@ -3376,7 +3377,11 @@ const useSectionStyles$5 = createUseStyles(theme => {
         textAlign: 'center'
       },
       heading: {
-        fontSize: `${theme?.typography?.fontSize?.h3}px`
+        fontSize: `${theme?.typography?.fontSize?.h2}px`
+      },
+      subTitleHeading: {
+        letterSpacing: '3px',
+        lineHeight: '17px'
       },
       description: {
         margin: '16px 0'
@@ -3485,7 +3490,7 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     justifyContent: 'center',
     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.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -3505,12 +3510,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?.gradientColors?.background2 : theme?.solidColors?.background2,
+    backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: theme.spacing.padding.small,
@@ -3528,18 +3532,18 @@ const useSectionStyles$4 = createUseStyles(theme => ({
   contentContainer: {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-between'
+    gap: '16px'
   },
   title: {
     fontSize: theme.typography.fontSize.h6,
     lineHeight: '32px',
     color: theme?.palette?.font?.primary,
-    width: 'calc(50% - 80px)',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    flex: 1
   },
   inputContainer: {
     display: 'flex',
-    width: '50%'
+    flex: 1
   },
   inputFieldDiv: {
     display: 'flex',
@@ -3656,59 +3660,56 @@ async function postApiCallForm(baseURLs, data, extraProps) {
   }
 }
 
-const inputStyles = createUseStyles(theme => {
-  console.log('themexxxxdsf', theme);
-  return {
+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',
+      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)'
+  },
+  errorBorder: {
+    border: `1px solid red`,
+    color: 'red',
+    '&::placeholder': {
+      color: 'red',
+      opacity: '0.5'
+    }
+  },
+  '@media screen and (max-width: 767px)': {
     inputField: {
       width: '100%',
-      maxWidth: '314px',
-      background: theme?.palette?.background?.default,
-      border: `1px solid ${theme?.isGradient ? theme?.gradientColors?.AccentColor : theme?.solidColors?.inputBorderColor}`,
-      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',
-        color: theme?.palette?.font?.primary,
-        fontFamily: theme?.typography?.fontFamily
-      },
-      '&:focus': {
-        outline: 'none'
-      }
+      maxWidth: 'unset'
     },
     error: {
-      borderBottom: '1px solid red',
-      position: 'absolute',
-      bottom: '-8px',
-      width: 'calc(100% - 24px)'
-    },
-    errorBorder: {
-      border: `1px solid red`,
-      color: 'red',
-      '&::placeholder': {
-        color: 'red',
-        opacity: '0.5'
-      }
-    },
-    '@media screen and (max-width: 767px)': {
-      inputField: {
-        width: '100%',
-        maxWidth: 'unset'
-      },
-      error: {
-        bottom: '-2px'
-      }
+      bottom: '-2px'
     }
-  };
-});
+  }
+}));
 
 function Input({
   data,
@@ -3721,12 +3722,9 @@ function Input({
   const {
     onChange,
     onBlur,
-    onFocus,
-    theme
+    onFocus
   } = props;
-  const classes = inputStyles({
-    theme
-  });
+  const classes = inputStyles();
   const Comp = inputType;
   return /*#__PURE__*/React__default["default"].createElement(Comp, _extends({}, inputType === 'input' ? {
     type: 'text'
@@ -3837,8 +3835,7 @@ function SubscribeToNewsletter({
     value: inputVal,
     isValid: isValid,
     style: {
-      padding: '15px 24px 15px 12px',
-      maxWidth: '100%'
+      padding: '12px 16px'
     },
     inputType: 'input',
     onChange: e => {
@@ -3862,16 +3859,14 @@ function SubscribeToNewsletter({
     },
     onClick: () => handleSubmit(),
     type: nodeData?.cta?.metadata?.type,
-    size: isMobile ? 'small' : 'medium',
+    size: 'small',
     styling: isMobile ? {
-      marginTop: '12px',
-      border: 'none'
+      marginTop: '12px'
     } : {
       maxWidth: '200px',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      border: 'none'
+      textOverflow: 'ellipsis'
     },
     disabled: btnDisabled
   })))))));
@@ -3884,9 +3879,9 @@ 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`,
+    padding: `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -3902,7 +3897,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   testimonialText: {
-    color: theme?.palette?.font?.secondary,
+    color: theme?.palette?.font?.default,
     fontSize: theme.typography.fontSize.subHead,
     wordBreak: 'break-word',
     textTransform: 'uppercase'
@@ -3926,7 +3921,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     position: 'relative',
     height: 'calc(100% - 12px)',
     width: 'calc(100% - 24px)',
-    background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.background1,
+    background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
     borderRadius: theme?.shape?.borderRadius?.regular
   },
@@ -3951,10 +3946,10 @@ const useTestimonialStyles = createUseStyles(theme => ({
   reviewText: {
     // padding: '48px 41px 0 48px',
     marginBottom: theme.spacing.margin.tiny,
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: theme.typography.fontSize.body,
     wordBreak: 'break-word',
-    color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font2,
-    lineHeight: '22px'
+    color: theme?.palette?.font?.primary,
+    lineHeight: '26px'
   },
   userContainer: {
     display: 'flex',
@@ -3973,7 +3968,6 @@ const useTestimonialStyles = createUseStyles(theme => ({
     height: '64px',
     borderRadius: '32px',
     background: '#666666',
-    marginRight: '16px',
     flexShrink: '0'
   },
   userImage: {
@@ -3983,7 +3977,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
     marginRight: '16px'
   },
   userName: {
-    color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font2,
+    color: theme?.palette?.font?.default,
     margin: '0',
     fontSize: theme.typography.fontSize.h5,
     // paddingTop: '16px',
@@ -4000,7 +3994,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
   },
   '@media (max-width: 768px)': {
     testimonialContainer: {
-      padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
+      padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px`
     },
     // testimonialCardAndText: {
     //   margin: '0 20px'
@@ -4028,6 +4022,7 @@ const useTestimonialStyles = createUseStyles(theme => ({
       marginRight: '16px'
     },
     reviewText: {
+      lineHeight: '22px',
       marginBottom: '16px'
     },
     singleCard: {
@@ -4038,7 +4033,8 @@ const useTestimonialStyles = createUseStyles(theme => ({
       // paddingTop: '8px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      fontSize: '20px'
     },
     userImageContainer: {
       width: '48px',
@@ -4100,7 +4096,7 @@ function Section$1({
     className: classes.quoteIcon
   }, /*#__PURE__*/React__default["default"].createElement(QuotesComponent, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.cardDetails
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
     ref: el?.cardTextContent?.refSetter,
     className: classes.reviewText,
     dangerouslySetInnerHTML: {
@@ -4145,7 +4141,7 @@ function Section$1({
     dangerouslySetInnerHTML: {
       __html: nodeData?.carouselHeading?.metadata?.value
     }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("h2", {
     className: classes.testimonialHeader
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -4365,7 +4361,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       justifyContent: 'center',
       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.medium}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily
         // boxSizing: 'border-box'
@@ -4392,11 +4388,12 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       letterSpacing: '3px',
       textTransform: 'uppercase',
       color: theme.palette.font.default,
-      wordBreak: 'break-word',
-      marginBottom: '8px'
+      wordBreak: 'break-word'
+      // marginBottom: '8px'
     },
+
     videoTestimonialTitle: {
-      fontSize: theme.typography.fontSize.h1,
+      fontSize: theme.typography.fontSize.h2,
       // lineHeight: '71px',
       letterSpacing: '-3px',
       fontWeight: theme.typography.fontWeight.bold,
@@ -4406,15 +4403,16 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
     },
     videoCarousel: {
       display: 'flex',
-      alignItems: 'center',
       justifyContent: 'flex-start',
-      gap: theme.spacing.margin.small
+      gap: '40px'
     },
     iframeSuperContainer: {
       height: '100%',
       width: '100%',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      marginTop: '16px',
+      borderRadius: '8px'
     },
     iframeContainer: {
       width: '100%',
@@ -4444,13 +4442,13 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       fontWeight: theme.typography.fontWeight.bold
     },
     videoDetailsContent: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme.palette.font.primary
     },
     videoDetailsSubContent: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.h6,
       lineHeight: '24px',
       margin: '0',
       color: theme.palette.font.primary,
@@ -4464,15 +4462,24 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
         height: 'max-content'
       },
       videoDetails: {
+        justifyContent: 'center',
+        alignItems: 'center',
         width: '100%',
         gap: '16px'
       },
       videoDetailsHeading: {
         lineHeight: 'normal'
       },
+      videoDetailsSubContent: {
+        textAlign: 'center'
+      },
       videoTestimonialTitle: {
         lineHeight: 'normal',
-        letterSpacing: '-1px'
+        letterSpacing: '-1px',
+        textAlign: 'center'
+      },
+      videoTestimonialHeading: {
+        textAlign: 'center'
       }
     }
   };
@@ -4576,8 +4583,8 @@ const useVideoStyles = createUseStyles(theme => {
     videoSuperContainer: {
       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?.gradientColors?.background2 : theme?.solidColors?.background2,
+      } = {}) => 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'
@@ -4585,14 +4592,7 @@ const useVideoStyles = createUseStyles(theme => {
       '& h3': {
         marginTop: '0'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -4607,7 +4607,8 @@ const useVideoStyles = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       textTransform: 'uppercase',
       lineHeight: '20px',
-      color: theme?.palette?.font?.primary,
+      color: theme?.palette?.font?.default,
+      letterSpacing: '3px',
       wordBreak: 'break-word'
     },
     videoTitle: {
@@ -4625,11 +4626,11 @@ const useVideoStyles = createUseStyles(theme => {
     },
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
-      margin: '20px',
-      width: 'calc(100% - 40px)',
+      // margin: '20px',
+      width: 'calc(100% - 24px)',
       height: 'calc(100% - 40px)',
       borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: '48px',
+      padding: '64px',
       boxShadow: theme?.shadows?.primary
     },
     contentRow: {
@@ -4665,7 +4666,7 @@ const useVideoStyles = createUseStyles(theme => {
       wordBreak: 'break-word'
     },
     videoDetailsSubHeading: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme?.palette?.font?.primary
@@ -4705,17 +4706,16 @@ const useVideoStyles = createUseStyles(theme => {
         display: 'flex',
         justifyContent: 'center',
         textAlign: 'center'
+      },
+      videoDetailsHeading: {
+        fontSize: '20px',
+        marginBottom: '0',
+        textAlign: 'center'
+      },
+      videoDetailsSubHeading: {
+        fontSize: '14px',
+        textAlign: 'center'
       }
-
-      // videoDetailsHeading: {
-      //   fontSize: '18px',
-      //   margin: '0'
-      // },
-
-      // videoDetailsSubHeading: {
-      //   fontSize: '12px',
-      //   paddingBottom: '20px'
-      // }
     }
   };
 });
@@ -4738,7 +4738,7 @@ const SingleSlide$1 = props => {
     videoUrl: data.videoFrame.metadata?.value
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoDetailsContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("h3", {
     ref: data?.videoTitle?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -4794,7 +4794,7 @@ function Video({
     dangerouslySetInnerHTML: {
       __html: videoData.videoHeading.metadata.value
     }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("h2", {
     className: classes.videoTitle
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     ref: videoData?.videoTitle?.refSetter,
@@ -4819,7 +4819,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     position: 'relative',
     padding: ({
       isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px 0px ${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    } = {}) => 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,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -4844,7 +4844,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     top: '0',
     left: '0',
     height: '50%',
-    background: theme?.isGradient ? theme?.gradientColors?.background2 : theme?.solidColors?.background2,
+    background: theme?.palette?.background?.primary,
     width: '100%'
   },
   content: {
@@ -4861,7 +4861,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     wordBreak: 'break-word'
   },
   heading: {
-    margin: `8px 0 ${theme.spacing.margin.tiny}px`,
+    margin: `0px 0 ${theme.spacing.margin.tiny}px`,
     fontSize: theme.typography.fontSize.h2,
     width: '100%',
     lineHeight: '70px',
@@ -4869,10 +4869,11 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     textAlign: 'left',
     wordBreak: 'break-word'
   },
-  sliderContainer: {
-    marginLeft: '-10px',
-    marginRight: '-70px'
-  },
+  // sliderContainer: {
+  //   marginLeft: '-10px',
+  //   marginRight: '-70px'
+  // },
+
   card: {
     background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
@@ -4884,20 +4885,23 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     height: 'calc(100% - 12px)'
   },
   cardContent: {
-    padding: theme.spacing.padding.tiny,
+    padding: '24px',
     height: '100%',
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   cardHeading: {
-    fontSize: theme.typography.fontSize.h5,
-    lineHeight: '32px',
+    textAlign: 'center',
+    fontSize: theme.typography.fontSize.h6,
     fontWeight: theme.typography.fontWeight.bold,
     color: theme?.palette?.font?.default,
-    margin: `${theme.spacing.margin.tiny}px 0px`,
+    margin: `16px 0px`,
     wordBreak: 'break-word'
   },
   imageContainer: {
+    textAlign: 'center',
     width: '96px',
     height: '96px',
     display: 'flex',
@@ -4915,8 +4919,9 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     marginTop: theme.spacing.margin.tiny
   },
   cardPara: {
-    fontSize: theme.typography.fontSize.subHead,
-    lineHeight: '24px',
+    textAlign: 'center',
+    fontSize: theme.typography.fontSize.body,
+    lineHeight: '22px',
     color: theme?.palette?.font?.primary,
     margin: '0',
     wordBreak: 'break-word'
@@ -4930,11 +4935,15 @@ const useSectionStyles$3 = createUseStyles(theme => ({
   },
   '@media screen and (max-width: 767px)': {
     heading: {
-      fontSize: '24px',
-      margin: `4px 0 ${theme.spacing.margin.tiny}px`,
-      lineHeight: '36px',
+      textAlign: 'center',
+      fontSize: '20px',
+      margin: `0px 0 ${theme.spacing.margin.tiny}px`,
+      lineHeight: '24px',
       padding: '0'
     },
+    subTitleHeading: {
+      textAlign: 'center'
+    },
     sliderContainer: {
       marginLeft: '-6px',
       marginRight: '-20px'
@@ -4949,6 +4958,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
         slidesToShow,
         cardsCount
       } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
+    },
+    cardHeading: {
+      fontSize: '18px'
+    },
+    cardContent: {
+      padding: '16px'
     }
   }
 }));
@@ -5049,8 +5064,8 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   section: {
     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?.gradientColors?.background1 : theme?.solidColors?.background1,
+    } = {}) => 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,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5067,7 +5082,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   subHeading: {
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
-    color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font1,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     textTransform: 'uppercase',
     letterSpacing: '3px'
@@ -5077,7 +5092,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: 'normal',
     margin: '0',
-    color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font1,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     marginBottom: theme.spacing.margin.tiny
   },
@@ -5088,17 +5103,16 @@ 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.body,
+    lineHeight: '24px'
   },
   '@media screen and (max-width: 767px)': {
     textContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      lineHeight: '22px',
       gap: '16px',
       padding: '16px 0px'
     }
@@ -5164,8 +5178,9 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
     container: {
       background: theme?.palette?.background?.default,
       padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px 0px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+        isMobile,
+        cardsCount
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px` : cardsCount === 1 ? `${theme.spacing.padding.small}px ${theme.spacing.padding.small}px ${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px` : `${theme.spacing.padding.small}px 0px ${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -5185,19 +5200,26 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       } = {}) => containerWidth
     },
     cardHeading: {
-      color: theme?.palette?.font?.secondary,
+      color: theme?.palette?.font?.default,
       fontSize: theme.typography.fontSize.subHead,
       letterSpacing: '3px',
       wordBreak: 'break-word',
-      textTransform: 'uppercase'
+      textTransform: 'uppercase',
+      textAlign: ({
+        cardsCount,
+        isMobile
+      }) => cardsCount === 1 || isMobile ? 'center' : 'left'
     },
     // sliderContainer: {
     //   marginRight: '-70px'
     // },
-
+    cursorPointer: {
+      cursor: 'pointer'
+    },
     singleCard: {
+      borderRadius: '24px',
       margin: '0 1px',
-      width: 'calc(100% - 2px)',
+      width: isMobile => isMobile ? 'calc(100% - 24px)' : 'calc(100% - 24px)',
       position: 'relative',
       paddingBottom: '59.83%' // keeping aspect ratio 585x350
     },
@@ -5205,19 +5227,34 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
     contentRow: {
       display: 'grid',
       gridTemplateColumns: ({
-        slidesToShow
-      } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
+        slidesToShow,
+        cardsCount
+      } = {}) => {
+        if (cardsCount === 1) return '';
+        return `repeat(${slidesToShow},minmax(0, 1fr))`;
+      },
+      padding: ({
+        cardsCount
+      }) => cardsCount === 1 ? '0px 100px' : ''
     },
     carouselImage: {
+      height: ({
+        cardsCount
+      }) => cardsCount === 1 ? '480px' : '100%',
+      borderRadius: '24px',
       objectFit: 'cover',
+      objectPosition: 'center',
       position: 'absolute',
       left: 0,
       top: 0,
-      width: '100%',
-      height: '100%'
+      width: '100%'
     },
     title: {
       fontSize: theme.typography.fontSize.h2,
+      textAlign: ({
+        cardsCount,
+        isMobile
+      }) => cardsCount === 1 || isMobile ? 'center' : 'left',
       lineHeight: '70px',
       letterSpacing: '-3px',
       color: theme?.palette?.font?.default,
@@ -5228,14 +5265,6 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       textOverflow: 'ellipsis'
     },
     '@media (max-width: 768px)': {
-      // container: {
-      //   padding: '60px 20px'
-      // },
-
-      // cardHeading: {
-      //   marginLeft: '3px'
-      // },
-
       title: {
         lineHeight: '36px',
         letterSpacing: '-1px',
@@ -5245,10 +5274,6 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
       }
-
-      // sliderContainer: {
-      //   marginRight: '-20px'
-      // }
     }
   };
 });
@@ -5258,6 +5283,12 @@ function PhotoGallery({
   sectionIndex
 }) {
   const {
+    templateId,
+    navList,
+    isPreview,
+    isEdit,
+    basePath,
+    isMasterTemplate,
     isMobile,
     layout: {
       containerWidth
@@ -5283,11 +5314,35 @@ function PhotoGallery({
     centerPadding: isMobile ? '10px 0 0' : '80px 0 0',
     arrows: false
   };
+  const handleClick = data => {
+    let redirectUrl;
+    const {
+      isExistingLink,
+      link
+    } = data;
+    if (isExistingLink && link === 'courses') {
+      redirectUrl = `//${basePath}/courses`;
+    } else if (isExistingLink && link) {
+      // const { pageId } = navList.find((el) => el.slug === data?.link) || {};
+      redirectUrl = `//${basePath}/${link}`;
+    } else {
+      redirectUrl = link;
+    }
+    if (redirectUrl) {
+      window.open(redirectUrl, '_blank');
+    }
+  };
+
+  // useLinkBuilder(data);
+
   const carouselContent = carouselList?.map((el, idx) => {
+    const metadata = el?.cardImage?.metadata;
+    const link = el?.cardImage?.metadata?.link;
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
       key: idx
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classes.singleCard
+      onClick: () => handleClick(metadata),
+      className: `${classes.singleCard} ${link && classes.cursorPointer}`
     }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
       src: el?.cardImage?.metadata?.value,
       ref: el?.cardImage?.refSetter,
@@ -5329,10 +5384,10 @@ var index$b = /*#__PURE__*/Object.freeze({
 const useFaqListStyles = createUseStyles(theme => ({
   section: {
     width: '100%',
-    background: theme?.isGradient ? theme?.gradientColors?.background2 : theme?.solidColors?.background2,
     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.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'
@@ -5391,7 +5446,7 @@ const useFaqListStyles = createUseStyles(theme => ({
   },
   content: {
     color: theme?.palette?.font.primary,
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: theme.typography.fontSize.body,
     lineHeight: '24px',
     maxHeight: ({
       isSelected
@@ -5400,8 +5455,19 @@ const useFaqListStyles = createUseStyles(theme => ({
     overflow: 'hidden'
   },
   '@media screen and (max-width: 767px)': {
+    sectionSubheading: {
+      textAlign: 'center'
+    },
+    sectionHeading: {
+      textAlign: 'center'
+    },
+    title: {
+      fontSize: '14px',
+      lineHeight: '22px'
+    },
     content: {
-      lineHeight: '20px'
+      fontSize: '14px',
+      lineHeight: '22px'
     },
     basicCardContainer: {
       '&:last-child': {
@@ -5480,8 +5546,8 @@ const Accordion = ({
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.arrowButton
   }, /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
-    down: isSelected,
-    up: !isSelected,
+    down: !isSelected,
+    up: isSelected,
     size: "small"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: item?.answer?.refSetter,
@@ -5501,8 +5567,9 @@ const useTextGridStyles = createUseStyles(theme => ({
   section: {
     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?.gradientColors?.background2 : theme?.solidColors?.background2,
+    } = {}) => 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'
@@ -5555,7 +5622,7 @@ const useTextGridStyles = createUseStyles(theme => ({
   },
   nodeTitle: {
     color: theme?.palette?.font.default,
-    fontSize: theme.typography.fontSize.h3,
+    fontSize: theme.typography.fontSize.h4,
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: 'normal',
     margin: '0 0 20px',
@@ -5563,7 +5630,7 @@ const useTextGridStyles = createUseStyles(theme => ({
   },
   nodePara: {
     color: theme?.palette?.font.tertiary,
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: theme.typography.fontSize.body,
     lineHeight: '24px',
     wordBreak: 'break-word'
   },
@@ -5582,10 +5649,14 @@ const useTextGridStyles = createUseStyles(theme => ({
       margin: '0 6px'
     },
     nodeTitle: {
+      fontSize: '20px',
       marginBottom: '0px'
     },
     nodePara: {
-      margin: '16px 0'
+      fontSize: '14px',
+      display: 'block',
+      margin: '16px 0 !important',
+      lineHeight: '22px'
     },
     heading: {
       letterSpacing: '-1px'
@@ -5672,7 +5743,7 @@ const useCourseStyles = createUseStyles(theme => {
       overflow: 'hidden',
       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.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -5821,8 +5892,7 @@ const useCourseStyles = createUseStyles(theme => {
       textDecoration: 'none !important'
     },
     courseCardStrikePrice: {
-      fontSize: '10px',
-      fontWeight: '600',
+      fontSize: '14px',
       lineHeight: '13px',
       color: '#FE9B0E',
       '& span': {
@@ -5893,7 +5963,7 @@ const useCourseStyles = createUseStyles(theme => {
         // fontSize: '24px',
         lineHeight: '36px',
         color: theme?.palette?.font?.default,
-        margin: '4px 0 12px 0',
+        margin: '0px 0 12px 0',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
@@ -5989,8 +6059,7 @@ const formatCurrency = (countryCode, value, currencySymbol) => {
 function CourseCard({
   card,
   countryCode,
-  currencySymbol,
-  utmParams
+  currencySymbol
 }) {
   const classes = useCourseStyles();
   const {
@@ -6000,7 +6069,7 @@ function CourseCard({
   const defaultCardImg = 'https://cp-assets-public.s3.ap-south-1.amazonaws.com/cams/cards-icon/default_course.png';
   const price = formatCurrency(countryCode, card?.price, currencySymbol);
   const finalPrice = formatCurrency(countryCode, card?.finalPrice, currencySymbol);
-  const buyNowText = countryCode === 'KR' ? '수강신청하기' : 'Buy Now';
+  const buyNowText = countryCode === 'KR' ? '이 웨비나 신청하기' : 'Buy Now';
   const offText = countryCode === 'KR' ? '할인' : 'OFF';
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.singleCard
@@ -6040,7 +6109,7 @@ function CourseCard({
     className: classes.courseCardStrikePrice
   }, /*#__PURE__*/React__default["default"].createElement("span", null, price), " ", discount > 0 && discount + `% ${offText}`) : null), /*#__PURE__*/React__default["default"].createElement("a", {
     className: classes.coursesAnchorTag,
-    href: isEdit ? null : utmParams ? card?.shareableLink + `?flyy_utm_referrer=${utmParams}` : card?.shareableLink
+    href: isEdit ? null : card?.shareableLink
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardBuyBtn
   }, buyNowText)))));
@@ -6070,7 +6139,6 @@ function courses({
     isMobile
   });
   const [nodeData] = sectionData?.components;
-  const [utmParams, setUtmParams] = React.useState('');
   const handleApiCall = () => {
     if (baseURLs) {
       getCourseList(baseURLs, hashToken).then(response => {
@@ -6116,11 +6184,6 @@ function courses({
     else {
       handleApiCall();
     }
-    const params = new URLSearchParams(window.location.search);
-    const utmParams = params.get('flyy_utm_referrer');
-    if (utmParams) {
-      setUtmParams(utmParams);
-    }
   }, []);
   const settings = {
     className: classes.slickContainer,
@@ -6158,8 +6221,7 @@ function courses({
     key: index,
     card: card,
     countryCode: countryCode,
-    currencySymbol: currencySymbol,
-    utmParams: utmParams
+    currencySymbol: currencySymbol
   })) : fallBackImages?.map((dt, ind) => {
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
       key: ind
@@ -6204,8 +6266,9 @@ const useTeamStyles = createUseStyles(theme => {
     teamSuperContainer: {
       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?.gradientColors?.background2 : theme?.solidColors?.background2,
+      } = {}) => 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'
@@ -6227,7 +6290,7 @@ const useTeamStyles = createUseStyles(theme => {
       letterSpacing: '3px',
       marginBottom: '8px',
       color: theme?.palette?.font?.default,
-      wordBreak: 'break-word',
+      // wordBreak: 'break-word',
       position: 'relative'
     },
     partialBackground: {
@@ -6259,13 +6322,13 @@ const useTeamStyles = createUseStyles(theme => {
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
       margin: '20px',
-      width: 'calc(100% - 32px)',
+      width: 'calc(100% - 24px)',
       // height: 'calc(100% - 40px)',
       border: '3px solid #D8E0F0',
       borderRadius: theme?.shape?.borderRadius?.regular,
       padding: theme.spacing.padding.tiny,
       boxShadow: theme?.shadows?.primary,
-      minHeight: '390px'
+      minHeight: '320px'
     },
     imageContainer: {
       minWidth: '100%',
@@ -6285,18 +6348,19 @@ const useTeamStyles = createUseStyles(theme => {
     },
     teamDetailsContainer: {
       textAlign: 'center',
-      margin: '20px 0 0',
-      overflowWrap: 'break-word'
+      margin: '20px 0 0'
+      // overflowWrap: 'break-word'
     },
+
     teamDetailsHeading: {
-      fontSize: theme.typography.fontSize.h5,
+      fontSize: theme.typography.fontSize.h6,
       fontWeight: theme.typography.fontWeight.bold,
-      lineHeight: '32px',
+      lineHeight: '24px',
       margin: '0',
       color: theme?.palette?.font?.default
     },
     teamDetailsSubHeading: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
       margin: '12px 0 0',
       color: theme?.palette?.font?.primary
@@ -6306,9 +6370,14 @@ const useTeamStyles = createUseStyles(theme => {
       //   padding: '60px 20px'
       // },
       teamHeading: {
-        lineHeight: '20px'
+        lineHeight: '20px',
+        margin: 0,
+        textAlign: 'center'
       },
       teamTitle: {
+        marginTop: '0px',
+        textAlign: 'center',
+        fontSize: theme.typography.fontSize.h2,
         lineHeight: '36px',
         letterSpacing: '-1px'
       },
@@ -6316,6 +6385,7 @@ const useTeamStyles = createUseStyles(theme => {
         margin: '0 -4px'
       },
       singleSlideContainer: {
+        padding: '24px',
         width: 'calc(100% - 8px)',
         margin: '12px 4px'
       },
@@ -6326,11 +6396,13 @@ const useTeamStyles = createUseStyles(theme => {
       },
 
       teamDetailsHeading: {
+        fontSize: '16px',
         lineHeight: '24px',
         margin: '0',
-        color: theme?.palette?.font?.default
+        color: theme?.palette?.font?.body
       },
       teamDetailsSubHeading: {
+        marginTop: '0px',
         color: theme?.palette?.font?.primary
       }
     }
@@ -6445,7 +6517,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     backgroundColor: theme?.palette?.background?.default,
     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.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -6470,7 +6542,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    background: theme?.isGradient ? theme?.gradientColors?.background2 : theme?.solidColors?.background2
+    background: theme?.palette?.background?.primary
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
@@ -6525,7 +6597,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     padding: '4px 8px 0 0'
   },
   addressText: {
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: theme.typography.fontSize.h6,
     color: theme?.palette?.font?.default,
     lineHeight: '24px'
   },
@@ -6736,7 +6808,6 @@ function FormEnquiry({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.inputDiv
   }, /*#__PURE__*/React__default["default"].createElement(Input, {
-    theme: theme,
     data: nodeData.nameField,
     value: inputVal.name,
     isValid: validData.nameValid,
@@ -6851,7 +6922,8 @@ const useSectionStyles = createUseStyles(theme => ({
     alignItems: 'center',
     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.regular}px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`,
+    backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -6877,8 +6949,7 @@ const useSectionStyles = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    // background: theme?.palette?.background?.primary
-    background: theme?.isGradient ? theme?.gradientColors?.background2 : theme?.solidColors?.tertiaryBlue2
+    background: theme?.palette?.background?.primary
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
@@ -6894,7 +6965,8 @@ const useSectionStyles = createUseStyles(theme => ({
     lineHeight: '71px',
     letterSpacing: '-3px',
     textAlign: 'left',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    textAlign: 'center'
   },
   contentContainer: {
     width: '100%',
@@ -6903,17 +6975,18 @@ const useSectionStyles = createUseStyles(theme => ({
     wordBreak: 'break-word'
   },
   leftContainer: {
-    width: '50%',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    flex: 1
   },
   subtitle: {
     margin: '0 0 auto 0',
     fontSize: theme.typography.fontSize.h6,
     color: theme?.palette?.font?.default,
     lineHeight: '32px',
-    margin: '20px 0px'
+    margin: '16px 0',
+    textAlign: 'center'
   },
   addressContainer: {
     display: 'flex',
@@ -6929,8 +7002,7 @@ const useSectionStyles = createUseStyles(theme => ({
     width: '50%',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-between',
-    padding: '0 0 0 80px'
+    justifyContent: 'space-between'
   },
   inputDiv: {
     margin: '0 0 20px 0',
@@ -6975,6 +7047,7 @@ const useSectionStyles = createUseStyles(theme => ({
       opacity: '0.5'
     }
   },
+  btnContainer: {},
   '@media screen and (max-width: 767px)': {
     section: {
       display: 'flex',
@@ -7005,7 +7078,7 @@ const useSectionStyles = createUseStyles(theme => ({
       textAlign: 'center'
     },
     subtitle: {
-      margin: '0 0 12px 0',
+      margin: '4px 0 24px 0',
       textAlign: 'center',
       lineHeight: '26px'
     },
@@ -7029,6 +7102,11 @@ const useSectionStyles = createUseStyles(theme => ({
     },
     contactContainer: {
       width: '97%'
+    },
+    btnContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
     }
   }
 }));
@@ -7114,10 +7192,6 @@ function Contact({
     className: classes.partialBackground
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.contentContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.leftContainer
   }, /*#__PURE__*/React__default["default"].createElement("h2", {
     className: classes.title
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -7132,6 +7206,10 @@ function Contact({
       __html: nodeData?.subtitle?.metadata?.value
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.contentContainer
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.leftContainer
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.addressContainer
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     className: classes?.telephoneImage,
@@ -7255,7 +7333,6 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     webinarSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      background: theme?.colors?.background1,
       padding: ({
         isMobile
       } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
@@ -7266,14 +7343,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       '& h2,& h3,& p': {
         margin: '0'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -7384,7 +7454,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: wordBreakValue => wordBreakValue || 'break-word',
-      color: theme?.colors?.font1
+      color: theme.palette.font.default
     },
     courseViewContainer: {
       width: '645px',
@@ -7417,7 +7487,6 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     courseDetailTag: {
       display: 'flex',
       alignItems: 'center',
-      color: theme?.colors?.font1,
       marginRight: '20px',
       '& div': {
         fontSize: theme.typography.fontSize.subHead,
@@ -7427,7 +7496,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     courseDetailContent: {
       fontSize: theme.typography.fontSize.subHead,
       wordBreak: 'break-word',
-      color: theme?.colors?.font1,
+      color: theme.palette.font.primary,
       whiteSpace: 'pre-wrap',
       width: '80%'
     },
@@ -7436,9 +7505,8 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       marginTop: '-20px',
-      color: theme?.colors?.font1,
-      wordBreak: 'break-word',
-      textDecoration: 'underline'
+      color: '#00ADE7',
+      wordBreak: 'break-word'
     },
     courseDetailTime: {
       color: '#EB5757',
@@ -7606,7 +7674,7 @@ const SingleVideoSlide$1 = props => {
     }
   };
   const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
-  const buyNowText = countryCode === 'KR' ? '수강신청하기' : 'BUY NOW';
+  const buyNowText = countryCode === 'KR' ? '이 웨비나 신청하기' : 'BUY NOW';
   const registerNowText = countryCode === 'KR' ? '웨비나 신청하기' : 'REGISTER NOW';
   const momentLocale = countryCode === 'KR' ? 'ko' : 'in';
   if (countryCode === 'KR') {
@@ -7653,7 +7721,7 @@ const SingleVideoSlide$1 = props => {
     color: theme.palette.primary.main,
     width: "20px",
     name: `${data.webinarLocation === 'Location' ? 'Location' : 'Video'}`
-  })), /*#__PURE__*/React__default["default"].createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React__default["default"].createElement("p", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.courseDetailContent,
     dangerouslySetInnerHTML: {
@@ -7687,7 +7755,7 @@ const SingleVideoSlide$1 = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.offerPrice
-  }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       fontSize: '20px'
     }
@@ -7762,7 +7830,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
     courseSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      background: theme?.isGradient ? theme?.gradientColors?.background1 : theme?.solidColors?.background1,
       padding: ({
         isMobile
       } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
@@ -7883,7 +7950,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font1
+      color: theme.palette.font.default
     },
     courseViewContainer: {
       width: '445px',
@@ -7934,7 +8001,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
     },
     courseDetailTag: {
       marginTop: '5px',
-      color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font1,
       display: 'flex',
       alignItems: 'center',
       marginRight: '20px',
@@ -7949,7 +8015,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font1,
+      color: theme.palette.font.primary,
       whiteSpace: 'pre-wrap',
       margin: '10px 0 20px'
     },
@@ -7958,7 +8024,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       marginTop: '-24px',
-      color: theme?.isGradient ? theme?.gradientColors?.font1 : theme?.solidColors?.font1,
+      color: '#00ADE7',
       wordBreak: 'break-word'
     },
     courseDetailTime: {
@@ -8146,7 +8212,7 @@ const SingleVideoSlide = props => {
   };
   const effectivePrice = formatCurrency(countryCode, data?.effectivePrice, currencySymbol);
   const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
-  const buyNowText = countryCode === 'KR' ? '수강신청하기' : 'BUY NOW';
+  const buyNowText = countryCode === 'KR' ? '이 웨비나 신청하기' : 'BUY NOW';
   const handleReadMoreText = () => {
     if (countryCode === 'KR') {
       return '더 보기';
@@ -8346,7 +8412,7 @@ const useFormPageStyles = createUseStyles(theme => ({
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    background: theme?.isGradient ? theme?.gradientColors?.background3 : theme?.solidColors?.background3,
+    background: '#F4F9FF',
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -8719,7 +8785,7 @@ const useTilesStyles = createUseStyles(theme => {
       flexDirection: 'column',
       padding: ({
         isMobile
-      } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
+      } = {}) => isMobile ? `24px ${theme.spacing.padding.small}px` : `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}px`
     },
     tileDiv: {
       width: '236px',