docs(lp): 💄 Small visual fixes

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% {

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>

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>

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"

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"
             />

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>

apps/landing-page/components/Homepage/RealTimeResults.tsx

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

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"

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"
+      py="6"
-      pt="16"
       overflow="hidden"
       shadow="lg"
       maxW="md"

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}>
+      <Flex justifyContent="space-between" flexDir="column" h="full">
-        {icon}
+        <Flex flexDir="column">
-        <Heading size="md" fontWeight="extrabold">
+          <VStack spacing={6}>
-          {name}
+            {icon}
-        </Heading>
+            <Heading size="md" fontWeight="extrabold">
-      </VStack>
+              {name}
-      <Flex
+            </Heading>
-        align="flex-end"
+          </VStack>
-        justify="center"
+          <Flex
-        fontWeight="extrabold"
+            align="flex-end"
-        color={accentColor}
+            justify="center"
-        my="8"
+            fontWeight="extrabold"
-      >
+            color={accentColor}
-        <Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
+            my="8"
-          {price}
+          >
-        </Heading>
+            <Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
-        {(price.includes('$') || price.includes('€')) && (
+              {price}
-          <Text fontWeight="inherit" fontSize="xl">
+            </Heading>
-            / mo
+            {(price.includes('$') || price.includes('€')) && (
-          </Text>
+              <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>
   )
 }

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 />

apps/landing-page/pages/pricing.tsx

@@ -1,5 +1,14 @@
-import { VStack } from '@chakra-ui/layout'
+import { Box, Heading, VStack } from '@chakra-ui/layout'
-import { DarkMode, Flex, Stack } from '@chakra-ui/react'
+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',
-                  'Native integrations (Google Sheets, Webhooks, Zapier...)',
+                  'Webhooks',
-                  'Basic analytics (Sessions, time, completion...)',
+                  '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