import { ArrowRight } from "lucide-react";

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

interface Hero55Props {
  className?: string;
}

const Hero55 = ({ className }: Hero55Props) => {
  return (
    <section className={cn("relative py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-10 text-center">
          <a
            href="#"
            className="flex items-center gap-2 rounded-full px-2 py-1 text-sm transition-colors hover:bg-muted"
          >
            <Badge>۷ روز پیش</Badge>
            یکپارچه‌سازی پیام‌رسان تیمی منتشر شد
                                  <ArrowRight className="h-auto w-4 rtl:rotate-180" />
          </a>
          <h1 className="text-xl font-semibold lg:text-8xl">
            مدیریت طراحی و پروژه در یک محیط واحد
                                </h1>
          <div className="flex w-full flex-col justify-center gap-2 sm:flex-row">
            <Button size="lg">شروع رایگان</Button>
            <Button size="lg" variant="outline">
              درخواست نسخه نمایشی
                                      </Button>
          </div>
        </div>
      </div>
      <div className="absolute inset-0 -z-10 bg-[50%_0] bg-[url('/block-media/shadcnblocks/block/shadow-overlay.png')] bg-no-repeat"></div>
    </section>
  );
};

export { Hero55 };