92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
import { Calendar, ChevronRight } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const posts = [
|
|
{
|
|
title: "چگونه برند و کسب‌وکار موفقی بسازیم",
|
|
category: "کسب‌وکار",
|
|
date: "۲ مهر ۱۴۰۳",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
|
|
href: "#",
|
|
},
|
|
{
|
|
title: "تفاوت رابط کاربری و تجربه کاربری",
|
|
category: "طراحی",
|
|
date: "۱۸ فروردین ۱۴۰۳",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
|
|
href: "#",
|
|
},
|
|
{
|
|
title: "بهینه‌سازی وب‌سایت برای سئو و ترافیک بیشتر",
|
|
category: "بازاریابی",
|
|
date: "۱۰ شهریور ۱۴۰۳",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
interface Blog13Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Blog13 = ({ className }: Blog13Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
|
|
<Badge variant="outline">مقالات</Badge>
|
|
<h1 className="text-xl font-semibold text-balance">
|
|
جدیدترین روندها را کشف کنید
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
در وبلاگ ما جدیدترین مقالات، آموزش‌ها و ایده‌های کاربردی را برای رشد کسب‌وکار و توسعه مهارت‌های خود دنبال کنید.
|
|
</p>
|
|
<a href="#" className="flex items-center gap-1 text-sm font-semibold">
|
|
مشاهده همه مطالب
|
|
<ChevronRight className="h-full w-4 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
<div className="mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{posts.map((post) => (
|
|
<div key={post.title} className="flex flex-col">
|
|
<div className="relative">
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="aspect-video w-full rounded-lg object-cover"
|
|
/>
|
|
<Badge
|
|
variant="secondary"
|
|
className="absolute top-4 end-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm"
|
|
>
|
|
{post.category}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex h-full flex-col justify-between p-4 text-start">
|
|
<h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
|
|
<div className="flex justify-between gap-6 text-sm">
|
|
<span className="flex items-center gap-1 text-muted-foreground">
|
|
<Calendar className="h-4 w-4 shrink-0" />
|
|
{post.date}
|
|
</span>
|
|
<a href={post.href} className="flex shrink-0 items-center gap-1">
|
|
ادامه مطلب
|
|
<ChevronRight className="h-full w-3 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blog13 };
|