blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Add animation on scroll

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-17 14:37:00 +01:00
parent 21e926a477
commit 37b7ca32e9
15 changed files with 178 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

10
apps/landing-page/components/Homepage/EndCta.tsx
View File

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

11
apps/landing-page/components/Homepage/Features/Features.tsx
View File

@ -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} />
))}

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

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

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

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

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

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

9
apps/landing-page/components/Homepage/IntroducingChatApps.tsx
View File

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

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

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

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

@ -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{' '}