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;