Files
reui-blocks/blocks/industries2.tsx
T

111 lines
4.6 KiB
TypeScript

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
interface Industry {
title: string;
description: string;
imageSrc: string;
imageAlt: string;
}
interface Industries2Props {
badge: string;
heading: string;
services: Industry[];
className?: string;
}
const Industries2 = ({
className,
badge = "صنایع",
heading =
"تحول صنایع با راه‌حل‌های فناوری نوآورانه که کارایی، رشد و عملیات پایدار را تقویت می‌کنند.",
services = [
{
title: "معدن",
description:
"توانمندسازی عملیات معدنی با سامانه‌های اتوماسیون پیشرفته، راه‌حل‌های پایش لحظه‌ای، بسترهای مدیریت ایمنی و فناوری‌های بهینه‌سازی منابع که کارایی را بیشینه و استخراج پایدار را تضمین می‌کنند.",
imageSrc:
"/block-media/shadcnblocks/block/placeholder-1.svg",
imageAlt: "آیکون صنعت معدن",
},
{
title: "مالی",
description:
"ارائه راه‌حل‌های فناوری مالی امن و مقیاس‌پذیر، از جمله بسترهای بانکداری دیجیتال، سامانه‌های پردازش پرداخت، ابزارهای مدیریت ریسک و چارچوب‌های انطباق با مقررات برای نوآوری و رقابت مؤثر مؤسسات مالی.",
imageSrc:
"/block-media/shadcnblocks/block/placeholder-2.svg",
imageAlt: "آیکون صنعت مالی",
},
{
title: "انرژی",
description:
"تحول عملیات انرژی با فناوری‌های شبکه هوشمند، سامانه‌های مدیریت انرژی تجدیدپذیر، راه‌حل‌های نگهداری پیش‌بینانه و ابزارهای پیش‌بینی تقاضا برای بهینه‌سازی تخصیص منابع و بهبود پایداری.",
imageSrc:
"/block-media/shadcnblocks/block/placeholder-3.svg",
imageAlt: "آیکون صنعت انرژی",
},
{
title: "ساخت‌وساز",
description:
"ساده‌سازی پروژه‌های ساخت‌وساز با بسترهای مدیریت پروژه، یکپارچه‌سازی BIM، ابزارهای همکاری لحظه‌ای و سامانه‌های پایش ایمنی که هزینه را کاهش، زمان‌بندی را بهبود و بهره‌وری کارگاه را افزایش می‌دهند.",
imageSrc:
"/block-media/shadcnblocks/block/placeholder-4.svg",
imageAlt: "آیکون صنعت ساخت‌وساز",
},
],
}: Industries2Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
{/* Header Section */}
<div className="mb-16 text-start">
{badge && (
<Badge
variant="outline"
className="mb-4 rounded-none border-0 bg-muted p-2 text-primary"
>
{badge}
</Badge>
)}
<h2 className="max-w-2xl text-3xl leading-tight font-bold text-balance lg:text-xl">
{heading}
</h2>
</div>
{/* Services Grid */}
<div className="space-y-8">
{services.map((service, index) => (
<div
key={index}
className="border-b border-border pb-8 first:border-t first:pt-8 last:border-b-0"
>
<div className="grid grid-cols-1 items-start gap-4 md:grid-cols-12 md:items-center md:gap-8">
<div className="order-2 text-start md:order-none md:col-span-4">
<h3 className="text-lg font-semibold text-foreground md:text-xl">
{service.title}
</h3>
</div>
<div className="order-1 md:order-none md:col-span-2 md:flex md:justify-center">
<img
src={service.imageSrc}
alt={service.imageAlt}
className="h-12 w-12 object-contain md:h-16 md:w-16"
/>
</div>
<div className="order-3 text-start md:order-none md:col-span-6">
<p className="text-sm leading-relaxed text-muted-foreground">
{service.description}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export { Industries2 };