95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ButtonType {
|
|
title: string;
|
|
url: string;
|
|
variant: "outline" | "default";
|
|
}
|
|
|
|
const BUTTONS: ButtonType[] = [
|
|
{
|
|
title: "کاوش",
|
|
url: "#",
|
|
variant: "default",
|
|
},
|
|
{
|
|
title: "ثبتنام",
|
|
url: "#",
|
|
variant: "outline",
|
|
},
|
|
];
|
|
|
|
const IMAGES = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
alt: "",
|
|
ratio: 0.644736842,
|
|
className: "w-[30%]",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
alt: "",
|
|
ratio: 0.926829268,
|
|
className: "w-[40%]",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
alt: "",
|
|
ratio: 0.644736842,
|
|
className: "w-[30%]",
|
|
},
|
|
];
|
|
|
|
interface Hero83Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero83 = ({ className }: Hero83Props) => {
|
|
return (
|
|
<section className={cn("bg-background py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center justify-center gap-10 pb-8">
|
|
<Badge variant="secondary">معرفی ویژگیهای جدید</Badge>
|
|
<h1 className="max-w-lg text-center text-xl font-semibold md:max-w-2xl md:text-2xll">
|
|
فرصتهای شغلی بیشتری به دست آورید
|
|
</h1>
|
|
<p className="max-w-lg text-center font-medium text-foreground">
|
|
با دسترسی به امکانات حرفهای، سریعتر فرصتهای شغلی مناسب خود را پیدا کنید.
|
|
</p>
|
|
<div className="flex w-full max-w-lg flex-col items-center justify-center gap-4 md:flex-row md:gap-6">
|
|
{BUTTONS.map((btn, index) => (
|
|
<Button
|
|
asChild
|
|
variant={btn.variant}
|
|
size="lg"
|
|
className="w-full md:flex-1"
|
|
key={`hero-btn-${index}`}
|
|
>
|
|
<a href={btn.url}>{btn.title}</a>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full items-end justify-center gap-4">
|
|
{IMAGES.map((img, index) => (
|
|
<div className={img.className} key={`hero-img-${index}`}>
|
|
<AspectRatio ratio={img.ratio} className="rounded-md border">
|
|
<img
|
|
src={img.src}
|
|
alt={img.alt}
|
|
className="block size-full object-cover object-[50%_0%]"
|
|
/>
|
|
</AspectRatio>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero83 };
|