Merge pull request #2495 from iterative/update-footer-design

Update footer design

src/components/LayoutFooter/index.tsx

@@ -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>