85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
Flex,
|
|
Heading,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
VStack,
|
|
} from '@chakra-ui/react'
|
|
import { FeatureCard } from './FeatureCard'
|
|
import { FolderIcon } from 'assets/icons/FolderIcon'
|
|
import { AccessibilityIcon } from 'assets/icons/AccessibilityIcon'
|
|
import { CalculatorIcon } from 'assets/icons/CaluclatorIcon'
|
|
import { ConditionIcon } from 'assets/icons/ConditionIcon'
|
|
import { PersonAddIcon } from 'assets/icons/PersonAddIcon'
|
|
import { ShareIcon } from 'assets/icons/ShareIcon'
|
|
|
|
const features = [
|
|
{
|
|
Icon: AccessibilityIcon,
|
|
title: 'Hidden fields',
|
|
content:
|
|
'Include data in your form URL to segment your user and use its data directly in your form.',
|
|
},
|
|
{
|
|
Icon: PersonAddIcon,
|
|
title: 'Team collaboration',
|
|
content: 'Invite your teammates to work on your typebots with you',
|
|
},
|
|
{
|
|
Icon: ConditionIcon,
|
|
title: 'Link to sub typebots',
|
|
content: 'Reuse your typebots in different parent bots.',
|
|
},
|
|
{
|
|
Icon: CalculatorIcon,
|
|
title: 'Custom code',
|
|
content: 'Customize everything with your own Javascript & CSS code',
|
|
},
|
|
{
|
|
Icon: ShareIcon,
|
|
title: 'Custom domain',
|
|
content: 'Connect your typebot to the custom URL of your choice',
|
|
},
|
|
{
|
|
Icon: FolderIcon,
|
|
title: 'Folder management',
|
|
content:
|
|
'Organize your typebots in specific folders to keep it clean and work with multiple clients',
|
|
},
|
|
]
|
|
|
|
export const Features = () => {
|
|
return (
|
|
<Flex justifyContent="center">
|
|
<Stack
|
|
style={{ maxWidth: '1200px' }}
|
|
pt={'52'}
|
|
w="full"
|
|
px="4"
|
|
spacing={12}
|
|
>
|
|
<VStack>
|
|
<Heading as="h1" textAlign="center" data-aos="fade">
|
|
And many more features
|
|
</Heading>
|
|
<Text
|
|
color="gray.500"
|
|
fontSize={['lg', 'xl']}
|
|
textAlign="center"
|
|
data-aos="fade"
|
|
>
|
|
Typebot makes form building easy and comes with powerful features
|
|
</Text>
|
|
</VStack>
|
|
<SimpleGrid columns={[1, 3]} spacing="10" pt="10" data-aos="fade">
|
|
{features.map((feature, idx) => (
|
|
<FeatureCard key={idx} {...feature} />
|
|
))}
|
|
</SimpleGrid>
|
|
</Stack>
|
|
</Flex>
|
|
)
|
|
}
|