blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Small visual fixes

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-17 14:37:00 +01:00
parent 8ba231f393
commit 52b773379e
12 changed files with 159 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/landing-page/assets/style.css
View File

@ -25,9 +25,19 @@
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-3000 {
animation-delay: 3s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.animation-delay-5000 {
animation-delay: 5s;
}
@keyframes blob {
0% {

2
apps/landing-page/components/Homepage/EasyBuildingExperience.tsx
View File

@ -27,7 +27,7 @@ export const EasyBuildingExperience = () => {
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="300px">
<Stack spacing="6" maxW="300px" minW={[0, '300px']}>
<Heading as="h1" data-aos="fade">
Easy building experience
</Heading>

2
apps/landing-page/components/Homepage/EasyEmbed.tsx
View File

@ -27,7 +27,7 @@ export const EasyEmbed = () => {
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="300px">
<Stack spacing="6" maxW="300px" minW={[0, '300px']}>
<Heading as="h1" data-aos="fade">
Embed it in a click
</Heading>

4
apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx
View File

@ -6,7 +6,7 @@ export const BackgroundPolygons = () => {
<>
<chakra.div
display={{ base: 'none', xl: 'block' }}
animation="float 6s ease-in-out infinite;"
className="floating animation-delay-3000"
pos="absolute"
left="0px"
top="100px"
@ -17,7 +17,7 @@ export const BackgroundPolygons = () => {
</chakra.div>
<chakra.div
display={{ base: 'none', xl: 'block' }}
animation="float 6s ease-in-out 700ms infinite;"
className="floating animation-delay-4000"
pos="absolute"
right="-10px"
top="30px"

20
apps/landing-page/components/Homepage/Hero/Hero.tsx
View File

@ -15,7 +15,6 @@ import { BackgroundPolygons } from './BackgroundPolygons'
import * as Logos from './Brands'
import Image from 'next/image'
import builderScreenshotSrc from 'public/images/homepage/builder.png'
import { GitHubIcon } from 'assets/icons'
export const Hero = () => {
return (
@ -62,23 +61,10 @@ export const Hero = () => {
>
Create a typebot
</Button>
<Button
as={NextChakraLink}
href="https://github.com/baptisteArno/typebot.io"
isExternal={true}
colorScheme="gray"
size="lg"
height="4rem"
px="2rem"
variant="outline"
leftIcon={<GitHubIcon />}
>
Star us on GitHub
</Button>
</Stack>
<Text color="gray.400" data-aos="fade-up" data-aos-delay="300">
No trial. Generous, unlimited <strong>free</strong> plan.
Generous, unlimited <strong>free</strong> plan.
</Text>
</VStack>
<Box maxW="1200px" pos="relative">
@ -90,7 +76,7 @@ export const Hero = () => {
rounded="full"
filter="blur(40px)"
opacity="0.7"
className="animated-blob animation-delay-2000"
className="animated-blob"
data-aos="fade"
data-aos-delay="1200"
/>
@ -102,7 +88,7 @@ export const Hero = () => {
rounded="full"
filter="blur(40px)"
opacity="0.7"
className="animated-blob animation-delay-4000"
className="animated-blob animation-delay-5000"
data-aos="fade"
data-aos-delay="1200"
/>

4
apps/landing-page/components/Homepage/Integrations.tsx
View File

@ -74,7 +74,7 @@ export const Integrations = () => (
align="center"
borderWidth="1px"
data-aos="fade"
data-aos-delay={idx * 100}
data-aos-delay={idx * 200}
>
<Icon w="full" h="full" />
</Flex>
@ -94,7 +94,7 @@ export const Integrations = () => (
align="center"
borderWidth="1px"
data-aos="fade"
data-aos-delay={(secondRowIcons.length - idx) * 100}
data-aos-delay={(secondRowIcons.length - idx) * 200}
>
<Icon w="full" h="full" />
</Flex>

1
apps/landing-page/components/Homepage/RealTimeResults.tsx
View File

@ -109,6 +109,7 @@ export const RealTimeResults = () => {
borderRadius: '0.5rem',
border: 'none',
backgroundColor: 'white',
pointerEvents: 'none',
}}
/>
</Stack>

4
apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx
View File

@ -30,7 +30,7 @@ export const Testimonials = () => {
on my marketing campaigns. I noticed the improvement on day one.
That was a game-changer.
</Testimonial>
<Testimonial
{/* <Testimonial
name="Nicolai Grut"
role="Growth Strategist @ X"
image={joshuaPictureSrc}
@ -39,7 +39,7 @@ export const Testimonials = () => {
I am really loving using Typebot! I have used so many bot builders
(ActiveChat, Botstar, Uchat, Monkeybot) and Typebot is definitely
the most user-friendly, and yet still powerful.
</Testimonial>
</Testimonial> */}
<Testimonial
name="Julien Muratot"
role="Growth Manager @ Hornetwork"

3
apps/landing-page/components/PricingPage/PricingCard/Card.tsx
View File

@ -13,8 +13,7 @@ export const Card = (props: CardProps) => {
bg={useColorModeValue('white', 'gray.700')}
position="relative"
px="6"
pb="6"
pt="16"
py="6"
overflow="hidden"
shadow="lg"
maxW="md"

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

@ -31,43 +31,48 @@ export const PricingCard = (props: PricingCardProps) => {
return (
<Card rounded="xl" bgColor="gray.800" {...rest}>
<VStack spacing={6}>
{icon}
<Heading size="md" fontWeight="extrabold">
{name}
</Heading>
</VStack>
<Flex
align="flex-end"
justify="center"
fontWeight="extrabold"
color={accentColor}
my="8"
>
<Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
{price}
</Heading>
{(price.includes('$') || price.includes('€')) && (
<Text fontWeight="inherit" fontSize="xl">
/ mo
</Text>
)}
<Flex justifyContent="space-between" flexDir="column" h="full">
<Flex flexDir="column">
<VStack spacing={6}>
{icon}
<Heading size="md" fontWeight="extrabold">
{name}
</Heading>
</VStack>
<Flex
align="flex-end"
justify="center"
fontWeight="extrabold"
color={accentColor}
my="8"
>
<Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
{price}
</Heading>
{(price.includes('$') || price.includes('€')) && (
<Text fontWeight="inherit" fontSize="xl">
/ month
</Text>
)}
</Flex>
<List spacing="4" mb="8" maxW="30ch" mx="auto">
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListIcon
fontSize="xl"
as={CheckIcon}
marginEnd={2}
color={accentColor}
fill="blue.200"
/>
{feature}
</ListItem>
))}
</List>
</Flex>
{button}
</Flex>
<List spacing="4" mb="8" maxW="30ch" mx="auto">
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListIcon
fontSize="xl"
as={CheckIcon}
marginEnd={2}
color={accentColor}
fill="blue.200"
/>
{feature}
</ListItem>
))}
</List>
{button}
</Card>
)
}

2
apps/landing-page/pages/_document.tsx
View File

@ -21,7 +21,7 @@ class MyDocument extends Document {
<link href="./styles/aos-noscript.css" rel="stylesheet" />
</noscript>
</Head>
<body>
<body style={{ backgroundColor: '#171923' }}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />

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

@ -1,5 +1,14 @@
import { VStack } from '@chakra-ui/layout'
import { DarkMode, Flex, Stack } from '@chakra-ui/react'
import { Box, Heading, VStack } from '@chakra-ui/layout'
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
DarkMode,
Flex,
Stack,
} from '@chakra-ui/react'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
@ -28,19 +37,6 @@ const Pricing = () => {
pb={40}
>
<SocialMetaTags currentUrl={`https://www.typebot.io/pricing`} />
<Head>
<link
rel="alternate"
hrefLang="en"
href="https://www.typebot.io/pricing"
/>
<link
rel="alternate"
hrefLang="fr"
href="https://www.typebot.io/fr/pricing"
/>
</Head>
<BackgroundPolygons />
<DarkMode>
<Navbar />
@ -49,7 +45,7 @@ const Pricing = () => {
<VStack spacing={40} w="full">
<Stack
direction={['column', 'row']}
alignItems={['stretch', 'flex-start']}
alignItems={['stretch']}
spacing={10}
px={[4, 0]}
mt={[20, 32]}
@ -63,9 +59,9 @@ const Pricing = () => {
features: [
'Unlimited typebots',
'Unlimited responses',
'Custom JS / CSS',
'Native integrations (Google Sheets, Webhooks, Zapier...)',
'Basic analytics (Sessions, time, completion...)',
'Native integrations',
'Webhooks',
'Custom Javascript & CSS',
],
}}
button={
@ -105,6 +101,10 @@ const Pricing = () => {
}
/>
</Stack>
<VStack w="full" maxW="900px" spacing="10" px="4">
<Heading textAlign="center">Frequently asked questions</Heading>
<Faq />
</VStack>
</VStack>
</Flex>
<Footer />
@ -112,4 +112,79 @@ const Pricing = () => {
)
}
const Faq = () => {
return (
<Accordion w="full" allowToggle defaultIndex={0}>
<AccordionItem>
<Heading as="h2">
<AccordionButton py="6">
<Box flex="1" textAlign="left" fontSize="2xl">
How can I use Typebot with my team?
</Box>
<AccordionIcon />
</AccordionButton>
</Heading>
<AccordionPanel pb={4}>
Typebot allows you to invite your colleagues to collaborate on any of
your typebot. You can give him access as a reader or an editor. Your
colleague's account can be a free account. <br />
<br />
I'm working on a better solution for teams with shared workspaces and
other team-oriented features.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<Heading as="h2">
<AccordionButton py="6">
<Box flex="1" textAlign="left" fontSize="2xl">
How many seats will I have with the Pro plan?
</Box>
<AccordionIcon />
</AccordionButton>
</Heading>
<AccordionPanel pb={4}>
You'll have only one seat. You can invite your colleagues to
collaborate on your typebots even though they have a free account.
</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