📄 Add Commercial License for ee folder (#1532)
This commit is contained in:
Baptiste Arnaud
GitHub
@ -0,0 +1,64 @@
|
||||
import { Flex, Stack, Heading, Box, Text, Button } from '@chakra-ui/react'
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import builderDndSrc from 'public/images/builder-dnd.png'
|
||||
import { ArrowRight } from 'assets/icons/ArrowRight'
|
||||
import { Flare } from 'assets/illustrations/Flare'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const EasyBuildingExperience = () => {
|
||||
return (
|
||||
<Flex as="section" justify="center" pos="relative">
|
||||
<Flare
|
||||
color="blue"
|
||||
pos="absolute"
|
||||
left="-200px"
|
||||
top="-50px"
|
||||
data-aos="fade"
|
||||
data-aos-delay="500"
|
||||
/>
|
||||
<Stack
|
||||
style={{ maxWidth: '1000px' }}
|
||||
pt={'52'}
|
||||
w="full"
|
||||
px="4"
|
||||
spacing={12}
|
||||
direction={['column', 'row-reverse']}
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Stack spacing="6" maxW="300px" minW={[0, '300px']}>
|
||||
<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>
|
||||
<Flex>
|
||||
<Button
|
||||
as={Link}
|
||||
rightIcon={<ArrowRight />}
|
||||
href={`https://app.typebot.io/register`}
|
||||
variant="ghost"
|
||||
data-aos="fade"
|
||||
>
|
||||
Try it now
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Box rounded="md" data-aos="fade">
|
||||
<Image
|
||||
src={builderDndSrc}
|
||||
alt="incomplete results illustration"
|
||||
placeholder="blur"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
65
ee/apps/landing-page/components/Homepage/EasyEmbed.tsx
Normal file
65
ee/apps/landing-page/components/Homepage/EasyEmbed.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { Flex, Stack, Heading, Box, Text, Button } from '@chakra-ui/react'
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import nativeFeelingSrc from 'public/images/native-feeling.png'
|
||||
import { ArrowRight } from 'assets/icons/ArrowRight'
|
||||
import { Flare } from 'assets/illustrations/Flare'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const EasyEmbed = () => {
|
||||
return (
|
||||
<Flex as="section" justify="center" pos="relative">
|
||||
<Flare
|
||||
color="orange"
|
||||
pos="absolute"
|
||||
right="-200px"
|
||||
top="100px"
|
||||
data-aos="fade"
|
||||
data-aos-delay="500"
|
||||
/>
|
||||
<Stack
|
||||
style={{ maxWidth: '1000px' }}
|
||||
pt={32}
|
||||
w="full"
|
||||
px="4"
|
||||
spacing={12}
|
||||
direction={['column', 'row']}
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Stack spacing="6" maxW="300px" minW={[0, '300px']}>
|
||||
<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 data-aos="fade">
|
||||
<Button
|
||||
as={Link}
|
||||
rightIcon={<ArrowRight />}
|
||||
href={`https://app.typebot.io/register`}
|
||||
variant="ghost"
|
||||
colorScheme="orange"
|
||||
>
|
||||
Try it now
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Box rounded="md" data-aos="fade">
|
||||
<Image
|
||||
src={nativeFeelingSrc}
|
||||
alt="incomplete results illustration"
|
||||
placeholder="blur"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
69
ee/apps/landing-page/components/Homepage/EndCta.tsx
Normal file
69
ee/apps/landing-page/components/Homepage/EndCta.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
Heading,
|
||||
Button,
|
||||
Text,
|
||||
Flex,
|
||||
VStack,
|
||||
StackProps,
|
||||
} from '@chakra-ui/react'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import { BackgroundPolygons } from './Hero/BackgroundPolygons'
|
||||
|
||||
type Props = {
|
||||
heading?: string
|
||||
polygonsBaseTop?: string
|
||||
} & StackProps
|
||||
|
||||
export const EndCta = ({ heading, polygonsBaseTop, ...props }: Props) => {
|
||||
return (
|
||||
<VStack
|
||||
as="section"
|
||||
py={32}
|
||||
pos="relative"
|
||||
bgGradient="linear(to-b, gray.900, gray.800)"
|
||||
height="100vh"
|
||||
justifyContent="center"
|
||||
{...props}
|
||||
>
|
||||
<BackgroundPolygons baseTop={polygonsBaseTop} />
|
||||
<VStack
|
||||
spacing="6"
|
||||
maxW="3xl"
|
||||
mx="auto"
|
||||
px={{ base: '6', lg: '8' }}
|
||||
py={{ base: '16', sm: '20' }}
|
||||
textAlign="center"
|
||||
>
|
||||
{heading ? (
|
||||
<Heading
|
||||
fontWeight="extrabold"
|
||||
letterSpacing="tight"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
{heading}
|
||||
</Heading>
|
||||
) : null}
|
||||
<Flex>
|
||||
<Button
|
||||
as={Link}
|
||||
href="https://app.typebot.io/register"
|
||||
size="lg"
|
||||
colorScheme="orange"
|
||||
height="4rem"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
Create a typebot
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<Text color="gray.400" data-aos="fade-up" data-aos-delay="400">
|
||||
No trial. Generous <strong>free</strong> plan.
|
||||
</Text>
|
||||
</VStack>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import { IconProps, Text, Flex, VStack } from '@chakra-ui/react'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
type FeatureCardProps = {
|
||||
Icon: (props: IconProps) => JSX.Element
|
||||
title: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
|
||||
return (
|
||||
<VStack
|
||||
p="6"
|
||||
bgColor="gray.800"
|
||||
pos="relative"
|
||||
rounded="lg"
|
||||
spacing="4"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<Flex
|
||||
boxSize="50px"
|
||||
bgColor="blue.500"
|
||||
rounded="lg"
|
||||
color="white"
|
||||
justify="center"
|
||||
align="center"
|
||||
pos="absolute"
|
||||
top="-25px"
|
||||
shadow="lg"
|
||||
transform={isHovered ? 'translateY(-5px)' : 'translateY(0px)'}
|
||||
transition="transform 300ms ease-out"
|
||||
>
|
||||
<Icon boxSize="25px" />
|
||||
</Flex>
|
||||
<Text textAlign="center" fontWeight="semibold" fontSize="lg">
|
||||
{title}
|
||||
</Text>
|
||||
<Text textAlign="center" color="gray.500">
|
||||
{content}
|
||||
</Text>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Flex,
|
||||
Heading,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
VStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { FeatureCard } from './FeatureCard'
|
||||
import { FolderIcon } from 'assets/icons/FolderIcon'
|
||||
import { AccessibilityIcon } from 'assets/icons/AccessibilityIcon'
|
||||
import { CalculatorIcon } from 'assets/icons/CaluclatorIcon'
|
||||
import { ConditionIcon } from 'assets/icons/ConditionIcon'
|
||||
import { PersonAddIcon } from 'assets/icons/PersonAddIcon'
|
||||
import { ShareIcon } from 'assets/icons/ShareIcon'
|
||||
|
||||
const features = [
|
||||
{
|
||||
Icon: AccessibilityIcon,
|
||||
title: 'Hidden fields',
|
||||
content:
|
||||
'Include data in your form URL to segment your user and use its data directly in your form.',
|
||||
},
|
||||
{
|
||||
Icon: PersonAddIcon,
|
||||
title: 'Team collaboration',
|
||||
content: 'Invite your teammates to work on your typebots with you',
|
||||
},
|
||||
{
|
||||
Icon: ConditionIcon,
|
||||
title: 'Link to sub typebots',
|
||||
content: 'Reuse your typebots in different parent bots.',
|
||||
},
|
||||
{
|
||||
Icon: CalculatorIcon,
|
||||
title: 'Custom code',
|
||||
content: 'Customize everything with your own Javascript & CSS code',
|
||||
},
|
||||
{
|
||||
Icon: ShareIcon,
|
||||
title: 'Custom domain',
|
||||
content: 'Connect your typebot to the custom URL of your choice',
|
||||
},
|
||||
{
|
||||
Icon: FolderIcon,
|
||||
title: 'Folder management',
|
||||
content:
|
||||
'Organize your typebots in specific folders to keep it clean and work with multiple clients',
|
||||
},
|
||||
]
|
||||
|
||||
export const Features = () => {
|
||||
return (
|
||||
<Flex justifyContent="center">
|
||||
<Stack
|
||||
style={{ maxWidth: '1200px' }}
|
||||
pt={'52'}
|
||||
w="full"
|
||||
px="4"
|
||||
spacing={12}
|
||||
>
|
||||
<VStack>
|
||||
<Heading as="h1" textAlign="center" data-aos="fade">
|
||||
And many more features
|
||||
</Heading>
|
||||
<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" data-aos="fade">
|
||||
{features.map((feature, idx) => (
|
||||
<FeatureCard key={idx} {...feature} />
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export { Features } from './Features'
|
||||
File diff suppressed because one or more lines are too long
888
ee/apps/landing-page/components/Homepage/Hero/Brands.tsx
Executable file
888
ee/apps/landing-page/components/Homepage/Hero/Brands.tsx
Executable file
File diff suppressed because one or more lines are too long
133
ee/apps/landing-page/components/Homepage/Hero/Hero.tsx
Executable file
133
ee/apps/landing-page/components/Homepage/Hero/Hero.tsx
Executable file
@ -0,0 +1,133 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Heading,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
VStack,
|
||||
} from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
import { Header } from '../../common/Header/Header'
|
||||
import { BackgroundPolygons } from './BackgroundPolygons'
|
||||
import * as Logos from './Brands'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import builderScreenshotSrc from 'public/images/builder-screenshot.png'
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
<Box as="section" overflow="hidden">
|
||||
<Header />
|
||||
<Stack mx="auto" py="10" pos="relative" pb="32" px={[4, 0]}>
|
||||
<BackgroundPolygons />
|
||||
<VStack mb="20" spacing={20} alignItems="center">
|
||||
<VStack pt={['10', '20']} spacing="6" w="full">
|
||||
<Heading
|
||||
as="h1"
|
||||
fontSize={['4xl', '4xl', '5xl', '7xl']}
|
||||
textAlign="center"
|
||||
maxW="1000px"
|
||||
bgGradient="linear(to-r, blue.300, purple.300)"
|
||||
bgClip="text"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
Build advanced chatbots visually
|
||||
</Heading>
|
||||
<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']}
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<Button
|
||||
as={Link}
|
||||
href="https://app.typebot.io/register"
|
||||
colorScheme="orange"
|
||||
size="lg"
|
||||
height="4rem"
|
||||
px="2rem"
|
||||
>
|
||||
Create a typebot for free
|
||||
</Button>
|
||||
</Stack>
|
||||
</VStack>
|
||||
<Box maxW="1200px" pos="relative">
|
||||
<Box
|
||||
pos="absolute"
|
||||
left="-40px"
|
||||
bgColor="orange.500"
|
||||
boxSize={['150px', '150px', '300px', '600px']}
|
||||
rounded="full"
|
||||
filter="blur(40px)"
|
||||
opacity="0.7"
|
||||
className="animated-blob"
|
||||
data-aos="fade"
|
||||
data-aos-delay="1200"
|
||||
/>
|
||||
<Box
|
||||
pos="absolute"
|
||||
right="-40px"
|
||||
bgColor="blue.500"
|
||||
boxSize={['150px', '150px', '300px', '600px']}
|
||||
rounded="full"
|
||||
filter="blur(40px)"
|
||||
opacity="0.7"
|
||||
className="animated-blob animation-delay-5000"
|
||||
data-aos="fade"
|
||||
data-aos-delay="1200"
|
||||
/>
|
||||
<Box
|
||||
as="figure"
|
||||
shadow="lg"
|
||||
data-aos="zoom-out-up"
|
||||
data-aos-delay="800"
|
||||
>
|
||||
<Image
|
||||
src={builderScreenshotSrc}
|
||||
alt="Builder screenshot"
|
||||
placeholder="blur"
|
||||
style={{ borderRadius: '10px' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
</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" data-aos="fade">
|
||||
Loved by teams and creators from all around the world
|
||||
</Heading>
|
||||
<SimpleGrid
|
||||
columns={{ base: 2, md: 4 }}
|
||||
color="gray.400"
|
||||
alignItems="center"
|
||||
spacing={12}
|
||||
fontSize="4xl"
|
||||
data-aos="fade"
|
||||
>
|
||||
<Logos.IbanFirst />
|
||||
<Logos.Lemlist />
|
||||
<Logos.MakerLead />
|
||||
<Logos.Webisharp />
|
||||
<Logos.SocialHackrs />
|
||||
<Logos.PinpointInteractive />
|
||||
<Logos.Obole />
|
||||
<Logos.Awwwsome />
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Flex>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
1
ee/apps/landing-page/components/Homepage/Hero/index.tsx
Normal file
1
ee/apps/landing-page/components/Homepage/Hero/index.tsx
Normal file
@ -0,0 +1 @@
|
||||
export { Hero } from './Hero'
|
||||
121
ee/apps/landing-page/components/Homepage/Integrations.tsx
Normal file
121
ee/apps/landing-page/components/Homepage/Integrations.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
import { Flex, Heading, HStack, Stack, Text } from '@chakra-ui/react'
|
||||
import {
|
||||
GmailLogo,
|
||||
MailChimpLogo,
|
||||
NotionLogo,
|
||||
WebflowLogo,
|
||||
WordpressLogo,
|
||||
SlackLogo,
|
||||
AirtableLogo,
|
||||
GoogleSheetLogo,
|
||||
ZapierLogo,
|
||||
SalesforceLogo,
|
||||
CalendlyLogo,
|
||||
GoogleCalendarLogo,
|
||||
ShopifyLogo,
|
||||
GoogleDriveLogo,
|
||||
N8nLogo,
|
||||
} from 'assets/logos'
|
||||
import React from 'react'
|
||||
|
||||
const firstRowIcons = [
|
||||
GmailLogo,
|
||||
MailChimpLogo,
|
||||
NotionLogo,
|
||||
WebflowLogo,
|
||||
WordpressLogo,
|
||||
GoogleCalendarLogo,
|
||||
N8nLogo,
|
||||
GoogleDriveLogo,
|
||||
]
|
||||
const secondRowIcons = [
|
||||
SlackLogo,
|
||||
ShopifyLogo,
|
||||
AirtableLogo,
|
||||
GoogleSheetLogo,
|
||||
ZapierLogo,
|
||||
CalendlyLogo,
|
||||
SalesforceLogo,
|
||||
]
|
||||
|
||||
export const Integrations = () => (
|
||||
<Flex as="section" justify="center">
|
||||
<Stack w="full" align="center" spacing={12} pt={'52'}>
|
||||
<Stack pos="relative" width="1400px" spacing={[4, 12]}>
|
||||
<Flex
|
||||
pos="absolute"
|
||||
left="0"
|
||||
w="33%"
|
||||
h="full"
|
||||
bgGradient="linear(to-r, rgba(23,25,35,1), rgba(23,25,35,0))"
|
||||
pointerEvents="none"
|
||||
zIndex={100}
|
||||
/>
|
||||
<Flex
|
||||
pos="absolute"
|
||||
right="0"
|
||||
w="33%"
|
||||
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) => (
|
||||
<Flex
|
||||
_hover={{ borderColor: 'gray.500' }}
|
||||
transition="border 1s ease"
|
||||
key={idx}
|
||||
rounded="md"
|
||||
p="8"
|
||||
bgColor="gray.800"
|
||||
boxSize="120px"
|
||||
justifyContent="center"
|
||||
align="center"
|
||||
borderWidth="1px"
|
||||
data-aos="fade"
|
||||
data-aos-delay={idx * 200}
|
||||
>
|
||||
<Icon w="full" h="full" />
|
||||
</Flex>
|
||||
))}
|
||||
</HStack>
|
||||
<HStack w="full" spacing={[4, 16]} pl={['10', '20']}>
|
||||
{secondRowIcons.map((Icon, idx) => (
|
||||
<Flex
|
||||
key={idx}
|
||||
_hover={{ borderColor: 'gray.500' }}
|
||||
transition="border 1s ease"
|
||||
rounded="md"
|
||||
p="8"
|
||||
bgColor="gray.800"
|
||||
boxSize="120px"
|
||||
justifyContent="center"
|
||||
align="center"
|
||||
borderWidth="1px"
|
||||
data-aos="fade"
|
||||
data-aos-delay={(secondRowIcons.length - idx) * 200}
|
||||
>
|
||||
<Icon w="full" h="full" />
|
||||
</Flex>
|
||||
))}
|
||||
</HStack>
|
||||
</Stack>
|
||||
|
||||
<Stack w="full" maxWidth="1200px" px="4">
|
||||
<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>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Flex>
|
||||
)
|
||||
143
ee/apps/landing-page/components/Homepage/IntroducingChatApps.tsx
Normal file
143
ee/apps/landing-page/components/Homepage/IntroducingChatApps.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Heading,
|
||||
Stack,
|
||||
Text,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
Checkbox,
|
||||
Textarea,
|
||||
} from '@chakra-ui/react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { PublicTypebot } from '@typebot.io/schemas'
|
||||
import { sendRequest } from '@typebot.io/lib'
|
||||
import { DontIcon } from 'assets/icons/DontIcon'
|
||||
import { DoIcon } from 'assets/icons/DoIcon'
|
||||
import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
|
||||
import { Standard } from '@typebot.io/nextjs'
|
||||
|
||||
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"
|
||||
data-aos="fade"
|
||||
>
|
||||
Replace your old school forms with chatbots
|
||||
</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"
|
||||
data-aos="fade"
|
||||
>
|
||||
<Stack spacing={6} flex="1" align={['flex-start', 'center']}>
|
||||
<DontIcon />
|
||||
<FakeLeadGenForm />
|
||||
</Stack>
|
||||
|
||||
<Stack
|
||||
spacing={6}
|
||||
flex="1"
|
||||
h="full"
|
||||
pos="relative"
|
||||
align={['flex-start', 'center']}
|
||||
>
|
||||
<DoIcon />
|
||||
{typebot && (
|
||||
<Standard
|
||||
typebot={typebot}
|
||||
style={{
|
||||
borderRadius: '0.375rem',
|
||||
borderWidth: '1px',
|
||||
height: '562px',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
134
ee/apps/landing-page/components/Homepage/RealTimeResults.tsx
Normal file
134
ee/apps/landing-page/components/Homepage/RealTimeResults.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import { Flex, Stack, Heading, Text, Button, VStack } from '@chakra-ui/react'
|
||||
import { Standard } from '@typebot.io/nextjs'
|
||||
import { ArrowRight } from 'assets/icons/ArrowRight'
|
||||
import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
|
||||
import { PublicTypebot, Typebot } from '@typebot.io/schemas'
|
||||
import Link from 'next/link'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { sendRequest } from '@typebot.io/lib'
|
||||
|
||||
const nameBlockId = 'shuUtMDMw9P4iAHbz7B5SqJ'
|
||||
const messageBlockId = 'sqvXpT1YXE3Htp6BCPvVGv3'
|
||||
|
||||
export const RealTimeResults = () => {
|
||||
const iframeRef = useRef<HTMLIFrameElement | null>(null)
|
||||
const [typebot, setTypebot] = useState<PublicTypebot>()
|
||||
|
||||
const fetchTemplate = async () => {
|
||||
const { data, error } = await sendRequest(
|
||||
`/typebots/realtime-airtable.json`
|
||||
)
|
||||
if (error) return
|
||||
const typebot = data as Typebot
|
||||
setTypebot({ ...typebot, typebotId: typebot.id } as PublicTypebot)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchTemplate()
|
||||
}, [])
|
||||
|
||||
const refreshIframeContent = () => {
|
||||
if (!iframeRef.current) return
|
||||
iframeRef.current.src += ''
|
||||
}
|
||||
|
||||
const handleAnswer = ({ blockId }: { blockId: string }) => {
|
||||
if ([nameBlockId, messageBlockId].includes(blockId))
|
||||
setTimeout(refreshIframeContent, 1000)
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex as="section" justify="center">
|
||||
<Stack
|
||||
style={{ maxWidth: '1200px' }}
|
||||
pt={'52'}
|
||||
w="full"
|
||||
px="4"
|
||||
spacing={16}
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<VStack spacing={6}>
|
||||
<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.{' '}
|
||||
<strong>You won't lose any valuable data.</strong>
|
||||
</Text>
|
||||
<Flex>
|
||||
<Button
|
||||
as={Link}
|
||||
rightIcon={<ArrowRight />}
|
||||
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"
|
||||
pos="relative"
|
||||
data-aos="fade"
|
||||
>
|
||||
{typebot && (
|
||||
<Standard
|
||||
typebot="airtable-real-time"
|
||||
onAnswer={handleAnswer}
|
||||
style={{
|
||||
borderRadius: '0.375rem',
|
||||
borderWidth: '1px',
|
||||
height: '533px',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
src="https://airtable.com/embed/shr8nkV6DVN88LVIv?backgroundColor=blue"
|
||||
width="100%"
|
||||
height="533"
|
||||
style={{
|
||||
borderRadius: '0.5rem',
|
||||
border: 'none',
|
||||
backgroundColor: 'white',
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
top="-60px"
|
||||
right="-30px"
|
||||
pos="absolute"
|
||||
display={{ base: 'none', xl: 'flex' }}
|
||||
>
|
||||
<Text fontFamily="'Indie Flower'" fontSize="2xl">
|
||||
It's a real Airtable view!
|
||||
</Text>
|
||||
<HandDrawnArrow
|
||||
transform="rotate(30deg)"
|
||||
boxSize="100px"
|
||||
top="15px"
|
||||
right="-60px"
|
||||
pos="absolute"
|
||||
/>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
80
ee/apps/landing-page/components/Homepage/Testimonials/Testimonial.tsx
Executable file
80
ee/apps/landing-page/components/Homepage/Testimonials/Testimonial.tsx
Executable file
@ -0,0 +1,80 @@
|
||||
import { Avatar, Flex, HStack, Stack, Text } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
import Image from 'next/image'
|
||||
import { TestimonialData } from './Testimonials'
|
||||
import {
|
||||
CapterraIcon,
|
||||
EmailIcon,
|
||||
ProductHuntIcon,
|
||||
RedditIcon,
|
||||
} from 'assets/icons'
|
||||
|
||||
export const Testimonial = ({
|
||||
avatarSrc,
|
||||
content,
|
||||
name,
|
||||
role,
|
||||
provider,
|
||||
}: TestimonialData) => (
|
||||
<Stack
|
||||
p="6"
|
||||
rounded="lg"
|
||||
bgColor="gray.800"
|
||||
color="white"
|
||||
shadow="lg"
|
||||
spacing="4"
|
||||
data-aos="fade"
|
||||
>
|
||||
<Flex justifyContent="space-between">
|
||||
<HStack spacing="4">
|
||||
{avatarSrc ? (
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
alt={name}
|
||||
placeholder="blur"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<Avatar name={name} />
|
||||
)}
|
||||
<Stack spacing={1}>
|
||||
<Text
|
||||
as="cite"
|
||||
fontStyle="normal"
|
||||
fontWeight="extrabold"
|
||||
color="white"
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
<Text fontSize="sm" color={'gray.100'}>
|
||||
{role}
|
||||
</Text>
|
||||
</Stack>
|
||||
</HStack>
|
||||
<ProviderIcon provider={provider} />
|
||||
</Flex>
|
||||
|
||||
<Text mt="3" maxW="38rem" color="gray.400">
|
||||
{content}
|
||||
</Text>
|
||||
</Stack>
|
||||
)
|
||||
|
||||
const ProviderIcon = ({
|
||||
provider,
|
||||
}: {
|
||||
provider: TestimonialData['provider']
|
||||
}): JSX.Element => {
|
||||
switch (provider) {
|
||||
case 'email':
|
||||
return <EmailIcon fontSize="20px" />
|
||||
case 'productHunt':
|
||||
return <ProductHuntIcon fontSize="20px" />
|
||||
case 'capterra':
|
||||
return <CapterraIcon fontSize="20px" />
|
||||
case 'reddit':
|
||||
return <RedditIcon fontSize="20px" />
|
||||
}
|
||||
}
|
||||
222
ee/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx
Executable file
222
ee/apps/landing-page/components/Homepage/Testimonials/Testimonials.tsx
Executable file
@ -0,0 +1,222 @@
|
||||
import { Flex, Heading, SimpleGrid, Stack, VStack } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
import joshuaPictureSrc from 'public/images/joshua.jpg'
|
||||
import julienPictureSrc from 'public/images/julien.jpeg'
|
||||
import nicolaiPictureSrc from 'public/images/nicolai.jpg'
|
||||
import annaFilouPictureSrc from 'public/images/annaFilou.jpeg'
|
||||
import theoPictureSrc from 'public/images/theo.jpeg'
|
||||
import abhayPictureSrc from 'public/images/abhay.jpeg'
|
||||
import lucasPictureSrc from 'public/images/lucas.png'
|
||||
import oscarPictureSrc from 'public/images/oscar.jpeg'
|
||||
import invictuzPictureSrc from 'public/images/invictuz.png'
|
||||
import laszloPictureSrc from 'public/images/laszlo.jpeg'
|
||||
import kurniaPictureSrc from 'public/images/kurnia.jpeg'
|
||||
import stevePictureSrc from 'public/images/steve.jpg'
|
||||
import { Testimonial } from './Testimonial'
|
||||
import { StaticImageData } from 'next/image'
|
||||
|
||||
export type TestimonialData = {
|
||||
name: string
|
||||
avatarSrc?: StaticImageData
|
||||
provider: 'email' | 'productHunt' | 'capterra' | 'reddit'
|
||||
role?: string
|
||||
content: string | React.ReactNode
|
||||
}
|
||||
|
||||
const testimonials: TestimonialData[][] = [
|
||||
[
|
||||
{
|
||||
name: 'Joshua Lim',
|
||||
role: 'Growth Strategist @ Socialhackrs Media',
|
||||
avatarSrc: joshuaPictureSrc,
|
||||
provider: 'email',
|
||||
content:
|
||||
'I upgraded my typeforms to typebots and saw a conversion rate increase from 14% to 43% on my marketing campaigns. I noticed the improvement on day one. That was a game-changer.',
|
||||
},
|
||||
{
|
||||
name: 'Laszlo Csömör',
|
||||
role: 'Digital Marketing Expert',
|
||||
provider: 'email',
|
||||
avatarSrc: laszloPictureSrc,
|
||||
content: (
|
||||
<>
|
||||
Typebot is one of the best chatbot builders with its intelligent
|
||||
features and drag-and-drop simplicity. Its UI/UX is an earthly
|
||||
paradise...
|
||||
<br />
|
||||
What's even more important is the person who stands behind it. He
|
||||
guarantees that the platform will work and progress for a long time.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Mario Barretta',
|
||||
role: 'Customer Care Manager',
|
||||
provider: 'email',
|
||||
content: (
|
||||
<>
|
||||
Thanks to typebot I can finally make site forms much more modern and I
|
||||
can collect information that I would have missed before. Also ,thanks
|
||||
to Baptiste, the service is always evolving and has excellent
|
||||
assistance not only in solving but also in listening to suggestions
|
||||
and putting it into action.
|
||||
<br />
|
||||
<br />
|
||||
Thank you thank you and thank you again .
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Lucas Barp',
|
||||
provider: 'email',
|
||||
avatarSrc: lucasPictureSrc,
|
||||
role: 'Founder at Barp Digital',
|
||||
content:
|
||||
'The result of your work is incredible and can make life easier for many people.',
|
||||
},
|
||||
{
|
||||
name: 'Igor T.',
|
||||
role: 'CTO',
|
||||
provider: 'capterra',
|
||||
content:
|
||||
'Nice work. The developer promptly makes changes, which is quite rare. There was a suggestion for improvement and improvement, in 2 days it was implemented. Amazing! Good luck and thanks a lot',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'Oscar',
|
||||
role: 'CEO',
|
||||
provider: 'capterra',
|
||||
avatarSrc: oscarPictureSrc,
|
||||
content:
|
||||
'Within 5 minutes of signing up you can already have your bot running thanks to the templates it comes with. I have used many tools to make bots but none as simple, easy and powerful as Typebot.',
|
||||
},
|
||||
{
|
||||
name: 'Julien Muratot',
|
||||
role: 'Growth Manager @ Hornetwork',
|
||||
avatarSrc: julienPictureSrc,
|
||||
provider: 'email',
|
||||
content:
|
||||
'I run Google ads all year long on our landing page that contains a typebot. I saw a 2x increase on our conversation rate compared to our old WordPress form.',
|
||||
},
|
||||
{
|
||||
name: '_Invictuz',
|
||||
provider: 'reddit',
|
||||
avatarSrc: invictuzPictureSrc,
|
||||
content:
|
||||
"This is the sickest open-source project I've ever seen and demoed. The use case is so cool and modern and I can't believe how easy this is to get started using. The feature richness and polish in this project is incredible, it feel like a mature product. Unbelievable that this was built by one person. This is better than the demos of chatbot builders I've seen from full-fledged companies. I'm going to learn Typescript so that I can contribute to this someday. Mind-blowing stuff...",
|
||||
},
|
||||
{
|
||||
name: 'Theo Marechal',
|
||||
provider: 'productHunt',
|
||||
avatarSrc: theoPictureSrc,
|
||||
role: 'Nocode expert and content creator',
|
||||
content: (
|
||||
<>
|
||||
Amazing product! I'm using Typebot for everything when it's
|
||||
about talking with customers.
|
||||
<br />
|
||||
<br />
|
||||
What's amazing with Typebot is that it makes a "chat
|
||||
interface effect" without the hassle of being behind my computer
|
||||
all day responding to customers. Highly recommend !
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Abhay Kulkarni',
|
||||
provider: 'productHunt',
|
||||
avatarSrc: abhayPictureSrc,
|
||||
role: 'Founder at Webisharp',
|
||||
content:
|
||||
'Using this tool for the last 2 hours & built a full lead capture bot. Pretty good experience till now. @baptiste_arnaud All the best for future :)',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'Steve de Jong',
|
||||
provider: 'email',
|
||||
avatarSrc: stevePictureSrc,
|
||||
role: 'CEO at Stillio',
|
||||
content: (
|
||||
<>
|
||||
We built our own onboarding template last December for all signups for
|
||||
Stillio and it works fantastic and reliably.
|
||||
<br />
|
||||
<br />
|
||||
We send the collected data to a Make-com webhook and from there,
|
||||
post-process and send to Encharge (email drip campaigns) and Pipedrive
|
||||
(CRM).
|
||||
<br />
|
||||
We are now working on personalizing the email templates based on the
|
||||
answers (user industry and role) given in the typebot. We are big fan!
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Goran Milic',
|
||||
role: 'General Manager, Beefii',
|
||||
provider: 'email',
|
||||
content: (
|
||||
<>
|
||||
I used Typebot at my company and was impressed with how it cut our
|
||||
customer service workload in half. I was able to create a fully
|
||||
functional chatbot in minutes. <br /> You can create a bot to answer
|
||||
frequently asked questions about your business or create a bot that
|
||||
helps promote your business on social media or any other platform.,
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Kurnia Kwik',
|
||||
role: 'Founder at DigitalPointer.ID',
|
||||
provider: 'email',
|
||||
avatarSrc: kurniaPictureSrc,
|
||||
content: (
|
||||
<>
|
||||
I have several chatbot builders, but Typebot is the one I use the
|
||||
most. It is simple to construct and very intuitive. <br />
|
||||
Integration with third-party applications is simple, and you can
|
||||
create the most sophisticated bots with its simplicity.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Nicolai Grut',
|
||||
role: 'CEO @ EcommerceNotebook.com',
|
||||
avatarSrc: nicolaiPictureSrc,
|
||||
provider: 'email',
|
||||
content:
|
||||
'I am really loving using Typebot! So good. I have used all the top bots and yours is definitely the most user friendly, and yet still so powerful.',
|
||||
},
|
||||
{
|
||||
name: 'Anna Filou',
|
||||
provider: 'productHunt',
|
||||
avatarSrc: annaFilouPictureSrc,
|
||||
role: 'Geek, Designer, Illustrator, Web Dev',
|
||||
content:
|
||||
"Seems like the product I've been waiting for Typeform to make! 😝",
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
export const Testimonials = () => {
|
||||
return (
|
||||
<Flex as="section" justify="center">
|
||||
<VStack spacing={12} pt={'52'} px="4" maxW="1400px">
|
||||
<Heading textAlign={'center'} data-aos="fade">
|
||||
They've tried, they never looked back. 💙
|
||||
</Heading>
|
||||
<SimpleGrid columns={[1, 2, 3]} spacing="6">
|
||||
{testimonials.map((testimonialGroup, index) => (
|
||||
<Stack key={index} spacing="6">
|
||||
{testimonialGroup.map((testimonial, index) => (
|
||||
<Testimonial key={index} {...testimonial} />
|
||||
))}
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export { Testimonials } from './Testimonials'
|
||||
Reference in New Issue
Block a user