import React from "react";

const AboutSection = () => (
    <section className="about-three-section section-space-top p-relative">
        <div className="bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-43.png)" }}></div>
        <div className="small-container">
            <div className="row">
                <div className="col-xxl-6 col-xl-6 col-lg-6">
                    <div className="about-3-image-area p-relative">
                        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-42.png)" }}></div>
                        <figure className="image w-img pr-60">
                            <img src="/assets/imgs/about/about-5.jpg" alt="" />
                        </figure>
                    </div>
                </div>
                <div className="col-xxl-6 col-xl-6 col-lg-6">
                    <div className="about-3-content-area p-relative pr-30 pt-20">
                        <div className="title-box wow fadeInLeft mb-25" data-wow-delay=".5s">
                            <span className="section-sub-title no-border">WHO WE ARE</span>
                            <h3 className="section-title mt-10">Ensuring Your Success Through Reliable IT Solutions</h3>
                        </div>
                        <p>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="row pb-25 pt-15">
                            <div className="col-lg-6">
                                <ul className="about-3-list">
                                    <li>Accurate Testing Processes</li>
                                    <li>100% Satisfaction Guarantee</li>
                                </ul>
                            </div>
                            <div className="col-lg-6">
                                <ul className="about-3-list">
                                    <li>300+ Successful Projects done</li>
                                    <li>Technology Consultancy</li>
                                </ul>
                            </div>
                        </div>
                        <div className="about-3-progress-bar p-relative">
                            <h6>Quality Services</h6>
                            <div className="progress">
                                <div className="progress-bar wow slideInLeft" data-wow-duration="1s" data-wow-delay=".3s" role="progressbar" style={{ width: '95%' }}>
                                </div>
                            </div>
                            <span className="progress-count">95%</span>
                        </div>
                        <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>
    </section>
);

export default AboutSection;
