Radial Hero Component

export const BackgroundRadial = ({
  children,
  className,
  containerClassName,
}: {
  className?: string;
  containerClassName?: string;
  children: any;
}) => {
  return (
    <div
      className={cn(
        "h-screen w-screen relative overflow-hidden",
        containerClassName
      )}
    >
      <div className={cn("", className)}>{children}</div>
      <div
        className="absolute flex-none opacity-20 overflow-hidden z-0 left-0 top-0 h-full w-full"
        style={{
          backgroundImage:
            "radial-gradient(102.4% 100% at 75.5% -5.1%,#ce8aff .9009009009009009%,rgb(230,153,255) 34.08291103603604%,rgb(240,194,255) 54.82650619369369%,rgb(255,255,255) 100%)",
        }}
      >
        <div className="mix-blend-overlay opacity-80 absolute inset-[-230px -138px -559px -137px] h-full w-full">
          <div
            className="w-full h-full bg-transparent"
            style={{
              backgroundImage:
                "radial-gradient(circle at center center, rgb(0, 0, 0), rgba(33, 222, 222, 0)), repeating-radial-gradient(circle at center center, rgb(0, 0, 0), rgb(0, 0, 0), 70px, transparent 140px, transparent 70px);background-blend-mode:multiply;border-radius:0",
            }}
          ></div>
        </div>
      </div>
    </div>
  );
};