docs(lp): 💄 Add animation on scroll

baptisteArno · Mar 17, 2022 · 37b7ca3 · 37b7ca3
1 parent 21e926a
commit 37b7ca3
Show file tree

Hide file tree

Showing 15 changed files with 178 additions and 39 deletions.
diff --git a/apps/landing-page/components/Homepage/EasyBuildingExperience.tsx b/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">Easy building experience</Heading>
-          </Stack>
-          <Text color="gray.400" fontSize={{ base: 'lg', xl: 'xl' }}>
+          <Heading as="h1" data-aos="fade">
+            Easy building experience
+          </Heading>
+          <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"

diff --git a/apps/landing-page/components/Homepage/EasyEmbed.tsx b/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>
-          <Text color="gray.400" fontSize={{ base: 'lg', xl: 'xl' }}>
+          <Heading as="h1" data-aos="fade">
+            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"

diff --git a/apps/landing-page/components/Homepage/EndCta.tsx b/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>

diff --git a/apps/landing-page/components/Homepage/Features/Features.tsx b/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} />
           ))}

diff --git a/apps/landing-page/components/Homepage/Hero/BackgroundPolygons.tsx b/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>

diff --git a/apps/landing-page/components/Homepage/Hero/Hero.tsx b/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 />

diff --git a/apps/landing-page/components/Homepage/Integrations.tsx b/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>
-        <Text color="gray.400" maxW="700px" fontSize={['lg', 'xl']}>
+        <Heading fontSize={['3xl', '4xl']} data-aos="fade-up">
+          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>

diff --git a/apps/landing-page/components/Homepage/IntroducingChatApps.tsx b/apps/landing-page/components/Homepage/IntroducingChatApps.tsx
@@ -47,21 +47,28 @@ export const IntroducingChatApps = () => {
           <Heading
             fontSize={{ base: '3xl', lg: '5xl', xl: '6xl' }}
             textAlign="center"
+            data-aos="fade"
           >
             Introducing Conversational Apps
           </Heading>
           <Text
             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
             your conversion rate compared to classical forms.
           </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 />

diff --git a/apps/landing-page/components/Homepage/RealTimeResults.tsx b/apps/landing-page/components/Homepage/RealTimeResults.tsx
@@ -53,14 +53,19 @@ 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
             textAlign="center"
             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