105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
import { Star } from "lucide-react";
|
||
import React from "react";
|
||
|
||
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
||
import { Button } from "@/components/ui/button";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface Hero7Props {
|
||
heading?: string;
|
||
description?: string;
|
||
button?: {
|
||
text: string;
|
||
url: string;
|
||
className?: string;
|
||
};
|
||
reviews?: {
|
||
count: number;
|
||
rating?: number;
|
||
avatars: {
|
||
src: string;
|
||
alt: string;
|
||
}[];
|
||
};
|
||
className?: string;
|
||
}
|
||
|
||
const Hero7 = ({
|
||
heading = "مجموعه‌ای کامل از بلاک‌ها و کامپوننت‌های آماده",
|
||
description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.",
|
||
button = {
|
||
text: "مشاهده همه بلاک‌ها",
|
||
url: "https://www.ShadcnBlocks",
|
||
},
|
||
reviews = {
|
||
count: 200,
|
||
rating: 5.0,
|
||
avatars: [
|
||
{
|
||
src: "/block-media/shadcnblocks/block/avatar-1.webp",
|
||
alt: "آواتار ۱",
|
||
},
|
||
{
|
||
src: "/block-media/shadcnblocks/block/avatar-2.webp",
|
||
alt: "آواتار ۲",
|
||
},
|
||
{
|
||
src: "/block-media/shadcnblocks/block/avatar-3.webp",
|
||
alt: "آواتار ۳",
|
||
},
|
||
{
|
||
src: "/block-media/shadcnblocks/block/avatar-4.webp",
|
||
alt: "آواتار ۴",
|
||
},
|
||
{
|
||
src: "/block-media/shadcnblocks/block/avatar-5.webp",
|
||
alt: "آواتار ۵",
|
||
},
|
||
],
|
||
},
|
||
className,
|
||
}: Hero7Props) => {
|
||
return (
|
||
<section className={cn("py-32", className)}>
|
||
<div className="container text-center">
|
||
<div className="mx-auto flex max-w-5xl flex-col gap-6">
|
||
<h1 className="text-3xl font-semibold lg:text-2xll">{heading}</h1>
|
||
<p className="text-balance text-muted-foreground lg:text-lg">
|
||
{description}
|
||
</p>
|
||
</div>
|
||
<Button asChild size="lg" className="mt-10">
|
||
<a href={button.url}>{button.text}</a>
|
||
</Button>
|
||
<div className="mx-auto mt-10 flex w-fit flex-col items-center gap-4 sm:flex-row">
|
||
<span className="mx-4 inline-flex items-center -space-x-4">
|
||
{reviews.avatars.map((avatar, index) => (
|
||
<Avatar key={index} className="size-14 border">
|
||
<AvatarImage src={avatar.src} alt={avatar.alt} />
|
||
</Avatar>
|
||
))}
|
||
</span>
|
||
<div>
|
||
<div className="flex items-center gap-1">
|
||
{[...Array(5)].map((_, index) => (
|
||
<Star
|
||
key={index}
|
||
className="size-5 fill-yellow-400 text-yellow-400"
|
||
/>
|
||
))}
|
||
<span className="ms-1 font-semibold">
|
||
{reviews.rating?.toFixed(1)}
|
||
</span>
|
||
</div>
|
||
<p className="text-start font-medium text-muted-foreground">
|
||
مورد اعتماد بیش از {reviews.count} کاربر
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Hero7 };
|