tabexseriescomponents 0.0.697 → 0.0.698

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

@@ -1,867 +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';
-import { CountdownCircleTimer } from 'react-countdown-circle-timer';
-// const minuteSeconds = 60;
-// const hourSeconds = 3600;
-// const daySeconds = 86400;
-
-// const timerProps = {
-//     isPlaying: true,
-//     size: 120,
-//     strokeWidth: 6,
-// };
-
-const formatTime = (time) => {
-    const days = Math.floor(time / (60 * 60 * 24));
-    const hours = Math.floor((time % (60 * 60 * 24)) / (60 * 60));
-    const minutes = Math.floor((time % (60 * 60)) / 60);
-    const seconds = time % 60;
-
-    return { days, hours, minutes, seconds };
-};
-// const renderTime = (dimension, time) => {
-//     return (
-// <div className="time-wrapper">
-//     <div className="time">{time}</div>
-//     <div>{dimension}</div>
-// </div>
-//     );
-// };
-
-// const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
-// const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
-// const getTimeHours = (time) => ((time % daySeconds) / hourSeconds) | 0;
-// const getTimeDays = (time) => (time / daySeconds) | 0;
-
-const ServicesectionCenteredcards = (props) => {
-    const targetStartDate = new Date('2024-12-16T12:00:00');
-    const [remainingTimeInSeconds, setRemainingTimeInSeconds] = useState(0);
-
-    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;
-    const stratTime = Date.now() / 1000; // use UNIX timestamp in seconds
-    const endTime = stratTime + 243248; // use UNIX timestamp in seconds
-
-    // const remainingTime = endTime - stratTime;
-    // // const days = Math.ceil(remainingTime / daySeconds);
-    // const daysDuration = days * daySeconds;
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const currentTime = new Date();
-            const differenceInSeconds = Math.max(Math.floor((targetStartDate - currentTime) / 1000), 0);
-            setRemainingTimeInSeconds(differenceInSeconds);
-        }, 1000); // Update every second
-
-        return () => clearInterval(interval); // Cleanup interval on unmount
-    }, [targetStartDate]);
-
-    // Format the remaining time into days, hours, minutes, and seconds
-    const { days, hours, minutes, seconds } = formatTime(remainingTimeInSeconds);
-    const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
-
-    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]);
-    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({
-            background: sectionproperties.reservation_bgcolor,
-
-            ':hover .imageContainer': {
-                transition: '.3s',
-                backgroundColor: sectionproperties.activedotcolor,
-            },
-            ':hover .text1Styles': {
-                transition: '.3s',
-                color: sectionproperties.text1secondarycolor,
-            },
-            ':hover': {
-                background: sectionproperties.innersectionbgcolorhover,
-            },
-        }),
-        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-column 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>} */}
-                                    {sectionproperties.sectiontitlestyle == 'Line Under Text' && (
-                                        <span
-                                            style={{
-                                                width: '50%',
-                                                background: sectionproperties.linebgcolor,
-                                                height: 3,
-                                                borderRadius: 10,
-                                                marginTop: 5,
-                                            }}
-                                        ></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>
-                    )}
-                    {/* showimagewhenflip show */}
-                    {/* innersectionbgcolorhover */}
-                    {sectionproperties.showcountdown == 'Yes' && (
-                        <div class="row m-0 w-100 allcentered">
-                            {/* <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#4e9af1" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
-                                {() => (
-                                    <div style={{ fontSize: '20px', textAlign: 'center' }}>
-                                        <div>{days}d</div>
-                                        <div>{hours}h</div>
-                                        <div>{minutes}m</div>
-                                        <div>{seconds}s</div>
-                                    </div>
-                                )}
-                            </CountdownCircleTimer> */}
-                            <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
-                                    {({ elapsedTime, color }) => (
-                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {/* {renderTime('يوم', '18')} */}
-                                            <div className="time-wrapper allcentered flex-column">
-                                                <div className="time">{days}</div>
-                                                <div>يوم</div>
-                                            </div>
-                                        </span>
-                                    )}
-                                </CountdownCircleTimer>
-                            </div>
-                            <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
-                                    {({ elapsedTime, color }) => (
-                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {/* {renderTime('يوم', '18')} */}
-                                            <div className="time-wrapper allcentered flex-column">
-                                                <div className="time">{hours}</div>
-                                                <div>ساعة</div>
-                                            </div>
-                                        </span>
-                                    )}
-                                </CountdownCircleTimer>
-                            </div>
-                            <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
-                                    {({ elapsedTime, color }) => (
-                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {/* {renderTime('يوم', '18')} */}
-                                            <div className="time-wrapper allcentered flex-column">
-                                                <div className="time">{minutes}</div>
-                                                <div>دقيقة</div>
-                                            </div>
-                                        </span>
-                                    )}
-                                </CountdownCircleTimer>
-                            </div>
-                            <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
-                                    {({ elapsedTime, color }) => (
-                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {/* {renderTime('يوم', '18')} */}
-                                            <div className="time-wrapper allcentered flex-column">
-                                                <div className="time">{seconds}</div>
-                                                <div>ثانية</div>
-                                            </div>
-                                        </span>
-                                    )}
-                                </CountdownCircleTimer>
-                            </div>
-                            {/* <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer
-                                    {...timerProps}
-                                    colors="#013c48"
-                                    duration={daySeconds}
-                                    initialRemainingTime={remainingTime % daySeconds}
-                                    onComplete={(totalElapsedTime) => ({
-                                        shouldRepeat: remainingTime - totalElapsedTime > hourSeconds,
-                                    })}
-                                >
-                                    {({ elapsedTime, color }) => (
-                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {renderTime('ساعة', getTimeHours(daySeconds - elapsedTime))}
-                                        </span>
-                                    )}
-                                </CountdownCircleTimer>
-                            </div>
-
-                            <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer
-                                    {...timerProps}
-                                    colors="#013c48"
-                                    duration={hourSeconds}
-                                    initialRemainingTime={remainingTime % hourSeconds}
-                                    onComplete={(totalElapsedTime) => ({
-                                        shouldRepeat: remainingTime - totalElapsedTime > minuteSeconds,
-                                    })}
-                                >
-                                    {({ elapsedTime, color }) => (
-                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {renderTime('دقيقة', getTimeMinutes(hourSeconds - elapsedTime))}
-                                        </span>
-                                    )}
-                                </CountdownCircleTimer>
-                            </div>
-
-                            <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer
-                                    {...timerProps}
-                                    colors="#013c48"
-                                    duration={minuteSeconds}
-                                    initialRemainingTime={remainingTime % minuteSeconds}
-                                    onComplete={(totalElapsedTime) => ({
-                                        shouldRepeat: remainingTime - totalElapsedTime > 0,
-                                    })}
-                                >
-                                    {({ elapsedTime, color }) => (
-                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {renderTime('ثانية', getTimeSeconds(elapsedTime))}
-                                        </span>
-                                    )}
-                                </CountdownCircleTimer>
-                            </div> */}
-                        </div>
-                    )}
-                    {sectionproperties.flippingcards == 'Yes' && sectionproperties.showcountdown != 'Yes' && (
-                        <div class="row m-0 w-100 d-flex justify-content-center">
-                            {cardsarray.map((cardinfoitem, cardinfoindex) => {
-                                return (
-                                    <div
-                                        class={'flip-card  d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 '}
-                                        style={{
-                                            zIndex: 2,
-
-                                            paddingLeft: sectionproperties.marginhorizontal + 'px',
-                                            paddingRight: sectionproperties.marginhorizontal + 'px',
-                                        }}
-                                    >
-                                        <div
-                                            class="flip-card-inner"
-                                            style={{
-                                                background: sectionproperties.reservation_bgcolor,
-                                                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
-                                                        : '',
-                                            }}
-                                        >
-                                            <div class="flip-card-front">
-                                                <div class="row m-0 w-100">
-                                                    <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={{
-                                                                background: 'transparent',
-                                                            }}
-                                                        >
-                                                            <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>
-                                                    <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>
-
-                                                    {/*
-                                                    {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}`}>
-                                                                {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
-                                                            </button>
-                                                        </div>
-                                                    )}
-                                                  */}
-                                                </div>
-                                            </div>
-                                            <div class="flip-card-back allcentered">
-                                                <div class="row m-0 w-100 allcentered">
-                                                    {sectionproperties.showimagewhenflip == 'Show' && (
-                                                        <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={' d-flex align-items-center  '}
-                                                                style={{
-                                                                    width: '30%',
-                                                                    height: '30%',
-                                                                    justifyContent: sectionproperties.iconcontainerheight == '0' ? 'start' : 'center',
-                                                                }}
-                                                            >
-                                                                <Imagekitimagecomp
-                                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                                    path={cardsarray.length != 0 ? cardinfoitem.cardobj_img : ''}
-                                                                    style={{
-                                                                        maxHeight: '100%',
-                                                                        maxWidth: '100%',
-                                                                        objectFit: 'contain',
-                                                                    }}
-                                                                />
-                                                            </div>
-                                                        </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',
-                                                                color: ' #FFECB5',
-                                                                fontSize: 14,
-                                                            }}
-                                                        >
-                                                            {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>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    )}
-                    {sectionproperties.flippingcards == 'No' && sectionproperties.showcountdown != 'Yes' && (
-                        <div class="row m-0 w-100">
-                            {cardsarray.map((cardinfoitem, cardinfoindex) => {
-                                return (
-                                    <div
-                                        class={
-                                            'col-lg-6 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-4 omancard 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',
-                                                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
-                                                        : '',
-                                                // 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
-                                                //             : ''
-                                                //         : '',
-                                                borderRight:
-                                                    sectionproperties.innersectionbordertype != 'All' && cardinfoindex != cardsarray.length - 1
-                                                        ? langdetect == 'en'
-                                                            ? 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">
-                                                    <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>
-        </div>
-    );
-};
-export default ServicesectionCenteredcards;