diy-template-components 1.0.51 → 1.0.53

package/build/index.es.js

@@ -1561,7 +1561,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: '64px 128px 55px 128px',
+    padding: '64px 128px 24px 128px',
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -1645,7 +1645,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
-    padding: '42px 0 0 0'
+    padding: '24px 0 0 0'
   },
   bottomLeftText: {
     fontSize: '16px',
@@ -1681,7 +1681,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     width: '60%',
     justifyContent: 'flex-end',
     alignItems: 'center',
-    gap: '5%'
+    gap: '8px'
   },
   poweredDivImg: {
     width: '100px !important'
@@ -2798,12 +2798,12 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '770px',
+    width: '1000px',
     margin: 'auto'
   },
   content: {
     display: 'flex',
-    width: 'calc(100% - 100px)',
+    width: 'calc(100% - 200px)',
     alignItems: 'center',
     background: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.primary,
@@ -2887,7 +2887,8 @@ const useSectionStyles$7 = createUseStyles(theme => ({
   },
   '@media screen and (max-width: 767px)': {
     contentContainer: {
-      width: '100%'
+      width: '100%',
+      gap: '8px'
     },
     content: {
       display: 'flex',
@@ -3071,7 +3072,8 @@ const useSectionStyles$6 = createUseStyles(theme => {
       color: theme?.palette?.font?.invertedDefault,
       wordBreak: ({
         wordBreakValue
-      }) => wordBreakValue || 'break-word'
+      }) => wordBreakValue || 'break-word',
+      lineHeight: '80px'
     },
     description: {
       color: theme?.palette?.font?.invertedDefault,
@@ -3097,7 +3099,8 @@ const useSectionStyles$6 = createUseStyles(theme => {
     },
     '@media screen and (max-width: 767px)': {
       heading: {
-        fontSize: theme.typography.fontSize.h2
+        fontSize: theme.typography.fontSize.h2,
+        lineHeight: '40px'
       },
       partialBackground: {
         display: 'none'
@@ -3518,7 +3521,7 @@ const useSectionStyles$4 = createUseStyles(theme => ({
   contentContainer: {
     display: 'flex',
     alignItems: 'center',
-    gap: '16px'
+    gap: '128px'
   },
   title: {
     fontSize: theme.typography.fontSize.h6,
@@ -3588,7 +3591,8 @@ const useSectionStyles$4 = createUseStyles(theme => ({
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'flex-start',
-      textAlign: 'center'
+      textAlign: 'center',
+      gap: '16px'
     },
     inputContainer: {
       display: 'block',
@@ -3649,7 +3653,7 @@ async function postApiCallForm(baseURLs, data, extraProps) {
 const inputStyles = createUseStyles(theme => ({
   inputField: {
     width: '100%',
-    maxWidth: '314px',
+    // maxWidth: '314px',
     background: theme?.palette?.background?.default,
     border: `1px solid ${theme?.palette?.border?.secondary}`,
     borderRadius: theme?.shape?.borderRadius?.regular,
@@ -3995,6 +3999,12 @@ const useTestimonialStyles = createUseStyles(theme => ({
     //   wordBreak: 'break-word',
     //   textOverflow: 'ellipsis'
     // },
+    testimonialText: {
+      textAlign: 'center'
+    },
+    testimonialHeader: {
+      textAlign: 'center'
+    },
     userImageDummy: {
       width: '48px',
       height: '48px',
@@ -4397,7 +4407,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       width: '100%',
       display: 'flex',
       alignItems: 'center',
-      marginTop: '16px',
+      // marginTop: '16px',
       borderRadius: '8px'
     },
     iframeContainer: {
@@ -4442,7 +4452,8 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
     },
     '@media (max-width: 767px)': {
       videoCarousel: {
-        flexDirection: 'column'
+        flexDirection: 'column',
+        gap: '24px'
       },
       videoCarouselContainer: {
         height: 'max-content'
@@ -4672,7 +4683,7 @@ const useVideoStyles = createUseStyles(theme => {
         padding: '16px',
         width: 'calc(100% - 12px)',
         height: 'calc(100% - 24px)',
-        margin: '12px 6px'
+        margin: '0px 6px 16px 6px'
       },
       iframe: {
         borderRadius: '8px 8px 0 0'
@@ -4867,7 +4878,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     margin: ({
       slidesToShow,
       cardsCount
-    } = {}) => cardsCount > slidesToShow ? `6px 30px 6px 10px` : `6px 0 6px 0`,
+    } = {}) => cardsCount > slidesToShow ? `6px 25px 6px 0px` : `6px 0 6px 0`,
     height: 'calc(100% - 12px)'
   },
   cardContent: {
@@ -4964,7 +4975,7 @@ function Info({
     }
   } = useContext(PageContext);
   const theme = useTheme();
-  const slidesToShow = isMobile ? 1 : 4;
+  const slidesToShow = isMobile ? 1 : 3.99;
   const [nodeData] = sectionData.components;
   const carouselList = nodeData?.contentList?.components;
   const cardsCount = carouselList?.length;
@@ -5086,7 +5097,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     display: 'grid',
     gridTemplateColumns: '1fr 1fr',
     gap: '48px',
-    padding: '48px 0px'
+    padding: '32px 0px'
   },
   textPara: {
     color: theme?.palette?.font?.primary,
@@ -5101,6 +5112,12 @@ const useSectionStyles$2 = createUseStyles(theme => ({
       lineHeight: '22px',
       gap: '16px',
       padding: '16px 0px'
+    },
+    subHeading: {
+      textAlign: 'center'
+    },
+    title: {
+      textAlign: 'center'
     }
   }
 }));
@@ -5166,7 +5183,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       padding: ({
         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`,
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.small}px` : cardsCount === 1 ? `${theme.spacing.padding.small}px ${theme.spacing.padding.medium}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'
@@ -5205,7 +5222,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
     singleCard: {
       borderRadius: '24px',
       margin: '0 1px',
-      width: isMobile => isMobile ? 'calc(100% - 24px)' : 'calc(100% - 24px)',
+      width: 'calc(100% - 24px)',
       position: 'relative',
       paddingBottom: '59.83%' // keeping aspect ratio 585x350
     },
@@ -5221,7 +5238,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       },
       padding: ({
         cardsCount
-      }) => cardsCount === 1 ? '0px 100px' : ''
+      }) => cardsCount === 1 ? '0px 150px' : ''
     },
     carouselImage: {
       height: ({
@@ -5244,7 +5261,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       lineHeight: '70px',
       letterSpacing: '-3px',
       color: theme?.palette?.font?.default,
-      marginTop: '8px',
+      marginTop: '0px',
       marginBottom: theme.spacing.margin.tiny,
       overflow: 'hidden',
       whiteSpace: 'nowrap',
@@ -5269,7 +5286,8 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       carouselImage: {
         height: ({
           cardsCount
-        }) => cardsCount === 1 ? '360px' : ''
+        }) => cardsCount === 1 ? '360px' : '',
+        borderRadius: "16px"
       },
       singleCard: {
         width: ({
@@ -5660,8 +5678,12 @@ const useTextGridStyles = createUseStyles(theme => ({
       margin: '16px 0 !important',
       lineHeight: '22px'
     },
+    subheading: {
+      textAlign: "center"
+    },
     heading: {
-      letterSpacing: '-1px'
+      textAlign: 'center',
+      letterSpacing: '0'
     }
   }
 }));
@@ -5782,7 +5804,8 @@ const useCourseStyles = createUseStyles(theme => {
       lineHeight: '70px',
       color: theme?.palette?.font?.default,
       marginTop: '8px',
-      marginBottom: theme.spacing.margin.tiny
+      marginBottom: theme.spacing.margin.tiny,
+      textAlign: 'center'
       // overflow: 'hidden',
       // whiteSpace: 'nowrap',
       // textOverflow: 'ellipsis',
@@ -5969,7 +5992,8 @@ const useCourseStyles = createUseStyles(theme => {
         // fontSize: '24px',
         lineHeight: '36px',
         color: theme?.palette?.font?.default,
-        margin: '0px 0 12px 0'
+        margin: '0px 0 12px 0',
+        textAlign: 'center'
         // overflow: 'hidden',
         // whiteSpace: 'nowrap',
         // textOverflow: 'ellipsis'
@@ -6369,7 +6393,7 @@ const useTeamStyles = createUseStyles(theme => {
     teamDetailsSubHeading: {
       fontSize: theme.typography.fontSize.body,
       lineHeight: '24px',
-      margin: '12px 0 0',
+      margin: '6px 0 0',
       color: theme?.palette?.font?.primary
     },
     '@media (max-width: 767px)': {
@@ -6393,8 +6417,9 @@ const useTeamStyles = createUseStyles(theme => {
       },
       singleSlideContainer: {
         padding: '24px',
-        width: 'calc(100% - 8px)',
-        margin: '12px 4px'
+        width: 'calc(100% - 16px)',
+        margin: '12px 4px',
+        minHeight: '260px'
       },
       teamDetailsContainer: {
         textAlign: 'center'
@@ -6577,27 +6602,29 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   leftContainer: {
     width: '65%',
     display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between'
+    flexDirection: 'column'
+    // justifyContent: 'space-between'
   },
+
   subtitle: {
     // margin: '0 0 40px 0',
-    fontSize: theme.typography.fontSize.h6,
+    fontSize: theme.typography.fontSize.h5,
     color: theme?.palette?.font?.default,
     lineHeight: '32px',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    marginBottom: '32px'
   },
   addressContainer: {
     display: 'flex',
     alignItems: 'flex-start',
     flexDirection: 'column',
-    width: '80%'
+    width: '80%',
+    gap: "16px"
   },
   addressRow: {
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    padding: '16px 0',
     wordBreak: 'break-word'
   },
   addressImg: {
@@ -6606,7 +6633,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   addressText: {
     fontSize: theme.typography.fontSize.h6,
     color: theme?.palette?.font?.default,
-    lineHeight: '24px'
+    lineHeight: '24px',
+    fontSize: '16px'
   },
   rightContainer: {
     width: '50%',
@@ -6622,6 +6650,9 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   },
   btnContainer: {},
   '@media screen and (max-width: 767px)': {
+    addressContainer: {
+      gap: '0px'
+    },
     section: {
       display: 'flex',
       flexDirection: 'column',
@@ -6987,21 +7018,25 @@ const useSectionStyles = createUseStyles(theme => ({
     width: '100%',
     display: 'flex',
     justifyContent: 'space-between',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    gap: "56px"
   },
   leftContainer: {
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-between',
     flex: 1
+    // justifyContent: 'space-between',
+    // flex: 1
   },
+
   subtitle: {
-    margin: '0 0 auto 0',
+    // margin: '0 0 auto 0',
     fontSize: theme.typography.fontSize.h6,
     color: theme?.palette?.font?.default,
-    lineHeight: '32px',
-    margin: '16px 0',
-    textAlign: 'center'
+    // lineHeight: '32px',
+    // margin: '16px 0',
+    textAlign: 'center',
+    marginBottom: '32px'
   },
   addressContainer: {
     display: 'flex',
@@ -7011,9 +7046,10 @@ const useSectionStyles = createUseStyles(theme => ({
     position: 'relative'
   },
   telephoneImage: {
-    width: '80%'
+    width: '100%'
   },
   rightContainer: {
+    flex: 1,
     width: '50%',
     display: 'flex',
     flexDirection: 'column',
@@ -7026,7 +7062,7 @@ const useSectionStyles = createUseStyles(theme => ({
   },
   inputField: {
     width: '100%',
-    maxWidth: '314px',
+    // maxWidth: '314px',
     background: theme?.palette?.background?.default,
     border: `1px solid ${theme?.palette?.border?.secondary}`,
     borderRadius: theme?.shape?.borderRadius?.regular,
@@ -7077,7 +7113,8 @@ const useSectionStyles = createUseStyles(theme => ({
     },
     contentContainer: {
       flexDirection: 'column',
-      marginTop: '8px'
+      // marginTop: '8px'
+      gap: '8px'
     },
     leftContainer: {
       width: '100%',
@@ -7093,9 +7130,12 @@ const useSectionStyles = createUseStyles(theme => ({
       textAlign: 'center'
     },
     subtitle: {
-      margin: '4px 0 24px 0',
+      // margin: '4px 0 24px 0',
+      marginTop: '16px',
       textAlign: 'center',
-      lineHeight: '26px'
+      fontSize: '14px',
+      lineHeight: '20px',
+      marginBottom: "32px"
     },
     addressRow: {
       // padding: '12px 0'