tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/Sections/Slideshow/Freetextsection/Freetextsection19-11.jsx

@@ -0,0 +1,757 @@
+// import React, { useEffect, useState, useContext } from 'react';
+// import { css } from 'glamor';
+// import generalstyles from '../../../../styles/general/general.module.css';
+// import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
+// import { serverbaselink } from '../../../../../Env';
+// const Freetextsection = (props) => {
+//     const [sectionproperties, setsectionproperties] = useState('');
+//     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+//     const lang = props.actions.lang;
+//     const langdetect = props.actions.langdetect;
+//     const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+//     useEffect(() => {
+//         var secpropobj = {};
+//         StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+//             if (sectionitem.sectionid == props.sectionidprops) {
+//                 sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+//                     secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+//                 });
+//             }
+//         });
+//         setsectionproperties({ ...secpropobj });
+//     }, [StatePagePropertiesContext]);
+//     const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
+//     useEffect(() => {
+//         if (sectionproperties.length != 0 && sectionproperties.maincontainerarrayofobjs != undefined) {
+//             var maincontainerarrayofobjsparsed = JSON.parse(sectionproperties.maincontainerarrayofobjs);
+//             if (Array.isArray(maincontainerarrayofobjsparsed)) {
+//                 setmaincontainerarrayofobjs([...maincontainerarrayofobjsparsed]);
+//             }
+//         }
+//     }, [sectionproperties]);
+//     const section_styles = {
+//         sectiontitlespan: css({
+//             ':after': {
+//                 height: '5px',
+//                 width: sectionproperties.sectitle_lineafterwidth + '%',
+//                 backgroundColor: sectionproperties.linebgcolor,
+//             },
+//         }),
+//         line_left: css({
+//             height: '1px',
+//             position: 'relative',
+//             flex: '1 1 auto',
+//             minWidth: '10%',
+//             background: sectionproperties.linebgcolor,
+//         }),
+//         line_right: css({
+//             height: '1px',
+//             position: 'relative',
+//             flex: '1 1 auto',
+//             minWidth: '10%',
+//             background: sectionproperties.linebgcolor,
+//         }),
+//         btn: css({
+//             width: sectionproperties.generalbtn_width + 'px',
+//             height: sectionproperties.generalbtn_height + 'px',
+//             backgroundColor: sectionproperties.generalbtn_bgColor,
+//             color: sectionproperties.generalbtn_textColor,
+//             borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+//             borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+//             borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+//             borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+//             border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
+//             fontSize: sectionproperties.generalbtn_fontsize + 'px',
+//             fontWeight: sectionproperties.generalbtn_fontweight,
+//             marginTop: sectionproperties.generalbtn_marginTop + 'px',
+//             marginBottom: sectionproperties.generalbtn_marginBottom + 'px',
+//             transition: '.3s',
+//             cursor: 'pointer',
+//             ':hover': {
+//                 backgroundColor: sectionproperties.generalbtn_bgColoronhover,
+//                 color: sectionproperties.generalbtn_textColoronhover,
+//             },
+//         }),
+//         imgcontainer: css({
+//             ':before': {
+//                 width: '100%',
+//                 height: '100%',
+//                 background: 'rgba(0,0,0,' + sectionproperties.cardimg_opacity + ')',
+//                 zIndex: 1,
+//                 position: 'absolute',
+//                 content: 's',
+//                 fontSize: 0,
+//                 left: 0,
+//                 right: 0,
+//                 top: 0,
+//                 bottom: 0,
+//             },
+//         }),
+//     };
+//     const SectionTitle = () => {
+//         return (
+//             <div
+//                 class="d-flex align-items-center flex-row"
+//                 style={{
+//                     position: 'relative',
+//                     justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
+//                     width: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '100%' : '',
+//                 }}
+//             >
+//                 {sectionproperties.sectiontitlestyle == 'Line Before Text' && (
+//                     <span
+//                         class={section_styles.line_left}
+//                         style={{
+//                             marginLeft: langdetect == 'en' ? 0 : sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+//                             marginRight: langdetect == 'en' ? (sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0) : 0,
+//                         }}
+//                     ></span>
+//                 )}
+//                 <p
+//                     class={
+//                         sectionproperties.sectiontitlefontfamily == 'Pacifico'
+//                             ? `${section_styles.sectiontitlespan}` + ' PacificoFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+//                             : sectionproperties.sectiontitlefontfamily == 'Playfair'
+//                             ? `${section_styles.sectiontitlespan}` + ' PlayfairFont mb-auto mb-0 pb-0  wordbreak d-flex align-items-center justify-content-start '
+//                             : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
+//                             ? `${section_styles.sectiontitlespan}` + ' GreatvibesFont mb-auto mb-0 pb-0  wordbreak d-flex align-items-center justify-content-start '
+//                             : sectionproperties.sectiontitlefontfamily == 'Quicksand'
+//                             ? ' QuicksandFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+//                             : sectionproperties.sectiontitlefontfamily == 'Satisfy'
+//                             ? `${section_styles.sectiontitlespan}` + ' SatisfyFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+//                             : `${section_styles.sectiontitlespan}` + '  mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+//                     }
+//                     style={{
+//                         color: sectionproperties.sectionTitleColor,
+//                         textTransform: sectionproperties.sectionTitleTextTransform,
+//                         fontWeight: sectionproperties.sectionTitleFontWeight,
+//                         padding: sectionproperties.sectiontitlefontfamily == 'Great Vibes' ? 7 : 0,
+//                         textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'left',
+//                     }}
+//                 >
+//                     {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+//                 </p>
+//                 {sectionproperties.sectiontitlestyle == 'Line Before Text' && (
+//                     <span
+//                         class={section_styles.line_right}
+//                         style={{
+//                             marginRight: langdetect == 'en' ? 0 : sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+//                             marginLeft: langdetect == 'en' ? (sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0) : 0,
+//                         }}
+//                     ></span>
+//                 )}
+//             </div>
+//         );
+//     };
+//     const Description = () => {
+//         return (
+//             <div
+//                 class={
+//                     sectionproperties.description_marginLeft != 0 && sectionproperties.description_marginRight != 0
+//                         ? ' col-lg-12 d-flex align-items-center justify-content-center mb-md-0 pl-md-3 pr-md-3 '
+//                         : sectionproperties.description_marginLeft != 0
+//                         ? langdetect == 'en'
+//                             ? ' col-lg-12 d-flex align-items-center justify-content-center mb-md-0 pl-md-3 '
+//                             : ' col-lg-12 d-flex align-items-center justify-content-center mb-md-0 pr-md-3 '
+//                         : sectionproperties.description_marginRight != 0
+//                         ? langdetect == 'en'
+//                             ? ' col-lg-12 d-flex align-items-center justify-content-center mb-md-0 pr-md-3 '
+//                             : ' col-lg-12 d-flex align-items-center justify-content-center mb-md-0 pl-md-3 '
+//                         : ' col-lg-12 d-flex align-items-center justify-content-center mb-md-0 '
+//                 }
+//                 style={{
+//                     marginBottom: sectionproperties.descriptionMarginBottom + 'px',
+//                     paddingRight: langdetect == 'en' ? sectionproperties.description_marginRight + 'px' : sectionproperties.description_marginLeft + 'px',
+//                     paddingLeft: langdetect == 'en' ? sectionproperties.description_marginLeft + 'px' : sectionproperties.description_marginRight + 'px',
+//                     justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+//                 }}
+//             >
+//                 <p
+//                     class={
+//                         sectionproperties.descFontFamily == 'Pacifico'
+//                             ? ' PacificoFont m-0 p-0 wordbreak '
+//                             : sectionproperties.descFontFamily == 'Playfair'
+//                             ? ' PlayfairFont m-0 p-0 wordbreak '
+//                             : sectionproperties.descFontFamily == 'Great Vibes'
+//                             ? ' GreatvibesFont m-0 p-0 wordbreak '
+//                             : sectionproperties.descFontFamily == 'Quicksand'
+//                             ? ' QuicksandFont m-0 p-0 wordbreak'
+//                             : ' m-0 p-0 wordbreak'
+//                     }
+//                     style={{
+//                         textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+//                         color: sectionproperties.prodCatColor,
+//                         fontWeight: sectionproperties.prodCatFontWeight,
+//                     }}
+//                 >
+//                     {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+//                 </p>
+//             </div>
+//         );
+//     };
+//     const SectionContent = () => {
+//         return (
+//             <div
+//                 class={
+//                     sectionproperties.width == 100
+//                         ? ' row ml-0 mr-0 d-flex justify-content-between w-md-100 align-items-center '
+//                         : ' row ml-0 mr-0 d-flex justify-content-between w-md-95 align-items-center '
+//                 }
+//                 style={{
+//                     background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+
+//                     borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
+//                     borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px',
+//                     borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
+//                     borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
+//                     position: 'relative',
+//                     border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
+//                     width: sectionproperties.width + 'vw',
+//                 }}
+//             >
+//                 {sectionproperties.hideshowcardtransition != 'Show' && (
+//                     <>
+//                         {maincontainerarrayofobjs != undefined && maincontainerarrayofobjs?.length != 0 && (
+//                             <div class={section_styles.imgcontainer}>
+//                                 <Imagekitimagecomp
+//                                     urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+//                                     publicKey={ikimagecredcontext?.ikimagepublickey}
+//                                     path={maincontainerarrayofobjs[0]?.back_bgimage}
+//                                     style={{
+//                                         height: '100%',
+//                                         width: '100%',
+//                                         objectFit: 'cover',
+//                                         margin: 0,
+//                                         padding: 0,
+//                                         position: 'absolute',
+//                                         top: 0,
+//                                         bottom: 0,
+//                                         right: 0,
+//                                         left: 0,
+//                                     }}
+//                                 />
+//                             </div>
+//                         )}
+//                     </>
+//                 )}
+//                 <div
+//                     class={
+//                         sectionproperties.paddingLeft != 0 && sectionproperties.paddingRight != 0
+//                             ? 'pl-md-3 pr-md-3 w-100 d-flex justify-content-start'
+//                             : sectionproperties.paddingLeft != 0
+//                             ? langdetect == 'en'
+//                                 ? 'pl-md-3 w-100 d-flex justify-content-start'
+//                                 : 'w-100 d-flex justify-content-start pr-md-3'
+//                             : sectionproperties.paddingRight != 0
+//                             ? langdetect == 'en'
+//                                 ? 'pr-md-3 w-100 d-flex justify-content-start'
+//                                 : 'w-100 d-flex justify-content-start pl-md-3'
+//                             : 'w-100 d-flex justify-content-start'
+//                     }
+//                     style={{
+//                         paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+//                         paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+//                         paddingTop: sectionproperties.paddingTop + 'px',
+//                         paddingBottom: sectionproperties.paddingBottom + 'px',
+//                         zIndex: 100,
+//                     }}
+//                 >
+//                     <div class="row m-0 w-100 mb-auto">
+//                         {sectionproperties.sectiontitleshow == 'Show' && (
+//                             <div class="col-lg-12 p-0">
+//                                 <div
+//                                     class={
+//                                         sectionproperties.sectionTitleMarginLeft != 0 && sectionproperties.sectionTitleMarginRight != 0
+//                                             ? `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pl-md-3 pr-md-3'
+//                                             : sectionproperties.sectionTitleMarginLeft != 0
+//                                             ? langdetect == 'en'
+//                                                 ? `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pl-md-3 '
+//                                                 : `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pr-md-3 '
+//                                             : sectionproperties.sectionTitleMarginRight != 0
+//                                             ? langdetect == 'en'
+//                                                 ? `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pr-md-3 '
+//                                                 : `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pl-md-3 '
+//                                             : `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center '
+//                                     }
+//                                     style={{
+//                                         justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
+//                                         marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+//                                         paddingLeft: langdetect == 'en' ? sectionproperties.sectionTitleMarginLeft + 'px' : sectionproperties.sectionTitleMarginRight + 'px',
+//                                         paddingRight: langdetect == 'en' ? sectionproperties.sectionTitleMarginRight + 'px' : sectionproperties.sectionTitleMarginLeft + 'px',
+//                                     }}
+//                                 >
+//                                     <div
+//                                         class="w-100 d-flex d-md-none"
+//                                         style={{
+//                                             fontSize: sectionproperties.sectionTitleFontSize + 'px',
+//                                             justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
+//                                         }}
+//                                     >
+//                                         {SectionTitle()}
+//                                     </div>
+//                                     <div
+//                                         class="w-100 d-none d-md-flex"
+//                                         style={{
+//                                             fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
+//                                             justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
+//                                         }}
+//                                     >
+//                                         {SectionTitle()}
+//                                     </div>
+//                                 </div>
+//                             </div>
+//                         )}
+//                         {sectionproperties.prodCatShow == 'Show' && (
+//                             <div
+//                                 class="row m-0 w-100 d-flex d-md-none"
+//                                 style={{
+//                                     fontSize: sectionproperties.prodCatFontSize + 'px',
+//                                 }}
+//                             >
+//                                 {Description()}
+//                             </div>
+//                         )}
+//                         {sectionproperties.prodCatShow == 'Show' && (
+//                             <div
+//                                 class="row m-0 w-100 d-none d-md-flex"
+//                                 style={{
+//                                     fontSize: sectionproperties.prodCatFontSizeResp + 'px',
+//                                 }}
+//                             >
+//                                 {Description()}
+//                             </div>
+//                         )}
+
+//                         {sectionproperties.generalbtn_show == 'Show' && (
+//                             <div class="col-lg-12 p-0">
+//                                 <button class={`${section_styles.btn}`}>{langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}</button>
+//                             </div>
+//                         )}
+//                     </div>
+//                 </div>
+//             </div>
+//         );
+//     };
+//     return (
+//         <div class="w-100 allcentered">
+//             <div
+//                 class="row w-100 ml-0 mr-0 d-flex d-md-none justify-content-center align-items-center"
+//                 style={{
+//                     marginTop: sectionproperties.marginTop + 'px',
+//                     marginBottom: sectionproperties.marginBottom + 'px',
+//                     backgroundImage:
+//                         sectionproperties.hideshowcardtransition == 'Show'
+//                             ? maincontainerarrayofobjs.length != 0
+//                                 ? 'url(' + serverbaselink + maincontainerarrayofobjs[0]?.back_bgimage + ')'
+//                                 : ''
+//                             : '',
+//                     backgroundSize: 'cover',
+//                     backgroundPosition: 'center',
+//                     backgroundAttachment: 'fixed',
+//                     backgroundRepeat: 'no-repeat',
+//                 }}
+//             >
+//                 {SectionContent()}
+//             </div>
+//             <div
+//                 class="row w-100 ml-0 mr-0 d-none d-md-flex justify-content-center align-items-center"
+//                 style={{
+//                     marginTop: sectionproperties.marginTopResp + 'px',
+//                     marginBottom: sectionproperties.marginBottom + 'px',
+//                     backgroundImage:
+//                         sectionproperties.hideshowcardtransition == 'Show'
+//                             ? maincontainerarrayofobjs.length != 0
+//                                 ? 'url(' + serverbaselink + maincontainerarrayofobjs[0]?.back_bgimage + ')'
+//                                 : ''
+//                             : '',
+//                     backgroundSize: 'cover',
+//                     backgroundPosition: 'center',
+//                     backgroundAttachment: 'fixed',
+//                     // backgroundRepeat: 'no-repeat',
+//                 }}
+//             >
+//                 {SectionContent()}
+//             </div>
+//         </div>
+//     );
+// };
+// export default Freetextsection;
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import generalstyles from '../../../../styles/general/general.module.css';
+import sectionstyles from '../../../../styles/sections/Freetext.module.css';
+
+import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
+import { serverbaselink } from '../../../../../Env.js';
+const Freetextsection = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+    useEffect(() => {
+        var secpropobj = {};
+        StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+            if (sectionitem.sectionid == props.sectionidprops) {
+                sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+                    secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+                });
+            }
+        });
+        setsectionproperties({ ...secpropobj });
+    }, [StatePagePropertiesContext]);
+    const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
+    useEffect(() => {
+        if (sectionproperties.length != 0 && sectionproperties.maincontainerarrayofobjs != undefined) {
+            var maincontainerarrayofobjsparsed = JSON.parse(sectionproperties.maincontainerarrayofobjs);
+            if (Array.isArray(maincontainerarrayofobjsparsed)) {
+                setmaincontainerarrayofobjs([...maincontainerarrayofobjsparsed]);
+            }
+        }
+    }, [sectionproperties]);
+    const section_styles = {
+        sectiontitlespan: css({
+            ':after': {
+                height: '5px',
+                width: sectionproperties.sectitle_lineafterwidth + '%',
+                backgroundColor: sectionproperties.linebgcolor,
+            },
+        }),
+        line_left: css({
+            height: '1px',
+            position: 'relative',
+            flex: '1 1 auto',
+            minWidth: '10%',
+            background: sectionproperties.linebgcolor,
+        }),
+        line_right: css({
+            height: '1px',
+            position: 'relative',
+            flex: '1 1 auto',
+            minWidth: '10%',
+            background: sectionproperties.linebgcolor,
+        }),
+        btn: css({
+            width: sectionproperties.generalbtn_width + 'px',
+            height: sectionproperties.generalbtn_height + 'px',
+            backgroundColor: sectionproperties.generalbtn_bgColor,
+            color: sectionproperties.generalbtn_textColor,
+            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+            border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            marginTop: sectionproperties.generalbtn_marginTop + 'px',
+            marginBottom: sectionproperties.generalbtn_marginBottom + 'px',
+            transition: '.3s',
+            cursor: 'pointer',
+            ':hover': {
+                backgroundColor: sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+            },
+        }),
+        imgcontainer: css({
+            ':before': {
+                width: '100%',
+                height: '100%',
+                background: 'rgba(0,0,0,' + sectionproperties.cardimg_opacity + ')',
+                zIndex: 1,
+                position: 'absolute',
+                content: 's',
+                fontSize: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            },
+        }),
+    };
+    const SectionTitle = () => {
+        return (
+            <div
+                class="d-flex align-items-center flex-row"
+                style={{
+                    position: 'relative',
+                    justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
+                    width: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '100%' : '',
+                }}
+            >
+                {sectionproperties.sectiontitlestyle == 'Line Before Text' && (
+                    <span
+                        class={section_styles.line_left}
+                        style={{
+                            marginLeft: langdetect == 'en' ? 0 : sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+                            marginRight: langdetect == 'en' ? (sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0) : 0,
+                        }}
+                    ></span>
+                )}
+                <p
+                    class={
+                        sectionproperties.sectiontitlefontfamily == 'Pacifico'
+                            ? `${section_styles.sectiontitlespan}` + ' PacificoFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                            : sectionproperties.sectiontitlefontfamily == 'Playfair'
+                            ? `${section_styles.sectiontitlespan}` + ' PlayfairFont mb-auto mb-0 pb-0  wordbreak d-flex align-items-center justify-content-start '
+                            : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
+                            ? `${section_styles.sectiontitlespan}` + ' GreatvibesFont mb-auto mb-0 pb-0  wordbreak d-flex align-items-center justify-content-start '
+                            : sectionproperties.sectiontitlefontfamily == 'Quicksand'
+                            ? ' QuicksandFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                            : sectionproperties.sectiontitlefontfamily == 'Satisfy'
+                            ? `${section_styles.sectiontitlespan}` + ' SatisfyFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                            : `${section_styles.sectiontitlespan}` + '  mb-auto mb-0 pb-0 wordbreak d-flex align-items-center justify-content-start '
+                    }
+                    style={{
+                        color: sectionproperties.sectionTitleColor,
+                        textTransform: sectionproperties.sectionTitleTextTransform,
+                        fontWeight: sectionproperties.sectionTitleFontWeight,
+                        padding: sectionproperties.sectiontitlefontfamily == 'Great Vibes' ? 7 : 0,
+                        textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                    }}
+                >
+                    {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                </p>
+                {sectionproperties.sectiontitlestyle == 'Line Before Text' && (
+                    <span
+                        class={section_styles.line_right}
+                        style={{
+                            marginRight: langdetect == 'en' ? 0 : sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+                            marginLeft: langdetect == 'en' ? (sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0) : 0,
+                        }}
+                    ></span>
+                )}
+            </div>
+        );
+    };
+    const Description = () => {
+        return (
+            <div
+                class={
+                    sectionproperties.description_marginLeft != 0 && sectionproperties.description_marginRight != 0
+                        ? ' col-lg-12 d-flex align-items-center mb-md-0 pl-md-3 pr-md-3 '
+                        : sectionproperties.description_marginLeft != 0
+                        ? langdetect == 'en'
+                            ? ' col-lg-12 d-flex align-items-center mb-md-0 pl-md-3 '
+                            : ' col-lg-12 d-flex align-items-center mb-md-0 pr-md-3 '
+                        : sectionproperties.description_marginRight != 0
+                        ? langdetect == 'en'
+                            ? ' col-lg-12 d-flex align-items-center mb-md-0 pr-md-3 '
+                            : ' col-lg-12 d-flex align-items-center mb-md-0 pl-md-3 '
+                        : ' col-lg-12 d-flex align-items-center mb-md-0 '
+                }
+                style={{
+                    marginBottom: sectionproperties.descriptionMarginBottom + 'px',
+                    paddingRight: langdetect == 'en' ? sectionproperties.description_marginRight + 'px' : sectionproperties.description_marginLeft + 'px',
+                    paddingLeft: langdetect == 'en' ? sectionproperties.description_marginLeft + 'px' : sectionproperties.description_marginRight + 'px',
+                    justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+                }}
+            >
+                <p
+                    class={
+                        sectionproperties.descFontFamily == 'Pacifico'
+                            ? ' PacificoFont m-0 p-0 wordbreak '
+                            : sectionproperties.descFontFamily == 'Playfair'
+                            ? ' PlayfairFont m-0 p-0 wordbreak '
+                            : sectionproperties.descFontFamily == 'Great Vibes'
+                            ? ' GreatvibesFont m-0 p-0 wordbreak '
+                            : sectionproperties.descFontFamily == 'Quicksand'
+                            ? ' QuicksandFont m-0 p-0 wordbreak'
+                            : ' m-0 p-0 wordbreak'
+                    }
+                    style={{
+                        textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+                        color: sectionproperties.prodCatColor,
+                        fontWeight: sectionproperties.prodCatFontWeight,
+                    }}
+                >
+                    {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+                </p>
+            </div>
+        );
+    };
+    const SectionContent = (type) => {
+        return (
+            <div
+                class={
+                    sectionproperties.width == 100
+                        ? ' row ml-0 mr-0 d-flex justify-content-between w-md-100 align-items-center '
+                        : ' row ml-0 mr-0 d-flex justify-content-between w-md-95 align-items-center '
+                }
+                style={{
+                    background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+                    borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
+                    borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px',
+                    borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
+                    borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
+                    position: 'relative',
+                    border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
+                    width: sectionproperties.width + 'vw',
+                }}
+            >
+                {sectionproperties.hideshowcardtransition != 'Show' && (
+                    <>
+                        {maincontainerarrayofobjs != undefined && maincontainerarrayofobjs?.length != 0 && (
+                            <div class={section_styles.imgcontainer}>
+                                <Imagekitimagecomp
+                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                    path={maincontainerarrayofobjs[0]?.back_bgimage}
+                                    style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        objectFit: 'cover',
+                                        margin: 0,
+                                        padding: 0,
+                                        position: 'absolute',
+                                        top: 0,
+                                        bottom: 0,
+                                        right: 0,
+                                        left: 0,
+                                    }}
+                                />
+                            </div>
+                        )}
+                    </>
+                )}
+                <div
+                    class={
+                        sectionproperties.paddingLeft != 0 && sectionproperties.paddingRight != 0
+                            ? 'pl-md-3 pr-md-3 w-100 d-flex justify-content-start'
+                            : sectionproperties.paddingLeft != 0
+                            ? langdetect == 'en'
+                                ? 'pl-md-3 w-100 d-flex justify-content-start'
+                                : 'w-100 d-flex justify-content-start pr-md-3'
+                            : sectionproperties.paddingRight != 0
+                            ? langdetect == 'en'
+                                ? 'pr-md-3 w-100 d-flex justify-content-start'
+                                : 'w-100 d-flex justify-content-start pl-md-3'
+                            : 'w-100 d-flex justify-content-start'
+                    }
+                    style={{
+                        paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+                        paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+                        paddingTop: type == 'responsive' ? '15px' : sectionproperties.paddingTop + 'px',
+                        paddingBottom: type == 'responsive' ? '15px' : sectionproperties.paddingBottom + 'px',
+                        zIndex: 100,
+                        height: sectionproperties.hideshowcardtransition == 'Show' ? (type == 'responsive' ? sectionproperties.height_responsive + 'px' : '') : '',
+                    }}
+                >
+                    <div class="row m-0 w-100 mb-auto">
+                        {sectionproperties.sectiontitleshow == 'Show' && (
+                            <div class="col-lg-12 p-0">
+                                <div
+                                    class={
+                                        sectionproperties.sectionTitleMarginLeft != 0 && sectionproperties.sectionTitleMarginRight != 0
+                                            ? `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pl-md-3 pr-md-3'
+                                            : sectionproperties.sectionTitleMarginLeft != 0
+                                            ? langdetect == 'en'
+                                                ? `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pl-md-3 '
+                                                : `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pr-md-3 '
+                                            : sectionproperties.sectionTitleMarginRight != 0
+                                            ? langdetect == 'en'
+                                                ? `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pr-md-3 '
+                                                : `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center pl-md-3 '
+                                            : `${generalstyles.sectiontitlecont}` + ' w-100 d-flex align-items-center '
+                                    }
+                                    style={{
+                                        justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
+                                        marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                                        paddingLeft: langdetect == 'en' ? sectionproperties.sectionTitleMarginLeft + 'px' : sectionproperties.sectionTitleMarginRight + 'px',
+                                        paddingRight: langdetect == 'en' ? sectionproperties.sectionTitleMarginRight + 'px' : sectionproperties.sectionTitleMarginLeft + 'px',
+                                    }}
+                                >
+                                    <div
+                                        class="w-100 d-flex d-md-none"
+                                        style={{
+                                            fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                            justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
+                                        }}
+                                    >
+                                        {SectionTitle()}
+                                    </div>
+                                    <div
+                                        class="w-100 d-none d-md-flex"
+                                        style={{
+                                            fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
+                                            justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
+                                        }}
+                                    >
+                                        {SectionTitle()}
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                        {sectionproperties.prodCatShow == 'Show' && (
+                            <div
+                                class="row m-0 w-100 d-flex d-md-none"
+                                style={{
+                                    fontSize: sectionproperties.prodCatFontSize + 'px',
+                                }}
+                            >
+                                {Description()}
+                            </div>
+                        )}
+                        {sectionproperties.prodCatShow == 'Show' && (
+                            <div
+                                class="row m-0 w-100 d-none d-md-flex"
+                                style={{
+                                    fontSize: sectionproperties.prodCatFontSizeResp + 'px',
+                                }}
+                            >
+                                {Description()}
+                            </div>
+                        )}
+
+                        {sectionproperties.generalbtn_show == 'Show' && (
+                            <div class="col-lg-12 p-0">
+                                <button class={`${section_styles.btn}`}>{langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}</button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div
+            class="w-100 allcentered"
+            style={{
+                background: sectionproperties.outerbgcolor,
+            }}
+        >
+            <div
+                class={sectionstyles.background + ' row w-100 ml-0 mr-0 d-flex d-md-none justify-content-center align-items-center '}
+                style={{
+                    marginTop: sectionproperties.marginTop + 'px',
+                    marginBottom: sectionproperties.marginBottom + 'px',
+                    background:
+                        sectionproperties.hideshowcardtransition == 'Show'
+                            ? maincontainerarrayofobjs.length != 0
+                                ? 'url(' + serverbaselink + maincontainerarrayofobjs[0]?.back_bgimage + ')'
+                                : ''
+                            : '',
+                }}
+            >
+                {SectionContent('normal')}
+            </div>
+            <div
+                class={sectionstyles.background + ' row w-100 ml-0 mr-0 d-none d-md-flex justify-content-center align-items-center '}
+                style={{
+                    marginTop: sectionproperties.marginTopResp + 'px',
+                    marginBottom: sectionproperties.marginBottom + 'px',
+                    background:
+                        sectionproperties.hideshowcardtransition == 'Show'
+                            ? maincontainerarrayofobjs.length != 0
+                                ? 'url(' + serverbaselink + maincontainerarrayofobjs[0]?.back_bgimage + ')'
+                                : ''
+                            : '',
+                }}
+            >
+                {SectionContent('responsive')}
+            </div>
+        </div>
+    );
+};
+export default Freetextsection;