reui-blocks/blocks/feature228.tsx

import { Lightbulb, ShieldCheck } from "lucide-react";
import { FaApple } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";

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

interface Feature228Props {
  className?: string;
}

const Feature228 = ({ className }: Feature228Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-0">
          <div className="text-start lg:pe-16">
            <h2 className="mb-5 text-2xll text-balance md:text-2xll md:leading-20">
              با هوش مصنوعی سریع‌تر تصمیم بگیرید
              <br />
              کارهای تکراری را به AI بسپارید
            </h2>
            <p className="text-lg text-pretty text-muted-foreground">
              مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
            </p>
            <div className="mt-12 grid gap-8 sm:grid-cols-2 sm:gap-10">
              <div>
                <span className="mb-4 grid size-12 place-items-center rounded-lg bg-muted-foreground/10">
                  <Lightbulb />
                </span>
                <h3 className="mb-2.5 text-sm font-semibold">تحلیل احساس</h3>
                <p className="text-sm text-pretty text-muted-foreground">
                  دستیار گفتگو
                </p>
              </div>
              <div>
                <span className="mb-4 grid size-12 place-items-center rounded-lg bg-muted-foreground/10">
                  <ShieldCheck />
                </span>
                <h3 className="mb-2.5 text-sm font-semibold">خلاصه‌سازی هوشمند</h3>
                <p className="text-sm text-pretty text-muted-foreground">
                  پیشنهاد پاسخ
                </p>
              </div>
              <div>
                <div className="mb-4 flex gap-4">
                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-primary">
                    <FaApple className="size-6 text-background" />
                  </span>
                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-background">
                    <FcGoogle className="size-6" />
                  </span>
                </div>
                <h3 className="mb-2.5 text-sm font-semibold">
                  طبقه‌بندی خودکار
                </h3>
                <p className="text-sm text-pretty text-muted-foreground">
                  پیش‌بینی ریزش
                </p>
              </div>
              <div>
                <div className="mb-4 flex gap-4">
                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-background">
                    <img
                      src="/block-media/shadcnblocks/block/logos/x.svg"
                      alt="دستیار هوش مصنوعی"
                      className="size-6"
                    />
                  </span>
                  <span className="grid size-12 place-items-center rounded-lg border border-border bg-background">
                    <img
                      src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
                      alt="پیشنهادهای هوشمند"
                      className="size-6"
                    />
                  </span>
                </div>
                <h3 className="mb-2.5 text-sm font-semibold">جستجوی معنایی</h3>
                <p className="text-sm text-pretty text-muted-foreground">
                  تولید محتوا
                </p>
              </div>
            </div>
          </div>
          <div className="flex h-full flex-col gap-6 sm:max-h-[440px] sm:flex-row xl:max-h-[550px]">
            <div className="flex flex-col gap-6">
              <img
                src="/block-media/shadcnblocks/block/placeholder-2.svg"
                alt="تحلیل با AI"
                className="aspect-video rounded-2xl border border-border object-cover"
              />
              <img
                src="/block-media/shadcnblocks/block/placeholder-3.svg"
                alt="دستیار هوش مصنوعی"
                className="ms-auto aspect-video flex-1 rounded-2xl border border-border object-cover sm:aspect-auto sm:w-2/3"
              />
            </div>
            <div className="min-h-[580px] rounded-4xl border border-border p-2 sm:min-h-0 sm:max-w-56 sm:shrink-0 xl:max-w-72">
              <div className="flex h-full flex-col rounded-3xl border border-border bg-background px-1.5 pt-3 pb-1.5">
                <div className="mx-auto mb-3 h-4 w-16 rounded-full bg-muted-foreground/15 xl:h-5 xl:w-20" />
                <div className="flex-1">
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt="پیشنهادهای هوشمند"
                    className="h-full rounded-2xl object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature228 };