diff --git a/src/components/Footer.js b/src/components/Footer.js
index e1e30c59d..2b652b82e 100644
--- a/src/components/Footer.js
+++ b/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 = () => (
-
- Footer goes here, wow!
-
+const Footer = ({ pages }) => (
+
);
+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;
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
index fbf68b76d..f748c2232 100644
--- a/src/components/Footer.scss
+++ b/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);
+ }
+ }
}
diff --git a/src/images/developers-logo-footer.svg b/src/images/developers-logo-footer.svg
new file mode 100644
index 000000000..576ba02f3
--- /dev/null
+++ b/src/images/developers-logo-footer.svg
@@ -0,0 +1,5 @@
+