reui-blocks/blocks/feature271.tsx

import { BadgeCheck } from "lucide-react";
import type { ReactNode } from "react";
import type React from "react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const FEATURES = [
  { id: "instant", label: "تحلیل داده" },
  { id: "one-time", label: "داشبورد" },
  { id: "developer", label: "شاخص کلیدی" },
  { id: "responsive", label: "بینش لحظه‌ای" },
  { id: "production", label: "تحلیل داده" },
  { id: "support", label: "داشبورد" },
  { id: "updates", label: "شاخص کلیدی" },
  { id: "customizable", label: "بینش لحظه‌ای" },
  { id: "performance", label: "تحلیل داده" },
  { id: "accessibility", label: "داشبورد" },
  { id: "cross-browser", label: "شاخص کلیدی" },
  { id: "docs", label: "بینش لحظه‌ای" },
] as const;

interface Feature271Props {
  className?: string;
}

const Feature271 = ({ className }: Feature271Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative h-full w-full overflow-hidden", className)}
    >
      <AuroraBackground>
        <div className="relative container flex h-full min-w-0 flex-col items-center justify-center gap-15 text-center">
          <div className="flex min-w-0 flex-col items-center justify-center">
            <Badge
              variant="outline"
              className="mb-5 w-fit rounded-full bg-background/70 px-4 py-1 text-sm tracking-tight"
            >
              تحلیل داده
            </Badge>
            <h1 className="w-full max-w-xl text-center text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
              داده پراکنده را به تصمیم تبدیل کنید
            </h1>
          </div>
          <div className="flex w-full min-w-0 max-w-lg items-center gap-4 px-5">
            <span className="h-px min-w-0 flex-1 bg-muted-foreground/20" />
            <p className="min-w-0 max-w-[14rem] shrink text-sm text-balance text-muted-foreground/50 sm:max-w-xs">
              گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و
              نگهداشت مشتری داشته است.
            </p>
            <span className="h-px min-w-0 flex-1 bg-muted-foreground/20" />
          </div>
          <ul className="grid w-full min-w-0 max-w-lg grid-cols-2 gap-3 px-2 text-start">
            {FEATURES.map((feature) => (
              <li key={feature.id} className="flex min-w-0 gap-2 lg:items-center">
                <BadgeCheck className="size-4 shrink-0 text-primary" />
                <p className="min-w-0 tracking-tight text-pretty text-muted-foreground/80">
                  {feature.label}
                </p>
              </li>
            ))}
          </ul>
        </div>
      </AuroraBackground>
    </section>
  );
};

export { Feature271 };

// Below is the modified component from Aceternity UI
// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/aurora-background.json
// Modified so we could change the aurora animate class and colors

interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
  children: ReactNode;
  showRadialGradient?: boolean;
}

export const AuroraBackground = ({
  className,
  children,
  showRadialGradient = true,
  ...props
}: AuroraBackgroundProps) => {
  return (
    <div
      className={cn(
        "transition-bg relative flex h-full min-h-[32rem] w-full min-w-0 flex-col items-center justify-center overflow-hidden bg-zinc-50 text-slate-950 dark:bg-zinc-900",
        className,
      )}
      {...props}
    >
      <div
        className="absolute inset-0 overflow-hidden"
        style={
          {
            "--aurora":
              "repeating-linear-gradient(100deg,#000_10%,#666_15%,#ccc_20%,#fff_25%,#333_30%)",
            "--dark-gradient":
              "repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
            "--white-gradient":
              "repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",

            "--gray-200": "#ccc",
            "--gray-400": "#666",
            "--gray-800": "#333",
            "--black": "#000",
            "--white": "#fff",
            "--transparent": "transparent",
          } as React.CSSProperties
        }
      >
        <div
          className={cn(
            `pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--black)_10%,var(--gray-400)_15%,var(--gray-200)_20%,var(--white)_25%,var(--gray-800)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:animate-aurora-background after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,

            showRadialGradient &&
              `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
          )}
        />
      </div>
      {children}
    </div>
  );
};