reui-blocks/blocks/case-study1.tsx

import { GitBranch, Lightbulb } from "lucide-react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const STATS = [
  {
    value: "۱۹٪",
    label: "افزایش نرخ مشارکت کاربران",
  },
  {
    value: "۲۸٪",
    label: "رشد نرخ نگهداشت مشتریان",
  },
  {
    value: "۷۲٪",
    label: "نرخ رضایت کاربران و مشتریان",
  },
  {
    value: "بیش از ۸۵٪",
    label: "بازخورد مثبت از کاربران",
  },
];

interface CaseStudy1Props {
  className?: string;
}

const CaseStudy1 = ({ className }: CaseStudy1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-7xl">
          <Breadcrumb className="mb-6 lg:mb-10">
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="/">خانه</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink href="#">گزارش‌های موفقیت</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>پایش هوش مصنوعی</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <div className="relative flex-col gap-10 lg:flex lg:flex-row lg:justify-between">
            <div className="lg:max-w-[692px]">
              <div className="max lg:col-span-2">
                <div>
                  <h1 className="text-start text-3xl font-extrabold text-pretty">
                    گزارش موفقیت: افزایش ۱۲۵٪ پایداری زیرساخت با پایش هوشمند
                  </h1>
                  <p className="mt-2 text-start text-lg text-muted-foreground">
                    یک شرکت فناوری بزرگ با چالش‌های مکرر در پایداری زیرساخت
                    مواجه بود. با استقرار سامانه پایش مبتنی بر هوش مصنوعی، زمان
                    تشخیص و رفع خطا به‌شکل چشمگیری کاهش یافت و پایداری سرویس
                    به‌طور قابل‌توجهی بهبود یافت.
                  </p>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt="داشبورد پایش هوش مصنوعی و تحلیل زیرساخت"
                    className="my-8 aspect-video w-full rounded-lg object-cover"
                  />
                  <div className="mb-8 grid grid-cols-2 gap-5 lg:grid-cols-4">
                    {STATS.map((stat) => (
                      <div
                        key={stat.label}
                        className="flex flex-col gap-2 text-start"
                      >
                        <p className="text-xl font-semibold sm:text-2xll">
                          {stat.value}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {stat.label}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="prose mb-8 max-w-full text-start lg:max-w-prose dark:prose-invert">
                  <h2>نحوه عملکرد سامانه پایش</h2>
                  <p>
                    سامانه با جمع‌آوری داده‌های بلادرنگ از سرورها، پایگاه‌های
                    داده و سرویس‌های ابری، الگوهای رفتاری عادی را یاد می‌گیرد.
                    هر انحراف از این الگو به‌عنوان ناهنجاری شناسایی و به تیم
                    عملیات گزارش می‌شود.
                  </p>
                  <Alert>
                    <Lightbulb className="h-4 w-4" />
                    <AlertTitle>نکته کلیدی</AlertTitle>
                    <AlertDescription>
                      الگوریتم‌های یادگیری ماشین ناهنجاری‌ها را پیش از تأثیر
                      بر کاربران شناسایی می‌کنند و تیم عملیات را به‌موقع مطلع
                      می‌سازند.
                    </AlertDescription>
                  </Alert>

                  <h2>چالش‌های پیش از استقرار</h2>
                  <p>
                    پیش از استقرار، تیم عملیات به پایش دستی و هشدارهای پراکنده
                    متکی بود. زمان متوسط تشخیص خطا بیش از چهار ساعت بود و هر
                    اختلال، تجربه کاربران را به‌شکل جدی تحت تأثیر قرار می‌داد.
                  </p>
                  <div>
                    <table>
                      <thead>
                        <tr>
                          <th>پایداری زیرساخت</th>
                          <th>تجربه کاربر</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>ناپایدار</td>
                          <td>ضعیف</td>
                        </tr>
                        <tr className="m-0 border-t p-0 even:bg-muted">
                          <td>در حال بهبود</td>
                          <td>متوسط</td>
                        </tr>
                        <tr className="m-0 border-t p-0 even:bg-muted">
                          <td>پایدار</td>
                          <td>عالی</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <p>
                    پس از سه ماه استفاده از سامانه، میانگین زمان تشخیص خطا به
                    کمتر از دوازده دقیقه رسید و تعداد قطعی‌های سرویس ۶۵٪ کاهش
                    یافت.
                  </p>

                  <h2>راهکار پیاده‌سازی شده</h2>
                  <p>
                    تیم فنی پس از بررسی دقیق،{" "}
                    <a href="#">معماری پایش چندلایه</a> را طراحی و در سراسر
                    زیرساخت استقرار داد.
                  </p>
                  <blockquote>
                    «پایش هوشمند نه یک هزینه اضافی، بلکه سرمایه‌گذاری ضروری
                    برای هر کسب‌وکار دیجیتال است.»
                  </blockquote>
                  <p>
                    سامانه بر سه سطح هشدار طراحی شد تا تیم بتواند بر اساس
                    شدت مشکل، اولویت‌بندی دقیق انجام دهد:
                  </p>
                  <ul>
                    <li>سطح ۱  انحرافات جزئی منابع: پاسخ خودکار</li>
                    <li>سطح ۲  اختلال سرویس: اعلان فوری به تیم</li>
                    <li>سطح ۳  خرابی بحرانی: بازیابی و مقیاس‌دهی خودکار</li>
                  </ul>
                  <p>
                    نتیجه، زیرساختی مقاوم‌تر، تیم عملیات آرام‌تر و کاربرانی
                    بود که دیگر با قطعی‌های غیرمنتظره مواجه نمی‌شدند.
                  </p>
                </div>
              </div>
            </div>
            <div className="h-fit text-start lg:sticky lg:top-8 lg:max-w-80">
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
                alt="لوگوی شرکت"
                className="mb-8 w-36"
              />
              <p className="mb-1.5 text-sm font-semibold">نمای کلی</p>
              <p className="mb-5 text-sm text-muted-foreground">
                این شرکت فناوری با پیاده‌سازی راهکار پایش هوشمند، عملیات کسب‌وکار خود
                را بهبود بخشید؛ کارایی افزایش یافت، تجربه مشتری ارتقا پیدا کرد و
                هزینه‌های عملیاتی به‌طور قابل‌توجهی کاهش یافت.
              </p>
              <p className="mb-1.5 text-sm font-semibold">حوزه</p>
              <p className="mb-5 text-sm text-muted-foreground">فناوری</p>
              <p className="mb-1.5 text-sm font-semibold">راهکار</p>
              <Button size="sm" variant="outline">
                <GitBranch className="opacity-60" />
                سازمانی
              </Button>
              <Separator className="my-5" />
              <p className="mb-3 text-sm font-semibold">
                می‌خواهید بیشتر بدانید؟
              </p>
              <Button size="sm">تماس با ما</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { CaseStudy1 };