2025-07-14 14:03:36 +05:30

107 lines
3.3 KiB
JavaScript

import { newsItems2 } from "@/data/blogs";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
export default function Blogs() {
return (
<section
className="news-section fix section-padding pt-0 scrollSpySection"
id="blog"
>
<div className="shape-3 float-bob-y">
<Image
src="/assets/img/news/shape-3.png"
width={261}
height={272}
alt="img"
/>
</div>
<div className="shape-4 float-bob-y">
<Image
src="/assets/img/news/shape-4.png"
width={413}
height={232}
alt="img"
/>
</div>
<div className="container">
<div className="section-title-area">
<div className="section-title">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
Blog &amp; News
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Latest News & Blog" />
</h2>
</div>
<Link
href={`/news-grid`}
className="theme-btn wow fadeInUp"
data-wow-delay=".5s"
>
View all post <i className="fa-regular fa-arrow-right" />
</Link>
</div>
<div className="row">
{newsItems2.map((news) => (
<div
key={news.id}
className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp`}
data-wow-delay={`${news.id * 0.2}s`}
>
<div className={`news-box-items ${news.style}`}>
<div className="news-image">
<Image
src={news.imageSrc}
width={370}
height={198}
alt="news"
/>
<Image
src={news.imageSrc}
width={370}
height={198}
alt="news"
/>
</div>
<div className="news-content">
<ul className="post-list">
<li>{news.category}</li>
<li>{news.date}</li>
</ul>
<h4>
<Link href={`/news-details/${news.id}`}>{news.title}</Link>
</h4>
<div className="author-items">
<div className="author-info">
<Image
src={news.authorImgSrc}
width={40}
height={40}
alt="author"
/>
<div className="content">
<h6>Admin</h6>
<p>{news.authorName}</p>
</div>
</div>
<Link
href={`/news-details/${news.id}`}
className="link-btn"
>
Read More <i className="fa-solid fa-arrow-right" />
</Link>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
}