blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Refont LP for v2

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

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

@ -1,6 +1,6 @@
import { Flex, VStack } from '@chakra-ui/layout'
import { IconProps, Text } from '@chakra-ui/react'
import React from 'react'
import React, { useState } from 'react'
type FeatureCardProps = {
Icon: (props: IconProps) => JSX.Element
@ -9,8 +9,18 @@ type FeatureCardProps = {
}
export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
const [isHovered, setIsHovered] = useState(false)
return (
<VStack p="6" bgColor="gray.100" pos="relative" rounded="lg" spacing="4">
<VStack
p="6"
bgColor="gray.800"
pos="relative"
rounded="lg"
spacing="4"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Flex
boxSize="50px"
bgColor="blue.500"
@ -21,10 +31,12 @@ export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
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">
<Text textAlign="center" fontWeight="semibold" fontSize="lg">
{title}
</Text>
<Text textAlign="center" color="gray.500">

79
apps/landing-page/components/Homepage/Features/Features.tsx Normal file
View File

@ -0,0 +1,79 @@
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">
And many more features
</Heading>
<Text color="gray.500" fontSize={['lg', 'xl']} textAlign="center">
Typebot makes form building easy and comes with powerful features
</Text>
</VStack>
<SimpleGrid columns={[1, 3]} spacing="10" pt="10">
{features.map((feature, idx) => (
<FeatureCard key={idx} {...feature} />
))}
</SimpleGrid>
</Stack>
</Flex>
)
}

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

@ -1,75 +1 @@
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 typebot with you',
},
{
Icon: ConditionIcon,
title: 'Conditional branching',
content:
'Make your form smarter by adding conditions to display custom answers to your users',
},
{
Icon: CalculatorIcon,
title: 'Computation',
content:
'Use the calculator to compute anything in Typebot directly to generate a quote or compute a score',
},
{
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={32} w="full" px="4" spacing={6}>
<VStack>
<Heading as="h1" textAlign="center">
And many more features
</Heading>
<Text color="gray.500" size="lg" textAlign="center">
Typebot makes form building easy and comes with powerful features
</Text>
<SimpleGrid columns={[1, 3]} spacing="10" pt="10">
{features.map((feature, idx) => (
<FeatureCard key={idx} {...feature} />
))}
</SimpleGrid>
</VStack>
</Stack>
</Flex>
)
}
export { Features } from './Features'