mukeshs/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
mukesh13
2025-07-30 13:44:47 +05:30
commit 6c0c0e3d1d
494 changed files with 57695 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
components/homes/home-1/Blogs.jsx Normal file
View File

@ -0,0 +1,107 @@
"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>
);
}