reui-blocks/blocks/hero237.tsx

import { Shield, Users, Zap } from "lucide-react";
import React from "react";

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

interface Hero237Props {
  className?: string;
}

const Hero237 = ({ className }: Hero237Props) => {
  const circle1Images = [
    "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
    "/block-media/shadcnblocks/block/logos/react-icon.svg",
    "/block-media/shadcnblocks/block/logos/vue-icon.svg",
    "/block-media/shadcnblocks/block/logos/vite-icon.svg",
    "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
  ];

  const circle2Images = [
    "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
    "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
    "/block-media/shadcnblocks/block/logos/astro-icon.svg",
    "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
  ];

  const circle3Images = [
    "/block-media/shadcnblocks/block/logos/notion-icon.svg",
    "/block-media/shadcnblocks/block/logos/github-icon.svg",
    "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    "/block-media/shadcnblocks/block/logos/slack-icon.svg",
    "/block-media/shadcnblocks/block/logos/laravel-icon.svg",
  ];

  const circle4Images = [
    "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
    "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
    "/block-media/shadcnblocks/block/logos/brave-icon.svg",
    "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
    "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
    "/block-media/shadcnblocks/block/logos/google-icon.svg",
  ];

  const stats = [
    {
      icon: <Users className="size-6 stroke-1 opacity-20 md:size-10" />,
      title: "+100k",
      description: "کاربر روزانه",
    },
    {
      icon: <Zap className="size-6 stroke-1 opacity-20 md:size-10" />,
      title: "99.9%",
      description: "آپتایم",
    },
    {
      icon: <Shield className="size-6 stroke-1 opacity-20 md:size-10" />,
      title: "24/7",
      description: "پشتیبانی",
    },
  ];

  return (
    <section
      className={cn(
        "relative w-full overflow-hidden border border-b py-32",
        className,
      )}
    >
      {/* dir=ltr keeps visual: orbits left, text right; text column stays rtl */}
      <div
        dir="ltr"
        className="relative container flex min-w-0 flex-col lg:flex-row lg:items-center"
      >
        <div className="relative order-2 h-112 w-full min-w-0 overflow-hidden lg:order-1 lg:w-1/2">
          <div className="relative -left-35 flex h-[1100px] w-[1500px] flex-col items-center justify-center lg:absolute lg:left-0">
            <OrbitingCircles iconSize={40} radius={310} speed={2}>
              {circle1Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={390} reverse speed={2}>
              {circle2Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={470} speed={2}>
              {circle3Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={550} reverse speed={1}>
              {circle4Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
          </div>
        </div>

        <div
          dir="rtl"
          className="order-1 mt-10 w-full min-w-0 space-y-12 text-start lg:order-2 lg:w-1/2"
        >
          <p className="w-fit rounded-full bg-muted px-4 py-1 text-sm uppercase">
            چرا ما؟
          </p>
          <h1 className="font-calSans mt-3 max-w-lg text-balance text-2xll font-medium lg:text-2xll">
            <span className="opacity-30">همه کامپوننت‌هایی</span> که نیاز دارید
          </h1>
          <p className="max-w-lg text-balance text-lg text-muted-foreground">
            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
          </p>

          <ul className="mt-18 flex flex-wrap gap-9">
            {stats.map((stat, index) => (
              <li key={stat.title} className="flex min-w-0 items-center gap-4">
                <div className="flex size-12 shrink-0 items-center justify-center rounded-2xl border md:size-18">
                  {stat.icon}
                </div>
                <div className="min-w-0">
                  <h2 className="font-calSans text-xl font-medium md:text-3xl">
                    {stat.title}
                  </h2>
                  <p className="text-sm md:text-base">{stat.description}</p>
                </div>
                {index !== stats.length - 1 && (
                  <div className="ms-4 h-full w-px bg-gradient-to-t from-black via-border to-transparent" />
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Hero237 };