38 lines
No EOL
1.4 KiB
JavaScript
38 lines
No EOL
1.4 KiB
JavaScript
import { useTranslation } from 'react-i18next';
|
|
import { Shield, Globe2, BarChart3, Blocks, Mail, Tag, Users, Layers, Zap } from 'lucide-react';
|
|
|
|
const Icons = { Shield, Globe2, BarChart3, Blocks, Mail, Tag, Users, Layers, Zap };
|
|
|
|
export default function Features() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<section className="pb-32 pt-12 bg-white text-gray-900">
|
|
<div className="max-w-6xl mx-auto px-6">
|
|
<div className="text-center mb-20">
|
|
<h2 className="text-4xl md:text-6xl font-black mb-4">
|
|
{t('features.title')}
|
|
</h2>
|
|
<p className="text-2xl md:text-3xl font-bold text-red-700">
|
|
{t('features.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{t('features.items', { returnObjects: true }).map((feature, i) => {
|
|
const Icon = Icons[feature.icon];
|
|
return (
|
|
<div key={i} className="card-hover bg-gray-100 rounded-2xl p-8 border border-gray-200">
|
|
<div className="w-14 h-14 bg-red-700 rounded-xl flex items-center justify-center mb-6">
|
|
<Icon size={28} className="text-white" />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed">{feature.desc}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |