66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { blogData, commonDescriptions } from '../../data/siteData'
|
|
|
|
export default function LatestNews() {
|
|
return (
|
|
<section className="py-20 bg-white" id="news">
|
|
<div className="container mx-auto px-4">
|
|
{/* Section Header */}
|
|
<div className="text-center max-w-3xl mx-auto mb-8">
|
|
<h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
|
|
{commonDescriptions.newsTitle}
|
|
</h3>
|
|
<p className="text-text my-3">
|
|
{commonDescriptions.sectionDesc}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Blog Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{blogData.map((post, index) => (
|
|
<div
|
|
key={post.id}
|
|
className={`mt-4 ${
|
|
index === 2 ? 'md:col-start-2 lg:col-start-auto' : ''
|
|
}`}
|
|
>
|
|
<div className="grids5-info bg-white rounded-lg overflow-hidden shadow-card hover:shadow-card-hover transition-shadow">
|
|
<a href={post.link} className="d-block zoom block overflow-hidden">
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="w-full h-48 object-cover transition-transform duration-500 hover:scale-110"
|
|
/>
|
|
</a>
|
|
<div className="blog-info p-6">
|
|
<ul className="flex gap-2 mb-2">
|
|
{post.categories.map((cat, i) => (
|
|
<li key={i}>
|
|
<a href="#" className="text-secondary hover:text-primary text-sm">
|
|
{cat}{i < post.categories.length - 1 ? ',' : ''}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<p className="text-text/60 text-sm mb-2">{post.date}</p>
|
|
<h4 className="text-lg font-bold mb-3">
|
|
<a href={post.link} className="text-title hover:text-secondary transition-colors">
|
|
{post.title}
|
|
</a>
|
|
</h4>
|
|
<p className="text-text mb-4">{post.description}</p>
|
|
<a
|
|
href={post.link}
|
|
className="text-secondary hover:text-primary font-medium transition-colors"
|
|
>
|
|
Read More <span className="fa fa-angle-right pl-1" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|