import React, { useEffect } from "react";

const AboutSection = () => {
    return (
        <section className="about-us-section section-space p-relative">
            <div className="shape-area">
                <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/bg-shape-1.png)" }}></div>
                <div className="shape-2 quote-animation" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-7.png)" }}></div>
                <div className="shape-3 quote-animation" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-8.png)" }}></div>
            </div>
            <div className="small-container">
                <div className="row g-4">
                    <div className="col-xxl-6 col-xl-6 col-lg-6">
                        <div className="about-us-image-area p-relative wow fadeInRight" data-wow-delay=".5s">
                            <div className="border-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-6.png)" }}></div>
                            <figure className="image-1">
                                <img src="/assets/img/about/about-img1.png" alt="" />
                            </figure>
                            <div className="image-2-area">
                                <div className="image-2 p-relative">
                                    <img src="/assets/img/about/about-img7.png" alt="" />
                                    <div className="play-btn">
                                        <div className="video_player_btn">
                                            <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="working-area float-bob-y">
                                <div className="inner p-relative">
                                    <div className="icon-box">
                                        <i className="fa-solid fa-award"></i>
                                        <h4><span className="counter">25</span> Years</h4>
                                        <p>Working Experience</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-xxl-6 col-xl-6 col-lg-6">
                        <div className="about-us-content-area p-relative z-1 pl-30">
                            <div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
                                <div className="sec-title">
                                    <div className="sec-title__shape"></div>
                                    <h6 className="sec-title__tagline">ABOUT US</h6>
                                    <h3 className="sec-title__title">Selecting the Finest IT<br />Service Provider</h3>
                                </div>
                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                            </div>
                            <p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
                            <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
                                <div className="icon">
                                    <img src="/assets/imgs/about/about-three-icon1.png" alt="img" />
                                </div>
                                <div className="content">
                                    <h5><a href="#">Business Growth</a></h5>
                                    <p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
                                </div>
                            </div>
                            <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
                                <div className="icon">
                                    <img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
                                </div>
                                <div className="content">
                                    <h5><a href="#">Technology Consultancy</a></h5>
                                    <p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
                                </div>
                            </div>
                            <div className="about-btn-box wow fadeInLeft" data-wow-delay="1s">
                                <a className="primary-btn-1 btn-hover" href="/about">
                                    about us &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                    <span className="btn-hover-span"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default AboutSection;
