reui-blocks/blocks/feature221.tsx

import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface FeatureItem {
  id: string;
  title: string;
  description: string;
  link: string;
  gradient: string;
}

const FEATURES: FeatureItem[] = [
  {
    id: "meeting-assistant",
    title: "تحلیل باخت معامله",
    description:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
    link: "#",
    gradient: "bg-linear-to-r from-[#00C9FF] to-[#92FE9D]",
  },
  {
    id: "cdn-optimization",
    title: "هدف‌گذاری تیمی",
    description:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
    link: "#",
    gradient: "bg-linear-to-r from-[#f8ff00] to-[#3ad59f]",
  },
  {
    id: "user-analytics",
    title: "اتوماسیون پیگیری",
    description:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
    link: "#",
    gradient: "bg-linear-to-r from-[#d53369] to-[#daae51]",
  },
  {
    id: "data-cleaning",
    title: "داشبورد مدیر فروش",
    description:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
    link: "#",
    gradient: "bg-linear-to-r from-[#FC466B] to-[#3F5EFB]",
  },
];

interface Feature221Props {
  className?: string;
}

const Feature221 = ({ className }: Feature221Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-32",
        className,
      )}
    >
      <div className="container">
        <div className="flex w-full flex-col items-start justify-between gap-4 pb-16 lg:flex-row lg:items-end">
          <div className="flex w-full max-w-lg flex-1 flex-col items-start gap-5 text-start">
            <h2 className="text-[2rem] leading-none font-bold tracking-tight text-balance md:text-[2.75rem] lg:text-2xll">
              پیش‌بینی درآمد را دقیق‌تر کنید
            </h2>
            <p className="w-full max-w-[30rem] text-[1.15rem] leading-normal font-medium text-pretty text-muted-foreground sm:text-xl">
              با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
            </p>
          </div>
          <div>
            <Button className="gap-2 rounded-full">
              چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
              <ArrowRight className="size-4 rtl:rotate-180" />
            </Button>
          </div>
        </div>
        <div className="grid w-full grid-cols-1 grid-rows-[auto] gap-10 md:grid-cols-2">
          {FEATURES.map((feature) => (
            <Card
              key={feature.id}
              className="flex w-full flex-col justify-between gap-10 rounded-lg border bg-background p-5"
            >
              <CardHeader className="flex w-full flex-col justify-between gap-4 p-0 lg:flex-row lg:items-center">
                <CardTitle className="flex w-fit items-center justify-start gap-2.5">
                  <h3 className="text-[1.75rem] leading-none font-bold tracking-tight text-balance">
                    {feature.title}
                  </h3>
                </CardTitle>
                <Badge className="bg-muted">
                  <p className="text-sm text-foreground">الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.</p>
                </Badge>
              </CardHeader>
              <CardContent className="p-0 text-start">
                <p className="max-w-80 text-base leading-[1.4] font-medium text-pretty text-muted-foreground">
                  {feature.description}
                </p>
              </CardContent>
              <CardFooter className="flex w-full items-end justify-between gap-5 p-0 lg:flex-row">
                <div className="flex-1">
                  <Button size="sm" className="rounded-full">
                    <a
                      href={feature.link}
                      className="flex items-center gap-2"
                    >
                      بیشتر بدانید
                      <ArrowRight className="size-4 rtl:rotate-180" />
                    </a>
                  </Button>
                </div>
                <div className="size-8 shrink-0">
                  <div
                    className={cn(
                      "size-full rounded-full",
                      feature.gradient,
                    )}
                  />
                </div>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature221 };