import HeroCrumbs from "components/Sections/Hero/HeroCrumbs";
import { getImageUrl } from "helpers";
import { useAnimation } from "hooks/useAnimation";
import { useRef } from "react";
import { useSelector } from 'react-redux';
import {
    selectAboutUsAbout,
    selectAboutUsHero,
    selectAboutUsIsLoading
} from 'store/slices/AboutSlice';
import AboutIllustration from "components/AnimationIllustrations/AboutIllustration";
import { Helmet } from "react-helmet";


const AboutHero = () => {
    const { image, title } = useSelector(selectAboutUsHero);
    const heroImage = getImageUrl(image)
    const isLoading = useSelector(selectAboutUsIsLoading);
    const aboutus = useSelector(selectAboutUsAbout);

    const container = useRef();
    useAnimation({
        items: ['.about-hero', '.about-hero h1', '.about-hero__image', '.about-hero__illustration'],
        container,
        dependencies: [isLoading],
    })


    return (
        <>
            <Helmet
                title={title}
                meta={[
                    { name: "description", content: aboutus.title },
                ]}
                script={[
                    {
                        type: "application/ld+json",
                        innerHTML: JSON.stringify({
                            "@context": "http://schema.org",
                            "@type": "Organization",
                            "name": "Ping Proxies",
                            "url": "https://www.pingproxies.com",
                            "logo": "https://www.pingproxies.com/logo.png",
                            "aggregateRating": {
                                "@type": "AggregateRating",
                                "ratingValue": "4.8",
                                "reviewCount": "84"
                            },
                            "sameAs": [
                                "https://www.twitter.com/PingProxies",
                            ]

                        })
                    },
                ]}
            />
            <section ref={container} className="inner-container about-hero">
                <HeroCrumbs page={"About us"} />
                <h1>{title}</h1>
                {
                    AboutIllustration ?
                        <AboutIllustration isLoading={isLoading} />
                        :
                        <img src={heroImage} alt="" className="about-hero__image" />
                }
            </section>
        </>

    );
}

export default AboutHero;

• [F] index.jsx
  Delete