95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// Move card data outside the component
|
|
const heroCards = [
|
|
{
|
|
title: "طراحی محصول",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-1.svg",
|
|
description:
|
|
"رابط‌های کاربری زیبا و کاربردی که تجربه مشتری را ارتقا می‌دهند.",
|
|
},
|
|
{
|
|
title: "توسعه",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-2.svg",
|
|
description:
|
|
"پیاده‌سازی سریع و پایدار با فناوری‌های مدرن و معماری مقیاس‌پذیر.",
|
|
},
|
|
{
|
|
title: "بازاریابی",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-3.svg",
|
|
description:
|
|
"استراتژی‌های هدفمند برای رشد برند و جذب مخاطبان جدید.",
|
|
},
|
|
];
|
|
|
|
interface Hero36Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero36 = ({ className }: Hero36Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative overflow-hidden bg-accent py-24 md:py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="absolute inset-0 opacity-50">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.15),transparent_50%)]"></div>
|
|
</div>
|
|
<div className="relative container flex flex-col items-center text-center">
|
|
<Badge
|
|
variant="outline"
|
|
className="px-4 py-1.5 text-xs font-medium uppercase"
|
|
>
|
|
نسخه جدید منتشر شد
|
|
</Badge>
|
|
<h1 className="my-4 max-w-3xl text-xl font-bold text-pretty sm:text-xl md:my-6 lg:text-2xll">
|
|
ابزارهایی برای رشد سریع‌تر کسب‌وکارهای دیجیتال
|
|
</h1>
|
|
<p className="max-w-2xl text-muted-foreground">
|
|
با استفاده از کامپوننت‌های استاندارد، توسعه محصول را سریع‌تر و باکیفیت‌تر انجام دهید.
|
|
</p>
|
|
</div>
|
|
<div className="container mt-12 grid gap-6 md:mt-16 md:grid-cols-3 md:gap-8">
|
|
{heroCards.map((item, index) => (
|
|
<a
|
|
key={index}
|
|
href="#"
|
|
className={cn(
|
|
"relative flex flex-col items-center rounded-xl border bg-background/70 px-6 py-10 text-center backdrop-blur-sm lg:px-8 lg:py-12",
|
|
index === 1 && "md:translate-y-4",
|
|
)}
|
|
>
|
|
<div className="mb-6 flex aspect-square w-16 items-center justify-center md:w-20 lg:mb-8">
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="h-full w-full object-contain object-center"
|
|
/>
|
|
</div>
|
|
<h3 className="mb-3 text-lg font-semibold md:text-xl">
|
|
{item.title}
|
|
</h3>
|
|
<p className="mb-auto text-sm text-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
<div className="mt-8 flex items-center text-primary md:mt-10">
|
|
<span className="font-medium">مشاهده جزئیات</span>
|
|
<ArrowRight className="ms-2 size-4 rtl:rotate-180" />
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero36 };
|