74 lines
3.9 KiB
TypeScript
74 lines
3.9 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero90Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero90 = ({ className }: Hero90Props) => {
|
|
return (
|
|
<section
|
|
className={cn("font-dm_sans bg-background py-12 md:py-20", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 gap-10 md:gap-20 xl:grid-cols-2">
|
|
<div className="flex flex-col gap-6">
|
|
<p className="text-xl font-medium text-foreground">مدیریت ویدیو</p>
|
|
<h1 className="max-w-[37.5rem] text-xl font-semibold text-foreground sm:text-2xll md:max-w-[51.25rem] md:text-2xll">
|
|
ویدیوهای مهم را به‌سادگی منتشر کنید
|
|
</h1>
|
|
<p className="text-xl font-medium text-muted-foreground">
|
|
ویدیوهای آموزشی، رویدادها و محتوای تیمی را به‌سادگی مدیریت و منتشر کنید.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<div className="relative mx-auto aspect-[1.723502304/1] max-w-[46.75rem]">
|
|
<div className="absolute top-0 left-0 z-30 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
|
|
<div className="m-auto flex w-[85%] flex-col gap-2 md:gap-4">
|
|
<div className="flex items-center justify-center gap-[2%]">
|
|
<Avatar className="size-[68%]">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
|
<AvatarFallback>AV</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
<p className="line-clamp-2 text-center text-[clamp(0.5rem,2.5vw,1.125rem)] font-semibold text-muted-foreground">
|
|
از تجربه من، واقعاً افراد بودند که تفاوت را در موفقیت ما
|
|
رقم زدند
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-0 left-1/3 z-20 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
|
|
<div className="m-auto flex w-[85%] flex-col gap-2 md:gap-4">
|
|
<Avatar className="mx-auto size-[68%]">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
|
|
<AvatarFallback>AV</AvatarFallback>
|
|
</Avatar>
|
|
<p className="line-clamp-2 text-center text-[clamp(0.5rem,2.5vw,1.125rem)] font-semibold text-muted-foreground">
|
|
<span className="text-foreground">افرادی پرشور</span> در
|
|
ایجاد ارتباطات معنادار و پیشبرد نوآوری
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="absolute right-0 bottom-[15%] z-10 flex aspect-square w-[42%] rounded-2xl bg-muted sm:rounded-3xl md:rounded-[2.25rem]">
|
|
<div className="m-auto w-[85%]">
|
|
<Avatar className="absolute right-[5%] bottom-[5%] z-20 size-[26%]">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
|
|
<AvatarFallback>AV</AvatarFallback>
|
|
</Avatar>
|
|
<p className="line-clamp-4 text-[clamp(0.5rem,2.5vw,1.25rem)] font-semibold text-foreground/60">
|
|
فناوری پیشرفت را هدایت می‌کند، ارتباط را تقویت می‌کند،
|
|
مسائل را حل می‌کند و امکانات تازه می‌گشاید و آینده کار و
|
|
ارتباط ما را شکل می‌دهد
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero90 };
|