372 lines
13 KiB
TypeScript
372 lines
13 KiB
TypeScript
import {
|
|
Accordion,
|
|
AccordionButton,
|
|
AccordionIcon,
|
|
AccordionItem,
|
|
AccordionPanel,
|
|
DarkMode,
|
|
Flex,
|
|
Stack,
|
|
Box,
|
|
Heading,
|
|
VStack,
|
|
Text,
|
|
chakra,
|
|
Tooltip,
|
|
HStack,
|
|
} from '@chakra-ui/react'
|
|
import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
|
|
import { Footer } from 'components/common/Footer'
|
|
import { Header } from 'components/common/Header/Header'
|
|
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
|
|
import { SocialMetaTags } from 'components/common/SocialMetaTags'
|
|
import { BackgroundPolygons } from 'components/Homepage/Hero/BackgroundPolygons'
|
|
import { PlanComparisonTables } from 'components/PricingPage/PlanComparisonTables'
|
|
import { PricingCard } from 'components/PricingPage/PricingCard'
|
|
import { ActionButton } from 'components/PricingPage/PricingCard/ActionButton'
|
|
import { useEffect, useState } from 'react'
|
|
import { formatPrice, prices } from 'utils'
|
|
import { Plan } from 'db'
|
|
import { StripeClimateLogo } from 'assets/logos/StripeClimateLogo'
|
|
|
|
const Pricing = () => {
|
|
const [starterPrice, setStarterPrice] = useState('$39')
|
|
const [proPrice, setProPrice] = useState('$89')
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return
|
|
setStarterPrice(formatPrice(prices.STARTER))
|
|
setProPrice(formatPrice(prices.PRO))
|
|
}, [])
|
|
|
|
return (
|
|
<Stack overflowX="hidden" bgColor="gray.900">
|
|
<Flex
|
|
pos="relative"
|
|
flexDir="column"
|
|
minHeight="100vh"
|
|
alignItems="center"
|
|
bgGradient="linear(to-b, gray.900, gray.800)"
|
|
pb={40}
|
|
>
|
|
<SocialMetaTags currentUrl={`https://www.typebot.io/pricing`} />
|
|
<BackgroundPolygons />
|
|
<DarkMode>
|
|
<Header />
|
|
</DarkMode>
|
|
|
|
<VStack spacing={'24'} mt={[20, 32]} w="full">
|
|
<Stack align="center" spacing="12" w="full">
|
|
<VStack>
|
|
<Heading fontSize="6xl">Plans fit for you</Heading>
|
|
<Text maxW="900px" fontSize="xl" textAlign="center">
|
|
Whether you're a{' '}
|
|
<Text as="span" color="orange.200" fontWeight="bold">
|
|
solo business owner
|
|
</Text>{' '}
|
|
or a{' '}
|
|
<Text as="span" color="blue.200" fontWeight="bold">
|
|
growing startup
|
|
</Text>
|
|
, Typebot is here to help you build high-performing bots for the
|
|
right price. Pay for as little or as much usage as you need.
|
|
</Text>
|
|
</VStack>
|
|
|
|
<HStack
|
|
maxW="500px"
|
|
spacing="4"
|
|
bgColor="gray.800"
|
|
p="4"
|
|
rounded="md"
|
|
>
|
|
<StripeClimateLogo />
|
|
<Text fontSize="sm">
|
|
Typebot is contributing 1% of your subscription to remove CO₂
|
|
from the atmosphere.{' '}
|
|
<NextChakraLink
|
|
href="https://climate.stripe.com/5VCRAq"
|
|
isExternal
|
|
textDecor="underline"
|
|
>
|
|
More info.
|
|
</NextChakraLink>
|
|
</Text>
|
|
</HStack>
|
|
<Stack
|
|
direction={['column', 'row']}
|
|
alignItems={['stretch']}
|
|
spacing={10}
|
|
px={[4, 0]}
|
|
w="full"
|
|
maxW="1200px"
|
|
>
|
|
<PricingCard
|
|
data={{
|
|
price: 'Free',
|
|
name: 'Personal',
|
|
features: [
|
|
'Unlimited typebots',
|
|
<>
|
|
<Text>
|
|
<chakra.span fontWeight="bold">300 chats</chakra.span>{' '}
|
|
included
|
|
</Text>
|
|
|
|
<Tooltip
|
|
hasArrow
|
|
placement="top"
|
|
label="A chat is counted whenever a user starts a discussion. It is
|
|
independant of the number of messages he sends and receives."
|
|
>
|
|
<chakra.span cursor="pointer" h="7">
|
|
<HelpCircleIcon />
|
|
</chakra.span>
|
|
</Tooltip>
|
|
</>,
|
|
'Native integrations',
|
|
'Webhooks',
|
|
'Custom Javascript & CSS',
|
|
],
|
|
}}
|
|
button={
|
|
<NextChakraLink
|
|
href="https://app.typebot.io/register"
|
|
_hover={{ textDecor: 'none' }}
|
|
>
|
|
<ActionButton variant="outline">Get started</ActionButton>
|
|
</NextChakraLink>
|
|
}
|
|
/>
|
|
<PricingCard
|
|
data={{
|
|
price: starterPrice,
|
|
name: 'Starter',
|
|
featureLabel: 'Everything in Personal, plus:',
|
|
features: [
|
|
<Text key="seats">
|
|
<chakra.span fontWeight="bold">2 seats</chakra.span>{' '}
|
|
included
|
|
</Text>,
|
|
<>
|
|
<Text>
|
|
<chakra.span fontWeight="bold">2,000 chats</chakra.span>{' '}
|
|
included
|
|
</Text>
|
|
|
|
<Tooltip
|
|
hasArrow
|
|
placement="top"
|
|
label="A chat is counted whenever a user starts a discussion. It is
|
|
independant of the number of messages he sends and receives."
|
|
>
|
|
<chakra.span cursor="pointer" h="7">
|
|
<HelpCircleIcon />
|
|
</chakra.span>
|
|
</Tooltip>
|
|
</>,
|
|
<>
|
|
<Text>
|
|
<chakra.span fontWeight="bold">2 GB</chakra.span>{' '}
|
|
included
|
|
</Text>
|
|
|
|
<Tooltip
|
|
hasArrow
|
|
placement="top"
|
|
label="You accumulate storage for every file that your user upload
|
|
into your bot. If you delete the result, it will free up the
|
|
space."
|
|
>
|
|
<chakra.span cursor="pointer" h="7">
|
|
<HelpCircleIcon />
|
|
</chakra.span>
|
|
</Tooltip>
|
|
</>,
|
|
'Branding removed',
|
|
'Collect files from users',
|
|
'Create folders',
|
|
],
|
|
}}
|
|
borderWidth="1px"
|
|
borderColor="orange.200"
|
|
button={
|
|
<NextChakraLink
|
|
href={`https://app.typebot.io/register?subscribePlan=${Plan.STARTER}`}
|
|
_hover={{ textDecor: 'none' }}
|
|
>
|
|
<ActionButton>Subscribe now</ActionButton>
|
|
</NextChakraLink>
|
|
}
|
|
/>
|
|
<PricingCard
|
|
data={{
|
|
price: proPrice,
|
|
name: 'Pro',
|
|
featureLabel: 'Everything in Starter, plus:',
|
|
features: [
|
|
<Text key="seats">
|
|
<chakra.span fontWeight="bold">5 seats</chakra.span>{' '}
|
|
included
|
|
</Text>,
|
|
<>
|
|
<Text>
|
|
<chakra.span fontWeight="bold">
|
|
10,000 chats
|
|
</chakra.span>{' '}
|
|
included
|
|
</Text>
|
|
|
|
<Tooltip
|
|
hasArrow
|
|
placement="top"
|
|
label="A chat is counted whenever a user starts a discussion. It is
|
|
independant of the number of messages he sends and receives."
|
|
>
|
|
<chakra.span cursor="pointer" h="7">
|
|
<HelpCircleIcon />
|
|
</chakra.span>
|
|
</Tooltip>
|
|
</>,
|
|
<>
|
|
<Text>
|
|
<chakra.span fontWeight="bold">10 GB</chakra.span>{' '}
|
|
included
|
|
</Text>
|
|
|
|
<Tooltip
|
|
hasArrow
|
|
placement="top"
|
|
label="You accumulate storage for every file that your user upload
|
|
into your bot. If you delete the result, it will free up the
|
|
space."
|
|
>
|
|
<chakra.span cursor="pointer" h="7">
|
|
<HelpCircleIcon />
|
|
</chakra.span>
|
|
</Tooltip>
|
|
</>,
|
|
'Custom domains',
|
|
'In-depth analytics',
|
|
],
|
|
}}
|
|
borderWidth="3px"
|
|
borderColor="blue.200"
|
|
button={
|
|
<NextChakraLink
|
|
href={`https://app.typebot.io/register?subscribePlan=${Plan.PRO}`}
|
|
_hover={{ textDecor: 'none' }}
|
|
>
|
|
<ActionButton>Subscribe now</ActionButton>
|
|
</NextChakraLink>
|
|
}
|
|
/>
|
|
</Stack>
|
|
<Text fontSize="lg">
|
|
Need custom limits? Specific features?{' '}
|
|
<NextChakraLink
|
|
href={'https://typebot.io/enterprise-lead-form'}
|
|
isExternal
|
|
textDecor="underline"
|
|
>
|
|
Let's chat!
|
|
</NextChakraLink>
|
|
</Text>
|
|
</Stack>
|
|
|
|
<VStack maxW="1200px" w="full" spacing={[12, 20]} px="4">
|
|
<Stack w="full" spacing={10} display={['none', 'flex']}>
|
|
<Heading>Compare plans & features</Heading>
|
|
<PlanComparisonTables
|
|
starterPrice={starterPrice}
|
|
proPrice={proPrice}
|
|
/>
|
|
</Stack>
|
|
<VStack w="full" spacing="10">
|
|
<Heading textAlign="center">Frequently asked questions</Heading>
|
|
<Faq />
|
|
</VStack>
|
|
</VStack>
|
|
</VStack>
|
|
</Flex>
|
|
<Footer />
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
const Faq = () => {
|
|
return (
|
|
<Accordion w="full" allowToggle defaultIndex={0}>
|
|
<AccordionItem>
|
|
<Heading as="h2">
|
|
<AccordionButton py="6">
|
|
<Box flex="1" textAlign="left" fontSize="2xl">
|
|
What happens once I reach the monthly chats limit?
|
|
</Box>
|
|
<AccordionIcon />
|
|
</AccordionButton>
|
|
</Heading>
|
|
<AccordionPanel pb={4}>
|
|
You will receive an email notification once you reached 80% of this
|
|
limit. Then, once you reach 100%, the bot will be closed to new users.
|
|
Upgrading your limit will automatically reopen the bot.
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<Heading as="h2">
|
|
<AccordionButton py="6">
|
|
<Box flex="1" textAlign="left" fontSize="2xl">
|
|
What happens once I reach the storage limit?
|
|
</Box>
|
|
<AccordionIcon />
|
|
</AccordionButton>
|
|
</Heading>
|
|
<AccordionPanel pb={4}>
|
|
You will receive an email notification once you reached 80% of this
|
|
limit. Then, once you reach 100%, your users will still be able to
|
|
chat with your bot but their uploads won't be stored anymore. You will
|
|
need to upgrade the limit or free up some space to continue collecting
|
|
your users' files.
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<Heading as="h2">
|
|
<AccordionButton py="6">
|
|
<Box flex="1" textAlign="left" fontSize="2xl">
|
|
Why is there no trial?
|
|
</Box>
|
|
<AccordionIcon />
|
|
</AccordionButton>
|
|
</Heading>
|
|
<AccordionPanel pb={4}>
|
|
For now, Typebot offers a Freemium based business model. My goal is to
|
|
make sure you have time to create awesome bots and collect valuable
|
|
results. If you need advanced features then you can upgrade any time.
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<Heading as="h2">
|
|
<AccordionButton py="6">
|
|
<Box flex="1" textAlign="left" fontSize="2xl">
|
|
If I change my mind, can I get a refund?
|
|
</Box>
|
|
<AccordionIcon />
|
|
</AccordionButton>
|
|
</Heading>
|
|
<AccordionPanel pb={4}>
|
|
Sure! Just{' '}
|
|
<NextChakraLink
|
|
href="mailto:baptiste@typebot.io"
|
|
textDecor="underline"
|
|
>
|
|
shoot me an email
|
|
</NextChakraLink>{' '}
|
|
and we'll figure things out 😀
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
)
|
|
}
|
|
|
|
export default Pricing
|