docs(lp): 💄 Refont LP for v2

2022-03-17 14:37:00 +01:00
parent c437211327
commit 21e926a477
131 changed files with 2834 additions and 3260 deletions
--- a/apps/landing-page/components/Homepage/IntroducingChatApps.tsx
+++ b/apps/landing-page/components/Homepage/IntroducingChatApps.tsx
@ -0,0 +1,122 @@
+import {
+  Button,
+  Flex,
+  Heading,
+  Stack,
+  Text,
+  FormControl,
+  FormLabel,
+  Input,
+  Checkbox,
+  Textarea,
+  VStack,
+} from '@chakra-ui/react'
+import React, { useEffect, useState } from 'react'
+import { TypebotViewer } from 'bot-engine'
+import { PublicTypebot } from 'models'
+import { sendRequest } from 'utils'
+import { DontIcon } from 'assets/icons/DontIcon'
+import { DoIcon } from 'assets/icons/DoIcon'
+
+export const IntroducingChatApps = () => {
+  const [typebot, setTypebot] = useState<PublicTypebot>()
+
+  useEffect(() => {
+    fetchTemplate()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const fetchTemplate = async () => {
+    const { data, error } = await sendRequest(`/typebots/lead-gen-lp.json`)
+    if (error) return
+    setTypebot(data as PublicTypebot)
+  }
+
+  return (
+    <Flex as="section" justify="center">
+      <Stack
+        style={{ maxWidth: '1200px' }}
+        pt={32}
+        w="full"
+        px="4"
+        spacing={16}
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack spacing={6} w="full">
+          <Heading
+            fontSize={{ base: '3xl', lg: '5xl', xl: '6xl' }}
+            textAlign="center"
+          >
+            Introducing Conversational Apps
+          </Heading>
+          <Text
+            textAlign="center"
+            fontSize={{ base: 'lg', xl: 'xl' }}
+            color="gray.400"
+          >
+            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">
+          <VStack spacing={6} flex="1">
+            <DontIcon />
+            <FakeLeadGenForm />
+          </VStack>
+
+          <VStack spacing={6} flex="1" h="full">
+            <DoIcon />
+            {typebot && (
+              <Flex
+                w="full"
+                h="full"
+                minH={['600px', '0']}
+                borderWidth="1px"
+                rounded="md"
+              >
+                <TypebotViewer
+                  typebot={typebot}
+                  style={{ borderRadius: '0.375rem' }}
+                />
+              </Flex>
+            )}
+          </VStack>
+        </Stack>
+      </Stack>
+    </Flex>
+  )
+}
+
+const FakeLeadGenForm = () => (
+  <Stack borderWidth="1px" spacing="4" padding="6" rounded="md" w="full">
+    <FormControl isRequired>
+      <FormLabel htmlFor="full-name">Full name</FormLabel>
+      <Input id="full-name" placeholder="Full name" />
+    </FormControl>
+    <FormControl isRequired>
+      <FormLabel htmlFor="email">Email</FormLabel>
+      <Input id="email" placeholder="Email" />
+    </FormControl>
+    <FormControl isRequired>
+      <FormLabel htmlFor="services">
+        What services are you interested in?
+      </FormLabel>
+      <Stack>
+        <Checkbox>Website Dev</Checkbox>
+        <Checkbox>Content Marketing</Checkbox>
+        <Checkbox>Social Media</Checkbox>
+        <Checkbox>UX/UI Design</Checkbox>
+      </Stack>
+    </FormControl>
+    <FormControl isRequired>
+      <FormLabel htmlFor="info">Additional Information</FormLabel>
+      <Textarea id="info" placeholder="Additional Information" />
+    </FormControl>
+    <Flex>
+      <Button>Submit</Button>
+    </Flex>
+  </Stack>
+)