tabexseriescomponents 0.0.698 → 0.0.699

package/srcoriginal/TabexComponents/Sections/Slideshow/ServicesectionCenteredcards/ServicesectionCenteredcards.jsx

@@ -1,512 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { css } from 'glamor';
-import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
-import generalstyles from '../../../../styles/general/general.module.css';
-import ReactStars from 'react-rating-stars-component';
-import { GoStar } from '@react-icons/all-files/go/GoStar';
-import { IoIosStar } from '@react-icons/all-files/io/IoIosStar';
-import { fontSize, width } from '@mui/system';
-
-const ServicesectionCenteredcards = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const [cardsarray, setcardsarray] = useState([]);
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const ikimagecredcontext = props.actions.ikimagecredcontext;
-    const routingcountext = props.actions.routingcountext;
-    const authdetailsContext = props.actions.authdetailsContext;
-
-    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]);
-    useEffect(() => {
-        if (sectionproperties.length != 0) {
-            if (sectionproperties.card_arrayofobjects != null) {
-                var bgsection_imagearrayofobjsparsed = JSON.parse(sectionproperties.card_arrayofobjects);
-                if (Array.isArray(bgsection_imagearrayofobjsparsed)) {
-                    setcardsarray([...bgsection_imagearrayofobjsparsed]);
-                }
-            }
-        }
-    }, [sectionproperties]);
-    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 sectionStyles = {
-        containerrrr: css({
-            marginTop: sectionproperties.marginTop + 'px',
-            marginBottom: sectionproperties.marginBottom + 'px',
-            paddingLeft: sectionproperties.paddingLeft + 'px',
-            paddingRight: sectionproperties.paddingRight + 'px',
-            paddingTop: sectionproperties.paddingTop + 'px',
-            paddingBottom: sectionproperties.paddingBottom + 'px',
-            background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
-            borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-            borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-            borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-            border: sectionproperties.borderType == 'All' ? sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor : '',
-            borderTop: sectionproperties.borderType == 'Vertical' ? sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor : '',
-            borderBottom: sectionproperties.borderType == 'Vertical' ? sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor : '',
-            borderLeftWidth: 0,
-            borderRightWidth: 0,
-            '@media (max-width: 800px)': {
-                marginTop: sectionproperties.marginTopResp + 'px',
-            },
-        }),
-        imgcontainer: css({
-            ':before': {
-                width: '100%',
-                height: '100%',
-                background: 'rgba(0,0,0,' + sectionproperties.cardbg_opacity + ')',
-
-                zIndex: 1,
-                position: 'absolute',
-                content: 's',
-                fontSize: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            },
-        }),
-        sectiontitlespan: css({
-            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-            color: sectionproperties.sectionTitleColor,
-            fontWeight: sectionproperties.sectionTitleFontWeight,
-            paddingLeft: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
-            paddingRight: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
-            textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-            ':after': {
-                height: '5px',
-                width: sectionproperties.sectitle_lineafterwidth + '%',
-                backgroundColor: sectionproperties.linebgcolor,
-            },
-            '@media (max-width: 800px)': {
-                fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
-            },
-        }),
-        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,
-        }),
-        text1Styles: css({
-            color: sectionproperties.slideshowText1ContentColor,
-            fontSize: sectionproperties.slideshowText1ContentFontSize + 'px',
-            fontWeight: sectionproperties.slideshowText1ContentFontWeight,
-            textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : '',
-            ':hover': {
-                transition: '.3s',
-                color: sectionproperties.text1secondarycolor,
-            },
-        }),
-        imageContainer: css({
-            width: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.image_width + '%' : sectionproperties.image_width + 'px',
-            height: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.image_height + '%' : sectionproperties.image_height + 'px',
-            borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
-            borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-            borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-            background: sectionproperties.image_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.image_bgcolor,
-            justifyContent: sectionproperties.iconcontainerheight == '0' ? 'start' : 'center',
-            ':hover': {
-                transition: '.3s',
-                backgroundColor: sectionproperties.activedotcolor,
-            },
-            '@media (max-width: 800px)': {
-                width: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.innerwidthheightresp + '%' : sectionproperties.innerwidthheightresp + 'px',
-                height: sectionproperties.percentagepixel == 'Percentage' ? sectionproperties.innerwidthheightresp + '%' : sectionproperties.innerwidthheightresp + 'px',
-            },
-        }),
-        cardContainer: css({
-            ':hover .imageContainer': {
-                transition: '.3s',
-                backgroundColor: sectionproperties.activedotcolor,
-            },
-            ':hover .text1Styles': {
-                transition: '.3s',
-                color: sectionproperties.text1secondarycolor,
-            },
-        }),
-        btnstyles: css({
-            width: sectionproperties.generalbtn_width + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            color: sectionproperties.generalbtn_textColor,
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            textDecoration: sectionproperties.textdecoration == 'None' ? 'none' : 'underline',
-            backgroundColor: sectionproperties.generalbtn_bgColor,
-            borderRadius: sectionproperties.generalbtnborderradius,
-            ':hover': {
-                color: sectionproperties.generalbtn_textColoronhover,
-                backgroundColor: sectionproperties.generalbtn_bgColoronhover,
-                transition: '.3s',
-            },
-        }),
-        outercontainer: css({
-            position: 'relative',
-            width: sectionproperties.width + '%',
-            background: sectionproperties.outerbgcolor,
-            '@media (max-width: 800px)': {
-                width: sectionproperties.widthresponsive + '%',
-            },
-        }),
-        descriptioncont: css({
-            color: sectionproperties.prodCatColor,
-            fontWeight: sectionproperties.prodCatFontWeight,
-            textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-            fontSize: sectionproperties.prodCatFontSize + 'px',
-            '@media (max-width: 800px)': {
-                fontSize: sectionproperties.prodCatFontSizeResp + 'px',
-            },
-        }),
-    };
-
-    return (
-        <div
-            class={' row ml-0 mr-0 w-md-100 d-flex  align-items-center w-100 '}
-            style={{
-                background: sectionproperties.outerbgcolor,
-                zIndex: 20,
-                justifyContent: sectionproperties.innersectionposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-            }}
-        >
-            <div class={sectionStyles.outercontainer + ' row ml-0 mr-0 align-items-center '} style={{}}>
-                {sectionproperties.maincontainerarrayofobjs != undefined && sectionproperties.maincontainerarrayofobjs.length != 0 && (
-                    <div class={sectionStyles.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={sectionStyles.containerrrr + ' row ml-0 mr-0 w-100 d-flex justify-content-center pl-md-3 pr-md-3 px-2015-3 '} style={{}}>
-                    {sectionproperties.sectiontitleshow == 'Show' && (
-                        <div class="col-lg-12 allcentered p-0" style={{ zIndex: 1 }}>
-                            <div
-                                class={`${generalstyles.sectiontitlecont}` + ' col-lg-12 allcentered plr-1025-0 pl-md-3 pr-md-3 '}
-                                style={{
-                                    marginTop: sectionproperties.sectionTitleMarginTop + 'px',
-                                    marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
-                                    paddingLeft: langdetect == 'en' ? sectionproperties.sectionTitleMarginLeft + 'px' : sectionproperties.sectionTitleMarginRight + 'px',
-                                    paddingRight: langdetect == 'en' ? sectionproperties.sectionTitleMarginRight + 'px' : sectionproperties.sectionTitleMarginLeft + 'px',
-                                }}
-                            >
-                                <div
-                                    class="d-flex align-items-center flex-row allcentered"
-                                    style={{
-                                        position: 'relative',
-                                        width: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '100%' : '',
-                                    }}
-                                >
-                                    {sectionproperties.sectiontitlestyle == 'Line Before Text' && <span class={sectionStyles.line_left}></span>}
-                                    <p
-                                        class={
-                                            sectionproperties.sectiontitlefontfamily == 'Pacifico'
-                                                ? `${sectionStyles.sectiontitlespan}` + ' PacificoFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                : sectionproperties.sectiontitlefontfamily == 'Playfair'
-                                                ? `${sectionStyles.sectiontitlespan}` + ' PlayfairFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
-                                                ? `${sectionStyles.sectiontitlespan}` + ' GreatvibesFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                : sectionproperties.sectiontitlefontfamily == 'Quicksand'
-                                                ? `${sectionStyles.sectiontitlespan}` + ' QuicksandFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                : sectionproperties.sectiontitlefontfamily == 'Satisfy'
-                                                ? `${sectionStyles.sectiontitlespan}` + ' SatisfyFont mb-auto mb-0 pb-0 wordbreak d-flex align-items-center '
-                                                : `${sectionStyles.sectiontitlespan}` + '  mb-auto mb-0 pb-0 wordbreak d-flex align-items-center  '
-                                        }
-                                        style={{}}
-                                    >
-                                        {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
-                                    </p>
-                                    {sectionproperties.sectiontitlestyle == 'Line Before Text' && <span class={sectionStyles.line_right}></span>}
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    {sectionproperties.prodCatShow == 'Show' && (
-                        <div
-                            class={' col-lg-12 col-md-12 col-sm-12 d-flex align-items-center px-sm-3'}
-                            style={{
-                                justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
-                                marginBottom: sectionproperties.descriptionMarginBottom + 'px',
-                                paddingLeft: langdetect == 'en' ? sectionproperties.description_marginLeft + 'px' : sectionproperties.description_marginRight + 'px',
-                                paddingRight: langdetect == 'en' ? sectionproperties.description_marginRight + 'px' : sectionproperties.description_marginLeft + 'px',
-                            }}
-                        >
-                            <p
-                                class={
-                                    sectionproperties.descFontFamily == 'Pacifico'
-                                        ? sectionStyles.descriptioncont + ' PacificoFont m-0 p-0 wordbreak '
-                                        : sectionproperties.descFontFamily == 'Playfair'
-                                        ? sectionStyles.descriptioncont + ' PlayfairFont m-0 p-0 wordbreak '
-                                        : sectionproperties.descFontFamily == 'Great Vibes'
-                                        ? sectionStyles.descriptioncont + ' GreatvibesFont m-0 p-0 wordbreak '
-                                        : sectionproperties.descFontFamily == 'Quicksand'
-                                        ? sectionStyles.descriptioncont + ' QuicksandFont m-0 p-0 wordbreak'
-                                        : sectionStyles.descriptioncont + ' m-0 p-0 wordbreak'
-                                }
-                                style={{}}
-                            >
-                                {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
-                            </p>
-                        </div>
-                    )}
-
-                    {cardsarray.map((cardinfoitem, cardinfoindex) => {
-                        return (
-                            <div
-                                class={
-                                    sectionproperties.numofcols == '2'
-                                        ? 'col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                          sectionproperties.numberOfColsverticalresp
-                                        : sectionproperties.numofcols == '3'
-                                        ? 'col-lg-4 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                          sectionproperties.numberOfColsverticalresp
-                                        : 'col-lg-3 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 col-sm-' +
-                                          sectionproperties.numberOfColsverticalresp
-                                }
-                                style={{
-                                    zIndex: 2,
-
-                                    paddingLeft: sectionproperties.marginhorizontal + 'px',
-                                    paddingRight: sectionproperties.marginhorizontal + 'px',
-                                }}
-                            >
-                                <div
-                                    class={
-                                        sectionproperties.innersectionbordertype != 'All'
-                                            ? sectionStyles.cardContainer + ' row m-0 w-100 mb-auto border-md-none '
-                                            : sectionStyles.cardContainer + ' row m-0 w-100 mb-auto '
-                                    }
-                                    style={{
-                                        cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                        background: sectionproperties.reservation_bgcolor,
-                                        paddingTop: sectionproperties.reservation_padding_top + 'px',
-                                        paddingBottom: sectionproperties.reservation_padding_bottom + 'px',
-                                        paddingLeft: langdetect == 'en' ? sectionproperties.reservation_padding_left + 'px' : sectionproperties.reservation_padding_right + 'px',
-                                        paddingRight: langdetect == 'en' ? sectionproperties.reservation_padding_right + 'px' : sectionproperties.reservation_padding_left + 'px',
-                                        borderRadius: sectionproperties.reservation_borderradius + 'px',
-                                        border:
-                                            sectionproperties.innersectionbordertype == 'All'
-                                                ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                : cardinfoindex != cardsarray.length - 1
-                                                ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                : '',
-                                        // cardinfoindex != cardsarray.length - 1
-                                        //     ? sectionproperties.innersectionbordertype == 'All'
-                                        //         ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                        //         : ''
-                                        //     : '',
-                                        borderRight:
-                                            cardinfoindex != cardsarray.length - 1
-                                                ? sectionproperties.innersectionbordertype == 'Right'
-                                                    ? langdetect == 'en'
-                                                        ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                        : ''
-                                                    : ''
-                                                : '',
-                                        borderLeft:
-                                            sectionproperties.innersectionbordertype == 'Right'
-                                                ? langdetect == 'ar'
-                                                    ? sectionproperties.innersectionborderWidth + 'px solid ' + sectionproperties.innersectionborderColor
-                                                    : ''
-                                                : '',
-                                        boxShadow: ' 0 0 10px ' + sectionproperties.innerSectionShadowColor,
-                                        height: authdetailsContext?.instinfo?.contactinfo.instid == '66b4a0338cb14' ? '100%' : '',
-                                    }}
-                                    onClick={() => {
-                                        // if (cardinfoitem.iscardclickable == 'Yes') {
-                                        //     window.open(cardinfoitem.btnlink, '_blank');
-                                        // }
-                                        if (cardinfoitem.btntype == 'Web Product Link' || cardinfoitem.btntype == 'App/Web Page') {
-                                            routingcountext(cardinfoitem.btnlink, false, '');
-                                        } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'Same Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                            // window.open(cardinfoitem.btnlink, '_target');
-                                            routingcountext(cardinfoitem.btnlink, false, '');
-                                        } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'New Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                            window.open(cardinfoitem.btnlink, '_blank');
-                                        }
-                                    }}
-                                >
-                                    {sectionproperties.imageposition == 'Top' && (
-                                        <div
-                                            class="col-lg-12 d-flex align-items-center p-0"
-                                            style={{ marginBottom: sectionproperties.image_mb + 'px', justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start' }}
-                                        >
-                                            <div class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '} style={{}}>
-                                                <Imagekitimagecomp
-                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                    path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                    style={{
-                                                        maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                        maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                        objectFit: 'contain',
-                                                    }}
-                                                />
-                                            </div>
-                                        </div>
-                                    )}
-                                    {sectionproperties.showrating == 'Show' && cardinfoitem.ratingnumber != null && (
-                                        <div class="col-lg-12 allcentered p-0 mb-1">
-                                            {/* <p
-                                                class="m-0 p-0"
-                                                style={{
-                                                    color: sectionproperties.slideshowText2ContentColor,
-                                                    fontWeight: 500,
-                                                    fontSize: 14,
-                                                }}
-                                            >
-                                                {cardinfoitem.ratingnumber}{' '}
-                                            </p> */}
-
-                                            <ReactStars
-                                                count={5}
-                                                value={parseFloat(cardinfoitem.ratingnumber)}
-                                                edit={false}
-                                                size={18}
-                                                emptyIcon={
-                                                    <i class="h-100 allcentered">
-                                                        <GoStar style={{ color: '#ccc' }} />
-                                                    </i>
-                                                }
-                                                halfIcon={
-                                                    <i class="h-100 allcentered">
-                                                        <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                    </i>
-                                                }
-                                                filledIcon={
-                                                    <i class="h-100 allcentered">
-                                                        <IoIosStar style={{ color: sectionproperties.generalbtn_textColor }} />
-                                                    </i>
-                                                }
-                                                activeColor={sectionproperties.generalbtn_textColor}
-                                            />
-                                        </div>
-                                    )}
-                                    <div
-                                        class="col-lg-12 d-flex p-0"
-                                        style={{
-                                            marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                        }}
-                                    >
-                                        <p
-                                            class={sectionStyles.text1Styles + ' p-0 m-0 wordbreak wordbreak-noellipsis text1Styles '}
-                                            style={{
-                                                cursor: cardinfoitem.iscardclickable == 'Yes' ? 'pointer' : 'default',
-                                            }}
-                                        >
-                                            {langdetect == 'en' ? cardinfoitem.cardobj_titleen : cardinfoitem.cardobj_titlear}
-                                        </p>
-                                    </div>
-                                    <div
-                                        class="col-lg-12 d-flex p-0"
-                                        style={{
-                                            justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start',
-                                        }}
-                                    >
-                                        {sectionproperties.slideshowtext2_show && (
-                                            <p
-                                                class="m-0 wordbreak"
-                                                style={{
-                                                    color: sectionproperties.slideshowText2ContentColor,
-                                                    fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-                                                    fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-                                                    textAlign: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : '',
-                                                }}
-                                            >
-                                                {langdetect == 'en' ? cardinfoitem.cardobj_descripen : cardinfoitem.cardobj_descripar}
-                                            </p>
-                                        )}
-                                    </div>
-                                    {sectionproperties.imageposition == 'Bottom' && (
-                                        <div
-                                            class="col-lg-12 d-flex align-items-center p-0"
-                                            style={{ marginTop: sectionproperties.image_mb + 'px', justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start' }}
-                                        >
-                                            <div class={sectionStyles.imageContainer + ' d-flex align-items-center imageContainer '} style={{}}>
-                                                <Imagekitimagecomp
-                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                    path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                    style={{
-                                                        maxHeight: sectionproperties.iconcontainerwidth + '%',
-                                                        maxWidth: sectionproperties.iconcontainerwidth + '%',
-                                                        objectFit: 'contain',
-                                                    }}
-                                                />
-                                            </div>
-                                        </div>
-                                    )}
-                                    {
-                                        (sectionproperties.generalbtn_show = 'Show' && cardinfoitem.iscardclickable == 'Yes' && (
-                                            <div class={sectionproperties.justifyContentCenter == 'Centered' ? 'col-lg-12 mt-2 allcentered' : 'col-lg-12 mt-2 text-start p-0'}>
-                                                <button
-                                                    class={`${sectionStyles.btnstyles}`}
-                                                    onClick={() => {
-                                                        if (cardinfoitem.btntype == 'Web Product Link') {
-                                                            routingcountext(cardinfoitem.btnlink, false, '');
-                                                        } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'Same Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                            window.open(cardinfoitem.btnlink, '_target');
-                                                        } else if (cardinfoitem.iscardclickable == 'Yes' && cardinfoitem.clickabletabtype == 'New Tab' && cardinfoitem.btntype != 'Web Product Link') {
-                                                            window.open(cardinfoitem.btnlink, '_blank');
-                                                        } else if (sectionproperties.btntype == 'App/Web Page') {
-                                                            // window.open(sectionproperties.btnlink, '_target');
-                                                            routingcountext(cardinfoitem.btnlink, false, '');
-                                                        }
-                                                    }}
-                                                >
-                                                    {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
-                                                </button>
-                                            </div>
-                                        ))
-                                    }
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-};
-export default ServicesectionCenteredcards;