import "./new_homepage.css"; const Features = () => { const values = [ { icon: "/img/home_page_marge_img_gestion.png", title: "Gestion", description: "Planifiez, suivez et évaluez vos sessions de manière intuitive.", border_color : "1px solid #ECAE49", }, { icon: "/img/home_page_marge_img_suivi.png", title: "Suivi", description: "Accédez à des rapports détaillés sur les performances et progrès", border_color : "1px solid #3E6EE3", }, { icon: "/img/home_page_marge_img_automatisation.png", title: "Automatisation", description: "Réduisez le temps consacré aux tâches répétitives", border_color : "1px solid #0AA690", }, { icon: "/img/home_page_marge_img_personalisation.png", title: "Personnalisation", description: "Adaptez les contenus et certifications aux besoins spécifiques", border_color : "1px solid #1A1C22", } ]; return (
FONCTIONNALITÉS

Des outils puissants pour une gestion efficace

{values.map((value, index) => (

{value.title}

{value.description}

))}
); }; const styles = { container: { padding: '100px 80px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '48px', background: '#ffffff', }, titleContainer: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px', width: '100%', }, subtitle: { fontFamily: 'DM Sans', fontSize: '16px', fontWeight: 700, color: '#ecae49', textAlign: 'center', textTransform: 'uppercase', lineHeight: '16px', }, title: { fontFamily: 'DM Sans', fontSize: '40px', fontWeight: 700, color: '#16274f', textAlign: 'center', lineHeight: '120%', margin: '20px 0 0 0', }, cardContainer: { display: 'flex', flexDirection: 'row', gap: '24px', width: '100%', justifyContent: 'center', }, card: { width: '270px', padding: '48px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px', background: '#fdf6ec1a', borderRadius: '12px', border: '1px solid #ecae49', }, iconWrapper: { width: '88px', height: '88px', display: 'flex', justifyContent: 'center', alignItems: 'center', }, icon: { width: '88px', height: '88px', }, content: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', width: '100%', }, cardTitle: { fontFamily: 'DM Sans', fontSize: '20px', fontWeight: 700, color: '#16274f', textAlign: 'center', lineHeight: '24px', margin: 0, }, description: { fontFamily: 'Inter', fontSize: '14px', fontWeight: 400, color: '#4b5162', textAlign: 'center', lineHeight: '160%', opacity: 0.8, margin: 0, }, button: { padding: '12px 20px', borderRadius: '200px', border: '1px solid #c7c9ce', background: 'transparent', fontFamily: 'DM Sans', fontSize: '16px', fontWeight: 700, color: '#4b5162', cursor: 'pointer', transition: 'all 0.2s ease', }, }; export default Features;