55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
|
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 h-full min-h-screen w-screen overflow-hidden py-32",
|
|||
|
|
className,
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="static z-10 container flex flex-col items-center justify-center gap-10 text-center">
|
|||
|
|
<h1 className="font-playfair mt-10 text-2xll font-medium tracking-tight lg:text-2xll">
|
|||
|
|
سریع‌ترین مسیر برای <br /> رابط‌های کاربری آماده استفاده
|
|||
|
|
</h1>
|
|||
|
|
<p className="max-w-xl leading-5 font-medium">
|
|||
|
|
صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
|
|||
|
|
</p>
|
|||
|
|
<div className="flex items-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 bottom-8 flex items-center justify-center gap-7">
|
|||
|
|
<div className="text-end">
|
|||
|
|
<h1 className="font-serif text-xl tracking-tight">+۱ میلیون</h1>
|
|||
|
|
<p className="text-muted-foreground">مورد اعتماد توسعه‌دهندگان</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="h-24 w-px bg-foreground" />
|
|||
|
|
<div className="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 bottom-0 z-1 bg-gradient-to-b from-[#d9d9d9]/0 to-[#89e5ff]">
|
|||
|
|
<span></span>
|
|||
|
|
</BackgroundBeamsWithCollision>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export { Hero241 };
|