File size: 1,980 Bytes
6dd9bad | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import { Smartphone, BookOpen, FileText } from 'lucide-react';
export function Features() {
const features = [
{ icon: <Smartphone className="w-7 h-7 text-primary" />, title: 'WhatsApp natif', desc: 'Pas d\'application à installer. Reçois tes leçons audio et exercices directement dans WhatsApp.' },
{ icon: <BookOpen className="w-7 h-7 text-accent" />, title: 'Parcours structurés', desc: 'Des formations multi-jours conçues pour les entrepreneurs de l\'informel au Sénégal.' },
{ icon: <FileText className="w-7 h-7 text-secondary" />, title: 'Dossier IA', desc: 'À la fin de ta formation, l\'IA génère automatiquement ton One-Pager PDF et ton Pitch Deck.' },
];
return (
<div className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="font-heading font-bold text-3xl md:text-4xl text-secondary mb-4">Comment ça marche</h2>
<p className="text-lg text-gray-500 max-w-2xl mx-auto">Une expérience d'apprentissage conçue pour les entrepreneurs mobiles.</p>
</div>
<div className="grid md:grid-cols-3 gap-12">
{features.map((f, i) => (
<div key={i} className="group bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all">
<div className="bg-white w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm mb-6 group-hover:scale-110 transition-transform">{f.icon}</div>
<h3 className="font-heading font-bold text-xl text-secondary mb-3">{f.title}</h3>
<p className="text-gray-600 leading-relaxed text-sm">{f.desc}</p>
</div>
))}
</div>
</div>
</div>
);
}
|