blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Add interactive indications

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-17 14:37:00 +01:00
parent 76a8bcfbae
commit d0ece4cc8f
4 changed files with 46 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/landing-page/assets/illustrations/HandDrawnArrow.tsx Normal file
View File

@ -0,0 +1,22 @@
import { Icon, IconProps } from '@chakra-ui/react'
import React from 'react'
export const HandDrawnArrow = (props: IconProps) => (
<Icon
viewBox="0 0 120 124"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M53.5 106.5C79.3333 81 78.8935 57.3316 77 49.0001C74.5 38.0001 71 22.5001 42.5 17.5001"
stroke="white"
strokeWidth="2"
/>
<path
d="M55.5 87.5C56.5 91 52 108.5 52 108.5C52 108.5 61.7329 102.589 66.5 101C68 100.5 72 100 74.5 101"
stroke="white"
strokeWidth="2"
/>
</Icon>
)

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

@ -9,7 +9,6 @@ import {
Input,
Checkbox,
Textarea,
VStack,
} from '@chakra-ui/react'
import React, { useEffect, useState } from 'react'
import { TypebotViewer } from 'bot-engine'
@ -17,6 +16,7 @@ import { PublicTypebot } from 'models'
import { sendRequest } from 'utils'
import { DontIcon } from 'assets/icons/DontIcon'
import { DoIcon } from 'assets/icons/DoIcon'
import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
export const IntroducingChatApps = () => {
const [typebot, setTypebot] = useState<PublicTypebot>()
@ -69,12 +69,18 @@ export const IntroducingChatApps = () => {
spacing="6"
data-aos="fade"
>
<VStack spacing={6} flex="1">
<Stack spacing={6} flex="1" align={['flex-start', 'center']}>
<DontIcon />
<FakeLeadGenForm />
</VStack>
</Stack>
<VStack spacing={6} flex="1" h="full">
<Stack
spacing={6}
flex="1"
h="full"
pos="relative"
align={['flex-start', 'center']}
>
<DoIcon />
{typebot && (
<Flex
@ -90,7 +96,19 @@ export const IntroducingChatApps = () => {
/>
</Flex>
)}
</VStack>
<Flex top="-20px" right="40px" pos="absolute">
<Text fontFamily="'Indie Flower'" fontSize="2xl">
Try it out!
</Text>
<HandDrawnArrow
transform="rotate(30deg)"
boxSize="100px"
top="15px"
right="-60px"
pos="absolute"
/>
</Flex>
</Stack>
</Stack>
</Stack>
</Flex>

2
apps/landing-page/pages/_document.tsx
View File

@ -9,7 +9,7 @@ class MyDocument extends Document {
<Head>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Indie+Flower:wght@400&display=swap"
rel="stylesheet"
/>
<noscript>

19
apps/landing-page/public/typebots/realtime-airtable.json
View File

@ -24,25 +24,6 @@
{
"id": "nrFcoNFtGcGJNifcjiEFya",
"steps": [
{
"id": "s7x5riciJaWVdvmHUbBmyqY",
"type": "text",
"blockId": "nrFcoNFtGcGJNifcjiEFya",
"content": {
"html": "<div>With a typebot, you collect the result as soon as your user answers the first question. 🤯</div>",
"richText": [
{
"type": "p",
"children": [
{
"text": "With a typebot, you collect the result as soon as your user answers the first question. 🤯"
}
]
}
],
"plainText": "With a typebot, you collect the result as soon as your user answers the first question. 🤯"
}
},
{
"id": "sjigBF5rKat4BForNiMfPwb",
"type": "text",