reui-blocks/blocks/feature254.tsx

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

import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const CIRCLE_1_IMAGES = [
  {
    id: "inner-1",
    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "inner-2",
    src: "/block-media/shadcnblocks/block/lummi/person4.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
  {
    id: "inner-3",
    src: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
    imageAlt: "تحلیل با AI",
  },
] as const;

const CIRCLE_2_IMAGES = [
  {
    id: "middle-1",
    src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "middle-2",
    src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
  {
    id: "middle-3",
    src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    imageAlt: "تحلیل با AI",
  },
] as const;

const CIRCLE_3_IMAGES = [
  {
    id: "outer-1",
    src: "/block-media/shadcnblocks/block/lummi/person1.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "outer-2",
    src: "/block-media/shadcnblocks/block/lummi/person2.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
  {
    id: "outer-3",
    src: "/block-media/shadcnblocks/block/lummi/person3.jpeg",
    imageAlt: "تحلیل با AI",
  },
  {
    id: "outer-4",
    src: "/block-media/shadcnblocks/block/lummi/person4.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "outer-5",
    src: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
] as const;

interface Feature254Props {
  className?: string;
}

const Feature254 = ({ className }: Feature254Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="relative">
        <div className="flex w-full items-center justify-center">
          <div className="absolute z-99 flex size-full flex-col items-center justify-center gap-4">
            <div className="pointer-events-none absolute inset-y-0 top-1/2 left-1/2 h-1/3 w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 bg-background blur-2xl" />
            <h1 className="z-10 text-center text-2xll font-medium tracking-tighter text-balance sm:text-2xll">
              با هوش مصنوعی سریع‌تر تصمیم بگیرید
            </h1>
            <p className="z-10 max-w-2xl text-center text-pretty text-muted-foreground/70">
              مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
            </p>

            <Button
              variant="default"
              className="group relative z-10 w-fit gap-2 rounded-full! px-10 tracking-tighter shadow-none!"
            >
              اتوماسیون AI
              <ArrowRight className="-rotate-45 transition-all ease-in-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-180" />
            </Button>
          </div>
          <div className="relative flex h-[620px] w-full flex-col items-center justify-center overflow-hidden">
            <OrbitingCircles iconSize={40} radius={130} speed={2}>
              {CIRCLE_1_IMAGES.map((item) => (
                <div
                  key={item.id}
                  className="size-10 overflow-hidden rounded-full"
                >
                  <img
                    src={item.src}
                    className="size-full object-cover"
                    alt={item.imageAlt}
                  />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={200} reverse speed={2}>
              {CIRCLE_2_IMAGES.map((item) => (
                <div
                  key={item.id}
                  className="size-10 overflow-hidden rounded-full"
                >
                  <img
                    src={item.src}
                    className="size-full object-cover"
                    alt={item.imageAlt}
                  />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={280} speed={1}>
              {CIRCLE_3_IMAGES.map((item) => (
                <div
                  key={item.id}
                  className="size-10 overflow-hidden rounded-full"
                >
                  <img
                    src={item.src}
                    className="size-full object-cover"
                    alt={item.imageAlt}
                  />
                </div>
              ))}
            </OrbitingCircles>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature254 };