110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
import React, { ReactNode } from '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">
|
||
<Container as={Stack} maxW={'1000px'} py={10}>
|
||
<SimpleGrid columns={[1, 2, 4]} spacing={8} px={2}>
|
||
<Stack spacing={6}>
|
||
<HStack>
|
||
<Logo boxSize="30px" />
|
||
<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={documentationLink}
|
||
isExternal
|
||
color="gray.400"
|
||
>
|
||
Documentation
|
||
</NextChakraLink>
|
||
<NextChakraLink href={roadmapLink} isExternal color="gray.400">
|
||
Roadmap
|
||
</NextChakraLink>
|
||
<NextChakraLink href={'/pricing'} color="gray.400">
|
||
Pricing
|
||
</NextChakraLink>
|
||
</Stack>
|
||
<Stack align={'flex-start'}>
|
||
<ListHeader>Community</ListHeader>
|
||
<NextChakraLink href={githubRepoLink} isExternal color="gray.400">
|
||
GitHub repository
|
||
</NextChakraLink>
|
||
<NextChakraLink href={facebookGroupUrl} isExternal color="gray.400">
|
||
Facebook Group
|
||
</NextChakraLink>
|
||
<NextChakraLink
|
||
href={typebotTwitterUrl}
|
||
isExternal
|
||
color="gray.400"
|
||
>
|
||
Twitter
|
||
</NextChakraLink>
|
||
<NextChakraLink
|
||
href={typebotLinkedInUrl}
|
||
isExternal
|
||
color="gray.400"
|
||
>
|
||
LinkedIn
|
||
</NextChakraLink>
|
||
</Stack>
|
||
<Stack align={'flex-start'}>
|
||
<ListHeader>Company</ListHeader>
|
||
<NextChakraLink href="/about" color="gray.400">
|
||
About
|
||
</NextChakraLink>
|
||
<NextChakraLink href="mailto:baptiste@typebot.io" color="gray.400">
|
||
Contact
|
||
</NextChakraLink>
|
||
<NextChakraLink href={'/terms-of-service'} color="gray.400">
|
||
Terms of Service
|
||
</NextChakraLink>
|
||
<NextChakraLink href={'/privacy-policies'} color="gray.400">
|
||
Privacy Policy
|
||
</NextChakraLink>
|
||
</Stack>
|
||
</SimpleGrid>
|
||
</Container>
|
||
</Box>
|
||
)
|
||
}
|
||
|
||
const ListHeader = ({ children }: { children: ReactNode }) => {
|
||
return (
|
||
<Heading fontWeight={'500'} fontSize={'lg'} mb={2}>
|
||
{children}
|
||
</Heading>
|
||
)
|
||
}
|