112 lines
4.4 KiB
TypeScript
112 lines
4.4 KiB
TypeScript
import { ArrowRight, FileText } from "lucide-react";
|
|
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const posts = [
|
|
{
|
|
title: "چگونه برند و کسب‌وکار موفقی آنلاین بسازیم",
|
|
summary:
|
|
"راهکارهای عملی برای ساخت هویت برند قوی و رشد پایدار کسب‌وکار در فضای دیجیتال امروز.",
|
|
author: "علی رضایی",
|
|
readTime: "۱۰ دقیقه مطالعه",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-4.webp",
|
|
href: "#",
|
|
},
|
|
{
|
|
title: "تفاوت رابط کاربری و تجربه کاربری و چگونه برای هر دو طراحی کنیم",
|
|
summary:
|
|
"تفاوت‌های کلیدی UI و UX و نکاتی برای طراحی تجربه‌ای هماهنگ و کاربرمحور.",
|
|
author: "سارا احمدی",
|
|
readTime: "۱۴ دقیقه مطالعه",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
|
|
href: "#",
|
|
},
|
|
{
|
|
title: "بهینه‌سازی وب‌سایت برای سئو و افزایش ترافیک",
|
|
summary:
|
|
"تکنیک‌های سئو که دیده‌شدن سایت شما را بهبود می‌دهد و ترافیک ارگانیک را افزایش می‌دهد.",
|
|
author: "مریم حسینی",
|
|
readTime: "۹ دقیقه مطالعه",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
interface Blog12Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Blog12 = ({ className }: Blog12Props) => {
|
|
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-4 text-center">
|
|
<Badge variant="outline" className="gap-1 py-1">
|
|
<FileText className="h-full w-4" />
|
|
وبلاگ ما
|
|
</Badge>
|
|
<h1 className="text-xl font-semibold text-balance">
|
|
جدیدترین روندها را کشف کنید
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
در وبلاگ ما جدیدترین مقالات، آموزش‌ها و ایده‌های کاربردی را برای رشد کسب‌وکار و توسعه مهارت‌های خود دنبال کنید.
|
|
</p>
|
|
</div>
|
|
<div className="mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{posts.map((post) => (
|
|
<a
|
|
key={post.title}
|
|
className="rounded-xl border"
|
|
href={post.href}
|
|
>
|
|
<div className="p-2">
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="aspect-video w-full rounded-lg object-cover"
|
|
/>
|
|
</div>
|
|
<div className="px-3 pt-2 pb-4 text-start">
|
|
<h2 className="mb-1 font-medium">{post.title}</h2>
|
|
<p className="line-clamp-2 text-sm text-muted-foreground">
|
|
{post.summary}
|
|
</p>
|
|
<Separator className="my-5" />
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="size-9 rounded-full ring-1 ring-input">
|
|
<AvatarImage src={post.avatar} alt={post.author} />
|
|
</Avatar>
|
|
<span className="text-sm font-medium">{post.author}</span>
|
|
</div>
|
|
<Badge variant="secondary" className="h-fit shrink-0">
|
|
{post.readTime}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="mt-10 flex justify-center">
|
|
<Button variant="outline">
|
|
مشاهده همه مطالب
|
|
<ArrowRight className="ms-2 h-full w-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blog12 };
|