73 lines
3.3 KiB
TypeScript
73 lines
3.3 KiB
TypeScript
import { ChevronRight } from "lucide-react";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero75Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero75 = ({ className }: Hero75Props) => {
|
|
return (
|
|
<section className={cn("dark flex", className)}>
|
|
<div className="flex w-full items-center justify-center bg-background lg:w-1/2">
|
|
<div className="container my-10 flex w-[500px] flex-col gap-24">
|
|
<h1 className="text-xl text-foreground">
|
|
کسبوکار{" "}
|
|
<span className="bg-linear-to-tr from-foreground to-muted bg-clip-text text-transparent">
|
|
حرفهای
|
|
</span>
|
|
</h1>
|
|
<div>
|
|
<h2 className="text-xl text-foreground lg:text-2xll">
|
|
فرصتهای شغلی بیشتری به دست آورید
|
|
</h2>
|
|
<p className="mt-2.5 text-foreground lg:text-xl">
|
|
با دسترسی به امکانات حرفهای، سریعتر فرصتهای شغلی مناسب خود را پیدا کنید.
|
|
</p>
|
|
<Button className="mt-10 flex h-fit items-center gap-2.5 rounded-xl px-5 py-4 font-bold">
|
|
<span>ارتقا به نسخه پریمیوم </span>
|
|
<ChevronRight className="size-5! rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-3.5">
|
|
<div className="flex -space-x-3">
|
|
<Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
|
<AvatarFallback>A</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
|
|
<AvatarFallback>B</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
|
|
<AvatarFallback>C</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-4.webp" />
|
|
<AvatarFallback>D</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar className="block size-11 min-h-11 min-w-11 rounded-full object-cover lg:size-11">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-5.webp" />
|
|
<AvatarFallback>E</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
<span className="text-xs text-foreground lg:text-sm">
|
|
مورد اعتماد هزاران متخصص حوزه سلامت
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
|
|
alt=""
|
|
className="hidden h-screen w-1/2 object-cover lg:block"
|
|
/>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero75 };
|