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

interface Hero71Props {
  className?: string;
}

const Hero71 = ({ className }: Hero71Props) => {
  return (
    <section
      className={cn(
        "bg-[linear-gradient(#fbf7ec,#e2f1ee)] py-20 text-center",
        className,
      )}
    >
      <div className="container flex flex-col items-center gap-5">
        <h1 className="max-w-2xl text-2xll font-medium text-foreground max-lg:text-2xll">
          همیشه در ذهن مشتریان خود بمانید.
                          </h1>
        <p className="max-w-2xl text-muted-foreground max-lg:text-sm">
          با ابزارهای ارتباط با مشتری، تجربه‌ای بهتر ایجاد کنید و نرخ وفاداری را افزایش دهید.{" "}
        </p>
        <div className="flex items-center gap-2.5 text-lg max-lg:flex-col max-lg:text-base">
          <Button className="w-fit rounded-md border px-8 py-1">با ما آشنا شوید</Button>
          <Button
            variant="secondary"
            className="w-fit rounded-md border px-8 py-1"
          >
            رزرو دمو
          </Button>
        </div>
        <img
          className="mt-10 w-[50%] rounded-xl shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] max-lg:w-full"
          src="/block-media/shadcnblocks/block/placeholder-2.svg"
          alt=""
        />
      </div>
    </section>
  );
};

export { Hero71 };