Initial Commit

components/homes/insurance-consulting/Hero.jsx

@@ -0,0 +1,101 @@
+"use client";
+import { bannerSlides2 } from "@/data/heroSlides";
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import Link from "next/link";
+import Image from "next/image";
+export default function Hero() {
+  return (
+    <div className="page-title style-4">
+      <div className="tf-container">
+        <div className="row">
+          <div className="col-12">
+            <div className="heading-title d-flex flex-wrap-lg mb_40 justify-content-between">
+              <div className="left">
+                <p className="sub text-body-1 text_primary point">
+                  <span className="item" /> Ultimate Peace Of Mind
+                </p>
+                <div className="text_primary text-display-3 title">
+                  Shaping{" "}
+                  <img
+                    className="icon animate__rollIn animate__animated"
+                    data-wow-delay="0s"
+                    alt="icon"
+                    src="/images/box-icon/check-verified-01.svg"
+                  />{" "}
+                  Futures <br />
+                  With{" "}
+                  <img
+                    className="icon heart animate__rollIn animate__animated"
+                    alt="icon"
+                    src="/images/box-icon/heart-circle.svg"
+                  />{" "}
+                  Insurance Solutions
+                </div>
+              </div>
+              <div className="right">
+                <p className="sub-heading text_mono-dark-9 mb_24 split-text split-lines-transform">
+                  Maximize your coverage, minimize your worries. We're committed
+                  to providing exceptional customer service and comprehensive
+                  insurance solutions that exceed your expectations.
+                </p>
+                <div className="d-flex gap_10 wrap-btn flex-wrap-sm">
+                  <Link
+                    href={`/about`}
+                    className="tf-btn btn-border border-1 rounded-12 height-3"
+                  >
+                    <span className="text-body-1 text_primary">
+                      Book a Free Consulting
+                    </span>
+                    <span className="bg-effect" />
+                  </Link>
+                  <Link
+                    href={`/contact-us`}
+                    className="tf-btn rounded-12 height-3"
+                  >
+                    <span className="text-body-1">Find your plan</span>
+                    <span className="bg-effect" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Swiper
+        className="swiper style-pagination sw-layout"
+        centeredSlides
+        spaceBetween={12}
+        loop
+        initialSlide={1}
+        breakpoints={{
+          0: { slidesPerView: 1.2 },
+          575: {
+            slidesPerView: 1.2,
+          },
+          768: {
+            slidesPerView: 1.5,
+          },
+          992: {
+            slidesPerView: 1.67,
+          },
+        }}
+      >
+        {bannerSlides2.map((slide) => (
+          <SwiperSlide className="swiper-slide" key={slide.id}>
+            <div className="img-wrap">
+              <Image
+                className="lazyload"
+                data-src={`images/page-title/${slide.src}`}
+                alt={slide.alt}
+                src={`/images/page-title/${slide.src}`}
+                width={1142}
+                height={744}
+              />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+}