116 lines
3.9 KiB
JavaScript
116 lines
3.9 KiB
JavaScript
"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>
|
|
);
|
|
}
|