107 lines
3.6 KiB
JavaScript
107 lines
3.6 KiB
JavaScript
"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>
|
|
);
|
|
}
|