reui-blocks/blocks/hero241.tsx

import { ArrowRight } from "lucide-react";
import React from "react";

import { BackgroundBeamsWithCollision } from "@/components/aceternity/background-beams-with-collision";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero241Props {
  className?: string;
}

const Hero241 = ({ className }: Hero241Props) => {
  return (
    <section
      className={cn(
        "relative min-h-svh max-h-[1400px] w-full overflow-hidden py-32",
        className,
      )}
    >
      <div className="static z-10 container flex min-w-0 flex-col items-center justify-center gap-10 text-center">
        <h1 className="font-playfair mt-10 max-w-full text-balance break-words text-2xll font-medium tracking-tight lg:text-2xll">
          سریع‌ترین مسیر برای <br /> رابط‌های کاربری آماده استفاده
        </h1>
        <p className="max-w-xl text-balance leading-5 font-medium">
          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
        </p>
        <div className="flex min-w-0 flex-wrap items-center justify-center gap-4">
          <Button className="text-md rounded-xl font-serif">
            مشاهده مستندات <ArrowRight className="-rotate-45 rtl:rotate-180" />{" "}
          </Button>
          <Button variant="secondary" className="text-md rounded-xl font-serif">
            شروع رایگان <ArrowRight className="-rotate-45 rtl:rotate-180" />{" "}
          </Button>
        </div>
        <div className="absolute inset-x-0 bottom-8 flex min-w-0 flex-wrap items-center justify-center gap-7 px-4">
          <div className="min-w-0 text-end">
            <h1 className="font-serif text-xl tracking-tight">+۱ میلیون</h1>
            <p className="text-muted-foreground">مورد اعتماد توسعه‌دهندگان</p>
          </div>
          <div className="hidden h-24 w-px shrink-0 bg-foreground sm:block" />
          <div className="min-w-0 text-start">
            <h1 className="font-serif text-xl tracking-tight">95.1%</h1>
            <p className="text-muted-foreground">کاهش زمان توسعه</p>
          </div>
        </div>
      </div>
      <BackgroundBeamsWithCollision className="absolute inset-x-0 bottom-0 z-1 max-w-full bg-gradient-to-b from-[#d9d9d9]/0 to-[#89e5ff]">
        <span></span>
      </BackgroundBeamsWithCollision>
    </section>
  );
};

export { Hero241 };