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/images/home/2/left-img.webp" 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">10+</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">Digital Excellence</h6>
                                    <h3 className="sec-title__title">Let's Work Together.<br /></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">Partner with Metatroncube Software Solutions and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.</p>
                            <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
                                <div className="icon">
                                    <img src="/assets/images/home/2/icon-1.webp" alt="img" />
                                </div>
                                <div className="content">
                                    <h5>Exceptional Digital Quality</h5>
                                    <p>High-quality graphics and precise web app development ensuring excellence.</p>
                                </div>
                            </div>
                            <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
                                <div className="icon">
                                    <img src="/assets/images/home/2/icon-2.webp" alt="img" />
                                </div>
                                <div className="content">
                                    <h5>Expertise in innovation</h5>
                                    <p>Skilled developers leading in SEO, digital marketing, and technological advancements.</p>
                                </div>
                            </div>
                            <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
                                <div className="icon">
                                    <img src="/assets/images/home/2/icon-3.webp" alt="img" />
                                </div>
                                <div className="content">
                                    <h5>Comprehensive web solutions</h5>
                                    <p>Robust web and mobile development with strategic SEO and marketing.</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;