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.
64 lines
1.8 KiB
64 lines
1.8 KiB
import { CheckIcon } from '@chakra-ui/icons'
|
|
import {
|
|
Box,
|
|
Container,
|
|
Heading,
|
|
HStack,
|
|
Icon,
|
|
SimpleGrid,
|
|
Text,
|
|
useColorModeValue,
|
|
VStack,
|
|
} from '@chakra-ui/react'
|
|
import React from 'react'
|
|
import { featuresContent } from './featuresContent'
|
|
import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
|
|
|
|
const FeatureCard = ({ feature }) => {
|
|
const boxBgColor = useColorModeValue('gray.100', 'gray.800')
|
|
return (
|
|
<HStack
|
|
align={'top'}
|
|
borderWidth='1px'
|
|
borderRadius='sm'
|
|
p={2}
|
|
shadow='lg'
|
|
background={boxBgColor}
|
|
>
|
|
<Box color={'green.400'} px={1}>
|
|
<Icon as={CheckIcon} />
|
|
</Box>
|
|
<VStack align={'start'}>
|
|
<Text fontWeight={800}>{feature.title}</Text>
|
|
<Text fontWeight='normal'>{feature.description}</Text>
|
|
</VStack>
|
|
</HStack>
|
|
)
|
|
}
|
|
|
|
export default function FeaturesSection() {
|
|
return (
|
|
<AnimatedScrollWrapper>
|
|
<Box p={4} my={16} maxW={'6xl'}>
|
|
<Heading fontSize={'3xl'} textAlign={'center'} pb={0}>
|
|
Features
|
|
</Heading>
|
|
<Text color={'gray.600'} fontSize={'lg'} textAlign={'center'}>
|
|
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>
|
|
|
|
<Container maxW={'6xl'} mt={0}>
|
|
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3} pt={16}>
|
|
{featuresContent.map((feature, i) => (
|
|
<FeatureCard key={feature.title} feature={feature} />
|
|
))}
|
|
</SimpleGrid>
|
|
</Container>
|
|
</Box>
|
|
</AnimatedScrollWrapper>
|
|
)
|
|
}
|