reui-blocks/blocks/feature214.tsx

"use client";

import type { LucideIcon } from "lucide-react";
import {
  AudioLines,
  Captions,
  Eye,
  Languages,
  ListMinus,
  ScanFace,
  TextQuote,
} from "lucide-react";

import {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface CarouselCardItem {
  id: string;
  image: string;
  imageAlt: string;
  Icon: LucideIcon;
  title: string;
  link: string;
  summary: string;
}

const CARDS: CarouselCardItem[] = [
  {
    id: "code-analysis",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
    Icon: Eye,
    title: "پروفایل ۳۶۰ درجه مشتری",
    link: "#",
    summary:
      "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.",
  },
  {
    id: "multi-language",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
    Icon: Languages,
    title: "اتوماسیون مراحل فروش",
    link: "#",
    summary:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
  },
  {
    id: "refactoring",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
    Icon: AudioLines,
    title: "پیش‌بینی درآمد",
    link: "#",
    summary:
      "از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.",
  },
  {
    id: "code-cleanup",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
    Icon: ListMinus,
    title: "یادآور پیگیری هوشمند",
    link: "#",
    summary:
      "پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.",
  },
  {
    id: "security-scanner",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
    Icon: ScanFace,
    title: "تقسیم خودکار سرنخ",
    link: "#",
    summary:
      "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.",
  },
  {
    id: "documentation",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
    Icon: TextQuote,
    title: "گزارش عملکرد فروش",
    link: "#",
    summary:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
  },
  {
    id: "code-suggestions",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
    Icon: Captions,
    title: "مدیریت قرارداد",
    link: "#",
    summary:
      "از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.",
  },
];

const CarouselCard = ({
  image,
  imageAlt,
  Icon,
  title,
  link,
  summary,
}: CarouselCardItem) => {
  return (
    <a href={link} className="group block h-full min-w-0">
      <Card className="h-full min-w-0 gap-0 overflow-hidden rounded-xl border-0 bg-muted p-4 py-4! shadow-none ring-0 transition-all group-hover:shadow-md sm:p-6 lg:min-h-[39.75rem] lg:p-8">
        <CardContent className="min-w-0 p-0">
          <div className="relative min-w-0">
            <div className="h-48 w-full min-w-0 overflow-hidden rounded-lg sm:h-56 lg:h-[20rem]">
              <img
                src={image}
                alt={imageAlt}
                className="block size-full max-w-full object-cover object-center"
              />
            </div>
            <div className="absolute -start-1 -top-2 flex size-8 rounded-lg bg-primary sm:-start-2 sm:-top-3 sm:size-9 sm:rounded-[0.5rem]">
              <Icon className="m-auto size-4 stroke-primary-foreground" />
            </div>
          </div>
          <div className="mt-6 flex min-w-0 flex-col gap-2 text-start sm:mt-8">
            <CardTitle className="text-lg leading-[130%] font-normal tracking-[-0.48px] text-pretty text-foreground sm:text-xl">
              {title}
            </CardTitle>
            <CardDescription className="text-sm leading-[150%] tracking-[-0.36px] text-pretty sm:text-base lg:text-lg">
              {summary}
            </CardDescription>
          </div>
        </CardContent>
      </Card>
    </a>
  );
};

interface Feature214Props {
  className?: string;
}

const Feature214 = ({ className }: Feature214Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "w-full max-w-full overflow-x-hidden py-20 sm:py-32",
        className,
      )}
    >
      <div className="container min-w-0 px-4 sm:px-6">
        <div className="mx-auto mb-10 flex max-w-[47.5rem] flex-col gap-4 sm:mb-16 sm:gap-6">
          <h2 className="text-center font-serif text-xl text-balance md:text-2xll xl:text-2xll">
            هر سرنخ را تا قرارداد دنبال کنید
          </h2>
          <p className="text-center text-base text-pretty sm:text-lg md:text-xl">
            پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان
            می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر
            می‌رود.
          </p>
        </div>

        <Carousel
          opts={{
            align: "start",
            direction: "rtl",
          }}
          className="w-full min-w-0 max-w-full"
        >
          <CarouselContent className="py-2 sm:py-4">
            {CARDS.map((item) => (
              <CarouselItem
                key={item.id}
                className="min-w-0 basis-[85%] sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
              >
                <CarouselCard {...item} />
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="mt-6 flex w-full min-w-0 justify-center gap-3 sm:mt-8 sm:justify-end sm:gap-4">
            <CarouselPrevious className="static size-10 translate-y-0 sm:size-12 rtl:rotate-180" />
            <CarouselNext className="static size-10 translate-y-0 sm:size-12 rtl:rotate-180" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature214 };