87 lines
3.6 KiB
TypeScript
87 lines
3.6 KiB
TypeScript
import { HandHelping, Users, Zap } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import type { HeroFeatureIconsProps } from "@/lib/hero-feature-icons";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const Hero45 = ({
|
|
badge = "پلتفرم توسعه",
|
|
heading = "مجموعه‌ای از بلاک‌های آماده برای توسعه رابط کاربری",
|
|
images = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
alt: "تصویر نمونه",
|
|
},
|
|
],
|
|
features = [
|
|
{
|
|
icon: HandHelping,
|
|
title: "پشتیبانی حرفه‌ای",
|
|
description:
|
|
"کارشناسان ما آماده‌اند تا در تمام مراحل راه‌اندازی و توسعه همراه شما باشند.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "همکاری تیمی",
|
|
description:
|
|
"با ابزارهای مدیریت پروژه و ارتباطات، همکاری میان اعضای تیم را بهبود دهید.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "عملکرد سریع",
|
|
description:
|
|
"زیرساخت بهینه، سرعت بالا و عملکرد پایدار را برای کاربران فراهم می‌کند.",
|
|
},
|
|
],
|
|
className,
|
|
}: HeroFeatureIconsProps) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container overflow-hidden">
|
|
<div className="mb-20 flex flex-col items-center gap-6 text-center">
|
|
<Badge variant="outline">{badge}</Badge>
|
|
<h1 className="text-xl font-semibold lg:text-2xll">{heading}</h1>
|
|
</div>
|
|
<div className="relative mx-auto max-w-5xl">
|
|
<img
|
|
src={images[0].src}
|
|
alt={images[0].alt}
|
|
className="aspect-video max-h-[500px] w-full rounded-xl object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent"></div>
|
|
<div className="absolute -top-28 -right-28 -z-10 aspect-video h-72 w-96 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_20%,transparent_100%)] [background-size:12px_12px] opacity-40 sm:bg-[radial-gradient(hsl(var(--muted-foreground))_1px,transparent_1px)]"></div>
|
|
<div className="absolute -top-28 -left-28 -z-10 aspect-video h-72 w-96 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_20%,transparent_100%)] [background-size:12px_12px] opacity-40 sm:bg-[radial-gradient(hsl(var(--muted-foreground))_1px,transparent_1px)]"></div>
|
|
</div>
|
|
<div className="mx-auto mt-10 flex max-w-5xl flex-col md:flex-row">
|
|
{features.map((feature, index) => (
|
|
<React.Fragment key={feature.title}>
|
|
{index > 0 && (
|
|
<Separator
|
|
orientation="vertical"
|
|
className="mx-6 hidden h-auto w-[2px] bg-linear-to-b from-muted via-transparent to-muted md:block"
|
|
/>
|
|
)}
|
|
<div
|
|
key={index}
|
|
className="flex grow basis-0 flex-col rounded-md bg-background p-4"
|
|
>
|
|
<div className="mb-6 flex size-10 items-center justify-center rounded-full bg-background drop-shadow-lg">
|
|
<feature.icon className="h-auto w-5" />
|
|
</div>
|
|
<h3 className="mb-2 font-semibold">{feature.title}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero45 };
|