"use client";
  
import React from "react";
import Link from "next/link";
import Image from "next/image";

const OurServices: React.FC = () => {
  return (
    <>
      <div className="services-area ptb-100 bg-e3fbff">
        <div className="container">
          <div className="section-title" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100" data-aos-once="true">
            <span className="sub-title">
              <Image
                src="/img/star-icon.png"
                alt="image"
                width={32}
                height={34}
              />
              Our Services
            </span>
            <h2>We Offer Professional Solutions For Business</h2>
            <p>
              Expert services designed to meet your needs.
            </p>
          </div>

          <div className="row">
            <div className="col-lg-4 col-md-6 col-sm-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100" data-aos-once="true">
              <Link href="/service/cms-ecommerce/">
                <div className="single-services-item service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/cms-ecommerce.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>CMS & eCommerce</h3>
                  <p>e-Commerce platforms that help various online businesses</p>

                  <span className="default-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>

                  <div className="shape1">
                    <Image
                      src="/img/services/service-shape1.png"
                      alt="image"
                      width={300}
                      height={294}
                    />
                  </div>
                  <div className="shape2">
                    <Image
                      src="/img/services/service-shape2.png"
                      alt="image"
                      width={127}
                      height={119}
                    />
                  </div>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100" data-aos-once="true">
              <Link href="/service/web-development-services/">
                <div className="single-services-item service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/web-development.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>Web Development Services</h3>
                  <p>The High Quality Web Development Services</p>

                  <span className="default-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>

                  <div className="shape1">
                    <Image
                      src="/img/services/service-shape1.png"
                      alt="image"
                      width={300}
                      height={294}
                    />
                  </div>
                  <div className="shape2">
                    <Image
                      src="/img/services/service-shape2.png"
                      alt="image"
                      width={127}
                      height={119}
                    />
                  </div>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100" data-aos-once="true">
              <Link href="/service/mobile-apps-development/">
                <div className="single-services-item service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/mobile-apps-development.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>Mobile Apps Development</h3>
                  <p>Fully Functional and Interactive Mobile Applications</p>

                  <span className="default-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>

                  <div className="shape1">
                    <Image
                      src="/img/services/service-shape1.png"
                      alt="image"
                      width={300}
                      height={294}
                    />
                  </div>
                  <div className="shape2">
                    <Image
                      src="/img/services/service-shape2.png"
                      alt="image"
                      width={127}
                      height={119}
                    />
                  </div>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100" data-aos-once="true">
              <Link href="/service/game-development/">
                <div className="single-services-item service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/game-development.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>Game Development</h3>
                  <p>Our Diligent Game Development Skills</p>

                  <span className="default-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>

                  <div className="shape1">
                    <Image
                      src="/img/services/service-shape1.png"
                      alt="image"
                      width={300}
                      height={294}
                    />
                  </div>
                  <div className="shape2">
                    <Image
                      src="/img/services/service-shape2.png"
                      alt="image"
                      width={127}
                      height={119}
                    />
                  </div>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100" data-aos-once="true">
              <Link href="/service/ui-ux-design/">
                <div className="single-services-item service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/uiux-design.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>UI & UX Design</h3>
                  <p>Wonderful Experience on a UI & UX Design</p>

                  <span className="default-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>

                  <div className="shape1">
                    <Image
                      src="/img/services/service-shape1.png"
                      alt="image"
                      width={300}
                      height={294}
                    />
                  </div>
                  <div className="shape2">
                    <Image
                      src="/img/services/service-shape2.png"
                      alt="image"
                      width={127}
                      height={119}
                    />
                  </div>
                </div>
              </Link>
            </div>

            <div className="col-lg-4 col-md-6 col-sm-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100" data-aos-once="true">
              <Link href="/service/digital-marketing/">
                <div className="single-services-item service-card-image">
                  <div className="icon">
                    <Image
                      src="/img/services/service-icon/digital-marketing.svg"
                      alt="image"
                      width={85}
                      height={85}
                    />
                  </div>
                  <h3>Digital Marketing</h3>
                  <p>e-Commerce platforms that help various online businesses</p>

                  <span className="default-btn">
                    Read More <i className="flaticon-right"></i>
                  </span>

                  <div className="shape1">
                    <Image
                      src="/img/services/service-shape1.png"
                      alt="image"
                      width={300}
                      height={294}
                    />
                  </div>
                  <div className="shape2">
                    <Image
                      src="/img/services/service-shape2.png"
                      alt="image"
                      width={127}
                      height={119}
                    />
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default OurServices;