84 lines
3.3 KiB
TypeScript
84 lines
3.3 KiB
TypeScript
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero84Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero84 = ({ className }: Hero84Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"h-svg dark overflow-hidden bg-background pt-12 font-sans md:pt-20",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container">
|
|
<div className="mb-24 flex flex-col items-center gap-8">
|
|
<Badge className="w-fit rounded-full border border-white bg-transparent px-8 py-2.5 text-center text-sm font-semibold text-foreground hover:bg-transparent">
|
|
یکپارچه
|
|
</Badge>
|
|
<div>
|
|
<h1 className="mb-5 text-center text-2xll font-bold text-foreground">
|
|
همه ابزارهای کاری را یکپارچه کنید
|
|
</h1>
|
|
<p className="max-w-[820px] text-center text-xl font-medium text-foreground">
|
|
همه اطلاعات مشتریان، پروژهها و همکاری تیمی را در یک پلتفرم واحد مدیریت کنید.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="relative mx-auto aspect-[2.488709677/1] max-w-[87.5rem]">
|
|
<div className="absolute right-0 bottom-0 z-10 w-[27%] overflow-hidden">
|
|
<AspectRatio ratio={0.924193548 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt=""
|
|
className="block size-full object-cover object-top-left"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="absolute right-[14%] bottom-0 z-20 w-[32%] overflow-hidden shadow-xl">
|
|
<AspectRatio ratio={0.924193548 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt=""
|
|
className="block size-full object-cover object-top-left"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="absolute bottom-0 left-1/2 z-30 w-[37%] -translate-x-1/2 overflow-hidden shadow-xl">
|
|
<AspectRatio ratio={0.924193548 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-3.svg"
|
|
alt=""
|
|
className="block size-full object-cover object-top-left"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="absolute bottom-0 left-[14%] z-20 w-[32%] overflow-hidden shadow-xl">
|
|
<AspectRatio ratio={0.924193548 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-4.svg"
|
|
alt=""
|
|
className="block size-full object-cover object-top-left"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="absolute bottom-0 left-0 z-10 w-[27%] overflow-hidden">
|
|
<AspectRatio ratio={0.924193548 / 1}>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-5.svg"
|
|
alt=""
|
|
className="block size-full object-cover object-top-left"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero84 };
|