Skip to content

Commit

Permalink
Merge pull request #2495 from iterative/update-footer-design
Browse files Browse the repository at this point in the history 
Update footer design
  • Loading branch information
@rogermparent
rogermparent authored May 24, 2021
2 parents 062b2a6 + 6558e06 commit 9509abb
Show file tree
Hide file tree
Showing 19 changed files with 565 additions and 198 deletions.
Binary file removed src/components/IconSet/icons/chat.png
View file
Binary file not shown.
Binary file removed src/components/IconSet/icons/discord.png
View file
Binary file not shown.
Binary file removed src/components/IconSet/icons/github.png
View file
Binary file not shown.
5 changes: 0 additions & 5 deletions src/components/IconSet/icons/index.ts
View file

This file was deleted.

Binary file removed src/components/IconSet/icons/iterative.png
View file
Binary file not shown.
Binary file removed src/components/IconSet/icons/twitter.png
View file
Binary file not shown.
26 changes: 0 additions & 26 deletions src/components/IconSet/index.tsx
View file

This file was deleted.

7 changes: 0 additions & 7 deletions src/components/IconSet/styles.module.css
View file

This file was deleted.

304 changes: 197 additions & 107 deletions src/components/LayoutFooter/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,217 @@
import React from 'react'
import cn from 'classnames'
import includes from 'lodash/includes'

import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
import LayoutWidthContainer from '../LayoutWidthContainer'
import Link from '../Link'
import IconSet from '../IconSet'

import SocialIcon, { ISocialIcon } from '../SocialIcon'
import ShowOnly from '../ShowOnly'
import { getFirstPage } from '../../utils/shared/sidebar'

import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
import { ReactComponent as LogoSVG } from '../../../static/img/logo.svg'
import { ReactComponent as GithubSVG } from '../SocialIcon/github.svg'
import { ReactComponent as TwitterSVG } from '../SocialIcon/twitter.svg'
import { ReactComponent as DiscordSVG } from '../SocialIcon/discord.svg'
import { ReactComponent as CmlSVG } from '../../../static/img/cml-icon.svg'
import { ReactComponent as StudioSVG } from '../../../static/img/studio-icon.svg'
import { ReactComponent as IterativeSVG } from '../../../static/img/iterative-icon.svg'

import styles from './styles.module.css'

const docsPage = getFirstPage()

const LayoutFooter: React.FC<Required<ILayoutModifiable>> = ({ modifiers }) => (
interface IFooterLinkData {
href: string
text: string
icon?: JSX.Element
target?: '_blank'
}

interface IFooterListData {
header: string
links: Array<IFooterLinkData>
}

const footerListsData: Array<IFooterListData> = [
{
header: 'Product',
links: [
{
href: '/',
text: 'Overview'
},
{
href: '/features',
text: 'Features'
}
]
},
{
header: 'Help',
links: [
{ href: '/support', text: 'Support' },
{ href: '/doc/start', text: 'Get started' },
{ href: '/community', text: 'Community' },
{ href: docsPage, text: 'Documentation' }
]
},
{
header: 'Community',
links: [
{
href: 'https://twitter.com/DVCorg',
text: 'Twitter',
icon: <TwitterSVG className={styles.icon} />,
target: '_blank'
},
{
href: 'https://github.com/iterative/dvc',
text: 'Github',
icon: <GithubSVG className={styles.icon} />,
target: '_blank'
},
{
href: '/chat',
text: 'Discord',
icon: <DiscordSVG className={styles.icon} />
}
]
},
{
header: 'Company',
links: [
{
href: '/blog',
text: 'Blog'
},
{
href: '/doc/user-guide/privacy',
text: 'Privacy Policy'
},
{
href: 'https://iterative.ai/about#career',
text: 'Career',
target: '_blank'
}
]
},
{
header: 'Other Tools',
links: [
{
href: '/',
text: 'DVC',
icon: <LogoSVG className={styles.productIcon} />
},
{
href: 'https://cml.dev/',
text: 'CML',
icon: <CmlSVG className={styles.productIcon} />,
target: '_blank'
},
{
href: 'https://studio.iterative.ai/',
text: 'Studio',
icon: <StudioSVG className={styles.productIcon} />,
target: '_blank'
}
]
}
]

const footerSocialIconsData: Array<ISocialIcon> = [
{
site: 'github',
label: 'DVC Github Page',
url: 'https://github.com/iterative/dvc'
},
{
site: 'twitter',
label: 'DVC Twitter',
url: 'https://twitter.com/DVCorg'
},
{
site: 'youtube',
label: 'DVC.org Youtube Channel',
url: 'https://www.youtube.com/channel/UC37rp97Go-xIX3aNFVHhXfQ'
},
{
site: 'linkedinNoBg',
label: 'Iterative LinkedIn',
url: 'https://www.linkedin.com/company/iterative-ai'
},
{
site: 'discord',
label: 'DVC Discord chat',
url: 'https://www.dvc.org/chat'
}
]

const FooterLists: React.FC = () => (
<div className={styles.columns}>
{footerListsData.map(({ header, links }, index) => (
<div className={styles.column} key={index}>
<h2 className={styles.heading}>{header}</h2>
<ul className={styles.links}>
{links.map(({ text, target, href, icon }, i) => (
<li className={styles.linkItem} key={i}>
<Link target={target} href={href} className={styles.link}>
{icon}
{text}
</Link>
</li>
))}
</ul>
</div>
))}
</div>
)

const FooterSocialIcons: React.FC = () => (
<div className={styles.socialIcons}>
{footerSocialIconsData.map(({ site, label, url }, index) => (
<SocialIcon
key={index}
site={site}
label={label}
url={url}
className={cn(styles.link, styles.socialIcon)}
/>
))}
</div>
)

const LayoutFooter: React.FC = () => (
<footer className={styles.wrapper}>
<LayoutWidthContainer
className={cn(styles.container)}
wide={includes(modifiers, LayoutModifiers.Wide)}
>
<LayoutWidthContainer className={cn(styles.container)} wide>
<div className={styles.top}>
<Link className={styles.logo} href="/" title="dvc.org">
<LogoSVG />
</Link>
</div>
<div className={styles.columns}>
<div className={styles.column}>
<h2 className={styles.heading}>Product</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link href="/" className={styles.link}>
Overview
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/features" className={styles.link}>
Features
</Link>
</li>
</ul>
</div>
<div className={styles.column}>
<h2 className={styles.heading}>Help</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link href="/support" className={styles.link}>
Support
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/doc/start" className={styles.link}>
Get started
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/community" className={styles.link}>
Community
</Link>
</li>
<li className={styles.linkItem}>
<Link href={docsPage} className={styles.link}>
Documentation
</Link>
</li>
</ul>
</div>
<div className={styles.column}>
<h2 className={styles.heading}>Company</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link href="/blog" className={styles.link}>
Blog
</Link>
</li>
<li className={styles.linkItem}>
<Link
href="https://iterative.ai/"
className={styles.link}
target="_blank"
>
<IconSet className={styles.icon} name="iterative" />
Iterative.ai
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/doc/user-guide/privacy" className={styles.link}>
Privacy Policy
</Link>
</li>
</ul>
</div>
<div className={styles.column}>
<h2 className={styles.heading}>Social</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link
href="https://twitter.com/DVCorg"
className={styles.link}
target="_blank"
>
<IconSet className={styles.icon} name="twitter" />
Twitter
</Link>
</li>
<li className={styles.linkItem}>
<Link
href="https://github.com/iterative/dvc"
className={styles.link}
target="_blank"
>
<IconSet className={styles.icon} name="github" />
GitHub
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/chat" className={styles.link}>
<IconSet className={styles.icon} name="discord" />
Discord
</Link>
</li>
</ul>
</div>
<FooterLists />
<div className={styles.bottomRow}>
<p className={styles.companyLabel}>
By{' '}
<Link
className={styles.companyName}
href="https://iterative.ai/"
target="_blank"
>
<IterativeSVG className={styles.companyLogo} />
iterative.ai
</Link>
<span className={styles.companyDescription}>
<ShowOnly as="span" on="desktop">
{' '}
- an open platform to operationalize AI
</ShowOnly>
<ShowOnly as="span" on="mobile">
{' '}
An open platform to operationalize AI
</ShowOnly>
</span>
</p>
<FooterSocialIcons />
</div>
</LayoutWidthContainer>
</footer>
Expand Down
Loading

0 comments on commit 9509abb

Please sign in to comment.