121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DataItem {
|
|
title: string;
|
|
content: string;
|
|
}
|
|
|
|
const DATA: DataItem[] = [
|
|
{
|
|
title: "رایانش ابری",
|
|
content:
|
|
"بررسی الگوهای مقرون‌به‌صرفه مهاجرت به ابر و مدیریت چندابری",
|
|
},
|
|
{
|
|
title: "امنیت سایبری",
|
|
content:
|
|
"پیاده‌سازی چارچوب‌های امنیتی تطبیقی برای نیروهای دورکار",
|
|
},
|
|
{
|
|
title: "اینترنت اشیا",
|
|
content: "کاهش تأخیر در شهرهای هوشمند با رایانش مه",
|
|
},
|
|
{
|
|
title: "بلاک‌چین",
|
|
content:
|
|
"کاربردهای سازمانی فناوری دفتر کل توزیع‌شده در زنجیره تأمین",
|
|
},
|
|
];
|
|
|
|
interface Blog22Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Blog22 = ({ className }: Blog22Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("dark relative bg-background py-32", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="mb-8 text-start">
|
|
<h1 className="text-3xl font-bold text-foreground md:text-xl lg:text-2xll">
|
|
بینش‌های فناوری
|
|
</h1>
|
|
|
|
<div className="mt-4 flex flex-wrap items-center justify-between gap-4">
|
|
<span className="mt-2 block text-sm text-muted-foreground md:text-base">
|
|
با فناوری‌های پیشرو که آینده دنیای دیجیتال را شکل می‌دهند آشنا شوید.
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
className="rounded-full border-foreground text-foreground"
|
|
>
|
|
ادامه مطلب
|
|
<ArrowRight className="h-4 w-4 md:h-6 md:w-6 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12">
|
|
<div className="mb-4 text-start">
|
|
<img
|
|
className="w-full rounded-lg object-cover"
|
|
src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
|
|
alt="انقلاب هوش مصنوعی"
|
|
/>
|
|
<div className="mt-4">
|
|
<h2 className="text-xl font-bold text-foreground md:text-3xl lg:text-xl">
|
|
هوش مصنوعی نسل بعد: تحول عملیات کسب‌وکار
|
|
</h2>
|
|
</div>
|
|
<div className="mt-6 flex items-center gap-3 md:mt-8 md:gap-4">
|
|
<Avatar className="h-8 w-8 rounded-md md:h-12 md:w-12">
|
|
<AvatarImage
|
|
src="/block-media/shadcnblocks/block/avatar-1.webp"
|
|
alt="سارا احمدی"
|
|
/>
|
|
</Avatar>
|
|
<span className="text-sm md:text-base">
|
|
<span className="block text-foreground">سارا احمدی</span>
|
|
<span className="text-xs text-muted-foreground md:text-sm">
|
|
پژوهشگر هوش مصنوعی
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6 text-foreground md:space-y-8">
|
|
{DATA.map((post) => (
|
|
<div
|
|
key={post.title}
|
|
className="flex items-start gap-4 border-b pb-6 text-start last:border-b-0"
|
|
>
|
|
<div className="w-1/4 shrink-0 md:w-1/5">
|
|
<img
|
|
className="rounded-md"
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-8-wide.svg"
|
|
alt={post.title}
|
|
/>
|
|
</div>
|
|
<div className="w-3/4 md:w-4/5">
|
|
<p className="text-sm leading-relaxed md:text-base">
|
|
{post.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blog22 };
|