107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import styled from '@emotion/styled'
|
|
import { Logo } from './Logo';
|
|
import { DiscordIcon, GithubIcon, LinkedInIcon, XIcon } from "./Icons";
|
|
|
|
|
|
const FooterContainer = styled.div`
|
|
padding: 64px 96px 64px 96px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: rgb(129, 129, 129);
|
|
gap: 32px;
|
|
`;
|
|
|
|
const LeftSideFooter = styled.div`
|
|
width: 36Opx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;`;
|
|
|
|
const RightSideFooter = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;`;
|
|
|
|
const RightSideFooterColumn = styled.div`
|
|
width: 160px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
`;
|
|
|
|
const RightSideFooterLink = styled.a`
|
|
color: rgb(129, 129, 129);
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
color: #000;
|
|
}`;
|
|
|
|
const RightSideFooterColumnTitle = styled.div`
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: #000;
|
|
`;
|
|
|
|
|
|
|
|
export const FooterNav = () => {
|
|
return <FooterContainer>
|
|
<div style={{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
|
|
<LeftSideFooter>
|
|
<Logo />
|
|
<div>
|
|
The #1 Open Source CRM
|
|
</div>
|
|
</LeftSideFooter>
|
|
<RightSideFooter>
|
|
<RightSideFooterColumn>
|
|
<RightSideFooterColumnTitle>Company</RightSideFooterColumnTitle>
|
|
<RightSideFooterLink href='/'>Pricing</RightSideFooterLink>
|
|
<RightSideFooterLink href='/'>Story</RightSideFooterLink>
|
|
</RightSideFooterColumn>
|
|
<RightSideFooterColumn>
|
|
<RightSideFooterColumnTitle>Resources</RightSideFooterColumnTitle>
|
|
<RightSideFooterLink href='https://docs.twenty.com'>Documentation</RightSideFooterLink>
|
|
<RightSideFooterLink href='/releases'>Changelog</RightSideFooterLink>
|
|
</RightSideFooterColumn>
|
|
<RightSideFooterColumn>
|
|
<RightSideFooterColumnTitle>Other</RightSideFooterColumnTitle>
|
|
<RightSideFooterLink href='/oss-friends'>OSS Friends</RightSideFooterLink>
|
|
<RightSideFooterLink href='/legal/terms'>Terms of Service</RightSideFooterLink>
|
|
<RightSideFooterLink href='/legal/privacy'>Privacy Policy</RightSideFooterLink>
|
|
</RightSideFooterColumn>
|
|
</RightSideFooter>
|
|
</div>
|
|
<div style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent:'space-between',
|
|
borderTop: '1px solid rgb(179, 179, 179)',
|
|
paddingTop: '32px'
|
|
}}>
|
|
<div>
|
|
<span style={{fontFamily: "Inter, sans-serif"}}>©</span>
|
|
2023 Twenty PBC
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'row', justifyContent:'space-between', gap:'10px'}}>
|
|
<a href="https://x.com/twentycrm" target="_blank">
|
|
<XIcon size='M'/>
|
|
</a>
|
|
<a href="https://github.com/twentyhq/twenty" target="_blank">
|
|
<GithubIcon size='M'/>
|
|
</a>
|
|
<a href="https://www.linkedin.com/company/twenty" target="_blank">
|
|
<LinkedInIcon size='M'/>
|
|
</a>
|
|
<a href="https://discord.gg/UfGNZJfAG6" target="_blank">
|
|
<DiscordIcon size='M' />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</FooterContainer>
|
|
;
|
|
}
|