/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/Features/Hero/index.jsx
import './styles.scss'
import HeroComponent from './heroComponent';
import HeroLayout from 'components/Sections/Hero/HeroLayout';
import { getImageUrl } from 'helpers';
import { selectCurrentFeatureIsLoading } from 'store/slices/FeaturesSlice';
import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import RestAPI from 'components/AnimationIllustrations/RestAPI';
import CountriesIll from 'components/AnimationIllustrations/CountriesIll';
import EthicallySourcedProxiesIllustration from 'components/AnimationIllustrations/EthicallySourcedProxiesIllustration';
import SockIllustration from 'components/AnimationIllustrations/SockIllustration';
import UptimeIllustration from 'components/AnimationIllustrations/UptimeIllustration';
import NetworkIllustration from 'components/AnimationIllustrations/NetworkIllustration';
import BestDashboardIll from 'components/AnimationIllustrations/BestDashboardIll';
import SupportIllustration from 'components/AnimationIllustrations/SupportIllustration';
import { Helmet } from 'react-helmet';
import useMediaQuery from 'hooks/useMediaQuery';
const Hero = ({ data }) => {
const { featuresSlug } = useParams();
const { title, description, button_text, image, hasCrumbs } = data
const heroImage = getImageUrl(image)
const isLoading = useSelector(selectCurrentFeatureIsLoading);
const [illustrationComponent, setIllustrationComponent] = useState(null);
const isMobile = useMediaQuery("max-width: 640px ")
useEffect(() => {
const getIllustrationComponent = () => {
switch (featuresSlug) {
case "rest-api-access":
return <RestAPI isLoading={isLoading} />;
case "195-countries":
return <CountriesIll isLoading={isLoading} />;
case "ethically-sourced-proxies":
return <EthicallySourcedProxiesIllustration isLoading={isLoading} />;
case "http-socks-5-compatibility":
return <SockIllustration isLoading={isLoading} />;
case "99-9-uptime":
return <UptimeIllustration isLoading={isLoading} />;
case "100-gbps-network":
return <NetworkIllustration isLoading={isLoading} />;
case "best-in-class-dashboard":
return <BestDashboardIll isLoading={isLoading} />;
case "24-7-live-support":
return <SupportIllustration isLoading={isLoading} />;
default:
return <img src={heroImage} alt="" />;
}
};
const illustrationComponent = getIllustrationComponent();
setIllustrationComponent(illustrationComponent);
}, [featuresSlug, heroImage, isLoading]);
return (
<>
<Helmet
title={title}
meta={[
{ name: "description", content: description },
]}
script={[
{
type: "application/ld+json",
innerHTML: JSON.stringify({
"@context": "http://schema.org",
"@type": "Service",
"serviceType": title,
"provider": {
"@type": "Organization",
"name": "Ping Proxies",
"url": "https://www.pingproxies.com"
},
"areaServed": "Worldwide",
"description": description
})
},
]}
/>
<HeroLayout image={isMobile ? <img src={heroImage} alt="" /> : illustrationComponent} isLoading={isLoading}>
<HeroComponent title={title} desc={description} button={button_text} hasCrumbs={hasCrumbs} />
</HeroLayout>
</>
);
}
export default Hero;