import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero76Props {
  className?: string;
}

const Hero76 = ({ className }: Hero76Props) => {
  return (
    <section
      className={cn(
        "container mx-auto mt-32 flex flex-col items-center gap-20 bg-background md:gap-40 md:text-center",
        className,
      )}
    >
      <div className="flex flex-col gap-10 md:items-center">
        <img
          src="/block-media/shadcnblocks/block/logos/figma-icon.svg"
          alt=""
          className="h-11 w-fit"
        />
        <div className="flex max-w-[880px] flex-col items-center gap-6">
          <h1 className="text-xl tracking-tighter text-foreground capitalize md:text-2xll lg:text-2xll">
            <p>کتابخانه کامپوننت برای ری یو آی و طراحی رابط</p>
          </h1>
          <div className="text-xl text-muted-foreground">
            <p>رابط‌های کاربری حرفه‌ای را سریع‌تر طراحی و پیاده‌سازی کنید.</p>
            <p>برای طراحی و توسعه سریع‌تر آماده شوید</p>
          </div>
        </div>
        <Button className="h-fit self-center rounded-full px-6 py-3">
          دانلود کنید
        </Button>
      </div>
      <div className="w-full overflow-hidden rounded-lg">
        <AspectRatio ratio={1.916786227 / 1}>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt=""
            className="size-full object-cover"
          />
        </AspectRatio>
      </div>
    </section>
  );
};

export { Hero76 };