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

interface Hero16Props {
  className?: string;
}

const Hero16 = ({ className }: Hero16Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container flex flex-col items-center text-center">
        <h1 className="my-3 text-3xl font-bold text-pretty sm:text-xl md:my-6 lg:text-2xll">
          توسعه محصولات دیجیتال را سریع‌تر آغاز کنید
                          </h1>
        <p className="mb-6 max-w-xl text-muted-foreground lg:mb-12 lg:text-xl">
          کامپوننت‌ها و بلاک‌های آماده به شما کمک می‌کنند بدون اتلاف زمان، رابط کاربری حرفه‌ای ایجاد کنید.
                          </p>
        <div className="mb-6 flex gap-2 lg:mb-12">
          <Button>شروع رایگان</Button>
          <Button variant="outline">مشاهده امکانات</Button>
        </div>
      </div>
      <div className="container">
        <div className="aspect-video [mask-image:linear-gradient(#000_80%,transparent_100%)]">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه قهرمان"
            className="h-full w-full rounded-md object-cover"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero16 };