blsmedia/bot
2
0
Fork 0
Code Activity

✨ (lp) Add new pricing page

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-09-18 19:01:37 +02:00
committed by Baptiste Arnaud
parent d8b1d8ad59
commit c94a6581be
18 changed files with 346 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
apps/landing-page/components/PricingPage/PlanComparisonTables.tsx
View File

@@ -18,16 +18,19 @@ import {
import { CheckIcon } from 'assets/icons/CheckIcon'
import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { Plan } from 'db'
import React from 'react'
type Props = {
prices: {
personalPro: '$39' | '39€' | ''
team: '$99' | '99€' | ''
}
starterPrice: string
proPrice: string
} & StackProps
export const PlanComparisonTables = ({ prices, ...props }: Props) => {
export const PlanComparisonTables = ({
starterPrice,
proPrice,
...props
}: Props) => {
return (
<Stack spacing="12" {...props}>
<TableContainer>
@@ -37,29 +40,47 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
<Th fontWeight="bold" color="white" w="400px">
Usage
</Th>
<Th>Personal</Th>
<Th color="orange.200">Personal Pro</Th>
<Th color="purple.200">Team</Th>
<Th>Free</Th>
<Th color="orange.200">Starter</Th>
<Th color="purple.200">Pro</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Forms</Td>
<Td>Total bots</Td>
<Td>Unlimited</Td>
<Td>Unlimited</Td>
<Td>Unlimited</Td>
</Tr>
<Tr>
<Td>Form submissions</Td>
<Td>Unlimited</Td>
<Td>Unlimited</Td>
<Td>Unlimited</Td>
<Td>Chats</Td>
<Td>300 / month</Td>
<Td>2,000 / month</Td>
<Td>10,000 / month</Td>
</Tr>
<Tr>
<Td>Additional Chats</Td>
<Td />
<Td>$10 per 500</Td>
<Td>$10 per 1,000</Td>
</Tr>
<Tr>
<Td>Storage</Td>
<Td />
<Td>2 GB</Td>
<Td>10 GB</Td>
</Tr>
<Tr>
<Td>Additional Storage</Td>
<Td />
<Td>$5 per 1 GB</Td>
<Td>$5 per 1 GB</Td>
</Tr>
<Tr>
<Td>Members</Td>
<Td>Just you</Td>
<Td>Just you</Td>
<Td>Unlimited</Td>
<Td>2 seats</Td>
<Td>5 seats</Td>
</Tr>
<Tr>
<Td>Guests</Td>
@@ -67,12 +88,6 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
<Td>Unlimited</Td>
<Td>Unlimited</Td>
</Tr>
<Tr>
<Td>File uploads</Td>
<Td>5 MB</Td>
<Td>Unlimited</Td>
<Td>Unlimited</Td>
</Tr>
</Tbody>
</Table>
</TableContainer>
@@ -83,9 +98,9 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
<Th fontWeight="bold" color="white" w="400px">
Features
</Th>
<Th>Personal</Th>
<Th color="orange.200">Personal Pro</Th>
<Th color="purple.200">Team</Th>
<Th>Free</Th>
<Th color="orange.200">Starter</Th>
<Th color="purple.200">Pro</Th>
</Tr>
</Thead>
<Tbody>
@@ -234,12 +249,6 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
<CheckIcon />
</Td>
</Tr>
<Tr>
<Td>Custom domains</Td>
<Td />
<Td>Unlimited</Td>
<Td>Unlimited</Td>
</Tr>
<Tr>
<TdWithTooltip
text="Folders"
@@ -260,17 +269,10 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
</Td>
</Tr>
<Tr>
<TdWithTooltip
text="Incomplete submissions"
tooltip="You get to see the form submission even if it was not fully completed by your user."
/>
<Td>Custom domains</Td>
<Td />
<Td>
<CheckIcon />
</Td>
<Td>
<CheckIcon />
</Td>
<Td />
<Td>Unlimited</Td>
</Tr>
<Tr>
<TdWithTooltip
@@ -278,9 +280,7 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
tooltip="Analytics graph that shows your form drop-off rate, submission rate, and more."
/>
<Td />
<Td>
<CheckIcon />
</Td>
<Td />
<Td>
<CheckIcon />
</Td>
@@ -295,18 +295,16 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
<Th fontWeight="bold" color="white" w="400px">
Support
</Th>
<Th>Personal</Th>
<Th color="orange.200">Personal Pro</Th>
<Th color="purple.200">Team</Th>
<Th>Free</Th>
<Th color="orange.200">Starter</Th>
<Th color="blue.200">Pro</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Priority support</Td>
<Td />
<Td>
<CheckIcon />
</Td>
<Td />
<Td>
<CheckIcon />
</Td>
@@ -314,9 +312,7 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
<Tr>
<Td>Feature request priority</Td>
<Td />
<Td>
<CheckIcon />
</Td>
<Td />
<Td>
<CheckIcon />
</Td>
@@ -344,28 +340,27 @@ export const PlanComparisonTables = ({ prices, ...props }: Props) => {
</Stack>
<Stack spacing={4}>
<Heading as="h3" size="md" color="orange.200">
Personal Pro
Starter
</Heading>
<Heading as="h3">
{prices.personalPro}{' '}
<chakra.span fontSize="lg">/ month</chakra.span>
{starterPrice} <chakra.span fontSize="lg">/ month</chakra.span>
</Heading>
<NextChakraLink
href="https://app.typebot.io/register?subscribePlan=pro"
href={`https://app.typebot.io/register?subscribePlan=${Plan.STARTER}`}
_hover={{ textDecor: 'none' }}
>
<Button>Subscribe</Button>
</NextChakraLink>
</Stack>
<Stack spacing={4}>
<Heading as="h3" size="md" color="purple.200">
Team
<Heading as="h3" size="md" color="blue.200">
Pro
</Heading>
<Heading as="h3">
{prices.team} <chakra.span fontSize="lg">/ month</chakra.span>
{proPrice} <chakra.span fontSize="lg">/ month</chakra.span>
</Heading>
<NextChakraLink
href="https://app.typebot.io/register?subscribePlan=team"
href={`https://app.typebot.io/register?subscribePlan=${Plan.PRO}`}
_hover={{ textDecor: 'none' }}
>
<Button>Subscribe</Button>

19
apps/landing-page/components/PricingPage/PricingCard/index.tsx
View File

@@ -13,7 +13,7 @@ import { CheckCircleIcon } from '../../../assets/icons/CheckCircleIcon'
import { Card, CardProps } from './Card'
export interface PricingCardData {
features: string[]
features: React.ReactNode[]
name: string
price: string
featureLabel?: string
@@ -23,10 +23,16 @@ interface PricingCardProps extends CardProps {
data: PricingCardData
icon?: JSX.Element
button: React.ReactElement
isMostPopular?: boolean
}
export const PricingCard = (props: PricingCardProps) => {
const { data, icon, button, ...rest } = props
export const PricingCard = ({
data,
icon,
button,
isMostPopular,
...rest
}: PricingCardProps) => {
const { features, price, name } = data
const accentColor = useColorModeValue('blue.500', 'white')
@@ -62,7 +68,12 @@ export const PricingCard = (props: PricingCardProps) => {
<Text fontWeight="bold">{data.featureLabel}</Text>
)}
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListItem
fontWeight="medium"
key={index}
display="flex"
alignItems="center"
>
<ListIcon
fontSize="xl"
as={CheckCircleIcon}

3
apps/landing-page/package.json
View File

@@ -20,7 +20,8 @@
"next": "12.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"utils": "workspace:*"
"utils": "workspace:*",
"db": "workspace:*"
},
"devDependencies": {
"@babel/core": "7.19.0",

188
apps/landing-page/pages/pricing.tsx
View File

@@ -10,7 +10,11 @@ import {
Box,
Heading,
VStack,
Text,
chakra,
Tooltip,
} 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'
@@ -20,22 +24,17 @@ import { PlanComparisonTables } from 'components/PricingPage/PlanComparisonTable
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'
const Pricing = () => {
const [price, setPrice] = useState<{
personalPro: '$39' | '39€' | ''
team: '$99' | '99€' | ''
}>({
personalPro: '',
team: '',
})
const [starterPrice, setStarterPrice] = useState('$39')
const [proPrice, setProPrice] = useState('$89')
useEffect(() => {
setPrice(
navigator.languages.find((l) => l.includes('fr'))
? { personalPro: '39€', team: '99€' }
: { personalPro: '$39', team: '$99' }
)
if (typeof window === 'undefined') return
setStarterPrice(formatPrice(prices.STARTER))
setProPrice(formatPrice(prices.PRO))
}, [])
return (
@@ -54,13 +53,28 @@ const Pricing = () => {
<Header />
</DarkMode>
<VStack spacing={40} w="full">
<VStack spacing={'24'} mt={[20, 32]} w="full">
<Stack align="center" spacing="6">
<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>
</Stack>
<Stack
direction={['column', 'row']}
alignItems={['stretch']}
spacing={10}
px={[4, 0]}
mt={[20, 32]}
w="full"
maxW="1200px"
>
@@ -70,7 +84,7 @@ const Pricing = () => {
name: 'Personal',
features: [
'Unlimited typebots',
'Unlimited responses',
'300 chats included',
'Native integrations',
'Webhooks',
'Custom Javascript & CSS',
@@ -87,58 +101,134 @@ const Pricing = () => {
/>
<PricingCard
data={{
price: price.personalPro,
name: 'Personal Pro',
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>
&nbsp;
<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 chats</chakra.span>{' '}
included
</Text>
&nbsp;
<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',
'View incomplete submissions',
'In-depth drop off analytics',
'Custom domains',
'Organize typebots in folders',
'File upload input',
'Collect files from users',
'Create folders',
],
}}
borderWidth="3px"
borderWidth="1px"
borderColor="orange.200"
button={
<NextChakraLink
href="https://app.typebot.io/register?subscribePlan=pro"
_hover={{ textDecor: 'none' }}
>
<ActionButton colorScheme="orange">
Subscribe now
</ActionButton>
</NextChakraLink>
}
/>
<PricingCard
data={{
price: price.team,
name: 'Team',
featureLabel: 'Everything in Pro, plus:',
features: [
'Unlimited team members',
'Collaborative workspace',
'Custom roles',
],
}}
borderWidth="3px"
borderColor="purple.200"
button={
<NextChakraLink
href="https://app.typebot.io/register?subscribePlan=team"
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>
&nbsp;
<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 chats</chakra.span>{' '}
included
</Text>
&nbsp;
<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>
}
isMostPopular
/>
</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 prices={price} />
<PlanComparisonTables
starterPrice={starterPrice}
proPrice={proPrice}
/>
</Stack>
<VStack w="full" spacing="10">
<Heading textAlign="center">Frequently asked questions</Heading>