import { getImageUrl } from 'helpers';
import { useRef } from 'react';
import { useSelector } from 'react-redux';
import {
    selectAboutUsVision,
} from 'store/slices/AboutSlice';
import { useAnimation } from 'hooks/useAnimation';
import useMediaQuery from 'hooks/useMediaQuery';

const OurVision = ({ isLoading }) => {
    const vision = useSelector(selectAboutUsVision);
    const { card } = vision;
    const isMobile = useMediaQuery('max-width: 640px')

    const container = useRef();
    useAnimation({
        items: isMobile ? ['.about-vision-item'] : ['.about-vision'],
        container,
        dependencies: [isLoading],
    })



    return (
        <section ref={container} className="inner-container ">
            <div className='about-vision'>
                {card?.map((item, index) => (
                    <div className={`about-vision-items about-vision-items-${index}`} key={index}>
                        <div className='about-vision-item about-vision-item__content'>
                            <div className="body1">{item.tag}</div>
                            <div className="description1">{item.text}</div>
                            <div className="about-vision-item__content-dot top-left"></div>
                            <div className="about-vision-item__content-dot top-right"></div>
                            <div className="about-vision-item__content-dot bottom-left"></div>
                            <div className="about-vision-item__content-dot bottom-right"></div>
                        </div>

                        <div className={`about-vision-item about-vision-item__image about-vision-item__image-${index}`}>
                            <img src={getImageUrl(item.image)} alt="" />
                        </div>
                    </div>
                ))}
            </div>
        </section>
    );
}

export default OurVision;

• [F] index.jsx
  Delete