Update footer design

src/components/LayoutFooter/index.tsx

@@ -1,25 +1,27 @@
 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 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 }) => (
+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 />
@@ -67,62 +69,147 @@ const LayoutFooter: React.FC<Required<ILayoutModifiable>> = ({ modifiers }) => (
           </ul>
         </div>
         <div className={styles.column}>
-          <h2 className={styles.heading}>Company</h2>
+          <h2 className={styles.heading}>Community</h2>
           <ul className={styles.links}>
             <li className={styles.linkItem}>
-              <Link href="/blog" className={styles.link}>
-                Blog
+              <Link
+                href="https://twitter.com/DVCorg"
+                className={styles.link}
+                target="_blank"
+              >
+                <TwitterSVG className={styles.icon} />
+                Twitter
               </Link>
             </li>
             <li className={styles.linkItem}>
               <Link
-                href="https://iterative.ai/"
+                href="https://github.com/iterative/dvc"
                 className={styles.link}
                 target="_blank"
               >
-                <IconSet className={styles.icon} name="iterative" />
-                Iterative.ai
+                <GithubSVG className={styles.icon} />
+                GitHub
               </Link>
             </li>
             <li className={styles.linkItem}>
-              <Link href="/doc/user-guide/privacy" className={styles.link}>
-                Privacy Policy
+              <Link href="/chat" className={styles.link}>
+                <DiscordSVG className={styles.icon} />
+                Discord
               </Link>
             </li>
           </ul>
         </div>
         <div className={styles.column}>
-          <h2 className={styles.heading}>Social</h2>
+          <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="/doc/user-guide/privacy" className={styles.link}>
+                Privacy Policy
+              </Link>
+            </li>
             <li className={styles.linkItem}>
               <Link
-                href="https://twitter.com/DVCorg"
-                className={styles.link}
+                href="https://iterative.ai/about#career"
                 target="_blank"
+                className={styles.link}
               >
-                <IconSet className={styles.icon} name="twitter" />
-                Twitter
+                Join us
+              </Link>
+            </li>
+          </ul>
+        </div>
+        <div className={styles.column}>
+          <h2 className={styles.heading}>Other Tools</h2>
+          <ul className={styles.links}>
+            <li className={styles.linkItem}>
+              <Link target="_blank" href="/" className={styles.link}>
+                <LogoSVG className={styles.productIcon} />
+                DVC
               </Link>
             </li>
             <li className={styles.linkItem}>
               <Link
-                href="https://github.com/iterative/dvc"
-                className={styles.link}
                 target="_blank"
+                href="https://cml.dev/"
+                className={styles.link}
               >
-                <IconSet className={styles.icon} name="github" />
-                GitHub
+                <CmlSVG className={styles.productIcon} />
+                CML
               </Link>
             </li>
             <li className={styles.linkItem}>
-              <Link href="/chat" className={styles.link}>
-                <IconSet className={styles.icon} name="discord" />
-                Discord
+              <Link
+                href="https://studio.iterative.ai/"
+                target="_blank"
+                className={styles.link}
+              >
+                <StudioSVG className={styles.productIcon} />
+                Studio
               </Link>
             </li>
           </ul>
         </div>
       </div>
+      <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>
+        <div className={styles.socialIcons}>
+          <SocialIcon
+            site="github"
+            label="DVC Github Page"
+            url="https://github.com/iterative/dvc"
+            className={cn(styles.link, styles.socialIcon)}
+          />
+          <SocialIcon
+            site="twitter"
+            label="DVC Twitter"
+            url="https://twitter.com/DVCorg"
+            className={cn(styles.link, styles.socialIcon)}
+          />
+          <SocialIcon
+            site="youtube"
+            label="DVC.org Youtube Channel"
+            url="https://www.youtube.com/channel/UC37rp97Go-xIX3aNFVHhXfQ"
+            className={cn(styles.link, styles.socialIcon)}
+          />
+          <SocialIcon
+            site="linkedinNoBg"
+            label="Iterative LinkedIn"
+            url="https://www.linkedin.com/company/iterative-ai"
+            className={cn(styles.link, styles.socialIcon)}
+          />
+          <SocialIcon
+            site="discord"
+            label="DVC Discord chat"
+            url="https://www.dvc.org/chat"
+            className={cn(styles.link, styles.socialIcon)}
+          />
+        </div>
+      </div>
     </LayoutWidthContainer>
   </footer>
 )