96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero47Props {
|
|
heading?: string;
|
|
subheading?: string;
|
|
description?: string;
|
|
image?: {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
buttons?: {
|
|
primary?: {
|
|
text: string;
|
|
url: string;
|
|
};
|
|
secondary?: {
|
|
text: string;
|
|
url: string;
|
|
};
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
const Hero47 = ({
|
|
heading = "مجموعه بلاکهای آماده",
|
|
subheading = "مبتنی بر shadcn/ui و Tailwind CSS",
|
|
description = "صدها بلاک و کامپوننت آماده برای توسعه سریع رابط کاربری که مستقیماً در پروژههای رابط کاربری قابل استفاده هستند.",
|
|
buttons = {
|
|
primary: {
|
|
text: "شروع رایگان",
|
|
url: "#",
|
|
},
|
|
secondary: {
|
|
text: "مطالعه مستندات",
|
|
url: "#",
|
|
},
|
|
},
|
|
image = {
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg",
|
|
alt: "تصویر نمونه",
|
|
},
|
|
className,
|
|
}: Hero47Props) => {
|
|
return (
|
|
<section className={cn("bg-background py-20 lg:py-32", className)}>
|
|
<div className="container flex flex-col items-center gap-10 lg:my-0 lg:flex-row">
|
|
<div className="flex flex-col gap-7 lg:w-2/3">
|
|
<h2 className="text-2xll font-semibold text-foreground md:text-2xll lg:text-8xl">
|
|
<span>{heading}</span>
|
|
<span className="text-muted-foreground">{subheading}</span>
|
|
</h2>
|
|
<p className="text-base text-muted-foreground md:text-lg lg:text-xl">
|
|
{description}
|
|
</p>
|
|
<div className="flex flex-wrap items-start gap-5 lg:gap-7">
|
|
<Button asChild>
|
|
<a href={buttons.primary?.url}>
|
|
<div className="flex items-center gap-2">
|
|
<ArrowUpRight className="size-4" />
|
|
</div>
|
|
<span className="pe-6 ps-4 text-sm whitespace-nowrap lg:pe-8 lg:ps-6 lg:text-base">
|
|
{buttons.primary?.text}
|
|
</span>
|
|
</a>
|
|
</Button>
|
|
<Button asChild variant="link" className="underline">
|
|
<a href={buttons.secondary?.url}>{buttons.secondary?.text}</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="relative z-10">
|
|
<div className="absolute top-2.5 left-1/2! h-[92%]! w-[69%]! -translate-x-[52%] overflow-hidden rounded-[35px]">
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="size-full object-cover object-[50%_0%]"
|
|
/>
|
|
</div>
|
|
<img
|
|
className="relative z-10"
|
|
src="/block-media/shadcnblocks/block/mockups/phone-2.png"
|
|
width={450}
|
|
height={889}
|
|
alt="آیفون"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero47 };
|