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>
|
|||
|
|
);
|
|||
|
|
}
|