Footer

components/footer.js

@@ -1,5 +1,40 @@
+import Link from 'next/link';
+import { Button } from './jambonz-ui';
+import { homeObj } from '../lib/vars';
+
+function FooterItem({ obj }) {
+  return (
+    <li>
+      <Link href={obj.link}>
+        <a target={obj.open ? '_blank' : null} className="foot__link">
+          {obj.label}
+        </a>
+      </Link>
+    </li>
+  );
+}
+
 export default function Footer({ siteData }) {
   return (
-    <footer className="foot"></footer>
+    <footer className="bg-jambonz foot">
+      <div className="wrap foot__wrap">
+        <div className="foot__navs">
+          <ul className="foot__links">
+            {siteData.footer.links.map((obj) => {
+              return <FooterItem key={obj.id} obj={obj} />
+            })}
+          </ul>
+          <ul className="foot__links">
+            <FooterItem key="home" obj={homeObj} />
+            {siteData.navi.links.map((obj) => {
+              return <FooterItem key={obj.id} obj={obj} />
+            })}
+          </ul>
+        </div>
+        <div className="foot__support">
+          <Button href={`mailto:${siteData.footer.email}`} target="_blank" subStyle="light">{siteData.footer.email}</Button>
+        </div>
+      </div>
+    </footer>
   );
 }

styles/_footer.scss

@@ -0,0 +1,49 @@
+.foot {
+  padding: 96px 0;
+
+  &__navs {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  &__links {
+    margin: 0 64px;
+
+    li {
+      margin-bottom: 16px;
+    }
+
+    @media (max-width: $width-mobile) {
+      margin: 0;
+      width: 100%;
+    }
+  }
+
+  &__links:first-child {
+    text-align: right;
+
+    @media (max-width: $width-mobile) {
+      text-align: center;
+    }
+  }
+
+  &__links:last-child {
+    text-align: left;
+
+    @media (max-width: $width-mobile) {
+      text-align: center;
+      margin-top: 32px;
+    }
+  }
+
+  &__link {
+    color: $white;
+    text-decoration: none;
+  }
+
+  &__support {
+    text-align: center;
+    padding-top: 96px;
+  }
+}

styles/global.scss

@@ -38,6 +38,11 @@
 *******************************************************************************/
 @import 'navi.scss';
 
+/******************************************************************************
+ * Footer
+*******************************************************************************/
+@import 'footer.scss';
+
 /******************************************************************************
  * Kit of Parts
 *******************************************************************************/