110 lines
4.4 KiB
TypeScript
110 lines
4.4 KiB
TypeScript
import { BlogBlocksCard } from "./test/BlogBlocksCard";
|
||
import { BlogBlocksCategoryTabs } from "./test/BlogBlocksCategoryTabs";
|
||
|
||
const categories = [
|
||
"همه",
|
||
"شرکت",
|
||
"بازاریابی",
|
||
"اتاق خبر",
|
||
"شرکا",
|
||
"مهندسی",
|
||
"مطبوعات",
|
||
];
|
||
const cards = [
|
||
{
|
||
category: "شرکت",
|
||
title: "پذیرش فرهنگ کار از راه دور",
|
||
description:
|
||
"مزایا و چالش‌های پذیرش فرهنگ دورکاری در کسب‌وکارهای امروزی را بررسی کنید.",
|
||
date: "۱۸ آگوست ۲۲۵",
|
||
authors: ["Meschac Irung"],
|
||
},
|
||
{
|
||
category: "بازاریابی",
|
||
title: "آینده تحول‌آفرین هوش مصنوعی در بازاریابی دیجیتال",
|
||
description:
|
||
"بررسی کنید هوش مصنوعی چگونه استراتژی‌های بازاریابی و تعامل با مشتری را متحول می‌کند.",
|
||
date: "۱۰ سپتامبر ۲۲۵",
|
||
authors: ["Theo Balick", "Meschac Irung"],
|
||
},
|
||
{
|
||
category: "اتاق خبر",
|
||
title: "نوآوری‌های پیشرفته در تحلیل داده",
|
||
description:
|
||
"با جدیدترین روندهای تحلیل داده آشنا شوید و ببینید چگونه رشد کسب‌وکار را هدایت می‌کنند.",
|
||
date: "۵ اکتبر ۲۲۵",
|
||
authors: ["Shadcn", "Meschac Irung"],
|
||
},
|
||
{
|
||
category: "مهندسی",
|
||
title: "پیشرفت‌ها در امنیت سایبری",
|
||
description:
|
||
"فناوری‌های تازه‌ای را بشناسید که کسب‌وکارها را در برابر تهدیدهای دیجیتال محافظت می‌کنند.",
|
||
date: "۱۵ اکتبر ۲۲۵",
|
||
authors: ["Meschac Irung"],
|
||
},
|
||
{
|
||
category: "مطبوعات",
|
||
title: "نقش بلاک‌چین در مالی مدرن",
|
||
description: "بررسی کنید بلاک‌چین چگونه آینده خدمات مالی را متحول می‌کند.",
|
||
date: "۱ نوامبر ۲۲۵",
|
||
authors: ["Theo Balick"],
|
||
},
|
||
{
|
||
category: "شرکت",
|
||
title: "پایداری در فناوری: تمرکز رو به رشد",
|
||
description: "با رویکردها و راهکارهای توسعه پایدار در صنعت فناوری آشنا شوید.",
|
||
date: "۱۰ نوامبر ۲۲۵",
|
||
authors: ["Shadcn"],
|
||
},
|
||
{
|
||
category: "بازاریابی",
|
||
title: "بهره‌گیری از کلان‌داده برای موفقیت کسب‌وکار",
|
||
description:
|
||
"بررسی کنید تحلیل کلان‌داده چگونه فرصت‌های جدیدی برای رشد کسب‌وکار ایجاد می‌کند.",
|
||
date: "۵ دسامبر ۲۲۵",
|
||
authors: ["Bernard Ngandu", "Glodie Lukose"],
|
||
},
|
||
];
|
||
|
||
export function BlogBlocksPage() {
|
||
return (
|
||
<main role="main">
|
||
<div className="bg-background scheme-light selection:bg-foreground/10 selection:text-foreground dark:scheme-dark">
|
||
<section className="@container bg-background py-16 md:py-24">
|
||
<div className="mx-auto max-w-5xl px-6">
|
||
<div className="max-w-md">
|
||
<span className="text-muted-foreground">وبلاگ</span>
|
||
<h1 className="mt-4 text-xl font-semibold text-balance text-muted-foreground">
|
||
اخبار، تحلیل‌ها و مطالب بیشتر از{" "}
|
||
<strong className="font-semibold text-foreground">تیلارک کوارتز</strong>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div className="sticky top-0 z-10 my-12 bg-background">
|
||
<div className="mx-auto max-w-5xl px-6">
|
||
<div className="flex justify-between gap-4 border-b max-md:-mx-6">
|
||
<BlogBlocksCategoryTabs labels={categories} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mx-auto max-w-5xl px-6">
|
||
<div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
|
||
{cards.map((card) => (
|
||
<BlogBlocksCard
|
||
key={`${card.title}-${card.date}`}
|
||
category={card.category}
|
||
title={card.title}
|
||
description={card.description}
|
||
date={card.date}
|
||
authors={card.authors}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|