81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
FileText,
|
|
Calculator,
|
|
ShieldCheck,
|
|
Scale,
|
|
HelpCircle,
|
|
Users,
|
|
Coins,
|
|
LucideIcon,
|
|
} from 'lucide-react'
|
|
|
|
const iconMap: Record<string, LucideIcon> = {
|
|
fileText: FileText,
|
|
calculator: Calculator,
|
|
shieldCheck: ShieldCheck,
|
|
scale: Scale,
|
|
helpCircle: HelpCircle,
|
|
users: Users,
|
|
coins: Coins,
|
|
}
|
|
|
|
export interface ServicesDetailedProps {
|
|
title: string
|
|
subtitle?: string | null
|
|
services?: Array<{
|
|
id?: string | null
|
|
title: string
|
|
description: string
|
|
icon?: string | null
|
|
}> | null
|
|
}
|
|
|
|
export const ServicesDetailedBlock: React.FC<ServicesDetailedProps> = ({
|
|
title,
|
|
subtitle,
|
|
services,
|
|
}) => {
|
|
return (
|
|
<section className="py-12 md:py-16">
|
|
<div className="container-premium">
|
|
<div className="max-w-3xl mb-12">
|
|
<h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight">
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p className="mt-3 text-base sm:text-lg text-foreground/70 leading-relaxed">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
|
{(services || []).map((service, index) => {
|
|
const Icon = (service.icon && iconMap[service.icon]) || FileText
|
|
|
|
return (
|
|
<div
|
|
key={service.id || index}
|
|
className="bg-card border border-border rounded-2xl p-6 md:p-8 flex flex-col justify-between hover:border-accent/50 hover:shadow-md transition-all duration-200"
|
|
>
|
|
<div>
|
|
<div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center mb-6">
|
|
<Icon size={24} />
|
|
</div>
|
|
<h3 className="font-heading text-xl font-bold text-foreground mb-3 leading-snug">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-foreground/75 text-sm sm:text-base leading-relaxed">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|