56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
MdEco,
|
|
MdMiscellaneousServices,
|
|
MdPlace,
|
|
MdHandshake,
|
|
} from 'react-icons/md';
|
|
import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
|
|
import { CtaButton, PageSection } from '../';
|
|
import { ListItem } from './ListItem';
|
|
|
|
export const BenefitsSection: FC = () => {
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.landing.benefits-section',
|
|
});
|
|
|
|
const listData = [
|
|
{
|
|
Icon: MdEco,
|
|
children: t('list.0'),
|
|
},
|
|
{
|
|
Icon: MdMiscellaneousServices,
|
|
children: t('list.1'),
|
|
},
|
|
{
|
|
Icon: MdPlace,
|
|
children: t('list.2'),
|
|
},
|
|
{
|
|
Icon: MdHandshake,
|
|
children: t('list.3'),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<PageSection>
|
|
<VStack w='full' spacing={2}>
|
|
<Heading as='h2'>{t('heading')}</Heading>
|
|
<Text>
|
|
{t('description')}
|
|
</Text>
|
|
</VStack>
|
|
<List display='flex' flexDirection='column' spacing={3}>
|
|
{listData.map((props, i) => (
|
|
<ListItem key={i} {...props} />
|
|
))}
|
|
</List>
|
|
<HStack w='full' justify='flex-end'>
|
|
<CtaButton />
|
|
</HStack>
|
|
</PageSection>
|
|
);
|
|
};
|