2
0

docs(lp): 💄 Refont LP for v2

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

View File

@ -1,60 +1,93 @@
import React, { ReactNode } from 'react'
import { Box, Container, Heading, SimpleGrid, Stack } from '@chakra-ui/react'
import {
Box,
Container,
Heading,
HStack,
SimpleGrid,
Stack,
Text,
} from '@chakra-ui/react'
import { NextChakraLink } from './nextChakraAdapters/NextChakraLink'
import { Logo } from 'assets/icons/Logo'
const facebookGroupUrl = 'https://www.facebook.com/groups/typebot'
const typebotLinkedInUrl = 'https://www.linkedin.com/company/typebot'
const typebotTwitterUrl = 'https://twitter.com/Typebot_io'
const baptisteTwitterUrl = 'https://twitter.com/baptisteArno'
export const contactUrl = 'https://bot.typebot.io/landing-page-bubble-en'
export const roadmapLink = 'https://app.typebot.io/feedback'
export const documentationLink = 'https://docs.typebot.io'
export const githubRepoLink = 'https://github.com/baptisteArno/typebot.io'
export const Footer = () => {
return (
<Box w="full" bgColor="gray.50">
<Box w="full">
<Container as={Stack} maxW={'1000px'} py={10}>
<SimpleGrid columns={[1, 2, 5]} spacing={8} px={2}>
<SimpleGrid columns={[1, 2, 4]} spacing={8} px={2}>
<Stack spacing={6}>
<Box>
<HStack>
<Logo boxSize="30px" />
</Box>
<Heading as="p" fontSize="lg">
Typebot
</Heading>
</HStack>
<Text>
Made with by{' '}
<NextChakraLink href={baptisteTwitterUrl} color="gray.400">
@baptisteArno
</NextChakraLink>
</Text>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Product</ListHeader>
<NextChakraLink href={roadmapLink} isExternal>
<NextChakraLink
href={documentationLink}
isExternal
color="gray.400"
>
Documentation
</NextChakraLink>
<NextChakraLink href={roadmapLink} isExternal color="gray.400">
Roadmap
</NextChakraLink>
<NextChakraLink href={'/blog'}>Blog</NextChakraLink>
<NextChakraLink href={'/pricing'}>Pricing</NextChakraLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Comparisons</ListHeader>
<NextChakraLink href="/vs-typeform">VS Typeform</NextChakraLink>
<NextChakraLink href="/vs-landbot">VS Landbot</NextChakraLink>
<NextChakraLink href="/vs-tally">VS Tally</NextChakraLink>
<NextChakraLink href={'/pricing'} color="gray.400">
Pricing
</NextChakraLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Community</ListHeader>
<NextChakraLink href={facebookGroupUrl} isExternal>
<NextChakraLink href={githubRepoLink} isExternal color="gray.400">
GitHub repository
</NextChakraLink>
<NextChakraLink href={facebookGroupUrl} isExternal color="gray.400">
Facebook Group
</NextChakraLink>
<NextChakraLink href={typebotTwitterUrl} isExternal>
<NextChakraLink
href={typebotTwitterUrl}
isExternal
color="gray.400"
>
Twitter
</NextChakraLink>
<NextChakraLink href={typebotLinkedInUrl} isExternal>
<NextChakraLink
href={typebotLinkedInUrl}
isExternal
color="gray.400"
>
LinkedIn
</NextChakraLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Company</ListHeader>
<NextChakraLink href="mailto:baptiste@typebot.io">
<NextChakraLink href="mailto:baptiste@typebot.io" color="gray.400">
Contact
</NextChakraLink>
<NextChakraLink href={'/terms-of-service'}>
<NextChakraLink href={'/terms-of-service'} color="gray.400">
Terms of Service
</NextChakraLink>
<NextChakraLink href={'/privacy-policies'}>
<NextChakraLink href={'/privacy-policies'} color="gray.400">
Privacy Policy
</NextChakraLink>
</Stack>

View File

@ -65,7 +65,7 @@ const MobileNavContext = ({
<Button
as={NextChakraLink}
href="https://app.typebot.io/register"
colorScheme="blue"
colorScheme="orange"
w="full"
size="lg"
mt="5"
@ -90,43 +90,44 @@ const DesktopNavContent = ({
color={mode('bg.gray800', 'white')}
>
<HStack as={NextChakraLink} href="/" rel="home">
<Logo boxSize="35px" isDark={mode(false, true)} />
<Logo boxSize="35px" />
<Heading as="p" fontSize="lg">
Typebot
</Heading>
</HStack>
<HStack
as="ul"
id="nav__primary-menu"
aria-label="Main Menu"
listStyleType="none"
>
{links.map((link, idx) => (
<Box as="li" key={idx} id={`nav__menuitem-${idx}`}>
{link.children ? (
<Submenu.Desktop link={link} />
) : (
<NavLink.Desktop href={link.href ?? '#'}>
{link.label}
</NavLink.Desktop>
)}
</Box>
))}
</HStack>
<HStack spacing="8" minW="240px" justify="space-between">
<Box
<HStack spacing="4" minW="240px" justify="space-between">
<HStack
as="ul"
id="nav__primary-menu"
aria-label="Main Menu"
listStyleType="none"
>
{links.map((link, idx) => (
<Box as="li" key={idx} id={`nav__menuitem-${idx}`}>
{link.children ? (
<Submenu.Desktop link={link} />
) : (
<NavLink.Desktop href={link.href ?? '#'}>
{link.label}
</NavLink.Desktop>
)}
</Box>
))}
</HStack>
<Button
as={NextChakraLink}
href="https://app.typebot.io/signin"
colorScheme="blue"
variant="ghost"
variant="outline"
fontWeight="bold"
>
Sign in
</Box>
</Button>
<Button
as={NextChakraLink}
href="https://app.typebot.io/register"
colorScheme="blue"
colorScheme="orange"
fontWeight="bold"
>
Create a typebot

View File

@ -9,7 +9,7 @@ export const NavMenu = (props: MotionBoxProps) => (
variants={variants}
outline="0"
opacity="0"
bg={useColorModeValue('white', 'gray.700')}
bg={useColorModeValue('white', 'gray.800')}
w="full"
shadow="lg"
px="4"

View File

@ -43,7 +43,7 @@ export const SubmenuItem = (props: SubmenuItemProps) => {
w="10"
h="10"
fontSize="3xl"
color={mode('blue.600', 'blue.400')}
color={'blue.300'}
>
{icon}
</Center>

View File

@ -1,4 +1,4 @@
import { BookIcon } from 'assets/icons/BookIcon'
import { GitHubIcon } from 'assets/icons'
import { DocIcon } from 'assets/icons/DocIcon'
import { MapIcon } from 'assets/icons/MapIcon'
import { PeopleCircleIcon } from 'assets/icons/PeopleCircleIcon'
@ -20,11 +20,10 @@ export const links = [
label: 'Resources',
children: [
{
label: 'Blog',
description:
"Content about high-performing forms and guides on how to leverage Typebot's power",
href: '/blog',
icon: <BookIcon />,
label: 'GitHub repository',
description: 'Check out the entire source code of the project',
href: 'https://github.com/baptisteArno/typebot.io',
icon: <GitHubIcon fill="blue.300" />,
},
{
label: 'Documentation',