Skip to content

Commit 9509abb

Browse files
rogermparentrogermparent
authored
Merge pull request #2495 from iterative/update-footer-design
Update footer design
2 parents 062b2a6 + 6558e06 commit 9509abb

File tree

19 files changed

+565
-198
lines changed

19 files changed

+565
-198
lines changed

‎src/components/IconSet/icons/chat.png

-3.17 KB
Binary file not shown.

‎src/components/IconSet/icons/discord.png

-1.52 KB
Binary file not shown.

‎src/components/IconSet/icons/github.png

-1.91 KB
Binary file not shown.

‎src/components/IconSet/icons/index.ts

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/components/IconSet/icons/iterative.png

-756 Bytes
Binary file not shown.

‎src/components/IconSet/icons/twitter.png

-1.27 KB
Binary file not shown.

‎src/components/IconSet/index.tsx

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/components/IconSet/styles.module.css

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/components/LayoutFooter/index.tsx

Lines changed: 197 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,217 @@
11
import React from 'react'
22
import cn from 'classnames'
3-
import includes from 'lodash/includes'
43

5-
import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
64
import LayoutWidthContainer from '../LayoutWidthContainer'
75
import Link from '../Link'
8-
import IconSet from '../IconSet'
9-
6+
import SocialIcon, { ISocialIcon } from '../SocialIcon'
7+
import ShowOnly from '../ShowOnly'
108
import { getFirstPage } from '../../utils/shared/sidebar'
119

12-
import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
10+
import { ReactComponent as LogoSVG } from '../../../static/img/logo.svg'
11+
import { ReactComponent as GithubSVG } from '../SocialIcon/github.svg'
12+
import { ReactComponent as TwitterSVG } from '../SocialIcon/twitter.svg'
13+
import { ReactComponent as DiscordSVG } from '../SocialIcon/discord.svg'
14+
import { ReactComponent as CmlSVG } from '../../../static/img/cml-icon.svg'
15+
import { ReactComponent as StudioSVG } from '../../../static/img/studio-icon.svg'
16+
import { ReactComponent as IterativeSVG } from '../../../static/img/iterative-icon.svg'
17+
1318
import styles from './styles.module.css'
1419

1520
const docsPage = getFirstPage()
1621

17-
const LayoutFooter: React.FC<Required<ILayoutModifiable>> = ({ modifiers }) => (
22+
interface IFooterLinkData {
23+
href: string
24+
text: string
25+
icon?: JSX.Element
26+
target?: '_blank'
27+
}
28+
29+
interface IFooterListData {
30+
header: string
31+
links: Array<IFooterLinkData>
32+
}
33+
34+
const footerListsData: Array<IFooterListData> = [
35+
{
36+
header: 'Product',
37+
links: [
38+
{
39+
href: '/',
40+
text: 'Overview'
41+
},
42+
{
43+
href: '/features',
44+
text: 'Features'
45+
}
46+
]
47+
},
48+
{
49+
header: 'Help',
50+
links: [
51+
{ href: '/support', text: 'Support' },
52+
{ href: '/doc/start', text: 'Get started' },
53+
{ href: '/community', text: 'Community' },
54+
{ href: docsPage, text: 'Documentation' }
55+
]
56+
},
57+
{
58+
header: 'Community',
59+
links: [
60+
{
61+
href: 'https://twitter.com/DVCorg',
62+
text: 'Twitter',
63+
icon: <TwitterSVG className={styles.icon} />,
64+
target: '_blank'
65+
},
66+
{
67+
href: 'https://github.com/iterative/dvc',
68+
text: 'Github',
69+
icon: <GithubSVG className={styles.icon} />,
70+
target: '_blank'
71+
},
72+
{
73+
href: '/chat',
74+
text: 'Discord',
75+
icon: <DiscordSVG className={styles.icon} />
76+
}
77+
]
78+
},
79+
{
80+
header: 'Company',
81+
links: [
82+
{
83+
href: '/blog',
84+
text: 'Blog'
85+
},
86+
{
87+
href: '/doc/user-guide/privacy',
88+
text: 'Privacy Policy'
89+
},
90+
{
91+
href: 'https://iterative.ai/about#career',
92+
text: 'Career',
93+
target: '_blank'
94+
}
95+
]
96+
},
97+
{
98+
header: 'Other Tools',
99+
links: [
100+
{
101+
href: '/',
102+
text: 'DVC',
103+
icon: <LogoSVG className={styles.productIcon} />
104+
},
105+
{
106+
href: 'https://cml.dev/',
107+
text: 'CML',
108+
icon: <CmlSVG className={styles.productIcon} />,
109+
target: '_blank'
110+
},
111+
{
112+
href: 'https://studio.iterative.ai/',
113+
text: 'Studio',
114+
icon: <StudioSVG className={styles.productIcon} />,
115+
target: '_blank'
116+
}
117+
]
118+
}
119+
]
120+
121+
const footerSocialIconsData: Array<ISocialIcon> = [
122+
{
123+
site: 'github',
124+
label: 'DVC Github Page',
125+
url: 'https://github.com/iterative/dvc'
126+
},
127+
{
128+
site: 'twitter',
129+
label: 'DVC Twitter',
130+
url: 'https://twitter.com/DVCorg'
131+
},
132+
{
133+
site: 'youtube',
134+
label: 'DVC.org Youtube Channel',
135+
url: 'https://www.youtube.com/channel/UC37rp97Go-xIX3aNFVHhXfQ'
136+
},
137+
{
138+
site: 'linkedinNoBg',
139+
label: 'Iterative LinkedIn',
140+
url: 'https://www.linkedin.com/company/iterative-ai'
141+
},
142+
{
143+
site: 'discord',
144+
label: 'DVC Discord chat',
145+
url: 'https://www.dvc.org/chat'
146+
}
147+
]
148+
149+
const FooterLists: React.FC = () => (
150+
<div className={styles.columns}>
151+
{footerListsData.map(({ header, links }, index) => (
152+
<div className={styles.column} key={index}>
153+
<h2 className={styles.heading}>{header}</h2>
154+
<ul className={styles.links}>
155+
{links.map(({ text, target, href, icon }, i) => (
156+
<li className={styles.linkItem} key={i}>
157+
<Link target={target} href={href} className={styles.link}>
158+
{icon}
159+
{text}
160+
</Link>
161+
</li>
162+
))}
163+
</ul>
164+
</div>
165+
))}
166+
</div>
167+
)
168+
169+
const FooterSocialIcons: React.FC = () => (
170+
<div className={styles.socialIcons}>
171+
{footerSocialIconsData.map(({ site, label, url }, index) => (
172+
<SocialIcon
173+
key={index}
174+
site={site}
175+
label={label}
176+
url={url}
177+
className={cn(styles.link, styles.socialIcon)}
178+
/>
179+
))}
180+
</div>
181+
)
182+
183+
const LayoutFooter: React.FC = () => (
18184
<footer className={styles.wrapper}>
19-
<LayoutWidthContainer
20-
className={cn(styles.container)}
21-
wide={includes(modifiers, LayoutModifiers.Wide)}
22-
>
185+
<LayoutWidthContainer className={cn(styles.container)} wide>
23186
<div className={styles.top}>
24187
<Link className={styles.logo} href="/" title="dvc.org">
25188
<LogoSVG />
26189
</Link>
27190
</div>
28-
<div className={styles.columns}>
29-
<div className={styles.column}>
30-
<h2 className={styles.heading}>Product</h2>
31-
<ul className={styles.links}>
32-
<li className={styles.linkItem}>
33-
<Link href="/" className={styles.link}>
34-
Overview
35-
</Link>
36-
</li>
37-
<li className={styles.linkItem}>
38-
<Link href="/features" className={styles.link}>
39-
Features
40-
</Link>
41-
</li>
42-
</ul>
43-
</div>
44-
<div className={styles.column}>
45-
<h2 className={styles.heading}>Help</h2>
46-
<ul className={styles.links}>
47-
<li className={styles.linkItem}>
48-
<Link href="/support" className={styles.link}>
49-
Support
50-
</Link>
51-
</li>
52-
<li className={styles.linkItem}>
53-
<Link href="/doc/start" className={styles.link}>
54-
Get started
55-
</Link>
56-
</li>
57-
<li className={styles.linkItem}>
58-
<Link href="/community" className={styles.link}>
59-
Community
60-
</Link>
61-
</li>
62-
<li className={styles.linkItem}>
63-
<Link href={docsPage} className={styles.link}>
64-
Documentation
65-
</Link>
66-
</li>
67-
</ul>
68-
</div>
69-
<div className={styles.column}>
70-
<h2 className={styles.heading}>Company</h2>
71-
<ul className={styles.links}>
72-
<li className={styles.linkItem}>
73-
<Link href="/blog" className={styles.link}>
74-
Blog
75-
</Link>
76-
</li>
77-
<li className={styles.linkItem}>
78-
<Link
79-
href="https://iterative.ai/"
80-
className={styles.link}
81-
target="_blank"
82-
>
83-
<IconSet className={styles.icon} name="iterative" />
84-
Iterative.ai
85-
</Link>
86-
</li>
87-
<li className={styles.linkItem}>
88-
<Link href="/doc/user-guide/privacy" className={styles.link}>
89-
Privacy Policy
90-
</Link>
91-
</li>
92-
</ul>
93-
</div>
94-
<div className={styles.column}>
95-
<h2 className={styles.heading}>Social</h2>
96-
<ul className={styles.links}>
97-
<li className={styles.linkItem}>
98-
<Link
99-
href="https://twitter.com/DVCorg"
100-
className={styles.link}
101-
target="_blank"
102-
>
103-
<IconSet className={styles.icon} name="twitter" />
104-
Twitter
105-
</Link>
106-
</li>
107-
<li className={styles.linkItem}>
108-
<Link
109-
href="https://github.com/iterative/dvc"
110-
className={styles.link}
111-
target="_blank"
112-
>
113-
<IconSet className={styles.icon} name="github" />
114-
GitHub
115-
</Link>
116-
</li>
117-
<li className={styles.linkItem}>
118-
<Link href="/chat" className={styles.link}>
119-
<IconSet className={styles.icon} name="discord" />
120-
Discord
121-
</Link>
122-
</li>
123-
</ul>
124-
</div>
191+
<FooterLists />
192+
<div className={styles.bottomRow}>
193+
<p className={styles.companyLabel}>
194+
By{' '}
195+
<Link
196+
className={styles.companyName}
197+
href="https://iterative.ai/"
198+
target="_blank"
199+
>
200+
<IterativeSVG className={styles.companyLogo} />
201+
iterative.ai
202+
</Link>
203+
<span className={styles.companyDescription}>
204+
<ShowOnly as="span" on="desktop">
205+
{' '}
206+
- an open platform to operationalize AI
207+
</ShowOnly>
208+
<ShowOnly as="span" on="mobile">
209+
{' '}
210+
An open platform to operationalize AI
211+
</ShowOnly>
212+
</span>
213+
</p>
214+
<FooterSocialIcons />
125215
</div>
126216
</LayoutWidthContainer>
127217
</footer>

0 commit comments

Comments
 (0)