reui-blocks/blocks/feature173.tsx

import { Bell, Bug, Sparkles } from "lucide-react";

import { cn } from "@/lib/utils";

const ITEMS = [
  {
    value: "فرایند هوشمند",
    label: "اتوماسیون",
    icon: Bug,
  },
  {
    value: "گردش‌کار",
    label: "صرفه‌جویی زمان",
    icon: Bell,
  },
  {
    value: "فرایند هوشمند",
    label: "اتوماسیون",
    icon: Sparkles,
  },
];

interface Feature173Props {
  className?: string;
}

const Feature173 = ({ className }: Feature173Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex gap-3 text-start max-md:flex-col">
          <h2 className="flex-1 text-3xl leading-tight font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
            فرایندها را استاندارد و سریع کنید
          </h2>
          <p className="flex-1 self-end text-lg font-medium text-pretty text-muted-foreground">
            قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
          </p>
        </div>

        <div className="mt-8 grid gap-5 sm:grid-cols-2 md:mt-12 lg:mt-20 lg:grid-cols-3">
          {ITEMS.map((metric) => (
            <div
              key={metric.label}
              className="relative flex aspect-[3.5/2.6] flex-col justify-between overflow-hidden rounded-[24px] bg-linear-to-b from-muted to-[#D6E3DF] md:aspect-[3.8/5] dark:to-[#2A3633]"
            >
              <div className="p-8 pb-2">
                <metric.icon className="size-10 fill-primary" />
              </div>
              <div className="p-6 text-start">
                <div className="text-2xll font-semibold tracking-tight">
                  {metric.value}
                </div>
                <div className="text-xl font-semibold tracking-tight">
                  {metric.label}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-6 text-start text-sm text-muted-foreground">
          فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
        </div>
      </div>
    </section>
  );
};

export { Feature173 };