reui-blocks/blocks/feature153.tsx

"use client";

import { ArrowRight } from "lucide-react";
import { useState } from "react";

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

const integrations = [
  {
    image:
      "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
    title: "بهینه‌سازی محتوا",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    info: [
      {
        title: "تحلیل رقیب",
        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
      },
      {
        title: "لینک داخلی",
        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
      },
      {
        title: "گزارش Core Web Vitals",
        text: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
      },
    ],
  },
  {
    image: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    title: "Figma",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    info: [
      {
        title: "پیشنهاد عنوان",
        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
      },
      {
        title: "تحلیل کلمه کلیدی",
        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
      },
      {
        title: "ممیزی فنی",
        text: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
      },
    ],
  },
  {
    image: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
    title: "Tailwind",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    info: [
      {
        title: "ردیابی رتبه",
        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
      },
      {
        title: "بهینه‌سازی محتوا",
        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
      },
    ],
  },
  {
    image: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    title: "Google",
    description:
      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    info: [
      {
        title: "تحلیل رقیب",
        text: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
      },
      {
        title: "لینک داخلی",
        text: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
      },
      {
        title: "گزارش Core Web Vitals",
        text: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
      },
    ],
  },
];

interface Feature153Props {
  className?: string;
}

const Feature153 = ({ className }: Feature153Props) => {
  const [startIndex, setStartIndex] = useState(0);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Carousel
          opts={{
            align: "start",
            direction: "rtl",
          }}
          className="w-full"
        >
          <div className="mb-6 flex flex-col items-center gap-8 sm:flex-row sm:items-center">
            <h1 className="text-center text-xl font-medium sm:text-start">
              رتبه کلمات کلیدی را پیگیری کنید
            </h1>
            <div className="mb-[-32px] flex items-center gap-3">
              <CarouselPrevious
                onClick={() => setStartIndex(startIndex - 1)}
                disabled={startIndex === 0}
                className="static"
              />
              <CarouselNext
                onClick={() => setStartIndex(startIndex + 1)}
                disabled={startIndex === integrations.length - 1}
                className="static"
              />
            </div>
          </div>
          <div className="relative">
            <CarouselContent
              className="ms-6 pt-[5px] pb-5 transition-all duration-300"
              style={{
                transform: `translateX(${startIndex * 100}%)`,
              }}
            >
              {integrations.map((item) => (
                <CarouselItem
                  key={item.title}
                  className="flex basis-full md:basis-1/2 xl:basis-1/3"
                >
                  <div className="flex h-full flex-col justify-between rounded-xl py-14 pe-20 ps-11 text-start shadow-[0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_rgba(16,25,36,0.1),0px_5px_20px_rgba(16,25,36,0.1)]">
                    <div className="mb-6 flex items-center gap-2">
                      <img
                        src={item.image}
                        alt={`لوگوی ${item.title}`}
                        className="h-7"
                      />
                      <h2 className="font-semibold">{item.title}</h2>
                    </div>
                    <div className="mb-4">{item.description}</div>
                    <div className="mb-10 flex items-center text-sm text-indigo-400">
                      بیشتر بدانید
                      <ArrowRight className="ms-2 h-4 rtl:rotate-180" />
                    </div>
                    <div className="mt-auto flex flex-col gap-4">
                      {item.info.map((infoItem) => (
                        <div key={infoItem.title}>
                          <h3 className="font-medium">{infoItem.title}</h3>
                          <p className="text-xs text-muted-foreground">
                            {infoItem.text}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <div className="pointer-events-none absolute inset-0 start-0 z-10 w-[30px] bg-linear-to-e from-background from-10% to-transparent" />
            <div className="pointer-events-none absolute inset-0 z-10 bg-linear-to-s from-background via-transparent to-transparent" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature153 };