45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
|
import { PenTool, FileOutput, FileText, Layers, Zap, Gift } from 'lucide-react';
|
||
|
|
import { useLanguage } from '../../contexts/LanguageContext';
|
||
|
|
|
||
|
|
const iconMap = [PenTool, FileOutput, FileText, Layers, Zap, Gift];
|
||
|
|
|
||
|
|
export default function FeaturesSection() {
|
||
|
|
const { t } = useLanguage();
|
||
|
|
const f = t.marketing.features;
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{ title: f.handwriting, description: f.handwritingDesc },
|
||
|
|
{ title: f.multiFormat, description: f.multiFormatDesc },
|
||
|
|
{ title: f.pdf, description: f.pdfDesc },
|
||
|
|
{ title: f.batch, description: f.batchDesc },
|
||
|
|
{ title: f.accuracy, description: f.accuracyDesc },
|
||
|
|
{ title: f.free, description: f.freeDesc },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="features" className="py-20 bg-white">
|
||
|
|
<div className="max-w-6xl mx-auto px-6">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">{f.title}</h2>
|
||
|
|
<p className="text-gray-600 text-lg">{f.subtitle}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
|
|
{items.map((item, i) => {
|
||
|
|
const Icon = iconMap[i];
|
||
|
|
return (
|
||
|
|
<div key={i} className="p-6 rounded-xl border border-gray-100 hover:border-blue-100 hover:shadow-lg transition-all group">
|
||
|
|
<div className="w-12 h-12 bg-blue-50 group-hover:bg-blue-100 rounded-lg flex items-center justify-center mb-4 transition-colors">
|
||
|
|
<Icon size={24} className="text-blue-600" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
|
||
|
|
<p className="text-gray-600 text-sm leading-relaxed">{item.description}</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|