docs(lp): 💄 Add animation on scroll

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

@@ -9,7 +9,14 @@ import { Flare } from 'assets/illustrations/Flare'
 export const EasyBuildingExperience = () => {
   return (
     <Flex as="section" justify="center" pos="relative">
-      <Flare color="blue" pos="absolute" left="-200px" top="-50px" />
+      <Flare
+        color="blue"
+        pos="absolute"
+        left="-200px"
+        top="-50px"
+        data-aos="fade"
+        data-aos-delay="500"
+      />
       <Stack
         style={{ maxWidth: '1000px' }}
         pt={'52'}
@@ -21,10 +28,14 @@ export const EasyBuildingExperience = () => {
         alignItems="center"
       >
         <Stack spacing="6" maxW="300px">
-          <Stack>
+          <Heading as="h1" data-aos="fade">
-            <Heading as="h1">Easy building experience</Heading>
+            Easy building experience
-          </Stack>
+          </Heading>
-          <Text color="gray.400" fontSize={{ base: 'lg', xl: 'xl' }}>
+          <Text
+            color="gray.400"
+            fontSize={{ base: 'lg', xl: 'xl' }}
+            data-aos="fade"
+          >
             All you have to do is drag and drop blocks to create your app. Even
             if you have custom needs, you can always add custom code.
           </Text>
@@ -34,12 +45,13 @@ export const EasyBuildingExperience = () => {
               rightIcon={<ArrowRight />}
               href={`https://app.typebot.io/register`}
               variant="ghost"
+              data-aos="fade"
             >
               Try it now
             </Button>
           </Flex>
         </Stack>
-        <Box rounded="md">
+        <Box rounded="md" data-aos="fade">
           <Image
             src={builderDndSrc}
             alt="incomplete results illustration"

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

@@ -9,7 +9,14 @@ import { Flare } from 'assets/illustrations/Flare'
 export const EasyEmbed = () => {
   return (
     <Flex as="section" justify="center" pos="relative">
-      <Flare color="orange" pos="absolute" right="-200px" top="100px" />
+      <Flare
+        color="orange"
+        pos="absolute"
+        right="-200px"
+        top="100px"
+        data-aos="fade"
+        data-aos-delay="500"
+      />
       <Stack
         style={{ maxWidth: '1000px' }}
         pt={32}
@@ -21,13 +28,19 @@ export const EasyEmbed = () => {
         alignItems="center"
       >
         <Stack spacing="6" maxW="300px">
-          <Heading as="h1">Embed it in a click</Heading>
+          <Heading as="h1" data-aos="fade">
-          <Text color="gray.400" fontSize={{ base: 'lg', xl: 'xl' }}>
+            Embed it in a click
+          </Heading>
+          <Text
+            color="gray.400"
+            fontSize={{ base: 'lg', xl: 'xl' }}
+            data-aos="fade"
+          >
             Embedding your typebot in your applications is a walk in the park.
             Typebot gives you several step-by-step platform-specific
             instructions. Your typebot will always feel "native".
           </Text>
-          <Flex>
+          <Flex data-aos="fade">
             <Button
               as={NextChakraLink}
               rightIcon={<ArrowRight />}
@@ -39,7 +52,7 @@ export const EasyEmbed = () => {
             </Button>
           </Flex>
         </Stack>
-        <Box rounded="md">
+        <Box rounded="md" data-aos="fade">
           <Image
             src={nativeFeelingSrc}
             alt="incomplete results illustration"

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

@@ -22,7 +22,11 @@ export const EndCta = () => {
         py={{ base: '16', sm: '20' }}
         textAlign="center"
       >
-        <Heading fontWeight="extrabold" letterSpacing="tight">
+        <Heading
+          fontWeight="extrabold"
+          letterSpacing="tight"
+          data-aos="fade-up"
+        >
           Take your forms to the next level
         </Heading>
         <Flex>
@@ -32,12 +36,14 @@ export const EndCta = () => {
             size="lg"
             colorScheme="orange"
             height="4rem"
+            data-aos="fade-up"
+            data-aos-delay="300"
           >
             Create a typebot
           </Button>
         </Flex>
 
-        <Text color="gray.400">
+        <Text color="gray.400" data-aos="fade-up" data-aos-delay="400">
           No trial. Generous, unlimited <strong>free</strong> plan.
         </Text>
       </VStack>

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

@@ -61,14 +61,19 @@ export const Features = () => {
         spacing={12}
       >
         <VStack>
-          <Heading as="h1" textAlign="center">
+          <Heading as="h1" textAlign="center" data-aos="fade">
             And many more features
           </Heading>
-          <Text color="gray.500" fontSize={['lg', 'xl']} textAlign="center">
+          <Text
+            color="gray.500"
+            fontSize={['lg', 'xl']}
+            textAlign="center"
+            data-aos="fade"
+          >
             Typebot makes form building easy and comes with powerful features
           </Text>
         </VStack>
-        <SimpleGrid columns={[1, 3]} spacing="10" pt="10">
+        <SimpleGrid columns={[1, 3]} spacing="10" pt="10" data-aos="fade">
           {features.map((feature, idx) => (
             <FeatureCard key={idx} {...feature} />
           ))}

apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx

@@ -10,6 +10,8 @@ export const BackgroundPolygons = () => {
         pos="absolute"
         left="0px"
         top="100px"
+        data-aos="fade"
+        data-aos-delay="200"
       >
         <Triangle />
       </chakra.div>
@@ -19,6 +21,8 @@ export const BackgroundPolygons = () => {
         pos="absolute"
         right="-10px"
         top="30px"
+        data-aos="fade"
+        data-aos-delay="200"
       >
         <DemiCircle />
       </chakra.div>

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

@@ -32,15 +32,26 @@ export const Hero = () => {
               maxW="1000px"
               bgGradient="linear(to-r, blue.300, purple.300)"
               bgClip="text"
+              data-aos="fade-up"
             >
               Open-source conversational apps builder
             </Heading>
-            <Text fontSize={['lg', 'xl']} maxW="800px" textAlign="center">
+            <Text
+              fontSize={['lg', 'xl']}
+              maxW="800px"
+              textAlign="center"
+              data-aos="fade-up"
+              data-aos-delay="100"
+            >
               Typebot gives you powerful blocks to create unique chat
               experiences. Embed them anywhere on your web/mobile apps and start
               collecting results like magic.
             </Text>
-            <Stack direction={['column-reverse', 'row']}>
+            <Stack
+              direction={['column-reverse', 'row']}
+              data-aos="fade-up"
+              data-aos-delay="200"
+            >
               <Button
                 as={NextChakraLink}
                 href="https://app.typebot.io/register"
@@ -66,7 +77,7 @@ export const Hero = () => {
               </Button>
             </Stack>
 
-            <Text color="gray.400">
+            <Text color="gray.400" data-aos="fade-up" data-aos-delay="300">
               No trial. Generous, unlimited <strong>free</strong> plan.
             </Text>
           </VStack>
@@ -80,6 +91,8 @@ export const Hero = () => {
               filter="blur(40px)"
               opacity="0.7"
               className="animated-blob animation-delay-2000"
+              data-aos="fade"
+              data-aos-delay="1200"
             />
             <Box
               pos="absolute"
@@ -90,8 +103,15 @@ export const Hero = () => {
               filter="blur(40px)"
               opacity="0.7"
               className="animated-blob animation-delay-4000"
+              data-aos="fade"
+              data-aos-delay="1200"
             />
-            <Box as="figure" shadow="lg">
+            <Box
+              as="figure"
+              shadow="lg"
+              data-aos="zoom-out-up"
+              data-aos-delay="800"
+            >
               <Image
                 src={builderScreenshotSrc}
                 alt="Builder screenshot"
@@ -103,7 +123,7 @@ export const Hero = () => {
       </Stack>
       <Flex justify="center" bgGradient="linear(to-b, gray.900, gray.800)">
         <VStack spacing="12" pb="32" maxW="7xl" px={4}>
-          <Heading fontSize="25px" fontWeight="semibold">
+          <Heading fontSize="25px" fontWeight="semibold" data-aos="fade">
             Loved by teams and creators from all around the world
           </Heading>
           <SimpleGrid
@@ -112,6 +132,7 @@ export const Hero = () => {
             alignItems="center"
             spacing={12}
             fontSize="4xl"
+            data-aos="fade"
           >
             <Logos.IbanFirst />
             <Logos.Lemlist />

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

@@ -49,6 +49,7 @@ export const Integrations = () => (
           h="full"
           bgGradient="linear(to-r, rgba(23,25,35,1), rgba(23,25,35,0))"
           pointerEvents="none"
+          zIndex={100}
         />
         <Flex
           pos="absolute"
@@ -57,6 +58,7 @@ export const Integrations = () => (
           h="full"
           bgGradient="linear(to-l, rgba(23,25,35,1), rgba(23,25,35,0))"
           pointerEvents="none"
+          zIndex={100}
         />
         <HStack w="full" spacing={[4, 16]}>
           {firstRowIcons.map((Icon, idx) => (
@@ -71,6 +73,8 @@ export const Integrations = () => (
               justifyContent="center"
               align="center"
               borderWidth="1px"
+              data-aos="fade"
+              data-aos-delay={idx * 100}
             >
               <Icon w="full" h="full" />
             </Flex>
@@ -89,6 +93,8 @@ export const Integrations = () => (
               justifyContent="center"
               align="center"
               borderWidth="1px"
+              data-aos="fade"
+              data-aos-delay={(secondRowIcons.length - idx) * 100}
             >
               <Icon w="full" h="full" />
             </Flex>
@@ -97,8 +103,15 @@ export const Integrations = () => (
       </Stack>
 
       <Stack w="full" maxWidth="1200px" px="4">
-        <Heading fontSize={['3xl', '4xl']}>Integrate with any platform</Heading>
+        <Heading fontSize={['3xl', '4xl']} data-aos="fade-up">
-        <Text color="gray.400" maxW="700px" fontSize={['lg', 'xl']}>
+          Integrate with any platform
+        </Heading>
+        <Text
+          color="gray.400"
+          maxW="700px"
+          fontSize={['lg', 'xl']}
+          data-aos="fade-up"
+        >
           Typebot offers several native integrations blocks as well as
           instructions on how to embed typebot on particular platforms
         </Text>

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

@@ -47,6 +47,7 @@ export const IntroducingChatApps = () => {
           <Heading
             fontSize={{ base: '3xl', lg: '5xl', xl: '6xl' }}
             textAlign="center"
+            data-aos="fade"
           >
             Introducing Conversational Apps
           </Heading>
@@ -54,6 +55,7 @@ export const IntroducingChatApps = () => {
             textAlign="center"
             fontSize={{ base: 'lg', xl: 'xl' }}
             color="gray.400"
+            data-aos="fade"
           >
             Typebot is a better way to ask for information. It leads to an
             increase in customer satisfaction and retention and multiply by 3
@@ -61,7 +63,12 @@ export const IntroducingChatApps = () => {
           </Text>
         </Stack>
 
-        <Stack direction={['column', 'row']} w="full" spacing="6">
+        <Stack
+          direction={['column', 'row']}
+          w="full"
+          spacing="6"
+          data-aos="fade"
+        >
           <VStack spacing={6} flex="1">
             <DontIcon />
             <FakeLeadGenForm />

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

@@ -53,7 +53,11 @@ export const RealTimeResults = () => {
         alignItems="center"
       >
         <VStack spacing={6}>
-          <Heading fontSize={{ base: '4xl', xl: '6xl' }} textAlign="center">
+          <Heading
+            fontSize={{ base: '4xl', xl: '6xl' }}
+            textAlign="center"
+            data-aos="fade"
+          >
             Collect results in real-time
           </Heading>
           <Text
@@ -61,6 +65,7 @@ export const RealTimeResults = () => {
             color="gray.400"
             maxW="1000px"
             fontSize={{ base: 'lg', xl: 'xl' }}
+            data-aos="fade"
           >
             One of the main advantage of a chat application is that you collect
             the user's responses on each question.{' '}
@@ -73,13 +78,19 @@ export const RealTimeResults = () => {
               href={`https://app.typebot.io/register`}
               variant="ghost"
               colorScheme="blue"
+              data-aos="fade"
             >
               Try it now
             </Button>
           </Flex>
         </VStack>
 
-        <Stack w="full" direction={['column', 'row']} spacing="4">
+        <Stack
+          w="full"
+          direction={['column', 'row']}
+          spacing="4"
+          data-aos="fade"
+        >
           {typebot && (
             <Flex w="full" h="full" minH="300" borderWidth="1px" rounded="md">
               <TypebotViewer

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

@@ -8,7 +8,7 @@ export const Testimonials = () => {
   return (
     <Flex as="section" justify="center">
       <VStack spacing={12} pt={'52'} px="4">
-        <Heading textAlign={'center'}>
+        <Heading textAlign={'center'} data-aos="fade">
           They've tried, they never looked back. 💙
         </Heading>
         <Stack
@@ -20,6 +20,7 @@ export const Testimonials = () => {
             name="Joshua Lim"
             role="Growth Strategist @ Socialhackrs Media"
             image={joshuaPictureSrc}
+            data-aos="fade"
           >
             I upgraded my typeforms to typebots and saw a conversion rate
             increase{' '}
@@ -33,6 +34,7 @@ export const Testimonials = () => {
             name="Nicolai Grut"
             role="Growth Strategist @ X"
             image={joshuaPictureSrc}
+            data-aos="fade"
           >
             I am really loving using Typebot! I have used so many bot builders
             (ActiveChat, Botstar, Uchat, Monkeybot) and Typebot is definitely
@@ -42,6 +44,7 @@ export const Testimonials = () => {
             name="Julien Muratot"
             role="Growth Manager @ Hornetwork"
             image={julienPictureSrc}
+            data-aos="fade"
           >
             I run Google ads all year long on our landing page that contains a
             typebot. I saw a{' '}

apps/landing-page/package.json

@@ -11,22 +11,24 @@
     "@chakra-ui/react": "^1.8.6",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
+    "@notionhq/client": "^0.3.1",
+    "aos": "^2.3.4",
+    "bot-engine": "*",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4",
     "keen-slider": "^6.6.4",
+    "models": "*",
     "next": "^12.1.0",
     "notion-blocks-chakra-ui": "^0.0.15",
     "posthog-js": "1.17.9",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "typebot-js": "^2.1.3",
-    "bot-engine": "*",
+    "utils": "*"
-    "models": "*",
-    "utils": "*",
-    "@notionhq/client": "^0.3.1"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^12.1.0",
+    "@types/aos": "^3.0.4",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.40",
     "autoprefixer": "^10.4.2",

apps/landing-page/pages/_app.tsx

@@ -1,14 +1,25 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import 'assets/style.css'
 import { ChakraProvider } from '@chakra-ui/react'
 import 'focus-visible/dist/focus-visible'
 import { theme } from '../lib/chakraTheme'
 import { AppProps } from 'next/app'
+import AOS from 'aos'
+import 'aos/dist/aos.css'
 
-const App = ({ Component, pageProps }: AppProps) => (
+const App = ({ Component, pageProps }: AppProps) => {
-  <ChakraProvider theme={theme}>
+  useEffect(() => {
-    <Component {...pageProps} />
+    AOS.init({
-  </ChakraProvider>
+      easing: 'ease',
-)
+      duration: 1000,
+    })
+  }, [])
+
+  return (
+    <ChakraProvider theme={theme}>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  )
+}
 
 export default App

apps/landing-page/pages/_document.tsx

@@ -12,6 +12,14 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap"
             rel="stylesheet"
           />
+          <noscript>
+            {/*
+              Here we ignore the following recommendation to solve possible SSR problems with noscript browsers/visitors
+              https://nextjs.org/docs/messages/no-css-tags
+            */}
+            {/* eslint-disable-next-line @next/next/no-css-tags */}
+            <link href="./styles/aos-noscript.css" rel="stylesheet" />
+          </noscript>
         </Head>
         <body>
           <ColorModeScript initialColorMode={theme.config.initialColorMode} />

apps/landing-page/public/styles/aos-noscript.css

@@ -0,0 +1,4 @@
+[data-aos] {
+  opacity: 1 !important;
+  transform: translate(0) scale(1) !important;
+}

yarn.lock

@@ -4004,6 +4004,11 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.2.tgz#423c77877d0569db20e1fc80885ac4118314010e"
   integrity sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==
 
+"@types/aos@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/aos/-/aos-3.0.4.tgz#fd0dce430f18d118081aaced2c79c30617b15818"
+  integrity sha512-mna6Jd6bdK1NpwarLopGvXOgUoCfj0470IwLxuVOFDElTGI0JTd7xSGQ0AjbAEnHErC/b3fA9t2uB3IXVKmckA==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
   version "7.1.18"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.18.tgz#1a29abcc411a9c05e2094c98f9a1b7da6cdf49f8"
@@ -5116,6 +5121,15 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aos@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/aos/-/aos-2.3.4.tgz#eb1c29f5c1806a197cf6323080747547edd3db8e"
+  integrity sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==
+  dependencies:
+    classlist-polyfill "^1.0.3"
+    lodash.debounce "^4.0.6"
+    lodash.throttle "^4.0.1"
+
 append-query@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/append-query/-/append-query-2.1.1.tgz#0682e8c3ad6f2fa01e78153c4c73a6283d2a88f6"
@@ -6031,6 +6045,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classlist-polyfill@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+  integrity sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=
+
 classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@@ -10588,7 +10607,7 @@ lodash.curry@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
   integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
 
-lodash.debounce@^4.0.8:
+lodash.debounce@^4.0.6, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
@@ -10693,7 +10712,7 @@ lodash.some@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
   integrity sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=
 
-lodash.throttle@^4.1.1:
+lodash.throttle@^4.0.1, lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=