tabexseriescomponents 0.0.706 → 0.0.708

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

@@ -0,0 +1,867 @@
+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;