93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import { ArrowRight, ArrowUpRight } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero1Props {
|
|
badge?: string;
|
|
heading: string;
|
|
description: string;
|
|
buttons?: {
|
|
primary?: {
|
|
text: string;
|
|
url: string;
|
|
};
|
|
secondary?: {
|
|
text: string;
|
|
url: string;
|
|
};
|
|
};
|
|
image: {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
const Hero1 = ({
|
|
badge = "پلتفرم توسعه رابط کاربری",
|
|
heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه سریع رابط کاربری",
|
|
description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.",
|
|
buttons = {
|
|
primary: {
|
|
text: "مشاهده همه بلاک‌ها",
|
|
url: "https://www.ShadcnBlocks",
|
|
},
|
|
secondary: {
|
|
text: "مشاهده مخزن مخزن کد",
|
|
url: "https://www.ShadcnBlocks",
|
|
},
|
|
},
|
|
image = {
|
|
src: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
alt: "پیش‌نمایش بخش اصلی صفحه",
|
|
},
|
|
className,
|
|
}: Hero1Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid items-center gap-6 lg:grid-cols-2 lg:gap-12">
|
|
<div className="flex flex-col items-center gap-5 text-center lg:items-start lg:text-start">
|
|
{badge && (
|
|
<Badge variant="outline">
|
|
{badge}
|
|
<ArrowUpRight className="ms-2 size-4" />
|
|
</Badge>
|
|
)}
|
|
<h1 className="text-xl font-bold text-pretty lg:text-2xll">
|
|
{heading}
|
|
</h1>
|
|
<p className="max-w-xl text-muted-foreground lg:text-xl">
|
|
{description}
|
|
</p>
|
|
<div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
|
|
{buttons.primary && (
|
|
<Button asChild className="w-full sm:w-auto">
|
|
<a href={buttons.primary.url}>{buttons.primary.text}</a>
|
|
</Button>
|
|
)}
|
|
{buttons.secondary && (
|
|
<Button asChild variant="outline" className="w-full sm:w-auto">
|
|
<a href={buttons.secondary.url}>
|
|
{buttons.secondary.text}
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</a>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="aspect-video w-full rounded-md object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero1 };
|