import { ChevronRight } from "lucide-react";

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

interface Hero8Props {
  className?: string;
}

const Hero8 = ({ className }: Hero8Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="overflow-hidden border-b border-muted">
        <div className="container">
          <div className="mx-auto flex max-w-5xl flex-col items-center">
            <div className="z-10 items-center text-center">
              <h1 className="mb-8 text-xl font-semibold text-pretty lg:text-2xll">
                توسعه رابط کاربری را سریع‌تر آغاز کنید
                                            </h1>
              <p className="mx-auto max-w-3xl text-muted-foreground lg:text-xl">
                کامپوننت‌های آماده و استاندارد را انتخاب کنید، سفارشی‌سازی کنید و بدون اتلاف زمان در پروژه خود به‌کار بگیرید.
                                            </p>
              <div className="mt-12 flex w-full flex-col justify-center gap-2 sm:flex-row">
                <Button>
                  همین امروز شروع کنید
                                                    <ChevronRight className="ms-2 h-4 rtl:rotate-180" />
                </Button>
                <Button variant="ghost">
                  آشنایی بیشتر
                                                    <ChevronRight className="ms-2 h-4 rtl:rotate-180" />
                </Button>
              </div>
            </div>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه"
            className="mx-auto mt-24 max-h-[700px] w-full max-w-7xl rounded-t-lg object-cover shadow-lg"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero8 };