Files
reui-blocks/blocks/hero53.tsx
T

60 lines
2.5 KiB
TypeScript

import { Globe } from "lucide-react";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface Hero53Props {
className?: string;
}
const Hero53 = ({ className }: Hero53Props) => {
return (
<section className={cn("relative py-32", className)}>
<div className="container px-4 sm:px-6 md:px-8">
<div className="absolute inset-0 -z-10 h-full w-full bg-[radial-gradient(var(--muted-foreground)_1px,transparent_1px)] [background-size:14px_14px] opacity-35"></div>
<h1 className="text-2xll font-bold tracking-tight md:text-2xll lg:text-2xll xl:text-8xl">
مدیریت کد و مستندات را ساده‌تر کنید.
</h1>
<div className="mt-10 flex flex-col-reverse gap-8 md:mt-12 md:flex-row md:items-center md:gap-10 lg:mt-14">
<div className="flex flex-col gap-6">
<Button className="px-6 py-5 sm:w-fit">
درخواست دسترسی <Globe className="size-4" />
</Button>
<div className="flex items-center gap-3">
<span className="inline-flex items-center -space-x-1.5">
<Avatar className="size-7 border">
<AvatarImage
src="/block-media/shadcnblocks/block/avatar-1.webp"
alt="نمونه"
/>
</Avatar>
<Avatar className="size-7 border">
<AvatarImage
src="/block-media/shadcnblocks/block/avatar-6.webp"
alt="نمونه"
/>
</Avatar>
<Avatar className="size-7 border">
<AvatarImage
src="/block-media/shadcnblocks/block/avatar-3.webp"
alt="نمونه"
/>
</Avatar>
</span>
<p className="text-sm text-muted-foreground">
مورد اعتماد بیش از ۲۰۰۰ توسعه‌دهنده در سراسر جهان
</p>
</div>
</div>
<p className="max-w-lg text-xl leading-relaxed text-muted-foreground">
با خودکارسازی مستندسازی، مدیریت وظایف و دانش فنی، سرعت توسعه تیم را افزایش دهید.
</p>
</div>
</div>
</section>
);
};
export { Hero53 };