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.
61 lines
1.8 KiB
61 lines
1.8 KiB
import { AddIcon, MinusIcon } from '@chakra-ui/icons'
|
|
import {
|
|
Accordion,
|
|
AccordionButton,
|
|
AccordionIcon,
|
|
AccordionItem,
|
|
AccordionPanel,
|
|
Box,
|
|
Container,
|
|
Heading,
|
|
Stack,
|
|
Text,
|
|
} from '@chakra-ui/react'
|
|
import React from 'react'
|
|
import { howItWorksContent } from './howItWorksContent'
|
|
|
|
export default function HowItWorksSection() {
|
|
return (
|
|
<Box p={4}>
|
|
<Stack spacing={4} as={Container} maxW={'6xl'}>
|
|
<a id='#how-it-works'>
|
|
<Heading fontSize={'3xl'} textAlign={'center'}>
|
|
How It Works
|
|
</Heading>
|
|
</a>
|
|
<Text color={'gray.600'} fontSize={'lg'} textAlign={'justify'}>
|
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
|
|
exercitationem quo quibusdam, fugit quaerat odio quisquam commodi ut?
|
|
Aliquid ab sapiente, expedita quas neque amet consectetur quisquam
|
|
reprehenderit voluptas commodi?
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Container maxW={'6xl'} mt={10}>
|
|
<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>
|
|
)
|
|
}
|