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.
51 lines
1.6 KiB
51 lines
1.6 KiB
import { CheckIcon } from '@chakra-ui/icons'
|
|
import {
|
|
Box,
|
|
Container,
|
|
Heading,
|
|
HStack,
|
|
Icon,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
VStack,
|
|
} from '@chakra-ui/react'
|
|
import React from 'react'
|
|
import { featuresContent } from './featuresContent'
|
|
|
|
const FeaturesSection = () => {
|
|
return (
|
|
<Box p={4}>
|
|
<Stack spacing={4} as={Container} maxW={'6xl'}>
|
|
<Heading fontSize={'3xl'} textAlign={'center'} pb={8}>
|
|
Features
|
|
</Heading>
|
|
<Text color={'gray.600'} fontSize={'lg'} textAlign={'justify'}>
|
|
The ultimate solution for your messaging needs! Our free open-source
|
|
Android-based SMS Gateway provides you with all the features you need
|
|
to effectively manage your SMS communications. From sending messages
|
|
and automating messaging workflows via API, our SMS Gateway is the
|
|
perfect tool for any small/mid business or individual.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Container maxW={'6xl'} mt={10}>
|
|
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3} pt={16}>
|
|
{featuresContent.map((feature, i) => (
|
|
<HStack key={i} align={'top'} borderWidth="1px" borderRadius="md" p={2} shadow='lg' >
|
|
<Box color={'green.400'} px={1}>
|
|
<Icon as={CheckIcon} />
|
|
</Box>
|
|
<VStack align={'start'}>
|
|
<Text fontWeight={600}>{feature.title}</Text>
|
|
<Text color={'gray.600'}>{feature.description}</Text>
|
|
</VStack>
|
|
</HStack>
|
|
))}
|
|
</SimpleGrid>
|
|
</Container>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default FeaturesSection
|