49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React, { FC } from 'react';
|
||
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 = () => {
|
||
return (
|
||
<PageSection>
|
||
<VStack w='full' spacing={2}>
|
||
<Heading as='h2'>Преимущества экологичной автомойки</Heading>
|
||
<Text>
|
||
Откройте для себя преимущества наших услуг по химчистке автомобилей
|
||
</Text>
|
||
</VStack>
|
||
<List display='flex' flexDirection='column' spacing={3}>
|
||
{[
|
||
{
|
||
Icon: MdEco,
|
||
children: 'Экологически безопасные продукты',
|
||
},
|
||
{
|
||
Icon: MdMiscellaneousServices,
|
||
children: 'Быстрое и эффективное обслуживание',
|
||
},
|
||
{
|
||
Icon: MdPlace,
|
||
children: 'Удобный мобильный доступ',
|
||
},
|
||
{
|
||
Icon: MdHandshake,
|
||
children: 'Надежный и заслуживающий доверия',
|
||
},
|
||
].map((props, i) => (
|
||
<ListItem key={i} {...props} />
|
||
))}
|
||
</List>
|
||
<HStack w='full' justify='flex-end'>
|
||
<CtaButton />
|
||
</HStack>
|
||
</PageSection>
|
||
);
|
||
};
|