133 lines
4.9 KiB
TypeScript
133 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Post {
|
|
date: string;
|
|
author: string;
|
|
title: string;
|
|
image: string;
|
|
link: string;
|
|
description: string;
|
|
}
|
|
|
|
const posts: Post[] = [
|
|
{
|
|
date: "۲۶ خرداد ۱۴۰۳",
|
|
author: "علی احمدی",
|
|
title: "آینده هوش مصنوعی: چگونه یادگیری ماشین صنایع را متحول می‌کند",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
link: "#",
|
|
description:
|
|
"ببینید هوش مصنوعی و یادگیری ماشین چگونه از بهداشت تا تولید را دگرگون می‌کنند و با جدیدترین نوآوری‌هایی که آینده ما را شکل می‌دهند آشنا شوید.",
|
|
},
|
|
{
|
|
date: "۲۳ خرداد ۱۴۰۳",
|
|
author: "مایا پاتیل",
|
|
title: "اصول طراحی مینیمال: کمتر، بیشتر در تجربه و رابط کاربری مدرن",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
link: "#",
|
|
description:
|
|
"اصول طراحی مینیمال را بشناسید و ببینید چگونه رابط‌هایی شهودی‌تر و کاربرپسندتر می‌سازند.",
|
|
},
|
|
{
|
|
date: "۲۱ خرداد ۱۴۰۳",
|
|
author: "داوود چین",
|
|
title: "انقلاب دورکاری: چگونه شرکت‌ها با وضعیت جدید سازگار می‌شوند",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
link: "#",
|
|
description:
|
|
"مزایا و چالش‌های دورکاری و روش‌های سازگاری شرکت‌ها با این الگوی جدید کار را بررسی کنید.",
|
|
},
|
|
{
|
|
date: "۱۹ خرداد ۱۴۰۳",
|
|
author: "سارا ویلیامز",
|
|
title: "ساخت اپلیکیشن‌های مقیاس‌پذیر با معماری میکروسرویس",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
link: "#",
|
|
description:
|
|
"بیاموزید معماری میکروسرویس چگونه به ساخت اپلیکیشن‌های مقیاس‌پذیر و قابل نگهداری کمک می‌کند.",
|
|
},
|
|
{
|
|
date: "۱۶ خرداد ۱۴۰۳",
|
|
author: "محمد رودریگز",
|
|
title: "استراتژی‌های بازاریابی محتوا برای ترافیک ارگانیک در ۱۴۰۳",
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
link: "#",
|
|
description:
|
|
"استراتژی‌های مؤثر بازاریابی محتوا را کشف کنید تا ترافیک ارگانیک بگیرید و مخاطبان خود را در ۱۴۰۳ رشد دهید.",
|
|
},
|
|
];
|
|
|
|
interface Blog28Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Blog28 = ({ className }: Blog28Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h1 className="mb-12 text-center text-xl font-medium md:text-2xll">
|
|
جدیدترین وبلاگ فناوری
|
|
</h1>
|
|
|
|
<div className="xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div className="relative md:row-span-2 lg:col-span-2">
|
|
<a
|
|
href={posts[0].link}
|
|
className="block h-fit rounded-lg p-3 text-start md:top-0"
|
|
>
|
|
<img
|
|
src={posts[0].image}
|
|
alt={posts[0].title}
|
|
className="h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96"
|
|
/>
|
|
<div className="mt-5">
|
|
<div className="mb-2.5 flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
|
|
<time>{posts[0].date}</time>
|
|
<span aria-hidden="true">·</span>
|
|
<span>{posts[0].author}</span>
|
|
</div>
|
|
<h2 className="text-lg md:text-3xl lg:text-xl">
|
|
{posts[0].title}
|
|
</h2>
|
|
<p className="mt-4 text-muted-foreground">
|
|
{posts[0].description}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{posts.slice(1).map((post) => (
|
|
<a
|
|
key={post.title}
|
|
href={post.link}
|
|
className="rounded-lg p-3 text-start"
|
|
>
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="h-48 w-full rounded-lg object-cover hover:opacity-80"
|
|
/>
|
|
<div className="mt-5">
|
|
<div className="mb-2.5 flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
|
|
<time>{post.date}</time>
|
|
<span aria-hidden="true">·</span>
|
|
<span>{post.author}</span>
|
|
</div>
|
|
<h3 className="text-lg">{post.title}</h3>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blog28 };
|