40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { Container } from "@/components/Container";
|
|
import { PageHero } from "@/components/layout/PageHero";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { blogPosts } from "@/lib/data";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "مقالات",
|
|
description: "نکتههایی از تعمیرگاه و بورس قطعات لوازم خانگی برادران برقعی.",
|
|
};
|
|
|
|
export default function BlogPage() {
|
|
return (
|
|
<>
|
|
<PageHero kicker="Blog" title="مقالات" image="/images/slides/slide-2.jpg" />
|
|
<section className="py-16 sm:py-24">
|
|
<Container>
|
|
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
{blogPosts.map((post) => (
|
|
<Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
|
|
<div className="overflow-hidden rounded-2xl">
|
|
<Placeholder
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
|
|
<h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
|
|
<p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|