diy-template-components 1.0.58 → 1.0.60

package/build/index.es.js

@@ -3098,39 +3098,89 @@ const useSectionStyles$6 = createUseStyles(theme => {
       height: '100%',
       backgroundColor: 'rgba(0, 0, 0, 0.4)'
     },
+    contentContainerWithMobile: {},
+    textContainerWithMobile: {},
+    centerBgImageContainerWithMobile: {},
+    headingWithMobile: {},
+    subTitleHeadingWithMobile: {},
+    descriptionWithMobile: {},
     '@media screen and (max-width: 767px)': {
       heading: {
         fontSize: theme.typography.fontSize.h2,
-        lineHeight: '40px'
+        lineHeight: '40px',
+        color: '#333'
+      },
+      headingWithMobile: {
+        color: '#fff'
+      },
+      subTitleHeading: {
+        color: '#333'
+      },
+      subTitleHeadingWithMobile: {
+        color: '#fff'
       },
       partialBackground: {
         display: 'none'
       },
+      contentContainerWithMobile: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
       contentContainer: {
-        display: 'block'
+        display: 'flex',
+        flexDirection: 'column-reverse'
       },
-      textContainer: {
+      textContainerWithMobile: {
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
         position: 'absolute',
-        padding: '20px 20px',
+        padding: '24px 16px',
         height: '100%',
         width: '100%',
-        zIndex: '999999'
-        // backgroundColor: theme?.palette?.background?.primary
+        zIndex: '99',
+        background: 'trasparent'
+      },
+      textContainer: {
+        padding: '24px 16px'
       },
+      // textContainer: {
+      //   position: ({ mobileImage }) => mobileImage ? 'absolute' : '',
+      //   padding: ({ mobileImage }) => mobileImage ? '20px 20px' : '24px 16px',
+      //   height: ({ mobileImage }) => mobileImage ? '100%' : '',
+      //   width: ({ mobileImage }) => mobileImage ? '100%' : '',
+      //   zIndex: ({ mobileImage }) => mobileImage ? '99' : '',
+      //   background: ({ mobileImage }) => mobileImage ? 'transparent' : theme?.palette?.background?.primary
+      // },
 
       description: {
         fontSize: '16px',
-        lineHeight: '24px'
+        lineHeight: '24px',
+        color: '#333'
+      },
+      descriptionWithMobile: {
+        width: '100%',
+        wordBreak: 'break-all',
+        color: '#fff'
       },
       centerBgImageContainer: {
         width: ({
           isCustomWebsite
-        }) => isCustomWebsite ? '100%' : 'unset',
+        }) => isCustomWebsite ? '100%' : '100%',
         position: 'relative',
-        height: '40rem',
+        height: '15rem',
         minHeight: '200px',
         paddingBottom: '0'
       },
+      centerBgImageContainerWithMobile: {
+        height: '40rem',
+        width: '100%'
+      },
       sectionContainer: {
         position: 'unset'
       },
@@ -3156,32 +3206,33 @@ const Section$3 = ({
     countryCode
   } = useContext(PageContext);
   const hasContent = Boolean(nodeData.cardHeading.metadata.value || nodeData.title.metadata.valu || nodeData.description.metadata.value);
+  const mobileImageSrc = isMobile && nodeData?.mobileImage?.metadata?.value;
+  const desktopImageSrc = nodeData?.image?.metadata?.value;
   const classes = useSectionStyles$6({
     wordBreakValue: wordBreakValue(countryCode),
     imageUrl: nodeData.image.metadata.value,
     containerWidth,
     isCustomWebsite,
-    hasContent
+    hasContent,
+    mobileImage: nodeData?.mobileImage?.metadata?.value
   });
-  const mobileImageSrc = isMobile && nodeData?.mobileImage?.metadata?.value;
-  const desktopImageSrc = nodeData?.image?.metadata?.value;
   return /*#__PURE__*/React.createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.contentContainer
+    className: mobileImageSrc ? classes.contentContainerWithMobile : classes.contentContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
   }, !(nodeData.cardHeading.metadata.value === '<br>' && nodeData.title.metadata.value === '<br>' && nodeData.description.metadata.value === '<br>' && nodeData?.cta?.metadata?.value === '') ? /*#__PURE__*/React.createElement("div", {
-    className: classes.textContainer
+    className: mobileImageSrc ? classes.textContainerWithMobile : classes.textContainer
   }, nodeData.cardHeading.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("div", {
-    className: classes.subTitleHeading
+    className: mobileImageSrc ? classes.subTitleHeadingWithMobile : classes.subTitleHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.cardHeading?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData.cardHeading.metadata.value
     }
   })) : null, nodeData.title.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("h2", {
-    className: classes.heading
+    className: mobileImageSrc ? classes.headingWithMobile : classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
     dangerouslySetInnerHTML: {
@@ -3189,7 +3240,7 @@ const Section$3 = ({
     }
   })) : null, nodeData.description.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("p", {
     ref: nodeData?.description?.refSetter,
-    className: classes.description,
+    className: mobileImageSrc ? classes.descriptionWithMobile : classes.description,
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
@@ -3201,7 +3252,7 @@ const Section$3 = ({
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
   }))) : null), /*#__PURE__*/React.createElement("div", {
-    className: classes?.centerBgImageContainer
+    className: mobileImageSrc ? classes?.centerBgImageContainerWithMobile : classes?.centerBgImageContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: hasContent && classes?.overlay
   }), /*#__PURE__*/React.createElement(NextImageRenderer, {