/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/Home/Locations/index.jsx
import './styles.scss'
import Label from 'components/Label';
import LoactionCountry from './LocationCountry';
import LocationNav from './LocationNav';
import { selectLocations } from 'store/slices/LocationsSlice';
import { useSelector } from 'react-redux';
import { selectHomepageIsLoading } from 'store/slices/HomepageSlice';
import { useRef } from 'react';
import { useAnimation } from 'hooks/useAnimation';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useGSAP } from '@gsap/react';
// import { selectFirstLoading } from 'store/slices/UI-Slice';
import locationBg from 'assets/backgrounds/locations.svg'
import locationBgMob from 'assets/backgrounds/locationsMob.svg'
import useMediaQuery from 'hooks/useMediaQuery';
const Locations = ({ locationsText }) => {
const container = useRef();
const isTablet = useMediaQuery('max-width: 768px')
const locations = useSelector(selectLocations);
const isLoading = useSelector(selectHomepageIsLoading)
useAnimation({
items: ['.home-locationss h2', '.home-locationss .body1', '.home-locations-item', '.home-locations-navitem'],
container,
dependencies: [isLoading],
})
const speedBg = [-250];
gsap.registerPlugin(ScrollTrigger);
useGSAP(
() => {
let targets = gsap.utils.toArray(['.home-locations__bg']);
targets.forEach((item, index) => {
gsap.to(item, {
yPercent: speedBg[index],
ease: 'none',
scrollTrigger: {
trigger: '.home-locations',
scrub: 1,
},
});
});
},
{ dependencies: [], scope: container, revertOnUpdate: true },
);
if (Object.entries(locations).length === 0) return
return (
<section ref={container} className="container home-locations">
<Label text={locationsText.tag} type='outline' />
<h2>{locationsText.title}</h2>
<div className='body1'>{locationsText.description}</div>
<div className='home-locations-container'>
{
locations.slice(0, 11).map((item, index) => (
<LoactionCountry key={index} data={item} />
))
}
<LocationNav buttonText={locationsText.view_all_button_text} buttonLinkText={locationsText.view_all_button_link_text} />
</div>
<img className='home-locations__bg' src={isTablet ? locationBgMob : locationBg} alt="" />
</section>
);
}
export default Locations;