82 lines
4.4 KiB
TypeScript
82 lines
4.4 KiB
TypeScript
import { ArrowDown } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero145Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero145 = ({ className }: Hero145Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"dark relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-[url(/block-media/shadcnblocks/block/full-width-backgrounds/andrew-kliatskyi-uBg4k82xnI4-unsplash.jpg)] bg-cover bg-[100%] bg-no-repeat before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_100%_-100%,transparent_40%,rgba(0,0,0,.75)_85%)] before:content-['']",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-10 container flex size-full min-w-0 max-w-[103.125rem] flex-col justify-between pt-24 pb-14 md:justify-end">
|
|
<div className="flex h-full min-w-0 flex-col justify-between gap-6 md:justify-end">
|
|
<h1 className="min-w-0 text-xl leading-[2.25rem] font-bold text-balance break-words text-foreground lg:text-2xll lg:leading-[3rem]! xl:text-2xll xl:leading-[5.5rem]!">
|
|
<div className="mb-2">به استخدام برترین</div>
|
|
<div className="relative h-[calc(2.25rem*3)] w-full min-w-0 overflow-hidden md:h-[2.25rem] lg:h-[3rem] xl:h-[5.5rem]">
|
|
<div className="absolute inset-x-0 top-0 w-full animate-[show-text_14s_ease-in-out_infinite_0s] will-change-[opacity]">
|
|
نمایندگان فروش امنیت سایبری
|
|
</div>
|
|
<div className="absolute inset-x-0 top-0 w-full animate-[show-text_14s_ease-in-out_infinite_2s] opacity-0 will-change-[opacity]">
|
|
تست‌کنندگان نفوذ
|
|
</div>
|
|
<div className="absolute inset-x-0 top-0 w-full animate-[show-text_14s_ease-in-out_infinite_4s] opacity-0 will-change-[opacity]">
|
|
مهندسان فروش
|
|
</div>
|
|
<div className="absolute inset-x-0 top-0 w-full animate-[show-text_14s_ease-in-out_infinite_6s] opacity-0 will-change-[opacity]">
|
|
معماران IAM
|
|
</div>
|
|
<div className="absolute inset-x-0 top-0 w-full animate-[show-text_14s_ease-in-out_infinite_8s] opacity-0 will-change-[opacity]">
|
|
مدیران ارشد امنیت اطلاعات
|
|
</div>
|
|
<div className="absolute inset-x-0 top-0 w-full animate-[show-text_14s_ease-in-out_infinite_10s] opacity-0 will-change-[opacity]">
|
|
مهندسان امنیت ابری
|
|
</div>
|
|
<div className="absolute inset-x-0 top-0 w-full animate-[show-text_14s_ease-in-out_infinite_12s] opacity-0 will-change-[opacity]">
|
|
مهندسان امنیت اپلیکیشن
|
|
</div>
|
|
</div>
|
|
</h1>
|
|
<div className="flex min-w-0 flex-col gap-8">
|
|
<p className="text-balance text-lg text-foreground lg:text-xl">
|
|
فرآیند جذب نیرو را سریع‌تر و هدفمندتر انجام دهید.
|
|
</p>
|
|
<div className="flex min-w-0 flex-wrap items-center justify-between gap-5">
|
|
<div className="flex min-w-0 flex-wrap items-center gap-5">
|
|
<Button
|
|
asChild
|
|
className="h-fit w-fit rounded-full px-7 py-3.5 text-xs font-semibold text-nowrap uppercase lg:px-9 lg:py-5 lg:text-base"
|
|
>
|
|
<a href="#">عضویت در شبکه متخصصان</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
className="h-fit w-fit rounded-full border-white bg-transparent px-7 py-3.5 text-xs font-semibold text-nowrap text-white uppercase hover:bg-background/15 lg:px-9 lg:py-5 lg:text-base"
|
|
>
|
|
<a href="#">جذب نیرو</a>
|
|
</Button>
|
|
</div>
|
|
<Button
|
|
variant="link"
|
|
className="flex h-fit w-fit shrink-0 items-center gap-2 text-xs font-semibold text-nowrap uppercase hover:no-underline lg:text-base"
|
|
>
|
|
<div>برای مشاهده بیشتر اسکرول کنید</div>
|
|
<ArrowDown className="size-3! stroke-white lg:size-4!" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero145 };
|