75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { articles } from "@/data/home";
|
|
|
|
export default function ArticlesSection() {
|
|
return (
|
|
<div className="wb-frame" id="article">
|
|
<section id="articles" className="blog-area blog-default-area" style={{ backgroundColor: "#FFFFFF" }}>
|
|
<div className="container">
|
|
<div className="row mb-4 align-items-center">
|
|
<div className="col-6 text-right">
|
|
<div className="section-title text-center">
|
|
<h2
|
|
className="title mb-0"
|
|
style={{
|
|
fontWeight: 200,
|
|
direction: "ltr",
|
|
textAlign: "right",
|
|
fontSize: "25px",
|
|
letterSpacing: "0px",
|
|
}}
|
|
>
|
|
مقاله ها
|
|
</h2>
|
|
<div className="desc">
|
|
<p
|
|
style={{
|
|
fontWeight: 0,
|
|
letterSpacing: "5px",
|
|
textAlign: "justify",
|
|
fontSize: "10px",
|
|
fontFamily: "montserrat",
|
|
color: "#C1C1C1",
|
|
}}
|
|
>
|
|
ARTICLES
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-6 text-start">
|
|
<a className="btn-theme" href="#articles">
|
|
<span style={{ fontWeight: 0 }}>مشاهده بیشتر</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="row pt-2 pb-2">
|
|
{articles.map((article) => (
|
|
<div key={article.id} className="col-6 col-md-3">
|
|
<div className="post-item mb-md-30">
|
|
<div className="thumb">
|
|
<a href="#">
|
|
<img src={article.image} alt={article.title} />
|
|
</a>
|
|
</div>
|
|
<div className="content">
|
|
<h3 className="title">
|
|
<a href="#">{article.title}</a>
|
|
</h3>
|
|
<p className="post-abstract">{article.excerpt}</p>
|
|
<div className="meta">
|
|
<div className="post-date">
|
|
<i className="WMi-calendar-1" />
|
|
<span>{article.date}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|