import ServiceDetail from "../../../../public/assets/imgs/thumb/products/virtual-tour/section.png";
import Shape6 from "../../../../public/assets/imgs/icon/shape-6.png";
import Image from "next/image";

const Section = () => {
  return (
    <>
      <section className="service__detail">
        <div className="container g-0 line pb-140">
          <div className="line-3"></div>
          <div className="row">
            <div className="col-xxl-12">
              <div className="sec-title-wrapper">
                <h2 className="sec-title title-anim">
                  Elevate Experiences with Virtual Tours
                </h2>
              </div>
            </div>
            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-3">
              <div className="service__detail-circle">
                <span></span>
              </div>
            </div>
            <div className="col-xxl-9 col-xl-9 col-lg-9 col-md-9">
              <div className="service__detail-img">
                <Image
                  priority
                  width={960}
                  style={{ height: "auto" }}
                  src={ServiceDetail}
                  alt="Virtual Tour Detail"
                />
                <Image
                  priority
                  width={51}
                  style={{ height: "auto" }}
                  src={Shape6}
                  alt="Shape image"
                  className="sd-shape"
                />
              </div>
              <div className="service__detail-content">
                <p>
                  Our virtual tour builder offers interactive 360° experiences for any space, bringing your vision to life online.
                </p>
                <p>
                  With seamless integration of media, e-commerce, and live streaming, your virtual tours will engage and captivate users like never before.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Section;