reui-blocks/blocks/feature153.tsx

"use client";

import { ArrowRight } from "lucide-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) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full max-w-full overflow-hidden py-32",
        className,
      )}
    >
      <div className="container min-w-0 max-w-full">
        <Carousel
          opts={{
            align: "start",
            direction: "rtl",
          }}
          className="w-full min-w-0"
        >
          <div className="mb-6 flex w-full min-w-0 flex-col items-center gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-8">
            <h1 className="max-w-full text-center text-xl font-medium text-balance break-words sm:text-start">
              رتبه کلمات کلیدی را پیگیری کنید
            </h1>
            <div className="flex shrink-0 items-center gap-3">
              <CarouselPrevious className="static size-8 translate-y-0 rtl:rotate-180" />
              <CarouselNext className="static size-8 translate-y-0 rtl:rotate-180" />
            </div>
          </div>
          <div className="relative min-w-0">
            <CarouselContent className="ml-0 pb-5">
              {integrations.map((item) => (
                <CarouselItem
                  key={item.title}
                  className="min-w-0 basis-full pl-4 md:basis-1/2 xl:basis-1/3"
                >
                  <div className="flex h-full min-w-0 flex-col justify-between rounded-xl px-6 py-10 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)] sm:px-8 sm:py-12 md:px-11 md:py-14">
                    <div className="mb-6 flex min-w-0 items-center gap-2">
                      <img
                        src={item.image}
                        alt={`لوگوی ${item.title}`}
                        className="h-7 shrink-0"
                      />
                      <h2 className="min-w-0 font-semibold break-words">
                        {item.title}
                      </h2>
                    </div>
                    <div className="mb-4 text-pretty break-words">
                      {item.description}
                    </div>
                    <div className="mb-10 flex items-center text-sm text-indigo-400">
                      بیشتر بدانید
                      <ArrowRight className="ms-2 size-4 shrink-0 rtl:rotate-180" />
                    </div>
                    <div className="mt-auto flex min-w-0 flex-col gap-4">
                      {item.info.map((infoItem) => (
                        <div key={infoItem.title} className="min-w-0">
                          <h3 className="font-medium break-words">
                            {infoItem.title}
                          </h3>
                          <p className="text-xs text-pretty break-words text-muted-foreground">
                            {infoItem.text}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-6 bg-linear-to-e from-background to-transparent sm:w-[30px]" />
            <div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-6 bg-linear-to-s from-background to-transparent sm:w-10" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature153 };