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 };
|