import './new_a_propos.css'
const Features = () => {
const values = [
{
icon: "/img/feature_innovation.png",
title: "Innovation",
description: "Nous anticipons vos besoins pour vous offrir des solutions adaptées."
},
{
icon: "/img/feature_proximite.png",
title: "Proximité",
description: "Un accompagnement humain et personnalisé pour chaque client."
},
{
icon: "/img/feature_excellence.png",
title: "Excellence",
description: "Des solutions fiables qui font leurs preuves au quotidien."
},
{
icon: "/img/feature_transparence.png",
title: "Transparence",
description: "Nous construisons des relations basées sur la confiance."
}
];
return (
NOS VALEURS
Des valeurs qui nous guident.
{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;