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.
57 lines
1.7 KiB
57 lines
1.7 KiB
import { AddIcon, MinusIcon } from '@chakra-ui/icons'
|
|
import {
|
|
Accordion,
|
|
AccordionButton,
|
|
AccordionItem,
|
|
AccordionPanel,
|
|
Box,
|
|
Container,
|
|
Heading,
|
|
Text,
|
|
} from '@chakra-ui/react'
|
|
import React from 'react'
|
|
import { howItWorksContent } from './howItWorksContent'
|
|
|
|
export default function HowItWorksSection() {
|
|
return (
|
|
<Box px={4} my={24} maxW={'6xl'}>
|
|
{/* @ts-ignore */}
|
|
<a name='how-it-works'>
|
|
<Heading fontSize={'3xl'} textAlign={'center'}>
|
|
How It Works
|
|
</Heading>
|
|
</a>
|
|
<Text color={'gray.600'} fontSize={'lg'} textAlign={'center'}>
|
|
How it works is simple. You install the app on your Android device, and
|
|
it will turn your device into a SMS Gateway. You can then use the API to
|
|
send SMS messages from your own applications.
|
|
</Text>
|
|
|
|
<Container maxW={'6xl'} mt={10} pt={0}>
|
|
<Accordion allowMultiple defaultIndex={[]}>
|
|
{howItWorksContent.map(({ title, description }) => (
|
|
<AccordionItem key={title}>
|
|
{({ isExpanded }) => (
|
|
<>
|
|
<h2>
|
|
<AccordionButton>
|
|
<Box as='span' flex='1' textAlign='left'>
|
|
{title}
|
|
</Box>
|
|
{isExpanded ? (
|
|
<MinusIcon fontSize='12px' />
|
|
) : (
|
|
<AddIcon fontSize='12px' />
|
|
)}
|
|
</AccordionButton>
|
|
</h2>
|
|
<AccordionPanel pb={4}>{description}</AccordionPanel>
|
|
</>
|
|
)}
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</Container>
|
|
</Box>
|
|
)
|
|
}
|