reui-blocks/blocks/blog5.tsx

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const posts = [
  {
    id: "post-1",
    title: "آینده توسعه وب: گام بعدی چیست؟",
    summary:
      "آخرین روندهای توسعه وب را بررسی کنید؛ از ابزارهای مبتنی بر هوش مصنوعی تا فریم‌ورک‌هایی که نحوه ساخت وب را دگرگون می‌کنند. بدانید توسعه‌دهندگان برای جلو ماندن به چه چیزهایی نیاز دارند.",
    label: "توسعه وب",
    author: "سارا احمدی",
    published: "۲۵ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    avatarFallback: "سا",
  },
  {
    id: "post-2",
    title: "ساخت اتصال‌های مقیاس‌پذیر با الگوهای معماری مدرن",
    summary:
      "با میکروسرویس‌ها، GraphQL و معماری‌های رویدادمحور آشنا شوید؛ همان رویکردهایی که موفق‌ترین اپلیکیشن‌های امروز را پشتیبانی می‌کنند. نکات عملی برای ساخت APIهای پایدار.",
    label: "سمت سرور",
    author: "محمد رضایی",
    published: "۲۲ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    avatarFallback: "مر",
  },
  {
    id: "post-3",
    title: "سیستم‌های طراحی: یکپارچگی در مقیاس بزرگ",
    summary:
      "ببینید شرکت‌های پیشرو چگونه سیستم‌های طراحی را پیاده می‌کنند تا یکنواختی بصری در محصولات حفظ شود و در عین حال توسعه و نوآوری سریع‌تر پیش برود.",
    label: "طراحی",
    author: "اما حسینی",
    published: "۲۰ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    avatarFallback: "اح",
  },
  {
    id: "post-4",
    title: "یادگیری ماشین در محیط عملیاتی: بهترین روش‌های استقرار",
    summary:
      "از نسخه‌بندی مدل تا پایش و مقیاس‌پذیری؛ اصول ضروری استقرار مدل‌های یادگیری ماشین در محیط‌های واقعی را بیاموزید.",
    label: "یادگیری ماشین",
    author: "علی کریمی",
    published: "۱۸ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
    avatarFallback: "عک",
  },
  {
    id: "post-5",
    title: "رشد محاسبات لبه: تحول در معماری نرم‌افزار",
    summary:
      "ببینید محاسبات لبه چگونه کارایی اپلیکیشن و تجربه کاربری را متحول می‌کند و استراتژی‌های پیاده‌سازی معماری لبه‌محور را بیاموزید.",
    label: "رایانش ابری",
    author: "رضا پاک",
    published: "۱۵ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-5.svg",
    avatarFallback: "رپ",
  },
  {
    id: "post-6",
    title: "اصول امنیت سایبری برای اپلیکیشن‌های مدرن",
    summary:
      "روش‌های امنیتی ضروری برای هر توسعه‌دهنده؛ از احراز هویت و مجوزدهی تا رمزنگاری داده و اصول کدنویسی امن.",
    label: "امنیت",
    author: "لیلا محمدی",
    published: "۱۳ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-6.svg",
    avatarFallback: "لم",
  },
  {
    id: "post-7",
    title: "بهینه‌سازی کارایی: تکنیک‌هایی برای وب‌اپلیکیشن‌های سریع‌تر",
    summary:
      "تکنیک‌های پیشرفته بهینه‌سازی کارایی وب؛ از code splitting و lazy loading تا استراتژی‌های مدرن کش.",
    label: "کارایی",
    author: "امیر ویلسون",
    published: "۱۱ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    avatarFallback: "او",
  },
  {
    id: "post-8",
    title: "فرهنگ DevOps: خطوط تحویل نرم‌افزار قوی‌تر",
    summary:
      "چگونه فرهنگ DevOps را در سازمان تقویت کنید و خطوط CI/CD بسازید که توسعه را سرعت می‌دهد و کیفیت را حفظ می‌کند.",
    label: "DevOps",
    author: "مریم گارسی",
    published: "۹ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    avatarFallback: "مگ",
  },
  {
    id: "post-9",
    title: "توسعه اپ موبایل: بومی یا چندسکویی؟",
    summary:
      "رویکردهای توسعه بومی و چندسکویی را مقایسه کنید و مزایا و معایب کارایی، سرعت توسعه و تجربه کاربری را بررسی کنید.",
    label: "توسعه موبایل",
    author: "رضا جانسون",
    published: "۷ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    avatarFallback: "رج",
  },
];

interface Blog5Props {
  className?: string;
}

const Blog5 = ({ className }: Blog5Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-8 md:mb-14 lg:mb-16">
          <div className="flex items-start justify-between gap-8">
            <div>
              <h2 className="mb-4 w-full text-start text-xl font-medium md:mb-5 md:text-2xll lg:mb-6 lg:text-2xll">
                وبلاگ
              </h2>
            </div>
          </div>
          <p className="text-start text-muted-foreground">
            آموزش‌ها، تحلیل‌ها و تازه‌ترین مطالب درباره توسعه نرم‌افزار مدرن
                                </p>
        </div>
        <div className="grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3">
          {posts.map((post) => (
            <a key={post.id} href={post.href} className="group flex flex-col">
              <div className="mb-4 flex overflow-clip rounded-xl md:mb-5">
                <div className="transition-opacity duration-300 group-hover:opacity-80">
                  <img
                    src={post.image}
                    alt={post.title}
                    className="aspect-3/2 h-full w-full object-cover object-center"
                  />
                </div>
              </div>

              <div>
                <Badge variant="secondary">{post.label}</Badge>
              </div>
              <div className="mb-2 line-clamp-3 pt-4 text-start text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-3xl">
                {post.title}
              </div>
              <div className="mb-4 line-clamp-2 text-start text-sm text-muted-foreground md:mb-5 md:text-base">
                {post.summary}
              </div>
              <div className="flex items-center gap-2">
                <Avatar className="size-12">
                  <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                  <AvatarFallback>{post.avatarFallback}</AvatarFallback>
                </Avatar>
                <div className="flex flex-col gap-px text-start">
                  <span className="text-xs font-medium">{post.author}</span>
                  <span className="text-xs text-muted-foreground">
                    {post.published}
                  </span>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div className="mt-8 flex flex-col items-center py-2 md:hidden">
          <Button className="w-full sm:w-fit">مشاهده همه مطالب</Button>
        </div>
      </div>
    </section>
  );
};

export { Blog5 };