reui-blocks/blocks/timeline9.tsx

import * as React from "react";

import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type TimelineEntry = {
  date: string;
  title: string;
  content: string;
};

const timelineData: TimelineEntry[] = [
  {
    date: "۱۹۵۶",
    title: "تولد هوش مصنوعی",
    content:
      "اصطلاح «هوش مصنوعی» در کنفرانس دارتموث ابداع شد و آغاز رسمی این حوزه به‌عنوان یک رشته علمی را رقم زد. جان مک‌کارتی، ماروین مینسکی، نیتانیل رچستر و کلود شانون این رویداد تأثیرگذار را سازماندهی کردند و زمینه را برای دهه‌ها پژوهش و توسعه فراهم ساختند.",
  },
  {
    date: "۱۹۶۶–۱۹۷۳",
    title: "امیدواری اولیه و اولین زمستان هوش مصنوعی",
    content:
      "سال‌های اولیه با خوش‌بینی قابل‌توجهی همراه بود؛ برنامه‌هایی مثل ELIZA (اولین چت‌بات) و SHRDLU (سیستم درک زبان طبیعی) ساخته شد. اما در اوایل دهه ۱۹۷۰ بودجه‌ها کاهش یافت، چون پژوهشگران با محدودیت‌های توان پردازشی اولیه و پیچیدگی هوش انسان روبه‌رو شدند.",
  },
  {
    date: "۱۹۸۰–۱۹۸۷",
    title: "سیستم‌های خبره و احیا",
    content:
      "هوش مصنوعی با توسعه سیستم‌های خبره مثل MYCIN (برای تشخیص پزشکی) و DENDRAL (برای تحلیل شیمیایی) دوباره رونق گرفت. این سیستم‌ها با رویکرد قاعده‌محور، تصمیم‌گیری انسانی را در حوزه‌های خاص شبیه‌سازی می‌کردند و زمینه را برای علاقه و بودجه تازه در پژوهش هوش مصنوعی فراهم کردند.",
  },
  {
    date: "۱۹۹۷",
    title: "پیروزی Deep Blue بر قهرمان شطرنج",
    content:
      "Deep Blue آی‌بی‌ام اولین سیستم رایانه‌ای شد که در مسابقه شش‌بازی، قهرمان وقت جهان گاری کاسپاروف را شکست داد. این نقطه عطف پتانسیل هوش مصنوعی برای پیشی گرفتن از انسان در بازی‌های راهبردی پیچیده را نشان داد و توجه عموم را به خود جلب کرد.",
  },
];

interface Timeline9Props {
  className?: string;
}

const Timeline9 = ({ className }: Timeline9Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-2xll">
          تاریخچه هوش مصنوعی
        </h1>
        <div className="relative mx-auto max-w-4xl">
          <Separator
            orientation="vertical"
            className="absolute top-4 start-2 bg-muted"
          />
          {timelineData.map((entry, index) => (
            <div key={index} className="relative mb-10 ps-8">
              <div className="absolute top-3.5 start-0 flex size-4 items-center justify-center rounded-full bg-foreground" />
              <h4 className="rounded-xl py-2 text-start text-xl font-bold tracking-tight xl:mb-4 xl:px-3">
                {entry.title}
              </h4>

              <h5 className="text-md top-3 -start-34 rounded-xl tracking-tight text-muted-foreground xl:absolute">
                {entry.date}
              </h5>

              <Card className="my-5 border-none shadow-none">
                <CardContent className="px-0 xl:px-2">
                  <div
                    className="prose text-start text-foreground dark:prose-invert"
                    dangerouslySetInnerHTML={{ __html: entry.content }}
                  />
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Timeline9 };