reui-blocks/blocks/hero256.tsx

import { Activity, ArrowRight, Receipt, Zap } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import type { HeroFeatureIconsProps } from "@/lib/hero-feature-icons";
import { cn } from "@/lib/utils";

const Hero256 = ({
  badge = "با عملیات درآمد هوشمند، کسب‌وکار خود را متحول کنید",
  heading = "تمام چرخه درآمد خود را ساده و یکپارچه کنید",
  buttonPrimary = {
    text: "شروع آزمایش رایگان",
    href: "#",
  },
  buttonSecondary = {
    text: "درخواست مشاوره",
    href: "#",
  },
  features = [
    {
      title: "مدل‌سازی",
      description:
        "مدل‌های قیمت‌گذاری پویا که با شرایط بازار و گروه‌های مشتری سازگار می‌شوند",
      icon: Zap,
      color: "bg-teal-500",
      href: "#",
    },
    {
      title: "صدور فاکتور",
      description:
        "صدور فاکتور و پردازش پرداخت یکپارچه با مدیریت هوشمند مطالبات معوق",
      icon: Receipt,
      color: "bg-blue-500",
      href: "#",
    },
    {
      title: "تحلیل‌ها",
      description:
        "بینش و پیش‌بینی بلادرنگ برای بهینه‌سازی جریان‌های درآمد",
      icon: Activity,
      color: "bg-purple-500",
      href: "#",
    },
  ],
  images = [
    {
      src: "/block-media/shadcnblocks/block/placeholder-1.svg",
      alt: "داشبورد مدیریت درآمد با تحلیل‌ها و معیارها",
    },
  ],
  className,
}: HeroFeatureIconsProps) => {
  return (
    <section className={cn("space-y-8 py-24 lg:py-32", className)}>
      <div className="container space-y-14">
        {/* Main Hero Section */}
        <div className="relative">
          {/* Background Pattern - only for hero section */}
          <div
            className="absolute inset-0 hidden overflow-hidden md:block"
            style={{
              maskImage:
                "radial-gradient(ellipse 150% 200% at 0% 50%, black 0%, black 25%, transparent 65%)",
              WebkitMaskImage:
                "radial-gradient(ellipse 150% 200% at 0% 50%, black 0%, black 25%, transparent 65%)",
            }}
          >
            {/* Grid Background */}
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />

            {/* Decorative Diamond Pattern - positioned on the right */}
            <div className="absolute top-1/2 end-0 -translate-x-1/4 -translate-y-1/2">
              <div className="relative size-64">
                {/* Diamond pattern - circular arrangement */}
                <div className="absolute inset-0 flex items-center justify-center">
                  {Array.from({ length: 12 }).map((_, i) => {
                    const angle = (i * 360) / 12;
                    const radius = 80;
                    const x = Math.cos((angle * Math.PI) / 180) * radius;
                    const y = Math.sin((angle * Math.PI) / 180) * radius;
                    return (
                      <div
                        key={i}
                        className="absolute size-3 rotate-45 bg-muted-foreground/20"
                        style={{
                          transform: `translate(${x}px, ${y}px) rotate(45deg)`,
                        }}
                      />
                    );
                  })}
                </div>
                {/* Inner circle */}
                <div className="absolute inset-0 flex items-center justify-center">
                  {Array.from({ length: 8 }).map((_, i) => {
                    const angle = (i * 360) / 8;
                    const radius = 50;
                    const x = Math.cos((angle * Math.PI) / 180) * radius;
                    const y = Math.sin((angle * Math.PI) / 180) * radius;
                    return (
                      <div
                        key={i}
                        className="absolute size-2 rotate-45 bg-muted-foreground/15"
                        style={{
                          transform: `translate(${x}px, ${y}px) rotate(45deg)`,
                        }}
                      />
                    );
                  })}
                </div>
              </div>
            </div>
          </div>

          {/* Hero Content */}
          <div className="relative z-10 max-w-2xl text-start">
            <div className="flex flex-col gap-8">
              {/* Badge */}
              <div className="flex w-fit items-center gap-2 border-b border-dashed">
                <div className="size-2 rounded-full bg-muted-foreground" />
                <p className="text-xs text-muted-foreground md:text-sm">
                  {badge}
                </p>
              </div>

              {/* Heading */}
              <h1 className="text-xl leading-tight tracking-tight lg:text-2xll">
                {heading}
              </h1>

              {/* Buttons */}
              <div className="flex flex-col gap-4 sm:flex-row">
                {buttonPrimary && (
                  <Button asChild size="lg" className="rounded-lg shadow-md">
                    <a href={buttonPrimary.href}>{buttonPrimary.text}</a>
                  </Button>
                )}
                {buttonSecondary && (
                  <Button
                    asChild
                    variant="outline"
                    size="lg"
                    className="rounded-lg shadow-md"
                  >
                    <a href={buttonSecondary.href}>{buttonSecondary.text}</a>
                  </Button>
                )}
              </div>
            </div>
          </div>
        </div>
        {/* Features Section */}
        <div className="flex max-w-3xl flex-col gap-2 md:flex-row md:items-start md:justify-between md:gap-8">
          {features.map((feature, index) => (
            <div
              key={feature.title}
              className={`flex items-start px-4 py-2 md:py-0 ${index < features.length - 1 ? "border-b border-dashed md:border-e md:border-b-0" : ""}`}
            >
              {/* Feature Card Link */}
              <a
                href={feature.href}
                className="group flex w-full flex-col gap-4 transition-opacity hover:opacity-80"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    {/* Icon */}
                    <div
                      className={`${feature.color} flex size-6 items-center justify-center rounded-lg p-1 text-primary-foreground`}
                    >
                      <feature.icon className="size-5" />
                    </div>
                    {/* Title */}
                    <h3 className="text-lg font-semibold">{feature.title}</h3>
                  </div>

                  <ArrowRight className="size-6 shrink-0 text-muted-foreground rtl:rotate-180" />
                </div>
                {/* Description */}
                <p className="hidden max-w-xs text-sm leading-relaxed text-muted-foreground md:block">
                  {feature.description}
                </p>
              </a>
            </div>
          ))}
        </div>
      </div>
      <div>
        <img
          src={images[0].src}
          alt={images[0].alt}
          className="aspect-video h-full w-full object-cover"
        />
      </div>
    </section>
  );
};

export { Hero256 };