diy-template-components 0.2.77 → 0.2.79

package/build/index.es.js

@@ -1985,7 +1985,6 @@ 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"`,
@@ -2267,7 +2266,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   subTitleHeading: {
     marginBottom: '8px',
     fontSize: theme.typography.fontSize.subHead,
-    color: theme?.palette?.font?.tertiary,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     maxWidth: '100%'
   },
@@ -2275,7 +2274,9 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     margin: '0',
     fontSize: theme.typography.fontSize.h1,
     color: theme?.palette?.font?.default,
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    fontWeight: theme.typography.fontWeight.bold,
+    lineHeight: 'normal'
   },
   description: {
     margin: `${theme.spacing.margin.tiny}px 0px`,
@@ -2673,10 +2674,11 @@ const useSectionStyles$7 = createUseStyles(theme => ({
   subTitleHeading: {
     marginBottom: '8px',
     fontSize: theme.typography.fontSize.subHead,
-    color: theme?.palette?.font?.tertiary,
+    color: theme?.palette?.font?.default,
     alignItems: 'center',
     textAlign: 'center',
     wordBreak: 'break-word',
+    letterSpacing: '3px',
     textTransform: 'uppercase'
   },
   heading: {
@@ -3125,18 +3127,21 @@ var index$j = /*#__PURE__*/Object.freeze({
 const useSectionStyles$5 = createUseStyles(theme => {
   return {
     section: {
-      paddingBottom: theme?.spacing?.padding?.regular,
+      padding: ({
+        isMobile
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
-      },
-      '& h2,& h3': {
-        fontWeight: theme?.typography?.fontWeight?.medium,
-        '& b,& strong': {
-          fontWeight: theme?.typography?.fontWeight?.bold
-        }
       }
+      // '& h2,& h3': {
+      //   fontWeight: theme?.typography?.fontWeight?.medium,
+      //   '& b,& strong': {
+      //     fontWeight: theme?.typography?.fontWeight?.bold
+      //   }
+      // }
     },
+
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -3146,9 +3151,11 @@ const useSectionStyles$5 = createUseStyles(theme => {
     centerData: {
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center',
-      padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
+      justifyContent: 'center'
+
+      // padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
     },
+
     imageContainerDiv: {
       width: '50%',
       position: 'relative'
@@ -3182,25 +3189,28 @@ const useSectionStyles$5 = createUseStyles(theme => {
       objectFit: 'cover'
     },
     textContainer: {
-      padding: `0 ${theme?.spacing?.padding?.xSmall}px`,
+      marginLeft: '72px',
       textAlign: 'left',
       margin: '0 auto',
       width: '50%'
     },
     subTitleHeading: {
       marginBottom: '8px',
-      fontSize: `${theme?.typography?.fontSize?.subHead}px`,
-      color: theme?.palette?.font?.tertiary,
+      fontSize: theme?.typography?.fontSize?.subHead,
+      color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     heading: {
       margin: '0',
-      fontSize: `${theme?.typography?.fontSize?.h1}px`,
+      fontSize: theme?.typography?.fontSize?.h1,
       color: theme?.palette?.font?.default,
-      wordBreak: 'break-word'
+      wordBreak: 'break-word',
+      fontWeight: theme?.typography?.fontWeight?.bold,
+      lineHeight: 'normal'
     },
     description: {
-      margin: '40px 0',
+      marginTop: theme.spacing.margin.tiny,
+      marginBottom: theme.spacing.margin.tiny,
       color: theme?.palette?.font?.primary,
       lineHeight: '24px',
       wordBreak: 'break-word'
@@ -3257,7 +3267,8 @@ function Section$2({
     isCustomWebsite
   } = useContext(PageContext);
   const classes = useSectionStyles$5({
-    isCustomWebsite
+    isCustomWebsite,
+    isMobile
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
@@ -3743,7 +3754,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'
@@ -4226,7 +4237,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       lineHeight: '20px',
       letterSpacing: '3px',
       textTransform: 'uppercase',
-      color: theme.palette.font.tertiary,
+      color: theme.palette.font.default,
       wordBreak: 'break-word',
       marginBottom: '8px'
     },
@@ -4431,7 +4442,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: {
@@ -4643,14 +4655,15 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -4661,7 +4674,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     position: 'absolute',
     top: '0',
     left: '0',
-    height: '350px',
+    height: '50%',
     background: theme?.palette?.background?.primary,
     width: '100%'
   },
@@ -4671,7 +4684,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
   subTitleHeading: {
     width: '100%',
     fontSize: theme.typography.fontSize.subHead,
-    color: theme?.palette?.font?.tertiary,
+    color: theme?.palette?.font?.default,
     textAlign: 'left',
     lineHeight: '20px',
     letterSpacing: '3px',
@@ -4709,6 +4722,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
   cardHeading: {
     fontSize: theme.typography.fontSize.h5,
     lineHeight: '32px',
+    fontWeight: theme.typography.fontWeight.bold,
     color: theme?.palette?.font?.default,
     margin: `${theme.spacing.margin.tiny}px 0px`,
     wordBreak: 'break-word'
@@ -4722,6 +4736,14 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     borderRadius: '50%',
     background: theme?.palette?.background?.primary
   },
+  buttonContainerClass: {
+    marginRight: theme.spacing.margin.regular,
+    display: 'flex',
+    gap: '20px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: theme.spacing.margin.tiny
+  },
   cardPara: {
     fontSize: theme.typography.fontSize.subHead,
     lineHeight: '24px',
@@ -4840,7 +4862,8 @@ function Info({
     }
   })), cardsCount > slidesToShow ? /*#__PURE__*/React.createElement(Carousel, {
     hideArrow: isMobile,
-    settings: settings
+    settings: settings,
+    buttonContainerClass: classes.buttonContainerClass
   }, carouselContent) : /*#__PURE__*/React.createElement("div", {
     className: classes.contentRow
   }, carouselContent))));
@@ -4873,7 +4896,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   subHeading: {
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
-    color: theme?.palette?.font?.tertiary,
+    color: theme?.palette?.font?.default,
     wordBreak: 'break-word',
     textTransform: 'uppercase',
     letterSpacing: '3px'
@@ -4987,7 +5010,7 @@ 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',
@@ -5149,7 +5172,7 @@ const useFaqListStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   sectionSubheading: {
-    color: theme?.palette?.font.tertiary,
+    color: theme?.palette?.font.default,
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
     wordBreak: 'break-word'
@@ -5304,7 +5327,8 @@ 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`,
-    backgroundColor: theme?.palette?.background?.primary,
+    // backgroundColor: theme?.palette?.background?.primary,
+
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5327,7 +5351,7 @@ const useTextGridStyles = createUseStyles(theme => ({
     } = {}) => containerWidth
   },
   subheading: {
-    color: theme?.palette?.font.tertiary,
+    color: theme?.palette?.font.default,
     fontSize: theme.typography.fontSize.subHead,
     lineHeight: '20px',
     letterSpacing: '3px',
@@ -5356,7 +5380,7 @@ const useTextGridStyles = createUseStyles(theme => ({
     borderRadius: theme?.shape?.borderRadius?.regular
   },
   nodeTitle: {
-    color: theme?.palette?.font.secondary,
+    color: theme?.palette?.font.default,
     fontSize: theme.typography.fontSize.h3,
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: 'normal',
@@ -5999,7 +6023,8 @@ 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`,
-      backgroundColor: theme?.palette?.background?.primary,
+      // backgroundColor: theme?.palette?.background?.primary,
+
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -6020,8 +6045,17 @@ const useTeamStyles = createUseStyles(theme => {
       lineHeight: '20px',
       letterSpacing: '3px',
       marginBottom: '8px',
-      color: theme?.palette?.font?.primary,
-      wordBreak: 'break-word'
+      color: theme?.palette?.font?.default,
+      wordBreak: 'break-word',
+      position: 'relative'
+    },
+    partialBackground: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      height: '50%',
+      background: theme?.palette?.background?.primary,
+      width: '100%'
     },
     teamTitle: {
       fontSize: theme.typography.fontSize.h2,
@@ -6029,7 +6063,8 @@ const useTeamStyles = createUseStyles(theme => {
       lineHeight: '70px',
       letterSpacing: '-3px',
       wordBreak: 'break-word',
-      color: theme?.palette?.font?.default
+      color: theme?.palette?.font?.default,
+      position: 'relative'
     },
     sliderContainer: {
       margin: '0 -20px'
@@ -6191,6 +6226,8 @@ function TeamCard({
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
   }, /*#__PURE__*/React.createElement("div", {
+    className: classes.partialBackground
+  }), /*#__PURE__*/React.createElement("div", {
     className: classes.teamHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: teamData?.teamHeading?.refSetter,
@@ -7461,6 +7498,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
 });
 
 const useCoursePromotionPage = createUseStyles(theme => {
+  debugger;
   return {
     courseSuperContainer: {
       display: 'flex',
@@ -7711,17 +7749,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
         width: '100%',
         paddingBottom: '10px'
       },
-      courseSuperContainer: {
-        padding: '20px 10px 60px 20px'
-      },
+      // courseSuperContainer: {
+      //   padding: '20px 10px 60px 20px'
+      // },
       videoCarousel: {
         flexDirection: 'column-reverse',
         gap: '20px'
       },
       videoCarouselContainer: {
-        height: 'max-content',
-        paddingRight: '10px'
+        height: 'max-content'
+        // paddingRight: '10px'
       },
+
       videoDetails: {
         width: '100%'
       },