You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mvfront-react/components/Advantages.tsx

51 lines
1.2 KiB

import { useTranslation } from 'next-i18next';
import Image from 'next/image';
import { Row, Col, Container } from 'reactstrap';
import ballotBox from '../public/urne.svg';
import email from '../public/email.svg';
import respect from '../public/respect.svg';
const AdvantagesRow = () => {
const { t } = useTranslation('resource');
const resources = [
{
src: ballotBox,
alt: t('home.alt-icon-ballot-box'),
name: t('home.advantage-1-name'),
desc: t('home.advantage-1-desc'),
},
{
src: email,
alt: t('home.alt-icon-envelop'),
name: t('home.advantage-2-name'),
desc: t('home.advantage-2-desc'),
},
{
src: respect,
alt: t('home.alt-icon-respect'),
name: t('home.advantage-3-name'),
desc: t('home.advantage-3-desc'),
},
];
return (
<Container>
<Row>
{resources.map((item, i) => (
<Col key={i} className="my-5 col-md-4 col-12">
<Image
src={item.src}
alt={item.alt}
height="128"
className="d-block mx-auto"
/>
<h4>{item.name}</h4>
<p>{item.desc}</p>
</Col>
))}
</Row>
</Container>
);
};
export default AdvantagesRow;