423 lines
16 KiB
TypeScript
423 lines
16 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { Sparkles } from "lucide-react";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
|
|||
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
const CATEGORIES = [
|
|||
|
|
{ value: "all", label: "همه" },
|
|||
|
|
{ value: "data", label: "داده" },
|
|||
|
|
{ value: "ai", label: "هوش مصنوعی" },
|
|||
|
|
{ value: "security", label: "امنیت" },
|
|||
|
|
{ value: "news", label: "اخبار" },
|
|||
|
|
] as const;
|
|||
|
|
|
|||
|
|
type BlogCategory = Exclude<(typeof CATEGORIES)[number]["value"], "all">;
|
|||
|
|
|
|||
|
|
const CATEGORY_LABELS: Record<BlogCategory, string> = {
|
|||
|
|
data: "داده",
|
|||
|
|
ai: "هوش مصنوعی",
|
|||
|
|
security: "امنیت",
|
|||
|
|
news: "اخبار",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface Blog {
|
|||
|
|
title: string;
|
|||
|
|
category: BlogCategory;
|
|||
|
|
date: string;
|
|||
|
|
author: string[];
|
|||
|
|
link: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const blogs: Blog[] = [
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"کاوش در عمق تکنیک‌ها و کاربردهای تحلیل داده مدرن",
|
|||
|
|
category: "data",
|
|||
|
|
date: "۱۴ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"مسیر در چشم‌انداز پیچیده هوش مصنوعی و یادگیری ماشین پیشرفته",
|
|||
|
|
category: "ai",
|
|||
|
|
date: "۱۳ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"تقویت دفاع دیجیتال: استراتژی‌های پیشرفته امنیت سایبری برای سازمان‌های مدرن",
|
|||
|
|
category: "security",
|
|||
|
|
date: "۱۲ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"درک و کاوش در معماری‌ها و مفاهیم رایانش توزیع‌شده",
|
|||
|
|
category: "data",
|
|||
|
|
date: "۱۱ آذر ۱۴۰۳",
|
|||
|
|
author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"پیشرفت‌های علمی اخیر در تحقیقات فناوری کوانتومی پیشرفته",
|
|||
|
|
category: "news",
|
|||
|
|
date: "۱۰ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"به‌کارگیری یادگیری ماشین در سناریوها و موارد واقعی کسب‌وکار",
|
|||
|
|
category: "ai",
|
|||
|
|
date: "۹ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"تدوین استراتژی‌های مؤثر برای تنظیم و بهینه‌سازی کارایی پایگاه داده",
|
|||
|
|
category: "data",
|
|||
|
|
date: "۸ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"پیاده‌سازی اصول امنیت Zero Trust در سراسر سازمان",
|
|||
|
|
category: "security",
|
|||
|
|
date: "۷ آذر ۱۴۰۳",
|
|||
|
|
author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"راهنمای جامع معماری‌ها و توسعه رایانش بدون سرور مدرن",
|
|||
|
|
category: "ai",
|
|||
|
|
date: "۶ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"اخبار صنعت: تازه‌ترین به‌روزرسانی‌ها در نوآوری‌های شبکه و فناوری‌های نوظهور",
|
|||
|
|
category: "news",
|
|||
|
|
date: "۵ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"تحول تحلیل کلان‌داده: از بینش‌های تاریخی تا مدل‌های پیش‌بینی",
|
|||
|
|
category: "data",
|
|||
|
|
date: "۴ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "روندهای نوظهور در پردازش زبان طبیعی و هوش مصنوعی گفتگومحور",
|
|||
|
|
category: "ai",
|
|||
|
|
date: "۳ آذر ۱۴۰۳",
|
|||
|
|
author: ["/block-media/shadcnblocks/block/avatar-3.webp"],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "امنیت بلاک‌چین: حفاظت از دارایی‌های دیجیتال در عصر مدرن",
|
|||
|
|
category: "security",
|
|||
|
|
date: "۲ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
"خبر فوری: پیشرفت‌های انقلابی در کاربردهای رایانش کوانتومی",
|
|||
|
|
category: "news",
|
|||
|
|
date: "۱ آذر ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "تحلیل بلادرنگ: پردازش و تجسم داده‌های جریانی",
|
|||
|
|
category: "data",
|
|||
|
|
date: "۳۰ آبان ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "معماری‌های یادگیری عمیق برای بینایی ماشین",
|
|||
|
|
category: "ai",
|
|||
|
|
date: "۲۹ آبان ۱۴۰۳",
|
|||
|
|
author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "تشخیص پیشرفته تهدید: استفاده از هوش مصنوعی در دفاع سایبری",
|
|||
|
|
category: "security",
|
|||
|
|
date: "۲۸ آبان ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "تازه‌ترین تحولات در فناوری‌های پردازش داده ابری‌بومی",
|
|||
|
|
category: "news",
|
|||
|
|
date: "۲۷ آبان ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "عملیات یادگیری ماشین: ساده‌سازی گردش‌کار توسعه هوش مصنوعی",
|
|||
|
|
category: "ai",
|
|||
|
|
date: "۲۶ آبان ۱۴۰۳",
|
|||
|
|
author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "مقررات حریم خصوصی داده: تضمین انطباق در عملیات جهانی",
|
|||
|
|
category: "security",
|
|||
|
|
date: "۲۵ آبان ۱۴۰۳",
|
|||
|
|
author: [
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|||
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|||
|
|
],
|
|||
|
|
link: "#",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
interface Resources2Props {
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Resources2 = ({ className }: Resources2Props) => {
|
|||
|
|
const [selectedCategory, setSelectedCategory] = useState("all");
|
|||
|
|
|
|||
|
|
const filteredBlogs = blogs.filter(
|
|||
|
|
(blog) =>
|
|||
|
|
selectedCategory === "all" || blog.category === selectedCategory,
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|||
|
|
<div className="container">
|
|||
|
|
<h1 className="text-start text-xl font-medium sm:text-2xll md:text-2xll">
|
|||
|
|
منابع و گزارش‌های تخصصی
|
|||
|
|
</h1>
|
|||
|
|
<p className="mt-4 text-start text-lg text-muted-foreground">
|
|||
|
|
دیدگاه‌ها و تحلیل‌های ما درباره موضوعات کلیدی را کشف کنید.
|
|||
|
|
</p>
|
|||
|
|
<div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-12">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5 lg:col-span-7 lg:row-span-2"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-ba454dc72896-unsplash.jpg"
|
|||
|
|
alt="شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن"
|
|||
|
|
className="size-full max-h-[550px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
|
|||
|
|
<div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
|
|||
|
|
<Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
|
|||
|
|
<Sparkles className="size-4" />
|
|||
|
|
مطلب ویژه
|
|||
|
|
</Badge>
|
|||
|
|
<div className="flex flex-col gap-4">
|
|||
|
|
<h2 className="text-xl font-medium text-background">
|
|||
|
|
شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن
|
|||
|
|
</h2>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<time className="text-sm text-background/80">
|
|||
|
|
۱۴ آذر ۱۴۰۳
|
|||
|
|
</time>
|
|||
|
|
<div className="flex items-center -space-x-2">
|
|||
|
|
<Avatar className="size-6 border border-primary">
|
|||
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
|||
|
|
</Avatar>
|
|||
|
|
<Avatar className="size-6 border border-primary">
|
|||
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
|
|||
|
|
</Avatar>
|
|||
|
|
<Avatar className="size-6 border border-primary">
|
|||
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
|
|||
|
|
</Avatar>
|
|||
|
|
<span className="z-10 grid size-6 place-items-center rounded-full border border-primary bg-primary/90 text-xs text-background backdrop-blur-sm">
|
|||
|
|
+۲
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
<div className="flex flex-col gap-4 lg:col-span-5 lg:row-span-2 lg:flex-col">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg"
|
|||
|
|
alt="ساده‌سازی عملیات کسب‌وکار با خودکارسازی گردش کار"
|
|||
|
|
className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
|
|||
|
|
<div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
|
|||
|
|
<Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
|
|||
|
|
جدیدترین
|
|||
|
|
</Badge>
|
|||
|
|
<div className="flex flex-col gap-4">
|
|||
|
|
<h2 className="text-xl font-medium text-background">
|
|||
|
|
ساده‌سازی عملیات کسب‌وکار با خودکارسازی مؤثر گردش کار
|
|||
|
|
</h2>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<time className="text-sm text-background/80">
|
|||
|
|
۲۳ بهمن ۱۴۲
|
|||
|
|
</time>
|
|||
|
|
<Avatar className="size-6 border border-primary">
|
|||
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
|||
|
|
</Avatar>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-zr8IvMz0OWk-unsplash.jpg"
|
|||
|
|
alt="بهبود چشمگیر کارایی جستجو"
|
|||
|
|
className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
|
|||
|
|
<div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
|
|||
|
|
<Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
|
|||
|
|
جدیدترین
|
|||
|
|
</Badge>
|
|||
|
|
<div className="flex flex-col gap-4">
|
|||
|
|
<h2 className="text-xl font-medium text-background">
|
|||
|
|
افزایش کارایی کلی: چگونه کارایی جستجو را به‌طور چشمگیر
|
|||
|
|
بهبود دادیم
|
|||
|
|
</h2>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<time className="text-sm text-background/80">
|
|||
|
|
۱۲ فروردین ۱۴۰۴
|
|||
|
|
</time>
|
|||
|
|
<Avatar className="size-6 border border-primary">
|
|||
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
|||
|
|
</Avatar>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-24">
|
|||
|
|
<h2 className="mb-6 text-start text-xl font-medium md:text-3xl">
|
|||
|
|
آخرین به‌روزرسانی‌ها
|
|||
|
|
</h2>
|
|||
|
|
<Tabs
|
|||
|
|
defaultValue="all"
|
|||
|
|
className="border-b border-border"
|
|||
|
|
onValueChange={setSelectedCategory}
|
|||
|
|
>
|
|||
|
|
<TabsList className="flex h-auto gap-2 bg-background p-0">
|
|||
|
|
{CATEGORIES.map((category) => (
|
|||
|
|
<TabsTrigger
|
|||
|
|
key={category.value}
|
|||
|
|
value={category.value}
|
|||
|
|
className="group relative py-2.5 data-[state=active]:!shadow-none"
|
|||
|
|
>
|
|||
|
|
{category.label}
|
|||
|
|
<span className="absolute -bottom-px group-data-[state=active]:h-px group-data-[state=active]:w-full group-data-[state=active]:bg-primary" />
|
|||
|
|
</TabsTrigger>
|
|||
|
|
))}
|
|||
|
|
</TabsList>
|
|||
|
|
</Tabs>
|
|||
|
|
<div className="mt-4">
|
|||
|
|
{filteredBlogs.map((blog, idx) => (
|
|||
|
|
<a
|
|||
|
|
key={idx}
|
|||
|
|
href={blog.link}
|
|||
|
|
className="flex flex-col justify-between gap-4 border-b border-border py-6 text-start md:flex-row"
|
|||
|
|
>
|
|||
|
|
<h3 className="font-medium md:line-clamp-1">{blog.title}</h3>
|
|||
|
|
<div className="flex w-full shrink-0 grid-cols-3 justify-between gap-2 md:grid md:max-w-80">
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
{CATEGORY_LABELS[blog.category]}
|
|||
|
|
</p>
|
|||
|
|
<time className="text-sm text-muted-foreground">
|
|||
|
|
{blog.date}
|
|||
|
|
</time>
|
|||
|
|
<div className="hidden items-center justify-end -space-x-2 md:flex">
|
|||
|
|
{blog.author.map((author, authorIdx) => (
|
|||
|
|
<Avatar
|
|||
|
|
key={authorIdx}
|
|||
|
|
className="size-6 border border-border"
|
|||
|
|
>
|
|||
|
|
<AvatarImage src={author} />
|
|||
|
|
</Avatar>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export { Resources2 };
|