reui-blocks/blocks/hero238.tsx

"use client";

import { motion } from "framer-motion";
import { ArrowRight, Blocks, Shield, Star, Zap } from "lucide-react";
import type { ReactNode } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero238Props {
  className?: string;
}

const Hero238 = ({ className }: Hero238Props) => {
  const benefits = [
    {
      icon: Zap,
      title: "دسترسی زودهنگام ",
    },
    {
      icon: Star,
      title: "جدیدترین ویژگی‌ها",
    },
    {
      icon: Shield,
      title: "پشتیبانی اولویت‌دار",
    },
    {
      icon: Blocks,
      title: "بلاک‌های اختصاصی",
    },
  ];

  return (
    <section
      className={cn(
        "relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden",
        className,
      )}
    >
      <AuroraBackground className="h-full min-h-0 w-full">
        <div className="relative container flex h-full min-w-0 flex-col py-32 lg:flex-row">
          <div className="mt-auto min-w-0 space-y-12 lg:w-1/2">
            <h1 className="mt-3 max-w-xl text-balance break-words text-2xll font-medium font-semibold tracking-tighter lg:text-2xll">
              با یک بار خرید به تمام کامپوننت‌های حرفه‌ای دسترسی داشته باشید
            </h1>
            <div className="flex min-w-0 flex-wrap items-center gap-4">
              <Button>شروع رایگان</Button>
              <Button variant="ghost">
                مشاهده امکانات <ArrowRight className="rtl:rotate-180" />
              </Button>
            </div>
            <ul className="mt-20 flex min-w-0 flex-wrap gap-4">
              {benefits.map((benifit, index) => {
                const Icon = benifit.icon;
                return (
                  <li key={benifit.title} className="flex min-w-0 items-center gap-2">
                    <div className="size-4 shrink-0">
                      <Icon className="size-4" />
                    </div>
                    <span className="text-sm">{benifit.title}</span>
                    {index !== benefits.length - 1 && (
                      <div className="ms-2 size-1 shrink-0 rounded-full bg-foreground" />
                    )}
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="relative flex h-[500px] w-full min-w-0 items-center justify-center overflow-hidden lg:w-1/2">
            <motion.div
              initial={{ opacity: 0, y: "50%" }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
              className="absolute right-0 bottom-0 max-w-full w-[210px] rounded-2xl bg-primary p-4 text-sm text-secondary"
            >
              <span className="ms-3 inline-block size-2 rounded-full bg-orange-500" />
              <span className="font-semibold">ری یو آی</span>
              <span className="text-muted-foreground">
                 بلاک‌های آماده برای ساخت رابط کاربری مدرن و سریع{" "}
              </span>
            </motion.div>
          </div>
        </div>
      </AuroraBackground>
    </section>
  );
};

export { Hero238 };

// 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-0 w-full 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-0 [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>
      </div>
      {children}
    </div>
  );
};