From 52b773379e880083be3b32438d290d6ce330b82c Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 17 Mar 2022 14:37:00 +0100
Subject: [PATCH] =?UTF-8?q?docs(lp):=20=F0=9F=92=84=20Small=20visual=20fix?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/landing-page/assets/style.css            |  10 ++
 .../Homepage/EasyBuildingExperience.tsx       |   2 +-
 .../components/Homepage/EasyEmbed.tsx         |   2 +-
 .../Homepage/Hero/BackgroundPolygons.tsx      |   4 +-
 .../components/Homepage/Hero/Hero.tsx         |  20 +---
 .../components/Homepage/Integrations.tsx      |   4 +-
 .../components/Homepage/RealTimeResults.tsx   |   1 +
 .../Homepage/Testimonials/Testimonials.tsx    |   4 +-
 .../PricingPage/PricingCard/Card.tsx          |   3 +-
 .../PricingPage/PricingCard/index.tsx         |  77 ++++++------
 apps/landing-page/pages/_document.tsx         |   2 +-
 apps/landing-page/pages/pricing.tsx           | 113 +++++++++++++++---
 12 files changed, 159 insertions(+), 83 deletions(-)

diff --git a/apps/landing-page/assets/style.css b/apps/landing-page/assets/style.css
index 4d9b51fb9..c6fe4740e 100644
--- a/apps/landing-page/assets/style.css
+++ b/apps/landing-page/assets/style.css
@@ -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% {
diff --git a/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx b/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx
index 80b6f8d3a..0f37f9cc9 100644
--- a/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx
+++ b/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx
@@ -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>
diff --git a/apps/landing-page/components/Homepage/EasyEmbed.tsx b/apps/landing-page/components/Homepage/EasyEmbed.tsx
index ecc295d7c..28e4215e9 100644
--- a/apps/landing-page/components/Homepage/EasyEmbed.tsx
+++ b/apps/landing-page/components/Homepage/EasyEmbed.tsx
@@ -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>
diff --git a/apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx b/apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx
index ddc724116..4e0b95a97 100644
--- a/apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx
+++ b/apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx
@@ -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"
diff --git a/apps/landing-page/components/Homepage/Hero/Hero.tsx b/apps/landing-page/components/Homepage/Hero/Hero.tsx
index 158cfc0e0..c38590129 100755
--- a/apps/landing-page/components/Homepage/Hero/Hero.tsx
+++ b/apps/landing-page/components/Homepage/Hero/Hero.tsx
@@ -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"
             />
diff --git a/apps/landing-page/components/Homepage/Integrations.tsx b/apps/landing-page/components/Homepage/Integrations.tsx
index c9a367c95..455a7f35d 100644
--- a/apps/landing-page/components/Homepage/Integrations.tsx
+++ b/apps/landing-page/components/Homepage/Integrations.tsx
@@ -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>
diff --git a/apps/landing-page/components/Homepage/RealTimeResults.tsx b/apps/landing-page/components/Homepage/RealTimeResults.tsx
index 6642b2613..3c51813b9 100644
--- a/apps/landing-page/components/Homepage/RealTimeResults.tsx
+++ b/apps/landing-page/components/Homepage/RealTimeResults.tsx
@@ -109,6 +109,7 @@ export const RealTimeResults = () => {
               borderRadius: '0.5rem',
               border: 'none',
               backgroundColor: 'white',
+              pointerEvents: 'none',
             }}
           />
         </Stack>
diff --git a/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx b/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx
index c9cb88095..d097244c5 100755
--- a/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx
+++ b/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx
@@ -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"
diff --git a/apps/landing-page/components/PricingPage/PricingCard/Card.tsx b/apps/landing-page/components/PricingPage/PricingCard/Card.tsx
index 4498a77ab..d97f23b02 100644
--- a/apps/landing-page/components/PricingPage/PricingCard/Card.tsx
+++ b/apps/landing-page/components/PricingPage/PricingCard/Card.tsx
@@ -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"
diff --git a/apps/landing-page/components/PricingPage/PricingCard/index.tsx b/apps/landing-page/components/PricingPage/PricingCard/index.tsx
index 790a237b2..0cd0b04dd 100644
--- a/apps/landing-page/components/PricingPage/PricingCard/index.tsx
+++ b/apps/landing-page/components/PricingPage/PricingCard/index.tsx
@@ -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>
   )
 }
diff --git a/apps/landing-page/pages/_document.tsx b/apps/landing-page/pages/_document.tsx
index bafa31391..1dabc22bb 100644
--- a/apps/landing-page/pages/_document.tsx
+++ b/apps/landing-page/pages/_document.tsx
@@ -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 />
diff --git a/apps/landing-page/pages/pricing.tsx b/apps/landing-page/pages/pricing.tsx
index 82932a321..2ff6d0491 100644
--- a/apps/landing-page/pages/pricing.tsx
+++ b/apps/landing-page/pages/pricing.tsx
@@ -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