65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import { ArrowRight, ChevronRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero99Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero99 = ({ className }: Hero99Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="relative overflow-hidden">
|
|
<div className="absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-[size:92px_92px] opacity-15"></div>
|
|
<div className="mx-auto max-w-4xl">
|
|
<a
|
|
href="#"
|
|
className="mx-auto mb-4 flex w-fit items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm"
|
|
>
|
|
راهنمای توسعه محصول
|
|
<ArrowRight className="inline size-4 rtl:rotate-180" />
|
|
</a>
|
|
<h1 className="my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl">
|
|
راهکارهایی برای رشد سریعتر کسبوکار
|
|
</h1>
|
|
<p className="mx-auto mb-8 max-w-2xl text-center text-muted-foreground lg:text-xl">
|
|
همه ابزارهای موردنیاز برای مدیریت پروژه، همکاری تیمی و توسعه محصولات را در یک پلتفرم در اختیار داشته باشید.
|
|
</p>
|
|
<div className="flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row">
|
|
<Button>
|
|
شروع کنید
|
|
<ChevronRight className="ms-2 h-auto w-4 rtl:rotate-180" />
|
|
</Button>
|
|
<Button variant="secondary">
|
|
مشاهده امکانات
|
|
<ChevronRight className="ms-2 h-auto w-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-20 grid gap-6 md:grid-cols-10">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full max-h-[500px] w-full rounded-xl object-cover md:col-span-3"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full max-h-[500px] w-full rounded-xl object-cover md:col-span-2"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-3.svg"
|
|
alt="تصویر نمونه"
|
|
className="h-full max-h-[500px] w-full rounded-xl object-cover md:col-span-5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero99 };
|