ClientService.js 3.5 KB
import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper/modules";

const services = [
  {
    id: 1,
    image: "/images/services/services1.jpg",
    altText: "Service Image",
    title: "Virtual FC & CFO Services",
    description:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut",
    linkText: "Read More",
    detailsUrl: "/services/details",
  },
  {
    id: 2,
    image: "/images/services/services2.jpg",
    altText: "Service Image",
    title: "Transaction Advisory",
    description:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut",
    linkText: "Read More",
    detailsUrl: "/services/details",
  },
  {
    id: 3,
    image: "/images/services/services4.jpg",
    altText: "Service Image",
    title: "Risk Advisory",
    description:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut",
    linkText: "Read More",
    detailsUrl: "/services/details",
  },
  {
    id: 4,
    image: "/images/services/services4.jpg",
    altText: "Service Image",
    title: "Business Advisory",
    description:
      "Lorem ipsum dolor sit amet, conseteturants atal into sadipscing elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut",
    linkText: "Read More",
    detailsUrl: "/services/details",
  },
];

const ClientService = () => {
  return (
    <>
      <div className="services-area pt-100 pb-5">
        <div className="container">
          <div className="section-title">
            <span className="sub-title">Client Servicing</span>
            <h2>Core Services</h2>
            <p>
              Lorem ipsum dolor sit amet, conseteturants atal into sadipscing
              elitr, sed diam nonumy eirmod nsa ada tempor invidunt ut
            </p>
          </div>

          <Swiper
            spaceBetween={30}
            pagination={{
              clickable: true,
            }}
            breakpoints={{
              0: {
                slidesPerView: 1,
              },
              768: {
                slidesPerView: 2,
              },
              1200: {
                slidesPerView: 3,
              },
            }}
            autoplay={{
              delay: 5000,
              disableOnInteraction: true,
              pauseOnMouseEnter: true,
            }}
            modules={[Pagination, Autoplay]}
            className="services-slides"
          >
            {services &&
              services.map((service) => (
                <SwiperSlide className="single-services-box" key={service.id}>
                  <div className="image">
                    <Link href={service.detailsUrl}>
                      <img src={service.image} alt={service.altText} />
                    </Link>
                  </div>
                  <div className="content">
                    <h3>
                      <Link href={service.detailsUrl}>{service.title}</Link>
                    </h3>

                    <p>{service.description}</p>

                    <Link href={service.detailsUrl} className="default-btn">
                      {service.linkText} <i className="ri-arrow-right-line"></i>
                    </Link>
                  </div>
                </SwiperSlide>
              ))}
          </Swiper>
        </div>
      </div>
    </>
  );
};

export default ClientService;