blsmedia/bot
2
0
Fork 0
Code Activity

docs(lp): 💄 Small visual fixes

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-17 14:37:00 +01:00
parent 8ba231f393
commit 52b773379e
12 changed files with 159 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,7 @@ export const EasyBuildingExperience = () => {
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="300px">
<Stack spacing="6" maxW="300px" minW={[0, '300px']}>
<Heading as="h1" data-aos="fade">
Easy building experience
</Heading>

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

@@ -27,7 +27,7 @@ export const EasyEmbed = () => {
justifyContent="space-between"
alignItems="center"
>
<Stack spacing="6" maxW="300px">
<Stack spacing="6" maxW="300px" minW={[0, '300px']}>
<Heading as="h1" data-aos="fade">
Embed it in a click
</Heading>

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

@@ -6,7 +6,7 @@ export const BackgroundPolygons = () => {
<>
<chakra.div
display={{ base: 'none', xl: 'block' }}
animation="float 6s ease-in-out infinite;"
className="floating animation-delay-3000"
pos="absolute"
left="0px"
top="100px"
@@ -17,7 +17,7 @@ export const BackgroundPolygons = () => {
</chakra.div>
<chakra.div
display={{ base: 'none', xl: 'block' }}
animation="float 6s ease-in-out 700ms infinite;"
className="floating animation-delay-4000"
pos="absolute"
right="-10px"
top="30px"

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

@@ -15,7 +15,6 @@ import { BackgroundPolygons } from './BackgroundPolygons'
import * as Logos from './Brands'
import Image from 'next/image'
import builderScreenshotSrc from 'public/images/homepage/builder.png'
import { GitHubIcon } from 'assets/icons'
export const Hero = () => {
return (
@@ -62,23 +61,10 @@ export const Hero = () => {
>
Create a typebot
</Button>
<Button
as={NextChakraLink}
href="https://github.com/baptisteArno/typebot.io"
isExternal={true}
colorScheme="gray"
size="lg"
height="4rem"
px="2rem"
variant="outline"
leftIcon={<GitHubIcon />}
>
Star us on GitHub
</Button>
</Stack>
<Text color="gray.400" data-aos="fade-up" data-aos-delay="300">
No trial. Generous, unlimited <strong>free</strong> plan.
Generous, unlimited <strong>free</strong> plan.
</Text>
</VStack>
<Box maxW="1200px" pos="relative">
@@ -90,7 +76,7 @@ export const Hero = () => {
rounded="full"
filter="blur(40px)"
opacity="0.7"
className="animated-blob animation-delay-2000"
className="animated-blob"
data-aos="fade"
data-aos-delay="1200"
/>
@@ -102,7 +88,7 @@ export const Hero = () => {
rounded="full"
filter="blur(40px)"
opacity="0.7"
className="animated-blob animation-delay-4000"
className="animated-blob animation-delay-5000"
data-aos="fade"
data-aos-delay="1200"
/>

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

@@ -74,7 +74,7 @@ export const Integrations = () => (
align="center"
borderWidth="1px"
data-aos="fade"
data-aos-delay={idx * 100}
data-aos-delay={idx * 200}
>
<Icon w="full" h="full" />
</Flex>
@@ -94,7 +94,7 @@ export const Integrations = () => (
align="center"
borderWidth="1px"
data-aos="fade"
data-aos-delay={(secondRowIcons.length - idx) * 100}
data-aos-delay={(secondRowIcons.length - idx) * 200}
>
<Icon w="full" h="full" />
</Flex>

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

@@ -109,6 +109,7 @@ export const RealTimeResults = () => {
borderRadius: '0.5rem',
border: 'none',
backgroundColor: 'white',
pointerEvents: 'none',
}}
/>
</Stack>

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

@@ -30,7 +30,7 @@ export const Testimonials = () => {
on my marketing campaigns. I noticed the improvement on day one.
That was a game-changer.
</Testimonial>
<Testimonial
{/* <Testimonial
name="Nicolai Grut"
role="Growth Strategist @ X"
image={joshuaPictureSrc}
@@ -39,7 +39,7 @@ export const Testimonials = () => {
I am really loving using Typebot! I have used so many bot builders
(ActiveChat, Botstar, Uchat, Monkeybot) and Typebot is definitely
the most user-friendly, and yet still powerful.
</Testimonial>
</Testimonial> */}
<Testimonial
name="Julien Muratot"
role="Growth Manager @ Hornetwork"

3
apps/landing-page/components/PricingPage/PricingCard/Card.tsx
View File

@@ -13,8 +13,7 @@ export const Card = (props: CardProps) => {
bg={useColorModeValue('white', 'gray.700')}
position="relative"
px="6"
pb="6"
pt="16"
py="6"
overflow="hidden"
shadow="lg"
maxW="md"

77
apps/landing-page/components/PricingPage/PricingCard/index.tsx
View File

@@ -31,43 +31,48 @@ export const PricingCard = (props: PricingCardProps) => {
return (
<Card rounded="xl" bgColor="gray.800" {...rest}>
<VStack spacing={6}>
{icon}
<Heading size="md" fontWeight="extrabold">
{name}
</Heading>
</VStack>
<Flex
align="flex-end"
justify="center"
fontWeight="extrabold"
color={accentColor}
my="8"
>
<Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
{price}
</Heading>
{(price.includes('$') || price.includes('€')) && (
<Text fontWeight="inherit" fontSize="xl">
/ mo
</Text>
)}
<Flex justifyContent="space-between" flexDir="column" h="full">
<Flex flexDir="column">
<VStack spacing={6}>
{icon}
<Heading size="md" fontWeight="extrabold">
{name}
</Heading>
</VStack>
<Flex
align="flex-end"
justify="center"
fontWeight="extrabold"
color={accentColor}
my="8"
>
<Heading size="2xl" fontWeight="inherit" lineHeight="0.9em">
{price}
</Heading>
{(price.includes('$') || price.includes('€')) && (
<Text fontWeight="inherit" fontSize="xl">
/ month
</Text>
)}
</Flex>
<List spacing="4" mb="8" maxW="30ch" mx="auto">
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListIcon
fontSize="xl"
as={CheckIcon}
marginEnd={2}
color={accentColor}
fill="blue.200"
/>
{feature}
</ListItem>
))}
</List>
</Flex>
{button}
</Flex>
<List spacing="4" mb="8" maxW="30ch" mx="auto">
{features.map((feature, index) => (
<ListItem fontWeight="medium" key={index}>
<ListIcon
fontSize="xl"
as={CheckIcon}
marginEnd={2}
color={accentColor}
fill="blue.200"
/>
{feature}
</ListItem>
))}
</List>
{button}
</Card>
)
}