first commit

components/homes/insurance-consulting/Blogs.jsx

@@ -0,0 +1,106 @@
+"use client";
+import { blogPosts } from "@/data/blogs";
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import Link from "next/link";
+import Image from "next/image";
+import { Pagination } from "swiper/modules";
+export default function Blogs() {
+  return (
+    <div className="section">
+      <div className="tf-container">
+        <div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_56">
+          <div className="left">
+            <div className="point text-body-1 mb_7">
+              <span className="item" />
+              Latest Articles
+            </div>
+            <h2 className="heading-title text_primary split-text effect-right">
+              Get The Latest Updates
+            </h2>
+            <p
+              className="text_mono-gray-7 text-body-1 mt_20 wow animate__fadeInUp animate__animated"
+              data-wow-delay="0s"
+            >
+              We provide timely updates on industry trends, regulatory changes,
+              and <br />
+              best practices to help you make informed decisions.
+            </p>
+          </div>
+          <div className="right">
+            <Link
+              href={`/blog`}
+              className="tf-btn height-3 rounded-12 btn-px-28"
+            >
+              <span>View Details</span>
+              <span className="bg-effect" />
+            </Link>
+          </div>
+        </div>
+        <Swiper
+          className="swiper style-pagination sw-layout"
+          breakpoints={{
+            0: { slidesPerView: 1 },
+            575: {
+              slidesPerView: 2,
+            },
+            768: {
+              slidesPerView: 3,
+            },
+            992: {
+              slidesPerView: 4,
+            },
+          }}
+          spaceBetween={12}
+          modules={[Pagination]}
+          pagination={{
+            clickable: true,
+            el: ".spd7",
+          }}
+        >
+          {blogPosts.map((post) => (
+            <SwiperSlide className="swiper-slide" key={`blog-${post.id}`}>
+              <div className="blog-article-item style-4">
+                <Link
+                  href={`/single-post/${post.id}`}
+                  className="article-thumb mb_11"
+                >
+                  <Image
+                    className="lazyload"
+                    data-src={post.imageSrc}
+                    alt={post.alt}
+                    src={post.imageSrc}
+                    width={415}
+                    height={280}
+                  />
+                  <Image
+                    className="lazyload"
+                    data-src={post.imageSrc}
+                    alt={post.alt}
+                    src={post.imageSrc}
+                    width={415}
+                    height={280}
+                  />
+                </Link>
+                <div className="article-content">
+                  <ul className="blog-article-meta mb_8 d-flex align-items-center style-2">
+                    <li className="meta-item text-body-2">{post.date}</li>
+                    <li className="meta-item date text-body-2">
+                      {post.comments}
+                    </li>
+                  </ul>
+                  <h6 className="title fw-5 letter-spacing-2 text_mono-dark-9 line-clamp-2">
+                    <Link href={`/single-post/${post.id}`} className="link">
+                      {post.title}
+                    </Link>
+                  </h6>
+                </div>
+              </div>
+            </SwiperSlide>
+          ))}
+          <div className="sw-pagination sw-pagination-layout text-center mt_20 spd7" />
+        </Swiper>
+      </div>
+    </div>
+  );
+}