feat: desktop footer styles

src/components/Footer.js

@@ -1,12 +1,46 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
 import Container from './Container';
+import { link } from '../types';
 
 import './Footer.scss';
 
-const Footer = () => (
-  <div className="Footer">
-    <Container>Footer goes here, wow!</Container>
-  </div>
+const Footer = ({ pages }) => (
+  <footer className="Footer">
+    <Container>
+      <div className="Footer-left">
+        <Link to="/" className="logo Footer-logo" />
+        <div className="Footer-copyright">
+          Copyright &copy; 2020 New Relic Inc.
+        </div>
+      </div>
+
+      <nav role="navigation" aria-label="Footer" className="Footer-nav">
+        <ul>
+          {pages.map((page, i) => (
+            <li key={i}>
+              <Link to={page.url}>{page.displayName}</Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </Container>
+  </footer>
 );
 
+Footer.propTypes = {
+  pages: PropTypes.arrayOf(link),
+};
+
+Footer.defaultProps = {
+  pages: [
+    { displayName: 'Collect Data', url: '' },
+    { displayName: 'Explore Data', url: 'explore-data' },
+    { displayName: 'Build Apps', url: '' },
+    { displayName: 'Automate Workflows', url: '' },
+    { displayName: 'Developer Docs', url: '' },
+  ],
+};
+
 export default Footer;

src/components/Footer.scss

@@ -1,3 +1,49 @@
 .Footer {
-  background-color: red;
+  --footer-text-color: #7da5a8;
+
+  background-color: var(--color-neutrals-800);
+  color: var(--footer-text-color);
+  padding: 1.5rem 0;
+
+  .u-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .Footer-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .Footer-logo {
+    width: 195px;
+    height: 45px;
+    background-image: url('../images/developers-logo-footer.svg');
+  }
+
+  .Footer-copyright {
+    font-size: 0.75rem;
+    margin-left: 1rem;
+    padding: 0.75rem 0.5rem;
+    border-left: 1px dotted var(--color-neutrals-700);
+  }
+
+  .Footer-nav ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    a {
+      color: var(--footer-text-color);
+      text-decoration: none;
+      font-size: 0.9rem;
+      padding: 0.5rem 0 0.5rem 1rem;
+    }
+
+    a:hover {
+      color: var(--color-white);
+    }
+  }
 }