76 lines
2.2 KiB
TypeScript
76 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 typebot with you',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Icon: ConditionIcon,
|
||
|
|
title: 'Conditional branching',
|
||
|
|
content:
|
||
|
|
'Make your form smarter by adding conditions to display custom answers to your users',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Icon: CalculatorIcon,
|
||
|
|
title: 'Computation',
|
||
|
|
content:
|
||
|
|
'Use the calculator to compute anything in Typebot directly to generate a quote or compute a score',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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={32} w="full" px="4" spacing={6}>
|
||
|
|
<VStack>
|
||
|
|
<Heading as="h1" textAlign="center">
|
||
|
|
And many more features
|
||
|
|
</Heading>
|
||
|
|
<Text color="gray.500" size="lg" textAlign="center">
|
||
|
|
Typebot makes form building easy and comes with powerful features
|
||
|
|
</Text>
|
||
|
|
<SimpleGrid columns={[1, 3]} spacing="10" pt="10">
|
||
|
|
{features.map((feature, idx) => (
|
||
|
|
<FeatureCard key={idx} {...feature} />
|
||
|
|
))}
|
||
|
|
</SimpleGrid>
|
||
|
|
</VStack>
|
||
|
|
</Stack>
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
}
|