docs(lp): 💄 Refont LP for v2
This commit is contained in:
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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',
|
||||
|
Reference in New Issue
Block a user