108 lines
3.9 KiB
JavaScript
108 lines
3.9 KiB
JavaScript
"use client";
|
|
import { blogArticles } from "@/data/blogs";
|
|
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Navigation } from "swiper/modules";
|
|
export default function Blogs() {
|
|
return (
|
|
<div className="section-blog style-3 sw-layout-1 tf-spacing-17">
|
|
<div className="tf-container">
|
|
<div className="wrap">
|
|
<div className="heading-section d-flex justify-content-between flex-wrap-md gap_12 align-items-end mb_108">
|
|
<div className="left">
|
|
<h1 className="heading-title split-text effect-right">
|
|
Insights From Our Press
|
|
</h1>
|
|
<p
|
|
className="text-body-1 text_mono-gray-7 mt_20 wow animate__fadeInUp animate__animated"
|
|
data-wow-delay="0s"
|
|
>
|
|
Discover the latest insights and trends in our most recent
|
|
articles. Stay informed and <br />
|
|
up to date on the topics that matter most to you.
|
|
</p>
|
|
</div>
|
|
<div className="wrap-sw-button d-flex gap_16">
|
|
<div className="sw-button style-default v2 has-bg nav-prev-layout-1 snbp5">
|
|
<i className="icon-caret-left" />
|
|
</div>
|
|
<div className="sw-button style-default v2 has-bg nav-next-layout-1 snbn5">
|
|
<i className="icon-caret-right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Swiper
|
|
className="swiper swiper-container wow animate__fadeInLeft animate__animated"
|
|
data-wow-delay="0s"
|
|
spaceBetween={15}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1 },
|
|
575: {
|
|
slidesPerView: 1,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 24,
|
|
},
|
|
}}
|
|
modules={[Navigation]}
|
|
navigation={{
|
|
prevEl: ".snbp5",
|
|
nextEl: ".snbn5",
|
|
}}
|
|
>
|
|
{blogArticles.map((article) => (
|
|
<SwiperSlide className="swiper-slide" key={article.id}>
|
|
<div className="blog-article-item hover-image">
|
|
<Link
|
|
href={`/single-post/${article.id}`}
|
|
className="article-thumb mb_25"
|
|
>
|
|
<Image
|
|
className="lazyload"
|
|
data-src={article.imageSrc}
|
|
alt="blog"
|
|
src={article.imageSrc}
|
|
width={article.width}
|
|
height={article.height}
|
|
/>
|
|
</Link>
|
|
<div className="article-content">
|
|
<ul className="blog-article-meta mb_15 d-flex align-items-center">
|
|
<li className="meta-item text-body-1">
|
|
<Link
|
|
href={`/single-post/${article.id}`}
|
|
className="link-black"
|
|
>
|
|
{article.category}
|
|
</Link>
|
|
</li>
|
|
<li className="meta-item date text-body-1">
|
|
{article.date}
|
|
</li>
|
|
</ul>
|
|
<h5 className="title letter-spacing-2">
|
|
<Link
|
|
href={`/single-post/${article.id}`}
|
|
className="link"
|
|
>
|
|
{article.title}
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|