"use client";

import React from "react";

const AboutTwo = () => {
    return (
        <section className="about-two">
            <div className="about-two__shape"></div>
            <img
                src="/assets/images/services/why/left-element.webp"
                alt="shape"
                className="about-two__shape__two"
            />
            <img
                src="/assets/images/services/why/right-element.webp"
                alt="shape"
                className="about-two__shape__three"
                style={{ opacity: 0.4 }}
            />
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-xl-6">
                        <div className="about-two__img">
                            <img
                                src="/assets/images/services/choose/circle.webp"
                                alt="about"
                            />
                        </div>
                    </div>
                    <div className="col-xl-6">
                        <div className="about-two__content">
                            <div className="sec-title">
                                {/* <span className="about-two__dot-circle"></span> */}
                                <div className="sec-title__shape"></div>
                                <h6 className="sec-title__tagline">Why Choose Us</h6>
                                <h3 className="sec-title__title">Comprehensive Digital Solutions Expertise</h3>
                            </div>
                            {/* <p className="about-two__text">
                                Business tailored design, management & support services Business
                                business agency elit, sed do eiusmod tempor &nbsp;majority have
                                in some we form, by injected humour solution.
                            </p> */}
                            <ul className="about-two__list">
                                <li>
                                    <div className="about-two__list__icon-box">
                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
                                        <img src="/assets/images/services/why/icon-1.webp" alt="Latest Technology" className="about-two__list__icon" />
                                    </div>
                                    <div className="about-two__list__content">
                                        <h3 className="about-two__list__title">Latest Technology</h3>
                                        <p className="about-two__list__text">Harness advanced tech for top-notch web, app, and digital projects.</p>
                                    </div>
                                </li>
                                <li>
                                    <div className="about-two__list__icon-box">
                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
                                        <img src="/assets/images/services/why/icon-2.webp" alt="Certified Experts" className="about-two__list__icon" />
                                    </div>
                                    <div className="about-two__list__content">
                                        <h4 className="about-two__list__title">Certified Experts</h4>
                                        <p className="about-two__list__text">Trust our certified team for expert guidance in all digital realms.</p>
                                    </div>
                                </li>
                                <li>
                                    <div className="about-two__list__icon-box">
                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
                                        <img src="/assets/images/services/why/icon-3.webp" alt="Get Reasonable Price" className="about-two__list__icon" />
                                    </div>
                                    <div className="about-two__list__content">
                                        <h4 className="about-two__list__title">Get Reasonable Price</h4>
                                        <p className="about-two__list__text">Get value-driven solutions at prices tailored for your business needs.</p>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default AboutTwo;