47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
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 };
|