reui-blocks/blocks/feature215.tsx

"use client";

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

import { AspectRatio } from "@/components/ui/aspect-ratio";
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;
  video: string;
  Icon: LucideIcon;
  title: string;
  link: string;
  summary: string;
}

const CARDS: CarouselCardItem[] = [
  {
    id: "design-system",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    Icon: Eye,
    title: "همکاری فروش و بازاریابی",
    link: "#",
    summary:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
  },
  {
    id: "framework-agnostic",
    video: "/block-media/shadcnblocks/block/video-2.mp4",
    Icon: Languages,
    title: "اولویت‌بندی سرنخ",
    link: "#",
    summary:
      "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
  },
  {
    id: "interactive",
    video: "/block-media/shadcnblocks/block/video-3.mp4",
    Icon: AudioLines,
    title: "قالب پیشنهاد فروش",
    link: "#",
    summary:
      "چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.",
  },
  {
    id: "minimal-setup",
    video: "/block-media/shadcnblocks/block/video-4.mp4",
    Icon: ListMinus,
    title: "ردیابی کووت",
    link: "#",
    summary:
      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
  },
  {
    id: "accessibility",
    video: "/block-media/shadcnblocks/block/video-5.mp4",
    Icon: ScanFace,
    title: "تحلیل باخت معامله",
    link: "#",
    summary:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
  },
  {
    id: "documentation",
    video: "/block-media/shadcnblocks/block/video-6.mp4",
    Icon: TextQuote,
    title: "هدف‌گذاری تیمی",
    link: "#",
    summary:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
  },
  {
    id: "typescript",
    video: "/block-media/shadcnblocks/block/video-6.mp4",
    Icon: Captions,
    title: "اتوماسیون پیگیری",
    link: "#",
    summary:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
  },
];

const CarouselCard = ({ video, Icon, title, link, summary }: CarouselCardItem) => {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  return (
    <a
      href={link}
      className="group block h-full"
      onMouseEnter={() => {
        if (videoRef.current) {
          videoRef.current.play();
        }
      }}
      onMouseLeave={() => {
        if (videoRef.current) {
          videoRef.current.pause();
          videoRef.current.currentTime = 0;
        }
      }}
    >
      <Card className="h-full min-h-[24rem] bg-muted p-8 shadow-none transition-all group-hover:shadow-md">
        <CardContent className="p-0">
          <div className="relative">
            <AspectRatio
              ratio={16 / 9}
              className="overflow-hidden rounded-[0.5rem]"
            >
              <video
                src={video}
                className="block size-full object-cover object-center"
                ref={videoRef}
                controls={false}
                muted
                aria-label={title}
              />
            </AspectRatio>
            <div className="absolute -start-2 -top-3 flex size-9 rounded-[0.5rem] bg-primary">
              <Icon className="m-auto size-4 stroke-primary-foreground" />
            </div>
          </div>
          <div className="mt-8 flex flex-col gap-2 text-start">
            <CardTitle className="text-xl leading-[130%] font-normal tracking-[-0.48px] text-foreground">
              {title}
            </CardTitle>
            <CardDescription className="text-sm leading-[150%] tracking-[-0.36px] text-pretty">
              {summary}
            </CardDescription>
          </div>
        </CardContent>
      </Card>
    </a>
  );
};

interface Feature215Props {
  className?: string;
}

const Feature215 = ({ className }: Feature215Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-6">
          <h2 className="text-center text-xl font-semibold text-balance xl:text-2xll">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h2>
          <p className="text-center text-xl text-pretty text-muted-foreground">
            الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
          </p>
        </div>
        <Carousel
          opts={{
            align: "start",
            direction: "rtl",
          }}
          className="w-full"
        >
          <CarouselContent className="py-4">
            {CARDS.map((item) => (
              <CarouselItem
                key={item.id}
                className="basis-full md:basis-1/2 lg:basis-1/3"
              >
                <CarouselCard {...item} />
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="mt-8 flex w-full justify-center gap-4">
            <CarouselPrevious className="static size-12" />
            <CarouselNext className="static size-12" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature215 };