Initial Commit

components/homes/finance-consulting/Services.jsx

@@ -0,0 +1,105 @@
+"use client";
+import { serviceBoxes } from "@/data/services";
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import Link from "next/link";
+import Image from "next/image";
+import { Navigation, Pagination } from "swiper/modules";
+export default function Services() {
+  return (
+    <div className="section-service style-2 tf-spacing-46">
+      <div className="tf-container-3">
+        <div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_62">
+          <div className="left">
+            <div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_15">
+              Our Focus Areas
+            </div>
+            <h3 className="split-text effect-right">
+              Strategic Opportunities for you to maintain <br />
+              sustainable growth
+            </h3>
+          </div>
+          <div className="right">
+            <Link
+              href="#contact-section"
+              className="tf-btn btn-dark rounded-0 btn-px-28 height-2 mb_10"
+            >
+              <span>Get in touch</span>
+              <span className="bg-effect" />
+            </Link>
+          </div>
+        </div>
+        <div
+          className="sw-layout-1 position-relative wow animate__fadeInRight animate__animated"
+          data-wow-delay="0s"
+        >
+          <Swiper
+            className="swiper"
+            breakpoints={{
+              0: { slidesPerView: 1 },
+              575: {
+                slidesPerView: 1,
+              },
+              768: {
+                slidesPerView: 2,
+              },
+              992: {
+                slidesPerView: 3,
+                spaceBetween: 16,
+              },
+            }}
+            spaceBetween={15}
+            modules={[Navigation, Pagination]}
+            pagination={{
+              clickable: true,
+              el: ".spd4",
+            }}
+            navigation={{
+              prevEl: ".snbp4",
+              nextEl: ".snbn4",
+            }}
+          >
+            {serviceBoxes.map((service) => (
+              <SwiperSlide className="swiper-slide" key={service.id}>
+                <div className="tf-box-icon style-2 effect-icon">
+                  <span className="number">{service.number}</span>
+                  <div className="content">
+                    <div className="icon mb_16">
+                      <Image
+                        alt=""
+                        src={service.iconSrc}
+                        width={48}
+                        height={48}
+                      />
+                    </div>
+                    <h6 className="fw-5 mb_11">
+                      <a href="#" className="link">
+                        {service.title}
+                      </a>
+                    </h6>
+                    <p className="text-body-2 text_mono-gray-5">
+                      {service.description}
+                    </p>
+                    {/* <a
+                      href="#"
+                      className="text-body-1 text_primary link-black btn_link"
+                    >
+                      Book a call
+                    </a> */}
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          <div className="sw-button style-default nav-prev-layout-1 xl-hide snbp4">
+            <i className="icon-arrow-left-01" />
+          </div>
+          <div className="sw-button style-default nav-next-layout-1 xl-hide snbn4">
+            <i className="icon-arrow-right-01" />
+          </div>
+          <div className="sw-dots style-default sw-pagination-layout-1 mt_20 justify-content-center d-flex d-xl-none spd4" />
+        </div>
+      </div>
+    </div>
+  );
+}