first commit

components/homes/finance-consulting/Blogs.jsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { blogArticles2 } from "@/data/blogs";
+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-blog style-1 sw-layout-1">
+      <div className="tf-container">
+        <div className="row">
+          <div className="col-12">
+            <div className="heading-section d-flex justify-content-between flex-wrap-md gap_12 align-items-end mb_63">
+              <div className="left">
+                <div className="heading-tag style-1 text_mono-gray-5 text-body-2 mb_15">
+                  Blogs
+                </div>
+                <h3 className="split-text split-lines-rotation-x">
+                  Stay informed with expert insights, tips, and <br />
+                  strategies designed to help you navigate
+                </h3>
+              </div>
+              <div className="right">
+                <div className="sw-progress swiper-pagination sw-progress-layout-1 spd2" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="tf-container slider-layout-right w-xl wow animate__fadeInRight animate__animated"
+        data-wow-delay="0s"
+      >
+        <Swiper
+          className="swiper"
+          spaceBetween={15}
+          breakpoints={{
+            0: { slidesPerView: 1.1 },
+            575: {
+              slidesPerView: 1.1,
+            },
+            768: {
+              slidesPerView: 1.5,
+              spaceBetween: 20,
+            },
+            992: {
+              slidesPerView: 3.4,
+              spaceBetween: 30,
+            },
+            1200: {
+              slidesPerView: 3.9,
+              spaceBetween: 72,
+            },
+          }}
+          modules={[Pagination]}
+          pagination={{
+            type: "progressbar",
+            clickable: true,
+            el: ".spd2",
+          }}
+          data-pagination-type="progressbar"
+        >
+          {blogArticles2.map((article) => (
+            <SwiperSlide className="swiper-slide" key={article.id}>
+              <div className="blog-article-item style-1 hover-image-3">
+                <Link
+                  href={`/single-post/${article.id}`}
+                  className="article-thumb mb_30"
+                >
+                  <Image
+                    className="lazyload"
+                    data-src={article.imageSrc}
+                    alt="blog"
+                    src={article.imageSrc}
+                    width={article.width}
+                    height={article.height}
+                  />
+                  <Image
+                    className="lazyload"
+                    data-src={article.imageSrc}
+                    alt="blog"
+                    src={article.imageSrc}
+                    width={article.width}
+                    height={article.height}
+                  />
+                  <div className="tag text-body-3 text_white d-flex flex-column">
+                    <h6 className="text_white">{article.day}</h6>
+                    <span>{article.month}</span>
+                  </div>
+                </Link>
+                <div className="article-content mb_25">
+                  <h6 className="title fw-5 letter-spacing-2 mb_8">
+                    <Link href={`/single-post/${article.id}`} className="link">
+                      {article.title}
+                    </Link>
+                  </h6>
+                  <p className="text-body-1 text_mono-gray-5">
+                    {article.description}
+                  </p>
+                </div>
+                <Link
+                  href={`/single-post/${article.id}`}
+                  className="btn_link text-body-1 link-black"
+                >
+                  Read it
+                </Link>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+}