```jsx
import React from 'react';
const MainPoints = () => {
// Array of main points to display
const points = [
{ title: 'Security', description: 'Protecting data and systems' },
{ title: 'Economy and Sustainability', description: 'Balancing growth and environmental impact' },
{ title: 'Artificial Intelligence', description: 'Advancing machine learning and automation' },
{ title: 'Control', description: 'Managing processes and decision-making' }
];
// Styles for the component
const styles = {
container: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
gap: '20px',
padding: '20px',
},
card: {
width: '250px',
padding: '20px',
border: '1px solid #ccc',
borderRadius: '8px',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
backgroundColor: '#fff',
},
title: {
fontSize: '20px',
fontWeight: 'bold',
marginBottom: '10px',
color: '#333',
},
description: {
fontSize: '16px',
color: '#666',
},
};
return (
<div style={styles.container}>
{points.map((point, index) => (
<div key={index} style={styles.card}>
<h2 style={styles.title}>{point.title}</h2>
<p style={styles.description}>{point.description}</p>
</div>
))}
</div>
);
};
export default MainPoints;
```
Notis
Mini tools
